/* ---------------------------------------------------------------------------
   Itineráře — assets/css/itinerary.css
   ---------------------------------------------------------------------------
   Detail itineráře (templates/single-itinerar.html, patterny
   nassvet/itinerary-hero, itinerary-route, itinerary-days, itinerary-locked),
   rozcestník (archive-itinerar.html, pattern nassvet/itinerary-card)
   a zpětný odkaz na detailu místa (nassvet/place-itineraries).

   Soubor načítá functions.php sám (glob nad assets/css/, handle
   nassvet-itinerary, po style.css) a přidává ho i do editoru — registrovat
   se nic nemusí.

   Kartu (.nsv-card), pilulku (.nsv-chip), štítek (.nsv-tag), eyebrow, nadpis
   sekce (.nsv-section-heading) a stránkování (.nsv-archive__pagination)
   stylují style.css a archive.css; paletu mapy (.nsv-map) map.css. Tady je
   jen to, co má itinerář navíc.

   Jen tokeny z theme.json — žádné pevné barvy. Pojmenované proměnné:

     --nsv-itin-barva   barvu kategorie místa dodává plugin jako hex
                        a patterny ji předávají inline stylem u konkrétního
                        prvku. Je to data, ne barva napsaná do stylopisu.
     --nsv-itin-nocleh  teplý podklad nocležní karty ze schváleného návrhu,
                        odvozený z broskve a bílé (v tmavém z broskve
                        a povrchu) — u pravidla, které ho používá.
     --nsv-foto-*       písmo a přehoz nad fotkou hero, stejná trojice jako
                        v category.css; tmavý režim je na konci souboru.
   ------------------------------------------------------------------------ */

/*
 * Hero sahá od kraje ke kraji a začíná hned pod hlavičkou — horní odsazení
 * hlavního obsahu by nad ním nechalo papírový pruh. Stejně jako u rubriky.
 */
.nsv-main.nsv-main--itinerar {
	padding-top: 0;
}

/*
 * Sloupec itineráře je užší než `wideSize` webu (1296 px). Návrh počítá
 * s 1100 px a je to čitelnost, ne libovůle: časová osa je jeden sloupec textu
 * a přes celou šířku výpisu míst by měl řádek poznámky ke stání přes 1 200 px.
 * Mapa, pilulky, dny i zamykací blok tak stojí v jedné ose pod sebou.
 *
 * Dvojitý selektor schválně — `:where(.is-layout-constrained) > .alignwide`
 * z jádra má stejnou váhu jako jedna třída a přebilo by to.
 */
.nsv-itin .nsv-itin__intro,
.nsv-itin .nsv-itin-route,
.nsv-itin .nsv-itin-places,
.nsv-itin .nsv-itin-days,
.nsv-itin .nsv-itin-locked {
	max-width: 68rem;
	margin-inline: auto;
}

/* Záložní barva značky, když místo kategorii (a tedy barvu) nemá. */
.nsv-itin-route__legend-item,
.nsv-itin-places__chip,
.nsv-itin-stop__marker {
	--nsv-itin-barva: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   Hlavička itineráře (pattern nassvet/itinerary-hero)
   ---------------------------------------------------------------------------
   Tatáž stavba jako hero rubriky, který majitel schválil: celoplošná fotka,
   tmavý přechod odspodu a text na něm. Navíc je pod vlasovou linkou pás
   faktů — dní, zastávek, kilometrů, nocí zdarma a cena.
   ------------------------------------------------------------------------ */

.nsv-itin-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(22rem, 36vw, 32rem);
	margin-bottom: 0;
	overflow: hidden;
	background: var(--wp--preset--color--dark);
	isolation: isolate;

	/* Barvy nad fotkou — hero je tmavý ostrov v obou režimech, tokeny se ale
	   v tmavém otočí; tmavý režim (konec souboru) proměnné jen prohodí. */
	--nsv-foto-pismo: var(--wp--preset--color--paper);
	--nsv-foto-prehoz: var(--wp--preset--color--ink);
}

.nsv-itin-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.nsv-itin-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Přechod, ne plošné ztmavení: nahoře zůstane fotka skoro čistá, dole se pod
 * textem utáhne natolik, aby papírové písmo drželo kontrast i na světlé
 * fotce (sníh, moře).
 */
.nsv-itin-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--nsv-foto-prehoz) 90%, transparent) 0%,
		color-mix(in srgb, var(--nsv-foto-prehoz) 70%, transparent) 34%,
		color-mix(in srgb, var(--nsv-foto-prehoz) 30%, transparent) 66%,
		color-mix(in srgb, var(--nsv-foto-prehoz) 10%, transparent) 100%
	);
}

/* Bez fotky tmavá plocha s tlumenou kresbou cesty — hero nesmí zmizet. */
.nsv-itin-hero__media--empty {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-inline-end: clamp(1rem, 6vw, 5rem);
	color: color-mix(in srgb, var(--nsv-foto-pismo) 14%, transparent);
}

.nsv-itin-hero__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.nsv-itin-hero__text {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	min-width: 0;
	color: var(--nsv-foto-pismo);

	/* Eyebrow je nejvýš a trefí se i na světlý pruh fotky — stín ho udrží čitelný. */
	text-shadow: 0 1px 14px color-mix(in srgb, var(--nsv-foto-prehoz) 55%, transparent);
}

.nsv-itin-hero__text > * {
	margin: 0;
}

.nsv-itin-hero__eyebrow-sep {
	opacity: 0.7;
}

.nsv-itin-hero__title {
	max-width: 14em;
	color: var(--nsv-foto-pismo);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.nsv-itin-hero__lead {
	max-width: 40em;
	color: var(--nsv-foto-pismo);
	font-size: 1.125rem;
	line-height: 1.55;
	opacity: 0.9;
}

/*
 * Pás faktů pod vlasovou linkou. Popisek je v HTML `dt` (tedy první),
 * hodnota `dd` — opačné pořadí na obrazovce dělá column-reverse, aby
 * značkování zůstalo platné.
 */
.nsv-itin-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem clamp(1.25rem, 3vw, 2.25rem);
	margin: 0.5rem 0 0;
	padding-top: 1rem;
	border-top: var(--wp--custom--line--width) solid color-mix(in srgb, var(--nsv-foto-pismo) 28%, transparent);
}

.nsv-itin-hero__fact {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.1rem;
}

.nsv-itin-hero__fact-value {
	margin: 0;
	color: var(--nsv-foto-pismo);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.nsv-itin-hero__fact-label {
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.78;
}

/* Cena a „Zdarma“ jsou to, co má čtenář odnést — broskev je na tmavém nejvíc vidět. */
.nsv-itin-hero__fact--price .nsv-itin-hero__fact-value,
.nsv-itin-hero__fact--free .nsv-itin-hero__fact-value {
	color: var(--wp--preset--color--peach);
}

/* ---------------------------------------------------------------------------
   Úvodní text redakce (core/post-content v šabloně)
   ------------------------------------------------------------------------ */

.nsv-itin__intro .wp-block-post-content {
	max-width: var(--wp--style--global--content-size);
	color: var(--wp--preset--color--ink-2);
	font-size: 1.0625rem;
}

/* Itinerář bez prodejního textu nemá nechat prázdný pruh. */
.nsv-itin__intro .wp-block-post-content:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
   Kudy to vede — mapa trasy (pattern nassvet/itinerary-route)
   ---------------------------------------------------------------------------
   Mapa je líná stejně jako „Kde to je“ na detailu místa: v HTML je nejdřív
   jen destička s tlačítkem, MapLibre se stáhne až po kliknutí nebo až sekce
   dojede do obrazovky. Značky jsou data-nsv-itin-map* — řetězec
   `data-nsv-map` v šabloně by modul míst přinutil zařadit celý MapLibre
   hned při načtení stránky.
   ------------------------------------------------------------------------ */

.nsv-itin-route__summary {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

/*
 * Výška pruhu roste se šířkou sloupce. Pevných 20rem dělalo na 1440 px
 * krabici 1088 × 320 px, tedy 3,4 : 1 — a `fitBounds` v takovém tvaru
 * srovnává výřez podle VÝŠKY: cesta ze severu na jih se scvrkla do šestiny
 * šířky a kolem ní zbyla půlka Evropy. Clamp drží pruh (ne půl obrazovky),
 * ale dá mu tvar, do kterého se svislá trasa vejde: na 1440 px je to 480 px,
 * tedy 2,3 : 1, a trasa vyplní přes čtvrtinu šířky místo devítiny.
 *
 * Přesný poměr podle bboxu zastávek by uměl jen plugin (body trasy zná) —
 * do CSS by ho musel poslat inline proměnnou. Tohle je ta levnější půlka.
 */
.nsv-itin-route__stage {
	position: relative;
	height: clamp(20rem, 34vw, 30rem);
	overflow: hidden;
	border: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--map);
}

/*
 * Prvky sekce se schovávají atributem `hidden` (tlačítko odkrývá zavaděč,
 * destičku a zálohu přepíná skript mapy). Bez těchhle pravidel by `hidden`
 * neudělalo nic: vlastní `display` z pilulky i z vrstev přebije `display:
 * none` z prohlížeče. Záloha to má nejhorší — leží nad destičkou, takže by
 * neviditelný prázdný obdélník sebral tlačítku kliknutí.
 */
.nsv-itin-route__canvas[hidden],
.nsv-itin-route__plate[hidden],
.nsv-itin-route__fallback[hidden],
.nsv-itin-route__open[hidden] {
	display: none;
}

/* Destička, kterou čtenář vidí, dokud se mapa nestáhne — a když se nestáhne, zůstane. */
.nsv-itin-route__plate,
.nsv-itin-route__fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.nsv-itin-route__plate-icon {
	display: block;
	color: var(--wp--preset--color--line-strong);
}

.nsv-itin-route__status {
	margin: 0;
	min-height: 1.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.nsv-itin-route__note {
	max-width: 34em;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Plátno pro MapLibre. Selektor je schválně dvojitý (`.nsv-map` navíc):
 * soubory z assets/css/ se načítají abecedně, takže itinerary.css jde PŘED
 * map.css a `.nsv-map { height: var(--nsv-map-height, 620px) }` by při stejné
 * váze vyhrálo. Plátno musí krýt destičku přesně, ne o 300 px níž.
 */
.nsv-itin-route__canvas.nsv-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

/*
 * Karta zastávky po kliknutí na špendlík — vkládá ji places-map.js. Plave
 * nad mapou vlevo dole, aby nezakryla trasu; na úzkém displeji si vezme
 * celou šířku plátna.
 */
.nsv-itin-route__card.nsv-place-card {
	position: absolute;
	z-index: 3;
	right: auto;
	bottom: 0.75rem;
	left: 0.75rem;
	width: min(24rem, calc(100% - 1.5rem));
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.nsv-itin-route__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.nsv-itin-route__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.nsv-itin-route__dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--nsv-itin-barva);
	flex: none;
}

/*
 * Tlačítka „Celá trasa / Den 1 / Den 2…“. Celý obal je v HTML `hidden`
 * a odkrývá ho až skript mapy — bez něj by to byla mrtvá tlačítka a věta,
 * kterou stránka nesplní.
 */
.nsv-itin-route__days {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.nsv-itin-route__hint {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------------------
   Místa, která uvidíš (pattern nassvet/itinerary-route)
   ------------------------------------------------------------------------ */

.nsv-itin-places__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nsv-itin-places__dot {
	width: 0.5625rem;
	height: 0.5625rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--nsv-itin-barva);
	flex: none;
}

/* Pilulka s počtem nedostupných zastávek není odkaz — nikam nevede. */
.nsv-itin-places__more {
	color: var(--wp--preset--color--muted);
	cursor: default;
}

.nsv-itin-places__note {
	margin: 0.8rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------------------
   Den po dni (pattern nassvet/itinerary-days)
   ---------------------------------------------------------------------------
   Den začíná silnější inkoustovou linkou — je to nejsilnější předěl na
   stránce, protože po něm se čte odshora dolů jako jízdní řád.
   ------------------------------------------------------------------------ */

.nsv-itin-days__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.nsv-itin-day {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1rem;
	border-top: var(--wp--custom--line--strong) solid var(--wp--preset--color--ink);
}

.nsv-itin-day__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.25rem;
}

.nsv-itin-day__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Nadpis dne od redakce („Z Brna přes Rakousko“) — stejná velikost, tlumeně. */
.nsv-itin-day__name {
	color: var(--wp--preset--color--muted);
	font-style: italic;
	font-weight: 400;
}

.nsv-itin-day__meta {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.nsv-itin-day__intro {
	max-width: 46em;
	margin: 0.35rem 0 1.25rem;
	color: var(--wp--preset--color--ink-2);
}

.nsv-itin-day__empty {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Zastávka ---------------------------------------------------------- */

.nsv-itin-stop {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: 1rem;
	padding-bottom: 1.5rem;
}

/*
 * Svislá vlasová linka od kolečka dolů. U poslední zastávky dne se nekreslí —
 * čára do prázdna vypadá jako nedopsaný seznam.
 */
.nsv-itin-stop::before {
	content: "";
	position: absolute;
	top: 2.5rem;
	bottom: 0;
	left: 1.125rem;
	width: var(--wp--custom--line--width);
	background: var(--wp--preset--color--line);
}

.nsv-itin-stop--last::before {
	display: none;
}

/*
 * Kolečko s pořadím zastávky — tatáž barva, jakou nese špendlík na mapě.
 * Číslo má i nocleh: kdyby tu bylo „N“, přestala by osa s mapou souhlasit.
 */
.nsv-itin-stop__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--nsv-itin-barva);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* Zastávka bez místa (Brno, nákup v Cortině) nemá kategorii ani barvu. */
.nsv-itin-stop--text .nsv-itin-stop__marker {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink-2);
}

.nsv-itin-stop--locked .nsv-itin-stop__marker {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--muted);
}

.nsv-itin-stop__card {
	padding: 1rem 1.15rem;
	border: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--surface);
	min-width: 0;
}

/*
 * Nocleh je jiná karta: teplý podklad, terakotový rámeček a štítek „Tady jsme
 * spali“. Podklad je v návrhu schválně — samotná linka se při rolování dlouhého
 * dne ztrácí, plocha ne. Token pro něj v theme.json není, tak je odvozený:
 * 11 % broskve v bílé = #FEF7F0, od návrhu (#FDF6EF) o jedničku v kanálu.
 * Tmavá varianta (konec souboru) míchá broskev do povrchu.
 */
.nsv-itin-stop--nocleh {
	--nsv-itin-nocleh: color-mix(in srgb, var(--wp--preset--color--peach) 11%, var(--wp--preset--color--white));
}

.nsv-itin-stop--nocleh .nsv-itin-stop__card {
	border-width: var(--wp--custom--line--strong);
	border-color: var(--wp--preset--color--accent);
	background: var(--nsv-itin-nocleh);
}

.nsv-itin-stop__label {
	margin: 0 0 0.2rem;
	color: var(--wp--preset--color--accent);
}

/* Zastávka jen pro předplatitele — karta zůstane, obsah v ní není. */
.nsv-itin-stop--locked .nsv-itin-stop__card {
	border-style: dashed;
	background: transparent;
}

.nsv-itin-stop__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.nsv-itin-stop__title a {
	color: inherit;
	text-decoration: none;
}

.nsv-itin-stop__title a:hover,
.nsv-itin-stop__title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nsv-itin-stop__meta {
	margin: 0.2rem 0 0;
}

.nsv-itin-stop__note {
	margin: 0.55rem 0 0;
	color: var(--wp--preset--color--ink-2);
}

.nsv-itin-stop__note > :first-child {
	margin-top: 0;
}

.nsv-itin-stop__note > :last-child {
	margin-bottom: 0;
}

/* Fakta z místa — cena, výška vjezdu, souřadnice. Skládá je plugin. */
.nsv-itin-stop__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.7rem 0 0;
	padding: 0;
	list-style: none;
}

.nsv-itin-stop__fact {
	padding: 0.2rem 0.55rem;
	border: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
}

.nsv-itin-stop__fact-label {
	color: var(--wp--preset--color--muted);
}

.nsv-itin-stop__fact--coords {
	font-variant-numeric: tabular-nums;
}

/* Fotky u zastávky: vlastní, jinak galerie místa, jinak jeho náhledovka. */
.nsv-itin-stop__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

.nsv-itin-stop__photo {
	width: 4rem;
	height: 3rem;
	border-radius: var(--wp--custom--radius--card);
	object-fit: cover;
	background: var(--wp--preset--color--surface-2);
}

.nsv-itin-stop__photo-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 3rem;
	border: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.nsv-itin-stop__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.nsv-itin-stop__action {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
}

.nsv-itin-stop__action::after {
	content: " \2192";
}

.nsv-itin-stop__action:hover,
.nsv-itin-stop__action:focus-visible {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Pás mezi zastávkami ----------------------------------------------- */

.nsv-itin-leg {
	margin: -0.6rem 0 0.9rem;
	padding-left: calc(2.25rem + 1rem);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Zamčená část (pattern nassvet/itinerary-locked)
   ---------------------------------------------------------------------------
   Nad blokem přechod do papíru, ať je vidět, že text pokračuje. Stejná
   stavba jako nassvet/place-locked, jen s pásem „co je v ceně“.
   ------------------------------------------------------------------------ */

.nsv-itin-locked.nsv-card {
	position: relative;
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-width: var(--wp--custom--line--strong);
	text-align: center;
}

.nsv-itin-locked.nsv-card::before {
	content: "";
	position: absolute;
	top: -5.5rem;
	right: 0;
	left: 0;
	height: 5.5rem;
	background: linear-gradient(to top, var(--wp--preset--color--paper), transparent);
	pointer-events: none;
}

.nsv-itin-locked__lock {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink-2);
}

.nsv-itin-locked__title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.nsv-itin-locked__text {
	max-width: 36em;
	margin: 0.4rem auto;
}

.nsv-itin-locked__actions.wp-block-buttons {
	justify-content: center;
	margin-top: 1.2rem;
}

.nsv-itin-locked__included {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: left;
}

.nsv-itin-locked__item {
	padding-top: 0.7rem;
	border-top: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.nsv-itin-locked__item dt {
	margin-bottom: 0.15rem;
	font-weight: 600;
}

.nsv-itin-locked__item dd {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
}

/* ---------------------------------------------------------------------------
   Rozcestník /itinerare/ (pattern nassvet/itinerary-card)
   ------------------------------------------------------------------------ */

.nsv-itin-archive-head__title.wp-block-heading {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.02em;
}

.nsv-itin-archive__note {
	max-width: 46em;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.nsv-itin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/*
 * Jedna nebo dvě karty: mřížka se zúží na jejich počet, místo aby držela tři
 * sloupce a jeden nebo dva nechala prázdné. Omezuje se ŠÍŘKA MŘÍŽKY, ne
 * sloupce — na mobilu, kde je okno užší než ten strop, se nezmění nic.
 * Stejné pravidlo jako u „Nedaleko odtud“ v place.css, a dnes je to většina
 * případů: itineráře jsou zatím dva.
 */
.nsv-itin-archive .nsv-itin-grid--1 {
	max-width: 26rem;
}

.nsv-itin-archive .nsv-itin-grid--2 {
	max-width: 54rem;
}

.nsv-itin-card.nsv-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.nsv-itin-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface-2);
}

.nsv-itin-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bez fotky plocha s kresbou cesty — karta drží stejnou siluetu jako s ní. */
.nsv-itin-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--line-strong);
}

.nsv-itin-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
}

.nsv-itin-card__free {
	align-self: flex-start;
	margin: 0;
}

.nsv-itin-card__meta {
	margin: 0;
}

.nsv-itin-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.nsv-itin-card__title a {
	color: inherit;
	text-decoration: none;
}

.nsv-itin-card__title a:hover,
.nsv-itin-card__title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nsv-itin-card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.nsv-itin-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: auto 0 0;
	padding-top: 0.75rem;
	border-top: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
}

.nsv-itin-card__price {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.nsv-itin-card--free .nsv-itin-card__price {
	color: var(--wp--preset--color--accent);
}

.nsv-itin-card__link {
	font-size: var(--wp--preset--font-size--small);
}

.nsv-itin-archive__pagination {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------------
   Zpětný odkaz na detailu místa (pattern nassvet/place-itineraries)
   ---------------------------------------------------------------------------
   Konverzní cesta opačným směrem: ze 433 míst vedou odkazy do itinerářů.
   Je to vsazená poznámka, ne karta — proto tmavší plocha a broskvový pruh
   vlevo, aby se nepletla s kartami míst kolem.
   ------------------------------------------------------------------------ */

.nsv-place-itineraries {
	display: flex;
	gap: 0.85rem;
	padding: 1rem 1.15rem;
	border-left: 3px solid var(--wp--preset--color--peach);
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;
	background: var(--wp--preset--color--surface-2);
}

.nsv-place-itineraries__icon {
	color: var(--wp--preset--color--accent);
	flex: none;
	margin-top: 0.1rem;
}

.nsv-place-itineraries__body {
	min-width: 0;
}

.nsv-place-itineraries__text {
	margin: 0;
	font-size: 1.0625rem;
}

.nsv-place-itineraries__meta {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.nsv-place-itineraries__list {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}

.nsv-place-itineraries__list li + li {
	margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Užší displeje
   ------------------------------------------------------------------------ */

@media (max-width: 781px) {
	.nsv-itin-hero__inner {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.nsv-itin-hero__lead {
		font-size: 1.0625rem;
	}

	.nsv-itin-hero__fact-value {
		font-size: 1.25rem;
	}

	.nsv-itin-route__stage {
		height: 16rem;
	}
}

@media (max-width: 600px) {
	/*
	 * Na telefonu se sloupec s kolečkem zúží a karta dostane zbytek šířky —
	 * jinak se do ní na 375 px nevejde ani řádek faktů.
	 */
	.nsv-itin-stop {
		grid-template-columns: 1.75rem minmax(0, 1fr);
		gap: 0.75rem;
	}

	.nsv-itin-stop::before {
		top: 2rem;
		left: 0.875rem;
	}

	.nsv-itin-stop__marker {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.8125rem;
	}

	.nsv-itin-stop__card {
		padding: 0.85rem 0.95rem;
	}

	.nsv-itin-leg {
		padding-left: calc(1.75rem + 0.75rem);
	}

	.nsv-itin-hero__facts {
		gap: 0.65rem 1.25rem;
	}

	.nsv-itin-locked.nsv-card {
		padding: var(--wp--preset--spacing--30);
	}

	.nsv-itin-locked__included {
		grid-template-columns: 1fr;
	}

	.nsv-itin-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Tmavý režim
   ---------------------------------------------------------------------------
   Hodnoty musí být v obou blocích stejné: první platí pro ruční volbu
   (data-theme na <html>), druhý pro „podle systému“. `@media screen` proto,
   že tmavé tokeny z functions.php platí také jen na obrazovce a tisk zůstává
   světlý. `:not(.editor-styles-wrapper *)` drží pravidla mimo editor, kde
   se tmavé tokeny netisknou a media query by jinak platila proti světlému
   plátnu.

   Co se mění:
   - hero: písmo na fotce z ink (v tmavém světlý), přehoz z tokenu dark;
   - nocleh: broskev do povrchu místo do bílé (≈ #423326, o tón teplejší
     než povrch 2, inkoust na něm 9,9:1);
   - záložní barva značky: ink je v tmavém světlý a bílé číslo na něm by
     zmizelo — line-strong (bílá na něm 7,6:1);
   - kolečka zastávek a tečky legendy: tmavé kategorie (inkoust #1E2A28,
     břidlice) na tmavé kartě splynou, tenký lem z line-strong je vykrojí.
   ------------------------------------------------------------------------ */

@media screen {
	:root[data-theme="dark"] .nsv-itin-hero {
		--nsv-foto-pismo: var(--wp--preset--color--ink);
		--nsv-foto-prehoz: var(--wp--preset--color--dark);
	}

	:root[data-theme="dark"] .nsv-itin-stop--nocleh {
		--nsv-itin-nocleh: color-mix(in srgb, var(--wp--preset--color--peach) 12%, var(--wp--preset--color--surface));
	}

	:root[data-theme="dark"] .nsv-itin-route__legend-item,
	:root[data-theme="dark"] .nsv-itin-places__chip,
	:root[data-theme="dark"] .nsv-itin-stop__marker {
		--nsv-itin-barva: var(--wp--preset--color--line-strong);
	}

	:root[data-theme="dark"] .nsv-itin-route__dot,
	:root[data-theme="dark"] .nsv-itin-places__dot,
	:root[data-theme="dark"] .nsv-itin-stop__marker {
		box-shadow: 0 0 0 1px var(--wp--preset--color--line-strong);
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .nsv-itin-hero:not(.editor-styles-wrapper *) {
		--nsv-foto-pismo: var(--wp--preset--color--ink);
		--nsv-foto-prehoz: var(--wp--preset--color--dark);
	}

	:root:not([data-theme="light"]) .nsv-itin-stop--nocleh:not(.editor-styles-wrapper *) {
		--nsv-itin-nocleh: color-mix(in srgb, var(--wp--preset--color--peach) 12%, var(--wp--preset--color--surface));
	}

	:root:not([data-theme="light"]) .nsv-itin-route__legend-item:not(.editor-styles-wrapper *),
	:root:not([data-theme="light"]) .nsv-itin-places__chip:not(.editor-styles-wrapper *),
	:root:not([data-theme="light"]) .nsv-itin-stop__marker:not(.editor-styles-wrapper *) {
		--nsv-itin-barva: var(--wp--preset--color--line-strong);
	}

	:root:not([data-theme="light"]) .nsv-itin-route__dot:not(.editor-styles-wrapper *),
	:root:not([data-theme="light"]) .nsv-itin-places__dot:not(.editor-styles-wrapper *),
	:root:not([data-theme="light"]) .nsv-itin-stop__marker:not(.editor-styles-wrapper *) {
		box-shadow: 0 0 0 1px var(--wp--preset--color--line-strong);
	}
}