/* ============================================================
   mod_bhg_hero – úvodní sekce (rodina mod_bhg_*)
   Základ pro všechna rozvržení. Rozvržení card / art mají vlastní
   soubory (hero-card.css, hero-art.css) – načítají se, jen když je
   stránka použije.

   Barvy, písma a rozměry přes společné proměnné --bhg-* (nastavuje
   šablona) se zálohou na tokeny DEER a pevnou hodnotu (M1).

   Výchozí vzhled textu a barev je v :where() = nulová specificita.
   Třídy vyplněné v administraci (např. typo-h1, bg-forest-400)
   proto vždy vyhrají – převedené instance mod_deer_hero vypadají
   stejně jako dřív.

   Proměnné šablony, které modul čte navíc:
     --bhg-header-overlap   o kolik hlavička překrývá začátek stránky
                            (průhledná / fixní hlavička nad hero);
                            obsah hero začne až pod ní. Výchozí 0.
   ============================================================ */

.bhg-hero-section {
	--bhg-hero-h: 100svh;
	--bhg-hero-accent-fallback: currentColor;
	--bhg-hero-scrim-ink: var(--bhg-color-surface-dark, var(--c-forest-400, #1f2a24));
	--bhg-hero-gap-eyebrow: clamp(.4rem, 1vw, .6rem);
	--bhg-hero-gap-title: clamp(.6rem, 1.5vw, .9rem);
	--bhg-hero-gap-lead: clamp(.9rem, 2vw, 1.25rem);
	--bhg-hero-measure: 46ch;
	--bhg-hero-pad-bottom: 48px;
	--bhg-hero-lockup-pull: -0.32em;
	/* Garantovaná mezera nad obsahem = překryv hlavičky + rezerva (obojí nastavuje
	   šablona; bez překrývající hlavičky 0). */
	--bhg-hero-content-clear: calc(var(--bhg-header-overlap, 0px) + var(--bhg-hero-clear-gap, 0px));

	/* full-bleed */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	/* Grid: první řádek je „podlaha“ nad obsahem, která se nikdy nezmenší pod
	   --bhg-hero-content-clear. Delší obsah prodlouží sekci dolů, nikdy nezaleze
	   pod hlavičku (poučení z mod_deer_hero 1.15.2–1.15.8). */
	position: relative;
	min-height: var(--bhg-hero-h);
	display: grid;
	grid-template-rows: minmax(var(--bhg-hero-content-clear), 1fr) auto;
	overflow: hidden;
	isolation: isolate;
}

.bhg-hero-section--auto {
	min-height: 0;
}

/* Výška podle obsahu: obsah nesmí začínat hned pod hranou sekce. */
.bhg-hero-section--auto .bhg-hero-section__inner {
	padding-block-start: var(--bhg-hero-pad-top, clamp(32px, 6vw, 96px));
}

/* Výchozí barvy sekce – přebije je jakákoli třída z administrace. */
:where(.bhg-hero-section) {
	background-color: var(--bhg-color-surface-dark, var(--c-forest-400, #1f2a24));
	color: var(--bhg-color-on-dark, var(--c-surface, #ffffff));
}

/* --- vrstva 0: fotka / video --- */
.bhg-hero-section__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bhg-hero-section__media picture {
	display: contents;
}

.bhg-hero-section__media img,
.bhg-hero-section__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bhg-hero-section__video {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}

.bhg-hero-section.is-playing .bhg-hero-section__video,
.bhg-hero-section.is-paused .bhg-hero-section__video {
	opacity: 1;
}

/* --- vrstva 1: překryv „gradient“ (spodních 66 %, odspodu) --- */
.bhg-hero-section__scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--bhg-hero-scrim-h, 66%);
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top, color-mix(in srgb, var(--bhg-hero-scrim-ink) 90%, transparent) 0%, transparent 100%),
		linear-gradient(to top right, color-mix(in srgb, var(--bhg-hero-accent, transparent) 22%, transparent) 0%, transparent 55%);
}

/* --- překryv „blur“: plošné ztmavení + rozostření od obou hran --- */
.bhg-hero-section__tint,
.bhg-hero-section__blur {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}

.bhg-hero-section__tint {
	top: 0;
	bottom: 0;
	background: color-mix(in srgb, var(--bhg-hero-scrim-ink) var(--bhg-hero-scrim-tint, 50%), transparent);
}

.bhg-hero-section__blur--top {
	top: 0;
	height: var(--bhg-hero-scrim-top-h, 220px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--bhg-hero-scrim-ink) 70%, transparent) 0%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	-webkit-backdrop-filter: blur(var(--bhg-hero-scrim-blur, 20px));
	backdrop-filter: blur(var(--bhg-hero-scrim-blur, 20px));
}

.bhg-hero-section__blur--bottom {
	bottom: 0;
	height: var(--bhg-hero-scrim-bottom-h, 65%);
	background: linear-gradient(0deg, var(--bhg-hero-scrim-ink) 0%, transparent 100%);
	-webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
	mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
	-webkit-backdrop-filter: blur(var(--bhg-hero-scrim-blur, 20px));
	backdrop-filter: blur(var(--bhg-hero-scrim-blur, 20px));
}

/* --- vrstva 2: obsah (šířka z .container webu) --- */
.bhg-hero-section__inner {
	grid-row: 2;
	position: relative;
	z-index: 2;
	padding-block-end: var(--bhg-hero-pad-bottom, 48px);
}

/* Boční padding .containeru – selektor (0,2,0) přebije Bootstrap bez !important. */
.bhg-hero-section .bhg-hero-section__inner {
	padding-inline: var(--bhg-hero-pad-x, 0);
}

@media (max-width: 991.98px) {
	.bhg-hero-section .bhg-hero-section__inner {
		padding-inline: var(--bhg-hero-pad-x-m, 16px);
	}
}

/* --- eyebrow („The / Nest“) ---
   Barva motivu přímo na spanech (0,2,0) – přebije barvu nadpisových utilit.
   Bez motivu dědí barvu sekce. S motivem (data-bhg-theme na sekci nebo eyebrow) bere akcent webu,
   šablona pak motiv nastaví jednou pro celou rodinu: [data-bhg-theme="nest"] { --bhg-color-accent: … }.
   :where() = nulová specifičnost, přímé --bhg-hero-accent v šabloně dál přebije. */
:where(.bhg-hero-section[data-bhg-theme], .bhg-hero-section [data-bhg-theme]) {
	--bhg-hero-accent: var(--bhg-color-accent);
}

.bhg-hero-section__eyebrow {
	margin: 0 0 var(--bhg-hero-gap-eyebrow);
}

.bhg-hero-section .bhg-hero-section__eyebrow-pre,
.bhg-hero-section .bhg-hero-section__eyebrow-main {
	display: block;
	color: var(--bhg-hero-accent, var(--bhg-hero-accent-fallback));
}

.bhg-hero-section__eyebrow-main {
	margin-top: var(--bhg-hero-lockup-pull, -0.32em);
}

:where(.bhg-hero-section__eyebrow-pre) {
	font-family: var(--bhg-font-head, var(--ff-head, var(--cassiopeia-font-family-headings, inherit)));
	font-style: italic;
	font-size: var(--bhg-fs-h3, var(--typo-h3-fs, 1.75rem));
	line-height: var(--bhg-lh-h3, var(--typo-h3-lh, 1.2));
}

:where(.bhg-hero-section__eyebrow-main) {
	font-family: var(--bhg-font-head, var(--ff-head, var(--cassiopeia-font-family-headings, inherit)));
	font-size: var(--bhg-fs-h2, var(--typo-h2-fs, 2.25rem));
	line-height: var(--bhg-lh-h2, var(--typo-h2-lh, 1.15));
}

/* --- nadpis --- */
.bhg-hero-section__title {
	margin: 0 0 var(--bhg-hero-gap-title);
	text-wrap: balance;
}

:where(.bhg-hero-section__title) {
	font-family: var(--bhg-font-head, var(--ff-head, var(--cassiopeia-font-family-headings, inherit)));
	font-weight: var(--bhg-fw-head, var(--typo-w-head, 700));
	font-size: var(--bhg-fs-h1, var(--typo-h1-fs, clamp(2.25rem, 1.6rem + 2.6vw, 4rem)));
	line-height: var(--bhg-lh-h1, var(--typo-h1-lh, 1.08));
	color: inherit;
}

/* --- popisek --- */
.bhg-hero-section__lead {
	max-width: var(--bhg-hero-measure);
	margin: 0 0 var(--bhg-hero-gap-lead);
}

:where(.bhg-hero-section__lead) {
	font-family: var(--bhg-font-body, var(--ff-body, var(--cassiopeia-font-family-body, inherit)));
	font-size: var(--bhg-fs-lg, var(--typo-s2-fs, 1.125rem));
	line-height: var(--bhg-lh-lg, var(--typo-s2-lh, 1.5));
	color: color-mix(in srgb, currentColor 85%, transparent);
}

/* --- tlačítka --- */
.bhg-hero-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bhg-hero-gap-actions, 12px);
	/* Chipy v rohu jsou absolutně ukotvené ke spodní hraně – odstup, aby je nepřekryly. */
	margin-bottom: 30px;
}

.bhg-hero-section__actions--column {
	flex-direction: column;
	align-items: flex-start;
}

.bhg-hero-section__actions .btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

.bhg-hero-section__actions .btn svg {
	flex-shrink: 0;
	width: var(--bhg-hero-btn-icon-size, 1.15em);
	height: var(--bhg-hero-btn-icon-size, 1.15em);
}

.bhg-hero-section__actions .btn:focus-visible,
.bhg-hero-section__chip:focus-visible,
.bhg-hero-section__play:focus-visible {
	outline: var(--bhg-focus-ring, var(--focus-ring, 2px solid currentColor));
	outline-offset: 3px;
}

/* --- vložený modul v hlavním sloupci --- */
.bhg-hero-section__slot {
	margin-block-start: var(--bhg-hero-gap-slot, clamp(24px, 3vw, 40px));
	width: 100%;
}

.bhg-hero-section__slot > * {
	max-width: 100%;
}

/* --- roh vpravo dole: chipy a/nebo modul (nad obloukem) --- */
.bhg-hero-section__aside {
	position: absolute;
	right: var(--bhg-hero-contacts-right, clamp(20px, 3vw, 48px));
	bottom: var(--bhg-hero-contacts-bottom, clamp(28px, 3vw, 56px));
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--bhg-hero-aside-gap, .5rem);
	max-width: min(100%, var(--bhg-hero-aside-max, 360px));
}

.bhg-hero-section__aside > * {
	max-width: 100%;
}

.bhg-hero-section__contacts {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--bhg-hero-aside-gap, .5rem);
}

.bhg-hero-section__chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
	text-decoration: none;
	background: var(--bhg-hero-chip-bg, var(--bhg-color-on-dark, var(--c-surface, #ffffff)));
	box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color .15s ease, color .15s ease;
}

:where(.bhg-hero-section__chip) {
	color: var(--bhg-color-heading, var(--c-forest-400, #1f2a24));
	border-radius: 999px;
	padding: .5rem 1rem;
	font-size: .875rem;
	font-weight: 500;
}

.bhg-hero-section__chip svg {
	flex-shrink: 0;
}

a.bhg-hero-section__chip:hover {
	background: var(--bhg-hero-chip-bg-hover, var(--bhg-color-surface-soft, var(--c-grain-100, #f3ead6)));
	color: var(--bhg-color-heading, var(--c-forest-400, #1f2a24));
}

@media (max-width: 991.98px) {
	.bhg-hero-section__aside {
		right: var(--bhg-hero-contacts-right-m, 16px);
		bottom: var(--bhg-hero-contacts-bottom-m, clamp(12px, 4vw, 24px));
		max-width: min(100%, var(--bhg-hero-aside-max-m, 320px));
	}

	/* Chipy jsou ukotvené ke spodní hraně sekce a na úzkém displeji by překryly
	   konec textu. Pod obsahem se vyhradí místo: chipy (počet × výška + mezery)
	   + odsazení od hrany + 8 px, minus prostor, který už drží oblouk.
	   Výšku chipu (--bhg-hero-chip-h-m, výchozí 37 px = chip bez tříd) a rezervu
	   pro vložený modul v rohu (--bhg-hero-aside-extra-m) nastaví šablona / web. */
	.bhg-hero-section--has-aside .bhg-hero-section__inner {
		padding-block-end: max(
			var(--bhg-hero-pad-bottom, 48px),
			calc(
				var(--bhg-hero-aside-n, 0) * var(--bhg-hero-chip-h-m, 37px)
				+ (var(--bhg-hero-aside-n, 1) - 1) * var(--bhg-hero-aside-gap, .5rem)
				+ var(--bhg-hero-aside-extra-m, 0px)
				+ var(--bhg-hero-contacts-bottom-m, clamp(12px, 4vw, 24px)) + 8px
				- var(--bhg-hero-arc-h-m, var(--bhg-hero-arc-h, 0px)) * var(--bhg-hero-arc-clear, 1) * var(--bhg-hero-has-arc, 0)
			)
		);
	}
}

/* --- vystředěná varianta --- */
.bhg-hero-section--center {
	justify-items: center;
	text-align: center;
}

.bhg-hero-section--center .bhg-hero-section__actions {
	justify-content: center;
}

.bhg-hero-section--center .bhg-hero-section__actions--column {
	align-items: center;
}

.bhg-hero-section--center .bhg-hero-section__lead {
	margin-inline: auto;
}

/* --- oblouk (statické SVG) --- */
.bhg-hero-section__arc {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	line-height: 0;
	pointer-events: none;
}

/* Oblouk přesahuje hranu sekce o 2 px a ořez sekce se o 2 px rozšíří (1.0.6). Při zlomkové výšce sekce
   (např. 755,81 px, nebo zvětšení Windows 125/150 %) jinak poslední řádek pixelů skládal oblouk
   s tmavými vrstvami pod ním a pod obloukem byla vidět tmavá čára. Teď je na hraně ořezu jen oblouk.
   Safari overflow-clip-margin nezná – tam zůstává posun o 2 px (čára nanejvýš slabě šedá). */
.bhg-hero-section__arc--bottom { bottom: -2px; }
.bhg-hero-section__arc--top { top: -2px; }

.bhg-hero-section--arc-bottom,
.bhg-hero-section--arc-top {
	overflow: clip;
	overflow-clip-margin: 2px;
}

.bhg-hero-section__arc > svg {
	display: block;
	width: 100%;
	height: var(--bhg-hero-arc-h, 220px);
}

@media (max-width: 767.98px) {
	.bhg-hero-section__arc > svg {
		height: var(--bhg-hero-arc-h-m, var(--bhg-hero-arc-h, 220px));
	}
}

/* Obsah nesmí zmizet pod obloukem (margin, ne padding – padding řídí .container). */
.bhg-hero-section--arc-bottom .bhg-hero-section__inner {
	margin-block-end: calc(var(--bhg-hero-arc-h, 0px) * var(--bhg-hero-arc-clear, 1));
}

.bhg-hero-section--arc-top .bhg-hero-section__inner {
	margin-block-start: calc(var(--bhg-hero-arc-h, 0px) * var(--bhg-hero-arc-clear, 1));
}

@media (max-width: 767.98px) {
	.bhg-hero-section--arc-bottom .bhg-hero-section__inner {
		margin-block-end: calc(var(--bhg-hero-arc-h-m, var(--bhg-hero-arc-h, 0px)) * var(--bhg-hero-arc-clear, 1));
	}

	.bhg-hero-section--arc-top .bhg-hero-section__inner {
		margin-block-start: calc(var(--bhg-hero-arc-h-m, var(--bhg-hero-arc-h, 0px)) * var(--bhg-hero-arc-clear, 1));
	}
}

/* --- podstrčení pod průhlednou hlavičku (jen desktop) --- */
@media (min-width: 992px) {
	.bhg-hero-section--pulled {
		margin-block-start: calc(-1 * var(--bhg-hero-pull-up, 0px));
	}
}

/* --- tlačítko videa (přehrát / pozastavit) --- */
.bhg-hero-section__play {
	position: absolute;
	z-index: 5;
	right: var(--bhg-hero-play-right, clamp(16px, 3vw, 48px));
	bottom: var(--bhg-hero-play-bottom, clamp(16px, 3vw, 48px));
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 50%;
	color: var(--bhg-color-on-dark, var(--c-surface, #ffffff));
	background: color-mix(in srgb, var(--bhg-hero-scrim-ink) 55%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}

.bhg-hero-section__play[hidden] {
	display: none;
}

.bhg-hero-section__play:hover {
	background: color-mix(in srgb, var(--bhg-hero-scrim-ink) 80%, transparent);
	transform: scale(1.05);
}

.bhg-hero-section__play-icon--pause,
.bhg-hero-section.is-playing .bhg-hero-section__play-icon--play {
	display: none;
}

.bhg-hero-section.is-playing .bhg-hero-section__play-icon--pause {
	display: block;
}

/* Chipy obsadily pravý dolní roh – tlačítko jde nahoru pod hlavičku. */
.bhg-hero-section--has-aside .bhg-hero-section__play {
	bottom: auto;
	top: calc(var(--bhg-header-overlap, 0px) + var(--bhg-hero-play-top, 16px));
}

@media (prefers-reduced-motion: reduce) {
	.bhg-hero-section__video,
	.bhg-hero-section__play,
	.bhg-hero-section__chip {
		transition: none;
	}
}