/*
 * Home hero (template-parts/home/hero.php). Mockup: docs/sections/home/home_hero.png.
 * Desktop: text bottom-left over a darkened photo or video, video controls
 * bottom-right. Phone: photo only, shade from the bottom, full-width buttons.
 */

.hf-hero
{
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(34rem, 50vw, 54rem);
	overflow: hidden;
	isolation: isolate;
	/* Shown when no photo is set. */
	background: var(--hf-color-heading);
	color: var(--hf-color-on-dark);
}

.hf-hero__media
{
	position: absolute;
	z-index: -1;
	inset: 0;
}

.hf-hero__image,
.hf-hero__video
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% 40%;
}

/* The video lies on the photo and fades in once it really plays. */
.hf-hero__video
{
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 600ms ease;
}

.hf-hero__video.is-playing
{
	opacity: 1;
}

/* Shade under the text: keeps white text readable on light photos and video. */
.hf-hero__media::after
{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			color-mix(in srgb, var(--hf-color-heading) 72%, transparent) 0%,
			color-mix(in srgb, var(--hf-color-heading) 50%, transparent) 38%,
			color-mix(in srgb, var(--hf-color-heading) 8%, transparent) 72%,
			transparent 100%
		),
		linear-gradient(0deg, color-mix(in srgb, var(--hf-color-heading) 35%, transparent) 0%, transparent 45%);
	content: "";
}

.hf-hero__inner
{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hf-space-l);
	padding-block: var(--hf-space-xl) clamp(3rem, 2rem + 4vw, 6.5rem);
}

/* Wide enough for „Miejsce, w którym” (677 px in Libre Baskerville at 72 px)
   on one line, as in the mockup. */
.hf-hero__content
{
	max-width: 48rem;
}

.hf-hero__eyebrow
{
	margin-bottom: var(--hf-space-s);
	color: var(--hf-color-on-dark);
}

.hf-hero__title
{
	max-width: 12em;
	margin: 0 0 var(--hf-space-s);
	color: var(--hf-color-on-dark);
	font-size: var(--hf-text-display);
	text-wrap: balance;
}

.hf-hero__lead
{
	max-width: 30em;
	margin: 0 0 var(--hf-space-l);
	font-size: var(--hf-text-l);
	line-height: 1.45;
}

.hf-hero__actions
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--hf-space-s);
}

/* Video controls: pause on a dark circle, sound as a bare icon (mockup). */
.hf-hero__controls
{
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--hf-space-xs);
}

.hf-hero__controls[hidden]
{
	display: none;
}

.hf-hero__control
{
	display: inline-grid;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hf-color-on-dark);
	cursor: pointer;
	place-items: center;
	transition: background-color var(--hf-transition);
}

.hf-hero__control:hover
{
	background: color-mix(in srgb, var(--hf-color-heading) 45%, transparent);
}

.hf-hero__control--pause,
.hf-hero__control--pause:hover
{
	background: color-mix(in srgb, var(--hf-color-heading) 88%, transparent);
}

.hf-hero__control-icon
{
	width: 1.5rem;
	height: 1.5rem;
}

/* Pressed pause = paused (show play); pressed sound = sound on (show waves). */
.hf-hero__control[aria-pressed="true"] .hf-hero__control-icon--off,
.hf-hero__control[aria-pressed="false"] .hf-hero__control-icon--on
{
	display: none;
}

/* The default focus colour is too dark on the shaded photo. */
.hf-hero :focus-visible
{
	outline-color: var(--hf-color-on-dark);
}

@media (max-width: 40em)
{
	.hf-hero
	{
		min-height: min(88svh, 42rem);
	}

	.hf-hero__media::after
	{
		background:
			linear-gradient(
				0deg,
				color-mix(in srgb, var(--hf-color-heading) 82%, transparent) 0%,
				color-mix(in srgb, var(--hf-color-heading) 55%, transparent) 55%,
				color-mix(in srgb, var(--hf-color-heading) 20%, transparent) 100%
			);
	}

	.hf-hero__actions
	{
		flex-direction: column;
		align-items: stretch;
	}

	/* Phones show the photo only (the script does not load the video). */
	.hf-hero__video,
	.hf-hero__controls
	{
		display: none;
	}
}