/*
 * Miejsce „Poczuj się swobodnie” (template-parts/place/home.php). From the
 * preview docs/preview/miejsce1_1.png: text on the left (2/5 of the row),
 * on the right a grid of three photos, a tall one and two stacked
 * (about 779 × 614 px at 1440 in the preview).
 * Below 56em the photos go under the text; on phones the tall photo spans
 * the width and the other two sit side by side under it.
 */

.hf-place-home
{
	padding-block: var(--hf-space-l);
}

.hf-place-home__inner
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hf-space-l);
}

.hf-place-home__eyebrow
{
	margin-bottom: var(--hf-space-s);
}

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

.hf-place-home__text
{
	max-width: 30em;
	margin: var(--hf-space-m) 0 0;
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-place-home__photos
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hf-space-s);
}

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

.hf-place-home__photo--main
{
	grid-column: 1 / -1;
	aspect-ratio: 3 / 2;
}

/* Out of the flow, so the photo's own height never stretches its box. */
.hf-place-home__image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tablets: the tall photo on the left, the two others stacked next to it. */
@media (min-width: 40em)
{
	.hf-place-home__photos
	{
		grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		aspect-ratio: 779 / 614;
	}

	.hf-place-home__photo,
	.hf-place-home__photo--main
	{
		aspect-ratio: auto;
	}

	.hf-place-home__photo--main
	{
		grid-row: 1 / -1;
		grid-column: 1;
	}
}

/* Text and photos side by side; 2:3 keeps the heading on one line at 1440
   (499 px; with 3:5 the column had 466 px), the photos about 755 px wide. */
@media (min-width: 56em)
{
	.hf-place-home__inner
	{
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
		column-gap: var(--hf-space-m);
	}

	.hf-place-home__content
	{
		padding-top: var(--hf-space-l);
	}
}

/* Phones, and the narrow text column beside the photos up to 80em: the
   typed line breaks would leave the text ragged (a wrapped line, then the
   typed break). */
@media (max-width: 40em), (min-width: 56em) and (max-width: 79.99em)
{
	.hf-place-home__text br
	{
		display: none;
	}
}