/*
 * Miejsce „Czas na regenerację” (template-parts/place/relax.php). From the
 * preview docs/preview/miejsce1_2.png: on the page background, a heading
 * and two cards side by side, each a 16:9 photo (about 627 × 353 px at
 * 1440), a title, a line of text and an optional smaller note. Phones
 * show the cards one under another.
 */

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

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

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

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

.hf-place-relax__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. */
.hf-place-relax__image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* Narrow, so the lines break as in the preview („…odpoczynku / po zajęciach.”). */
.hf-place-relax__text
{
	max-width: 22em;
	margin: var(--hf-space-xs) 0 0;
	font-size: var(--hf-text-l);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-place-relax__note
{
	margin: var(--hf-space-s) 0 0;
	font-size: var(--hf-text-s);
	line-height: 1.5;
}

@media (min-width: 40em)
{
	.hf-place-relax__items
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * The most important features of a card (user, 2026-10-28). By default a
 * short list under the text: phones, tablets and cards too narrow for the
 * photo to hold it.
 */
.hf-place-relax__item
{
	position: relative;
	container: hf-place-relax-item / inline-size;
}

.hf-place-relax__details
{
	margin-top: var(--hf-space-s);
	border-radius: var(--hf-radius-s);
}

/* The card's icon belongs to the layer over the photo only (below). */
.hf-place-relax__details-icon
{
	display: none;
}

.hf-place-relax__features
{
	display: grid;
	gap: var(--hf-space-2xs);
	margin: 0;
	padding: 0;
	font-size: var(--hf-text-m);
	line-height: 1.5;
	list-style: none;
}

.hf-place-relax__features li
{
	position: relative;
	padding-left: 1.25em;
	text-wrap: pretty;
}

/* A short line instead of a bullet, like the rules under the headings. */
.hf-place-relax__features li::before
{
	content: "";
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 0.625em;
	border-top: 1px solid currentColor;
}

/*
 * With a mouse, on a card wide enough (from 28rem the photo is 448 × 252 px
 * and holds four short lines): the list waits invisible over the photo and
 * comes in on hover or keyboard focus. A warm brown layer wipes up from the
 * bottom with a soft light drifting across it, the photo zooms in slowly,
 * then the card's icon and the lines arrive one after another. Over the
 * photo the pointer touches the invisible list itself, so the list stays
 * while the pointer is on it. The layer lets some of the photo through
 * (user, 2026-10-28: a bit more than at first, 92/78 % → 84/66 %); white
 * text on it: at least 5.4:1, even over a white photo.
 * Escape hides it (.is-dismissed, store hf/place-relax); with reduced
 * motion it simply appears (site-base.css).
 */
@keyframes hf-place-relax-glow
{
	to
	{
		background-position: 40% 60%, 0 0;
	}
}

@media (hover: hover) and (pointer: fine)
{
	@container hf-place-relax-item (min-width: 28rem)
	{
		.hf-place-relax__details
		{
			position: absolute;
			inset: 0 0 auto;
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-start;
			gap: var(--hf-space-s);
			margin: 0;
			padding: var(--hf-space-m);
			aspect-ratio: 16 / 9;
			overflow: hidden;
			color: var(--hf-color-on-dark);
			text-shadow: 0 1px 2px color-mix(in srgb, var(--hf-color-icon) 60%, transparent);
			opacity: 0;
			transition: opacity 300ms ease;
		}

		.hf-place-relax__details-icon
		{
			display: block;
			flex: none;
			width: 3rem;
			height: 3rem;
			opacity: 0;
			translate: 0 0.5rem;
			scale: 0.9;
			transition: opacity 400ms ease, translate 500ms cubic-bezier(0.22, 1, 0.36, 1), scale 500ms cubic-bezier(0.22, 1, 0.36, 1);
		}

		.hf-place-relax__details:is(:hover, :focus-visible) .hf-place-relax__details-icon
		{
			opacity: 1;
			translate: 0;
			scale: 1;
		}

		/* The background layer; its light starts in the bottom left corner. */
		.hf-place-relax__details::before
		{
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background:
				radial-gradient(35% 45% at 50% 50%, color-mix(in srgb, var(--hf-color-primary) 45%, transparent), transparent) 100% 0 / 200% 200% no-repeat,
				linear-gradient(to top, color-mix(in srgb, var(--hf-color-icon) 84%, transparent), color-mix(in srgb, var(--hf-color-icon) 66%, transparent));
			clip-path: inset(100% 0 0);
			transition: clip-path 650ms cubic-bezier(0.22, 1, 0.36, 1);
		}

		.hf-place-relax__details:is(:hover, :focus-visible)
		{
			opacity: 1;
		}

		.hf-place-relax__details:is(:hover, :focus-visible)::before
		{
			clip-path: inset(0);
			animation: hf-place-relax-glow 7s ease-in-out 650ms infinite alternate;
		}

		.hf-place-relax__features li
		{
			opacity: 0;
			translate: 0 0.75rem;
			transition: opacity 400ms ease, translate 500ms cubic-bezier(0.22, 1, 0.36, 1);
		}

		.hf-place-relax__details:is(:hover, :focus-visible) li
		{
			opacity: 1;
			translate: 0;
		}

		/*
		 * One after another, once the layer is mostly up. Only with motion:
		 * reduced motion shortens the transitions, not their delays.
		 */
		@media (prefers-reduced-motion: no-preference)
		{
			.hf-place-relax__details:is(:hover, :focus-visible) .hf-place-relax__details-icon
			{
				transition-delay: 150ms;
			}

			.hf-place-relax__details:is(:hover, :focus-visible) li:nth-child(1)
			{
				transition-delay: 200ms;
			}

			.hf-place-relax__details:is(:hover, :focus-visible) li:nth-child(2)
			{
				transition-delay: 280ms;
			}

			.hf-place-relax__details:is(:hover, :focus-visible) li:nth-child(3)
			{
				transition-delay: 360ms;
			}

			.hf-place-relax__details:is(:hover, :focus-visible) li:nth-child(4)
			{
				transition-delay: 440ms;
			}

			.hf-place-relax__details:is(:hover, :focus-visible) li:nth-child(n + 5)
			{
				transition-delay: 520ms;
			}
		}

		.hf-place-relax__image
		{
			transition: scale 900ms cubic-bezier(0.22, 1, 0.36, 1);
		}

		.hf-place-relax__item:not(.is-dismissed):has(.hf-place-relax__details:is(:hover, :focus-visible)) .hf-place-relax__image
		{
			scale: 1.06;
		}

		/* Escape hides the layer and the text, not the box: its focus ring stays visible. */
		.hf-place-relax__item.is-dismissed .hf-place-relax__details::before,
		.hf-place-relax__item.is-dismissed .hf-place-relax__details-icon,
		.hf-place-relax__item.is-dismissed .hf-place-relax__features
		{
			opacity: 0;
		}
	}
}