/*
 * Miejsce „Jak chcesz nas odwiedzić?” (template-parts/place/visit.php).
 * From the preview docs/preview/miejsce1_2.png: on the page background, a
 * heading under a short line and two cards side by side, each with a thin
 * frame, a wide photo (5 : 2) a little inside the frame, a title, a line of
 * text and a button that is not stretched. Phones show the cards one under
 * another (below 48em) with a taller photo (16 : 9).
 */

.hf-place-visit
{
	padding-block: var(--hf-space-section-block);
}

.hf-place-visit__title
{
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-place-visit__cards
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hf-space-l);
	margin: var(--hf-space-l) 0 0;
	padding: 0;
	list-style: none;
}

/* Equal heights in a row, the buttons on one line at the bottom. */
.hf-place-visit__card
{
	display: flex;
	flex-direction: column;
	padding: var(--hf-space-2xs);
	border: 1px solid var(--hf-color-card-border);
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-surface);
}

.hf-place-visit__media
{
	position: relative;
	overflow: hidden;
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-band);
	aspect-ratio: 16 / 9;
}

/* Out of the flow, so the photo's own height never stretches its box. The
   focal point a little above the middle keeps roofs and raised hands. */
.hf-place-visit__image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.hf-place-visit__body
{
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--hf-space-m);
}

.hf-place-visit__name
{
	margin: 0;
	font-size: var(--hf-text-card-title);
}

.hf-place-visit__text
{
	margin: var(--hf-space-xs) 0 0;
	font-size: var(--hf-text-m);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-place-visit__action
{
	margin-top: auto;
	padding-top: var(--hf-space-m);
}

/* Two cards side by side from 48em: at 640 px a card had about 209 px
   inside and „Zobacz wydarzenia” broke into two lines. */
@media (min-width: 48em)
{
	.hf-place-visit__cards
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hf-place-visit__media
	{
		aspect-ratio: 5 / 2;
	}
}

/* Phones: the button across the card, as elsewhere on small screens. Below
   40em only: at exactly 640 px both rules applied and the buttons of a row
   stood at different heights. */
@media (max-width: 39.99em)
{
	.hf-place-visit__action,
	.hf-place-visit__action .hf-button
	{
		width: 100%;
	}
}