/*
 * Miejsce „Ogród, las i jezioro” (template-parts/place/nature.php). From
 * the preview docs/preview/miejsce1_1.png: a warm band, text on the left
 * (5 parts), tall photos on the right (9 parts), three in view at about
 * 260 × 326 px at 1440. The photos run in the carousel of the home page
 * (component-carousel.css, user 2026-10-27): with a mouse on a computer the
 * arrows appear on hover. They sit over the photos' edges, because the
 * page margin used on the home page is here the gap next to the text.
 * Tablets keep three photos in view; phones show one and a half, so the
 * next one hints that the row scrolls.
 */

.hf-place-nature
{
	padding-block: var(--hf-space-l);
	background: var(--hf-color-band-strong);
}

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

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

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

.hf-place-nature__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-nature .hf-carousel
{
	--hf-carousel-gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);
	/* Over the photos, just inside their edges. */
	--hf-carousel-arrow-offset: -0.75rem;
}

.hf-place-nature__photo
{
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-band);
	aspect-ratio: 4 / 5;
}

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

/* Tablets: three photos in view, as on a computer. */
@media (min-width: 40em) and (max-width: 71.99em)
{
	.hf-place-nature .hf-carousel
	{
		--hf-carousel-item: calc((100% - 2 * var(--hf-carousel-gap)) / 3);
	}
}

@media (max-width: 40em)
{
	.hf-place-nature .hf-carousel
	{
		--hf-carousel-item: 62%;
	}
}

@media (min-width: 56em)
{
	.hf-place-nature__inner
	{
		grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
		align-items: center;
	}
}

/* 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-nature__text br
	{
		display: none;
	}
}