/*
 * promo-banner-2026.css -- BV-2(b) (7. 9., "nechám na tvém uvážení, udělej
 * to nejlepší" -> rozhodnutí orchestrátora): port `promo-banner.css` (stará
 * šablona `terrahunt`, BEZE ZMĚNY, viz ten soubor) do palety motivu 2026.
 * Vychozi bod = doslovná kopie stare šablony; barvy/radiusy nahrazeny
 * tokeny `tokens.css`, velikosti PŘEPOČTENÉ z `rem` (stará šablona ma
 * `html{font-size:10px}`, tenhle motiv `html{font-size:16px}` -- proto
 * jsou tu VŽDY px, ne rem, aby se predeslo druhemu prepoctu). Cisla
 * prevzata z drivejsi kompatibilni vrstvy (`terrahunt_2026_promo_compat_css()`,
 * BV-2(a)), ktera stejny prepocet uz overila Playwrightem na zive strance.
 *
 * SPECIFICITA: `.artbody p{font-size:16.5px;...}` a `.artbody a{color:
 * var(--org-deep)}` (components.css) maji 0,1,1 -- vic nez holy
 * `.th-promo-banner__headline` (0,1,0). Textove prvky proto maji
 * ZDVOJENOU tridu (`.th-promo-banner__X.th-promo-banner__X`, 0,2,0),
 * stejny vzor jako `.artend .artend-text` (KOMP-02) a puvodni kompatibilni
 * vrstva -- porazi `.artbody` bez ohledu na poradi nacteni.
 *
 * CTA: ZADNE vlastni pozadi/radius/padding/puls -- odkaz nese primo
 * `.th-btn .th-btn-primary th-pulse` (markup shortcodu,
 * `terrahunt_2026_promo_banner_html()`), sdili tak PRESNE tytez tokeny a
 * puls jako kazde jine CTA sablony (`--org-cta`, `--r-btn`, `--org-deep`
 * hover, `.th-pulse` modul z `pulse.js`). `.th-promo-banner__cta.th-btn-
 * primary{color:#fff}` resi stejny stret specificity s `.artbody a` jako
 * `.th-article-banner__cta.th-btn-primary` v task AN (viz
 * terrahunt-article-banner.php).
 *
 * Polaroidy: motion (flyin-l/r, drift), obsah a Caveat font BEZE ZMENY
 * (font soubory sdilene se starou sablonou -- `../../../terrahunt/assets/
 * fonts/...`, nulova duplikace, presne jako puvodni soubor odkazuje na
 * @font-face bez kopirovani souboru). `th-promo-drift` prepsan z
 * samostatne vlastnosti `translate` na `transform` (kontrakt B, Chrome <
 * 104 nezna `translate` jako vlastnost) -- rotace `-2.2deg` je do
 * keyframu prevzata primo, vizualne totozne s puvodnim souborem.
 */

@font-face {
	font-family: Caveat;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../../terrahunt/assets/fonts/caveat-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Caveat;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../../terrahunt/assets/fonts/caveat-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.th-promo-banner.th-promo-banner {
	border-radius: var(--r-panel);
	background: var(--teal);
	color: var(--white);
	box-shadow: 0 16px 44px rgba(23, 64, 46, .3);
	margin: 35px 0;
	/* stylelint-disable-next-line plugin/no-unsupported-browser-features -- css-overflow je "partial" jen kvuli `overflow: clip` a dvouhodnotovemu zapisu; jednohodnotove `visible` umi cela matice a drzi polaroidy, ktere presahuji hranu karty (tataz vyjimka jako u `.phead` v components.css) */
	overflow: visible;
}

.th-promo-banner__split {
	display: flex;
	align-items: center;
	gap: 34px;
	padding: 52px;
}

.th-promo-banner__stack {
	flex: 0 0 38%;
	position: relative;
}

.th-promo-banner__pol {
	/* display:block NUTNY -- markup je <span> (uvnitr <a>), viz puvodni soubor. */
	display: block;
	background: #fff;
	padding: 13px 13px 50px;
	border-radius: var(--r-card);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
	position: relative;
}

.th-promo-banner__pol img {
	width: 100%;
	display: block;
	border-radius: var(--r-img);
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.th-promo-banner__cap.th-promo-banner__cap {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: Caveat, Poppins, cursive;
	font-size: 14.5px;
	color: #3d4a4a;
	line-height: 1;
}

.th-promo-banner__pol--front {
	z-index: 2;
	transform: rotate(-2.2deg);
}

.th-promo-banner__pol--back {
	position: absolute;
	top: -12px;
	right: -18px;
	left: 18px;
	z-index: 1;
	transform: rotate(4deg);
}

.th-promo-banner__pol--back img {
	filter: brightness(0.94);
}

/* nalet: zadni prvni, predni za nim; do triggeru (.is-play) neviditelne -- BEZE ZMENY */
.th-promo-banner .th-promo-banner__pol {
	opacity: 0;
}

.th-promo-banner.is-play .th-promo-banner__pol--back {
	animation: th-promo-flyin-l 0.9s cubic-bezier(0.2, 1.3, 0.35, 1) both 0.1s;
}

.th-promo-banner.is-play .th-promo-banner__pol--front {
	animation:
		th-promo-flyin-r 0.9s cubic-bezier(0.2, 1.3, 0.35, 1) both 0.75s,
		th-promo-drift 7s ease-in-out 2.4s infinite;
}

@keyframes th-promo-flyin-l {
	0% {
		opacity: 0;
		transform: translate(-70vw, -18vh) rotate(-32deg);
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: rotate(4deg);
	}
}

@keyframes th-promo-flyin-r {
	0% {
		opacity: 0;
		transform: translate(70vw, -12vh) rotate(28deg);
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: rotate(-2.2deg);
	}
}

@keyframes th-promo-drift {
	0%, 100% {
		transform: rotate(-2.2deg) translateY(0);
	}

	50% {
		transform: rotate(-2.2deg) translateY(-7px);
	}
}

.th-promo-banner__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

/*
 * BV-3 (23:02, orchestrator, nalez na screenshotu prazsky-hrad_1440):
 * `--teal-soft` (#2A6B4E) na `--teal` (#17402E) je 1,83:1 -- hluboko
 * pod WCAG 4,5:1 pro text, prakticky necitelne. `--white` na `--teal`
 * je 11,61:1 (stejny vzor jako `.artend-eyebrow`, komponenty.css --
 * bila na tmavem panelu je zavedena konvence teto sablony, ne nova
 * hodnota).
 */
.th-promo-banner .th-promo-banner__eyebrow.th-promo-banner__eyebrow {
	margin: 0;
	font-size: 10.2px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--white);
	line-height: 24.2892px;
}

.th-promo-banner .th-promo-banner__headline.th-promo-banner__headline {
	margin: 0;
	font-size: 28px;
	line-height: 1.16;
	font-weight: 800;
	color: var(--white);
}

.th-promo-banner__slam {
	display: inline-block;
	background: var(--org);
	color: var(--white);
	padding: 0 0.3em;
	border-radius: 6px;
	transform: rotate(-1.2deg);
}

/*
 * BV-3: stejny duvod jako eyebrow vys -- `--teal-soft` na `--teal` je
 * 1,83:1. `--org` na `--teal` je 3,54:1 (>= 3:1, non-text WCAG 1.4.11),
 * a navic sjednocuje linku s oranzovym zvyraznenim v nadpisu
 * (`.th-promo-banner__slam`) do jedne akcentove barvy.
 */
.th-promo-banner__line {
	width: 84px;
	height: 5px;
	background: var(--org);
	border-radius: 3px;
}

.th-promo-banner .th-promo-banner__body.th-promo-banner__body {
	margin: 0;
	font-size: 14.2px;
	line-height: 1.58;
	color: var(--ondark);
}

/*
 * CTA: primarni cesta je `.th-btn th-btn-primary th-pulse` v markupu
 * shortcodu (`terrahunt_2026_promo_banner_html()`) -- sdileny vzhled a
 * puls. Tahle sada je PODLAHA (floor) pro cca 9-59 STARSICH clanku, kde
 * je banner zapeceny primo v `post_content` (starsi export/scrape,
 * predchazi tomuto kodu) -- takove HTML nema `.th-btn` tridy a bez teto
 * podlahy by CTA zustalo jen textovym odkazem (`.artbody a{color:var(
 * --org-deep)}`, 0,1,1 porazi holy `.th-promo-banner__cta`, 0,1,0).
 * Hodnoty jsou TOTOZNE s `.th-btn`/`.th-btn-primary` tokeny, takze u
 * dynamickych bannneru (s tridami) je tohle jen neskodna duplicita --
 * viditelny vysledek je vzdy stejny. Puls (`.th-pulse`) na zapecenych
 * clancich nefunguje (chybi trida v DB HTML, obsah se needituje) -- ta
 * mez je stejna jako u chybejicich `data-promo-token` atributu, viz
 * status BV-2(b).
 */
.th-promo-banner .th-promo-banner__cta.th-promo-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	background: var(--org-cta);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	border-radius: var(--r-btn);
	padding: 12px 30px;
	margin-top: .5rem;
}

.th-promo-banner .th-promo-banner__cta.th-promo-banner__cta:hover {
	background: var(--org-deep);
	color: #fff;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.th-promo-banner .th-promo-banner__pol {
		opacity: 1;
		animation: none;
	}

	.th-promo-banner.is-play .th-promo-banner__pol--front,
	.th-promo-banner.is-play .th-promo-banner__pol--back {
		animation: none;
	}
}

@media (max-width: 991px) {
	.th-promo-banner .th-promo-banner__headline.th-promo-banner__headline {
		font-size: 22px;
	}

	.th-promo-banner__split {
		padding: 36px 30px;
		gap: 28px;
	}
}

@media (max-width: 767px) {
	.th-promo-banner.th-promo-banner {
		margin: 25px 0;
	}

	.th-promo-banner__split {
		flex-direction: column;
		gap: 38px;
		padding: 26px 20px 32px;
	}

	.th-promo-banner__stack {
		flex-basis: auto;
		width: 82%;
		align-self: center;
	}

	.th-promo-banner .th-promo-banner__headline.th-promo-banner__headline {
		font-size: 19px;
	}

	.th-promo-banner .th-promo-banner__body.th-promo-banner__body {
		font-size: 11.8px;
	}

	.th-promo-banner .th-promo-banner__cta.th-promo-banner__cta {
		padding: 12px 22px;
	}
}