/**
 * Edutours theme — main stylesheet.
 *
 * Source of truth: design/HANDOFF.md (§2 component library, §5 states,
 * §6 breakpoint behaviour) + the approved mockups under
 * design/homepage-directions/*.dc.html (desktop CSS extracted from inline
 * styles) + mobile.css (canonical ≤768 pass). Where they disagreed, the
 * mockups won.
 *
 * All values are pulled from the theme.json design tokens
 * (--wp--preset--*, --wp--custom--*) wherever a token exists. Raw hex/rgba
 * is used only where no token covers the exact value (one-off overlay
 * tints, alpha steps the token scale doesn't have, etc).
 *
 * Section index (search for "== N.").
 *  0.  Custom properties (tokens with no theme.json slug)
 *  1.  Base / reset
 *  2.  Buttons & links (global states, §5)
 *  3.  Layout utilities (.edt-section, .edt-eyebrow, stencil frame, img fallback)
 *  4.  Site header
 *  5.  Site footer
 *  6.  Breadcrumb
 *  7.  Hero — product / router / home
 *  7b. Flagship (homepage OPJAK-in-own-school block)
 *  8.  Trust strip
 *  9.  Info table
 *  10. SEO definition callout
 *  11. Program týdne
 *  12. Zaměření tags / pills
 *  13. Místo konání / zázemí
 *  14. Destination cards
 *  15. Financování block (product-page prose/stat-tiles + homepage card-grid variant)
 *  16. Checklist / co je v ceně (also .edt-check-item/.edt-check-mark)
 *  17. Calculator (OPJAK)
 *  18. Enquiry rail
 *  19. Reference slider
 *  20. FAQ accordion
 *  21. Cross-sell / product card
 *  22. CTA band
 *  23. Filter bar / chips
 *  24. Decision helper
 *  25. Enquiry modal
 *  26. Mobile CTA bar
 *  27. Newsletter inline
 *  28. Blog (card / category chip / article meta / author box)
 *  29. Stat tiles
 *  30. Process steps + RDG connector
 *  31. Motion / reduced-motion
 *  32. Single-program two-column layout (.edt-product-layout)
 *  33. O nás sections
 *  34. Tablet tier (769–1366px) + narrow-phone info table
 */

/* ==========================================================================
   0. Custom properties — tokens with no theme.json slug
   ========================================================================== */

/* GLOBAL SCALE LEVER (Vik, 2026-08-05): tried at 85%, reverted same evening —
   100% = mockup-true scale. Re-add `html { font-size: <pct>; }` here to
   shrink/grow all rem-based sizing (type + section rhythm) in one move. */

/* The html:root font-size shield that used to sit here is GONE (#18, theme
   0.2.91). It re-pinned all 11 --wp--preset--font-size--* vars because core
   reserved the slugs small/medium/large/x-large (13/20/36/42px) — there was
   never a stale DB row; settings.typography just lacked `defaultFontSizes`.
   theme.json now sets "defaultFontSizes": false (theme presets win) and marks
   each of the 11 presets "fluid": false (they rendered flat under the shield,
   D-020 keeps them flat). settings.typography.fluid stays TRUE so the fluid
   clamps on elements.h1/h2/h3 and styles.typography.fontSize are unchanged —
   never set it globally to false, that would flatten body/h3 at every
   viewport below 1600px. Preset values now come from :root in the emitted
   global styles; edit them in theme.json, not here. */

:root {
	--edt-orange-press: #e54e14;
	--edt-text-secondary: #38516a;
}

/* ==========================================================================
   1. Base / reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	min-width: 0;
}

img,
svg {
	max-width: 100%;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

a {
	transition: color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

/* ==========================================================================
   2. Buttons & links — global states (HANDOFF §5)
   ========================================================================== */

.wp-element-button,
button.edt-chip,
.edt-chip {
	transition:
		background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

/* Orange filled buttons (default .wp-element-button look) */
.wp-element-button.has-accent-background-color:hover,
.wp-element-button.has-accent-background-color:focus-visible {
	background-color: var(--wp--preset--color--accent-warm) !important;
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--orange-glow);
	color: var(--wp--preset--color--base);
}

.wp-element-button.has-accent-background-color:active {
	transform: translateY(0);
	background-color: var(--edt-orange-press) !important;
	box-shadow: none;
}

.wp-element-button:focus-visible,
.edt-chip:focus-visible,
.edt-icon-btn a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Navy outlined button variant */
.is-style-outline .wp-element-button,
.wp-element-button.is-style-outline {
	background: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.is-style-outline .wp-element-button:hover,
.wp-element-button.is-style-outline:hover {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

.is-style-outline .wp-element-button:active,
.wp-element-button.is-style-outline:active {
	transform: translateY(2px);
}

/* Inline links inside prose. `.edt-faq__a a` is listed because FAQ answers
   now carry internal links and the block renders straight from a template on
   single-program / page-router — i.e. outside .entry-content, where an
   unstyled link would be invisible body text. */
.entry-content a,
.edt-lead a,
.edt-faq__a a,
.edt-hero-product__lead a,
.wp-block-post-content a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content a:hover,
.edt-lead a:hover,
.edt-faq__a a:hover,
.edt-hero-product__lead a:hover,
.wp-block-post-content a:hover {
	color: var(--wp--preset--color--accent-warm);
}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */

/* Horizontal gutter: neither the ACF blocks (align support disabled, see
   inc/blocks.php) nor the alignfull homepage patterns (no explicit "layout"
   attribute, so no automatic root padding from theme.json) get any side
   padding for free — .edt-section supplies it everywhere so nothing sits
   flush against the viewport edge. */
.edt-section {
	/* rem, not the px spacing preset — rides the global scale lever above. */
	padding: 4rem var(--wp--preset--spacing--80);
}

/* alignfull sections (patterns/*.php) span the viewport; keep inner content
   from ever forcing horizontal scroll and let wide/contentSize constraints
   still center things where a nested block requests them. */
.edt-section.alignfull {
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

.edt-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;

	/* Mockup eyebrows track at 0.16em (2.24px @ 14px) — wider than the
	   0.12em token. */
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

/* Sub-band display heading (financování/benefit bands): the mockup sizes
   these below the section-H2 role — 26px, mirroring the promoted-<strong>
   treatment they replace. */
.edt-band-heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Stencil frame overlay — four 3px orange bars inset with broken corners.
   Wraps a media element: <div class="edt-stencil-frame"><img>/<div class="edt-img-fallback">…</div></div> */
.edt-stencil-frame {
	position: relative;
	overflow: hidden;
}

/* THE ORANGE STENCIL BARS ARE GONE (Vik 2026-08-21: „remove the orange lines
   from all the images like we did in case of the job shadowing schools").
   .edt-stencil-frame::before used to paint four 3px accent bars inset with
   broken corners over every framed media box. The precedent he names is
   .edt-school-card__media (inc/blocks.php, the stínování partner-school grid,
   #72) — it renders its photo in a plain box with no frame at all, and that is
   now the sitewide treatment. The wrapper class STAYS: it still supplies the
   positioning context, `overflow: hidden` and the object-fit sizing that every
   hero, place card and photo slot relies on, so deleting the class would be a
   layout change, whereas deleting only its ::before is purely the decoration
   Vik asked to drop. Empty slots keep reading as slots on their own — the
   .edt-img-fallback below has its own cream/dashed placeholder treatment.
   --edt-frame-inset / --edt-frame-gap went with it: nothing else consumed
   them, in this file or in the two patterns that used to override them. */

.edt-stencil-frame > img,
.edt-stencil-frame > picture,
.edt-stencil-frame > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Missing-photo fallback — mockup image slots are LIGHT framed placeholders
   (cream, dashed border, small mark + muted caption), not heavy navy blocks
   (QA 2026-08-05). Dark contexts (hero-home) re-tint below. */
.edt-img-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	height: 100%;
	min-height: 240px;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--cream);
	border: 1px dashed rgb(28 49 68 / 25%);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;

	/* The element's own text is the slot caption ("Foto: …"). */
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: var(--wp--custom--line-height--snug);
	text-align: center;
}

.edt-img-fallback::before {
	content: "E";
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 1;
	color: rgb(255 97 36 / 45%);
}

/* ==========================================================================
   4. Site header (parts/header.html)
   ========================================================================== */

.edt-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.edt-header-cluster {
	gap: var(--wp--preset--spacing--50);
}

/* Nav (wp:navigation block) */
.edt-header-nav {
	font-family: var(--wp--preset--font-family--display);
}

.edt-header-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition:
		color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-header-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* [aria-current="page"] covers custom-link nav items (e.g. "Úvod" → "/")
   that WP's Navigation block doesn't always flag with current-menu-item —
   see the render_block_core/navigation-link filter in functions.php. */
.edt-header-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.edt-header-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Icon pair (phone / mail) */
.edt-header-icons {
	gap: 6px;
	padding-left: var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--custom--border--subtle);
}

.edt-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-icon-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Lucide-style outline SVGs (stroke: currentColor → orange from the anchor) */
.edt-icon-btn svg {
	display: block;
	width: 18px;
	height: 18px;
}

.edt-icon-btn:hover {
	background: var(--wp--preset--color--cream);
}

/* Static CZ flag (item 7) — no switcher yet, see parts/header.html. */
.edt-lang-flag {
	display: flex;
	flex: 0 0 auto;
}

.edt-header-cta .wp-element-button {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
	padding: 11px 24px;
}

/* Core's Navigation block switches to its hamburger overlay only below
   600px; the design wants the hamburger through 768px (HANDOFF §6). Force
   overlay mode in the 601–768 gap — otherwise that range shows no nav at
   all (core hides the open-button, we used to hide the row).
   Raised to 1365px (§34, tablet tier). Measured header height on staging with
   the desktop bar in place: 477px at 1025–1080 (CTA 61px wide × 444 tall —
   one letter per line), 179px at 1112, 105px at 1180–1280 (three of eight nav
   labels on two lines), and only 80px with nothing wrapped at 1366. The
   seven-item Czech nav plus icons, CTA and flag simply need ~1366px; below
   871 their nowrap floor also pushed the WHOLE DOCUMENT to 872px, which is
   the horizontal scroll every iPad portrait width was showing. The burger is
   what removes that floor. */
@media (min-width: 601px) and (max-width: 1365px) {
	.edt-header-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.edt-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* ==========================================================================
   5. Site footer (parts/footer.html)
   ========================================================================== */

.edt-site-footer {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

/* Decorative dashed travel-route (item 12b) — pinned behind everything else
   in the footer's own stacking context; z-index:0 above keeps it contained
   there instead of escaping under the whole page. */
.edt-footer-route {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;

	/* Core's flow-layout block gap (`margin-block-start: 24px` on every child
	   after the first) still applies to an absolutely positioned child, and the
	   mobile twin below is by definition not the first child — without this it
	   renders 24px lower than its viewBox says, dragging every run onto the
	   heading it was routed around. */
	margin: 0;
	opacity: 0.3;
	pointer-events: none;
}

/* Why two route SVGs (2026-08-21, Vik: "the line is too big and stubby"):
   one viewBox cannot serve both footer shapes. `slice` scales the drawing by
   max(boxW/vbW, boxH/vbH), and the footer box flips orientation at the column
   collapse — 1440x664 on desktop, 390x1594 / 768x1548 once the columns stack.
   Feeding the landscape 1400x420 viewBox to a 390px phone therefore scaled by
   max(390/1400, 1594/420) = 3.79: the 1.7 stroke rendered at 6.5px and the 10/7
   dashes at 38/27px, and the 1400-wide drawing was cropped to a ~103px-wide
   sliver of itself, so one stranded fragment was all you saw.
   The mobile twin uses a portrait 780x1570 viewBox chosen so the *height*
   governs the slice at every mobile width — 1594/1570 = 1.015 at 390px,
   1548/1570 = 0.986 at 768px, both above the width ratios (0.50 / 0.98). Stroke
   lands at 1.73px / 1.68px and the dashes at ~10/7, i.e. as authored. The price
   of a single mobile viewBox is horizontal crop at 390px (only user-x 198-582
   shows), which is why the drawing's dots all sit inside that band.
   Desktop is deliberately left alone: its own slice scale is 1.58 at 1440px, so
   that drawing has always rendered at ~2.7px stroke and 16/11 dashes. That is
   the shipped, parity-approved look — this fix is about the phone only. */
.edt-footer-route--mobile,
.edt-footer-route--tablet {
	display: none;
}

.edt-footer-grid {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* White dashed separators (grid bottom rule + column borders) removed on
   Vik's order 2026-08-12 night — supersedes the #52 dashed-decor condition;
   deviation recorded in parity-approved.json. Column padding stays for the
   gutter rhythm; the orange route SVG is untouched. */
.edt-footer-grid > .wp-block-column + .wp-block-column {
	padding-left: var(--wp--preset--spacing--60);
}

.edt-footer-col-title {
	margin-bottom: var(--wp--preset--spacing--40);
}

.edt-footer-nav a {
	font-size: 0.875rem;
	color: rgb(255 255 255 / 78%);
	text-decoration: none;
	transition: color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-footer-nav a:hover {
	color: var(--wp--preset--color--base);
}

/* Blog column: core Latest Posts block restyled to match the nav columns. */
ul.edt-footer-latest {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-left: 0;
	list-style: none;
}

ul.edt-footer-latest li {
	margin-bottom: 10px;
	line-height: var(--wp--custom--line-height--base);
}

.edt-footer-blog-all a {
	color: var(--wp--preset--color--accent);
}

.edt-footer-mission,
.edt-footer-address {
	color: rgb(255 255 255 / 78%);
	line-height: var(--wp--custom--line-height--base);
}

.edt-footer-address a {
	color: rgb(255 255 255 / 78%);
	text-decoration: none;
}

.edt-footer-address a:hover {
	color: var(--wp--preset--color--base);
}

.edt-footer-divider {
	opacity: 1;
}

.edt-footer-bottom {
	padding-top: var(--wp--preset--spacing--50);
	font-size: 12px;
	color: rgb(255 255 255 / 60%);
}

.edt-footer-bottom a {
	color: rgb(255 255 255 / 70%);
	text-decoration: none;
}

.edt-footer-bottom a:hover {
	color: var(--wp--preset--color--base);
}

.edt-header-logo,
.edt-footer-logo {
	display: block;
}

.edt-header-logo img {
	height: 36px;
	width: auto;
}

.edt-footer-logo img {
	height: 38px;
	width: auto;
}

/* ==========================================================================
   6. Breadcrumb
   ========================================================================== */

.edt-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* The trail is an <ol> (blocks/breadcrumb.php) — without this reset it
   renders as a stacked numbered list. */
.edt-breadcrumb ol {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.edt-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.edt-breadcrumb li + li::before {
	content: "›";
	color: var(--wp--preset--color--muted);
}

.edt-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.edt-breadcrumb a:hover {
	color: var(--wp--preset--color--accent);
}

.edt-breadcrumb__current,
.edt-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.edt-breadcrumb__sep {
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   7. Hero — product / router / home
   ========================================================================== */

.edt-hero-product {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

.edt-hero-product__lead {
	font-size: 17px;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
	margin-top: var(--wp--preset--spacing--40);
}

.edt-hero-product__media {
	position: relative;
	height: 360px;
}

/* Router + catalog hero (blocks/hero-router.php): the mockup runs the navy
   band FULL-BLEED flush under the sticky header, with the breadcrumb trail
   inside it and the dashed travel-route decor bleeding out top-right (#52).
   The 100vw breakout is the trust-strip recipe — ACF blocks have align
   support disabled, so without it the band is boxed to contentSize. */
.edt-hero-router {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	padding-top: 72px;
	padding-bottom: 64px;
}

.edt-hero-router__inner {
	position: relative;
	z-index: 1;
}

.edt-hero-router__deco {
	opacity: 0.2;
	z-index: 0;
}

.edt-hero-router .edt-eyebrow {
	color: var(--wp--preset--color--gold);
}

.edt-hero-router h1 {
	color: var(--wp--preset--color--base);
	margin-top: var(--wp--preset--spacing--40);
	max-width: 900px;
}

/* Breadcrumb printed inside the navy band — light-on-dark variant. */
.edt-breadcrumb--hero {
	margin-bottom: 28px;
	color: rgb(255 255 255 / 60%);
}

.edt-breadcrumb--hero a,
.edt-breadcrumb--hero li + li::before {
	color: rgb(255 255 255 / 60%);
}

.edt-breadcrumb--hero a:hover {
	color: var(--wp--preset--color--base);
}

.edt-breadcrumb--hero [aria-current="page"] {
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.edt-hero-router__lead {
	font-size: 17px;
	line-height: var(--wp--custom--line-height--loose);
	color: rgb(255 255 255 / 82%);
	max-width: 640px;
}

.edt-hero-router__media {
	margin-top: var(--wp--preset--spacing--50);
}

/* O nás hero is TEXT-ONLY since 2026-08-21 (Vik: „get rid of the hero picture
   no need as we are on bottom" — the team portraits below repeat the same
   faces). blocks/hero-router.php now renders .edt-hero-onas with no
   __media child, so the inherited .edt-hero-product 1.05fr/0.95fr grid would
   leave the copy in a half-width column beside an empty cell. One track
   instead — capped rather than 1fr, because the section is full-bleed and an
   uncapped lead runs ~180 characters at 1440. 900px is the measure the PROSE
   BELOW already uses — the „Náš příběh" h2 and its paragraphs both render at
   900px from the same x:64 — so hero and body now share one left column down
   the whole page. It was 660px for one deploy (the width the copy had inside
   the old split grid, chosen so nothing rewrapped); Vik ruled 2026-08-21 that
   matching the body wins over preserving the line break, because with the
   photo gone the narrower hero read as cramped against the full-width story
   under it. The H1 now sets on one line at 1440. minmax lets it shrink below
   900 on narrow desktops instead of overflowing the 64px gutter. At ≤768 §7's `.edt-hero-product` mobile rule
   sits later in this file at equal specificity and re-widens it to 1fr, which
   is what the phone wants. The funding heroes (Erasmus+/OP JAK) keep both
   columns and their photo — only this page lost the frame. */
.edt-hero-onas {
	grid-template-columns: minmax(0, 900px);

	/* Mockup rhythm: the o-nás hero sits 16px under the breadcrumb with no
	   bottom padding of its own (the sections stack opens with 72px) — the
	   4rem .edt-section default read ~110px too tall before the příběh. */
	padding-top: 16px;
	padding-bottom: 0;
}

/* O nás page sections break out of the 1200px constrained main (same
   recipe as .edt-trust-strip — ACF blocks have align support disabled).
   The mockup page is full-width with 64px gutters; boxed to contentSize
   the columns run 240px narrow and re-wrap the EUTA h2 and copy. */
.edt-o-nas > .edt-hero-onas,
.edt-o-nas > .edt-onas-sections,
.edt-o-nas > .edt-cta-band {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.edt-hero-router__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* Hero-home — real pattern nesting (patterns/hero-home.php):
   .edt-hero-home > .edt-hero-home__media, .edt-hero-home__content, .edt-hero-home__routers */
.edt-hero-home {
	/* Grid stack: media + content share row 1 (content's flow height can grow
	   the photo panel past its 560px minimum); routers are row 2, pulled up
	   over the panel's bottom edge. Hero itself stays transparent so the area
	   below the overlapping cards reads as page background, matching the
	   mockup's straddle. Overrides .edt-section's gutter (source order). */
	padding: 0;
	display: grid;
	color: var(--wp--preset--color--base);
}

/* Scoped to __text, not the whole hero: the three router cards are row 2 of
   the .edt-hero-home grid, so a hero-wide rule also repainted THEIR eyebrows
   gold. The mockup gives the two light cards the accent orange (#FF6124) and
   reserves gold for the navy middle card — which .edt-router-card--dark
   already handles below. Measured on staging: all three read
   rgb(238,186,86); mockup = orange / gold / orange. (Vik 2026-08-14) */
.edt-hero-home__text .edt-eyebrow {
	color: var(--wp--preset--color--gold);
}

/* Flat navy band (Vik 2026-08-21). 480px existed to give a PHOTO presence;
   with no photo it was 122px of empty panel above content that measured 358px,
   so the floor now sits just under the copy and the band is content-driven in
   practice. The readability gradient that used to darken the photo's bottom
   went with it — there is nothing left to darken, and over flat navy it only
   muddied one edge. */
.edt-hero-home__media {
	grid-area: 1 / 1;
	position: relative;
	z-index: 0;
	min-height: 360px;
	background: var(--wp--preset--color--contrast);
}

/* The footer's travel-route, reused here. `position: relative; z-index: 0` on
   the panel above makes it a stacking context, so this needs no negative
   z-index to sit over the navy (the footer's -1 works because the footer paints
   its own background instead) — and .edt-hero-home__content, a SIBLING at
   z-index 2, still wins over the whole panel either way. */
.edt-hero-route {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	pointer-events: none;
}

.edt-hero-home__content {
	grid-area: 1 / 1;
	position: relative;
	z-index: 2;
	align-self: end;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--80) var(--wp--preset--spacing--80);
}

.edt-hero-home__content h1,
.edt-hero-home__content p {
	color: var(--wp--preset--color--base);
}

/* Text column (mockup's max-width:800px wrapper) — left of the CTA pair. */
.edt-hero-home__text {
	max-width: 800px;
}

.edt-hero-home__text p {
	max-width: 580px;
}

/* CTA pair — right-edge stacked column (item 1). The flex/vertical layout
   support on the wp:buttons block renders the column + 12px gap; this just
   keeps it from being squeezed by justify-content:space-between above. */
.edt-hero-home__ctas {
	flex-shrink: 0;
}

.edt-hero-home__routers {
	position: relative;
	z-index: 3;
	margin-top: -44px;
	padding: 0 var(--wp--preset--spacing--80);
	color: var(--wp--preset--color--contrast);
}

/* Mockup shows the slot caption centered in the panel (the hero copy sits
   at the bottom edge, clear of it) — keep it visible. */

.edt-router-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--custom--shadow--lg);
	cursor: pointer;
	transition:
		transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-router-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--custom--border--strong);
}

/* Mockup card titles are display headings (Cera uppercase 24px), not serif. */
.edt-router-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 500;
	text-transform: uppercase;
	margin: 10px 0 8px;
}

.edt-router-card--dark {
	background: var(--wp--preset--color--contrast);
	border-color: transparent;
	box-shadow: 0 18px 42px rgb(28 49 68 / 25%);
}

/* Middle router card (item 2, homepage only) — gold eyebrow/link on navy,
   white heading, translucent-white body copy. */
.edt-router-card--dark .edt-eyebrow {
	color: var(--wp--preset--color--gold);
}

.edt-router-card--dark h3 {
	color: var(--wp--preset--color--base);
}

.edt-router-card--dark p {
	color: rgb(255 255 255 / 80%);
}

.edt-router-card--dark .edt-router-card__link a {
	color: var(--wp--preset--color--gold);
}

/* Inline links inside the navy card's body copy (the #81 „anglicky / španělsky"
   split) — the default accent orange has too little contrast on navy, so they
   borrow the card's gold and keep the underline that marks them as links. */
.edt-router-card--dark p a {
	color: var(--wp--preset--color--gold);
	text-decoration-color: rgb(255 255 255 / 45%);
}

.edt-router-card__link {
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.edt-router-card__link a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* is-style-outline buttons sitting on dark photo/navy backgrounds (hero-home,
   flagship) read as translucent-navy/white per HANDOFF §2.6-2.8, not the
   plain navy-outline-on-white treatment used elsewhere. */
.edt-hero-home .is-style-outline .wp-element-button,
.edt-hero-home .wp-element-button.is-style-outline,
.edt-flagship .is-style-outline .wp-element-button,
.edt-flagship .wp-element-button.is-style-outline {
	background: rgb(28 49 68 / 35%);
	border-color: rgb(255 255 255 / 40%);
	color: var(--wp--preset--color--base);
}

.edt-hero-home .is-style-outline .wp-element-button:hover,
.edt-hero-home .wp-element-button.is-style-outline:hover,
.edt-flagship .is-style-outline .wp-element-button:hover,
.edt-flagship .wp-element-button.is-style-outline:hover {
	background: rgb(255 255 255 / 15%) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ==========================================================================
   7b. Flagship (homepage OPJAK-in-own-school block — patterns/flagship.php)
   ========================================================================== */

.edt-flagship {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.edt-flagship .edt-eyebrow {
	color: var(--wp--preset--color--gold);
}

.edt-flagship h2,
.edt-flagship p {
	color: var(--wp--preset--color--base);
}

/* Mockup gives the flagship headline 46px — a display size above the H2
   role (38px keeps the approved-scale ratio). */
.edt-flagship h2 {
	font-size: 2.375rem;
	line-height: var(--wp--custom--line-height--tight);
}

/* Breathing room around the intro paragraph (Vik 2026-08-05: "padding 20px")
   — it sat flush against the checklist below. */
.edt-flagship__text > p.wp-block-paragraph:not(.edt-eyebrow):not(.edt-check-item) {
	padding: 20px 0;
}

.edt-flagship__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.edt-flagship__media {
	position: relative;
	height: 480px;
}

.edt-flagship__media .edt-stencil-frame,
.edt-flagship__media .edt-img-fallback {
	height: 100%;
}

/* Dark frame (item 11): a light cream/dashed fallback would read as a hole
   punched in the navy band, so this slot gets its own dark-navy-tinted
   placeholder. (The orange corner bars this used to sit under are gone
   sitewide — see .edt-stencil-frame in §3.) */
.edt-flagship__media .edt-img-fallback {
	background: linear-gradient(to bottom, #24405a, #16283a);
	border: none;
	border-radius: 0;
	color: rgb(255 255 255 / 70%);
}

.edt-flagship__media .edt-img-fallback::before {
	color: rgb(255 255 255 / 15%);
}

/* ==========================================================================
   8. Trust strip
   ========================================================================== */

/* Real DOM (blocks/trust-strip.php): <section class="edt-section
   edt-trust-strip">.edt-trust-strip__item × N</section> — no divider markup,
   so the 1px dividers are theme-owned ::before pseudo-elements. */
.edt-trust-strip {
	padding-top: 22px;
	padding-bottom: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);

	/* Full-bleed breakout of the constrained parent (mockup: edge-to-edge).
	   max-width: none required — the constrained layout's child max-width
	   otherwise caps the strip at contentSize (seen at 1200px on staging). */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.edt-trust-strip__item {
	position: relative;
	padding: 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	white-space: nowrap;
}

.edt-trust-strip__item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 24px;
	background: rgb(255 255 255 / 40%);
}

.edt-trust-strip__divider {
	width: 1px;
	height: 24px;
	background: rgb(255 255 255 / 40%);
	flex-shrink: 0;
}

/* ==========================================================================
   9. Info table ("Základní informace")
   ========================================================================== */

.edt-info-table {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.edt-info-table__header {
	background: var(--wp--preset--color--cream);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--custom--border--subtle);
}

.edt-info-table__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* The 130px label track is fine while the row is wide, but it is a FIXED
   track: at 360px it takes 130 of a 318px row and leaves the value 124px, and
   even at 390 the value is ~132px. Below 480 the row stacks instead (§9
   mobile) — see the media query at the end of this section. */
.edt-info-table__row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: 14px var(--wp--preset--spacing--50);
	border-bottom: 1px solid rgb(28 49 68 / 8%);
	font-size: 14.5px;
}

.edt-info-table__label {
	color: var(--wp--preset--color--muted);
}

.edt-info-table__value {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

/* ==========================================================================
   10. SEO definition callout
   ========================================================================== */

.edt-seo-callout {
	background: var(--wp--preset--color--cream);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0;
	padding: 22px 26px;
	font-size: 16.5px;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--wp--preset--color--contrast);
}

.edt-seo-callout strong,
.edt-seo-callout b {
	font-weight: 600;
}

.edt-seo-callout p:last-child {
	margin-bottom: 0;
}

/* Real DOM (blocks/program-obsah.php): <section class="edt-section
   edt-program-obsah"><h2>O programu</h2>[.edt-seo-callout]
   <div class="edt-program-obsah__body">wysiwyg</div></section> */
.edt-program-obsah__body {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
	margin-top: var(--wp--preset--spacing--40);
}

.edt-program-obsah__body :last-child {
	margin-bottom: 0;
}

/* Sub-headings inside the wysiwyg. „Stáže ve firmách" (#80, 2026-08-19) is the
   first product whose O programu prose carries h3s — they arrived with the
   guide-to-product conversion, where the old page's two prose sections folded
   into this field. Rhythm only: the size comes from the shipped h3 element
   style in theme.json (1.125rem / 600), no new type scale (D-020). */
.edt-program-obsah__body h3 {
	margin: 28px 0 10px;
}

/* ==========================================================================
   11. Program týdne
   ========================================================================== */

.edt-program-tyden {
	display: flex;
	flex-direction: column;
}

/* Lead sentence between the h2 and the first day row (revised stínování:
   „Ukázkový týden — délku 5–20 dní přizpůsobíme Vašim potřebám."). Matches
   the .edt-tags-section__intro / .edt-dest-section__intro treatment. */
.edt-program-tyden__intro {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	max-width: 720px;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.edt-program-tyden__row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--wp--preset--spacing--50);
	padding: 20px 4px;
	border-top: 1px solid var(--wp--custom--border--subtle);
}

.edt-program-tyden__row:last-child {
	border-bottom: 1px solid var(--wp--custom--border--subtle);
}

.edt-program-tyden__day {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.edt-program-tyden__desc {
	font-size: 15px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
}

.edt-program-tyden__desc strong,
.edt-program-tyden__desc b {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   12. Zaměření tags / pills
   ========================================================================== */

/* Real markup (blocks/zamereni-tags.php): <ul class="edt-tags"><li
   class="edt-tag">…</li></ul> — needs a list-style reset. */
.edt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .edt-hero-product__badge (blocks/hero-product.php, #81) is the same pill —
   the language marker above a product H1 — so it shares the treatment rather
   than inventing a second pill; only the stacking margin is its own. */
.edt-tag,
.edt-hero-product__badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--custom--border--strong);
	border-radius: var(--wp--custom--radius--pill);
	padding: 5px 13px;
	font-size: 12.5px;
	color: var(--edt-text-secondary);
	white-space: nowrap;
}

.edt-hero-product__badge {
	margin: 0 0 14px;
}

/* Lead sentence between the section h2 and the card grid (mockup). */
.edt-tags-section__intro {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
	margin: 0;
}

/* Zaměření cards grid (Medical / Business / Culture / Art style tiles) */
.edt-zamereni-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.edt-zamereni-card {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
	cursor: pointer;
	transition:
		transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-zamereni-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgb(28 49 68 / 12%);
	border-color: var(--wp--custom--border--strong);
}

.edt-zamereni-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--normal);
	color: var(--wp--preset--color--contrast);
	margin: 0 0 8px;
}

.edt-zamereni-card p {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 0;
}

/* ==========================================================================
   13. Místo konání / zázemí
   ========================================================================== */

.edt-misto {
	display: block;
}

.edt-misto__text {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
}

.edt-misto__euta {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--50);
	text-decoration: none;
}

.edt-misto__euta img {
	display: block;
	height: 52px;
	width: auto;
}

/* EUTA logo keeps its slot as a „Logo EUTA" chip until the asset lands (#22),
   same shape as the o-nás chip in §33. */
.edt-misto__euta .edt-img-fallback {
	width: 170px;
	height: 52px;
	min-height: 0;
	padding: 6px;
	gap: 6px;
	flex-direction: row;
}

.edt-misto__euta .edt-img-fallback::before {
	font-size: 1.125rem;
}

.edt-misto__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: var(--wp--preset--spacing--60);
}

/* Two framed photo slots (blocks/misto-konani.php) — the frame renders with
   or without an upload so the section keeps the mockup's 280px height. The
   mockup insets this frame tighter than the hero default (12/44 vs 14/48). */
.edt-misto__slot {

	height: 280px;
	border-radius: var(--wp--custom--radius--sm);
}

.edt-misto__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cream band shell + promoted opening <strong> heading (same convention as
   .edt-financovani--dark: the wysiwyg's first bold line is the section H2). */
.edt-misto {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	padding: 40px 36px;
}

/* „Místo konání" card above the week table (blocks/misto-konani-pre.php) —
   orange-outlined card with a floating pill badge, per the kurzové mockups. */
.edt-misto-pre__card {
	position: relative;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	padding: 28px;
	margin-top: var(--wp--preset--spacing--40);
}

.edt-misto-pre__badge {
	position: absolute;
	top: -13px;
	left: 24px;
	margin: 0;
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	padding: 4px 14px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	line-height: 1.4;
}

.edt-misto-pre__badge a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.edt-misto-pre__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.edt-misto-pre__text {
	font-size: 14.5px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin-top: 10px;
}

.edt-misto-pre__text :last-child {
	margin-bottom: 0;
}

.edt-misto__text > p:first-child > strong:only-child {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ==========================================================================
   14. Destination cards
   ========================================================================== */

.edt-dest-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* Exactly three cards (Erasmus "Tři cesty") → one 3-up row, featured card
   centered, instead of a 2 + 1 orphan. */
.edt-dest-cards:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edt-dest-section__intro {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	max-width: 720px;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
}

/* Cream note closing the destinace grid (mockup stínování). */
.edt-dest-section__note {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--md);
	padding: 16px 20px;
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: 14.5px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
}

.edt-dest-section__note strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Card internals (Erasmus KA cards / OPJAK variants — QA 2026-08-05) */
.edt-dest-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--wp--preset--spacing--40);
}

.edt-dest-card__chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: rgb(255 97 36 / 12%);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--normal);
}

.edt-dest-card__qualifier {
	font-family: var(--wp--preset--font-family--display);
	font-size: 11.5px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.edt-dest-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--40);
}

.edt-dest-card__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--edt-text-secondary);
	white-space: nowrap;
}

.edt-dest-card__checks {
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--40);
	font-size: 0.875rem;
	color: var(--edt-text-secondary);
}

.edt-dest-card .edt-product-card__arrow {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--40);
}

/* Funding split hero: chip row under the lead (KA řada). */
.edt-hero-funding__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--40);
}

.edt-dest-card {
	position: relative;
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
}

.edt-dest-card--featured {
	border: 2px solid var(--wp--preset--color--accent);
}

/* Shared floating pill badge — .edt-dest-card__badge (destination-cards.php),
   .edt-badge (financovani-home.php's featured card) and, since #84,
   .edt-product-card__badge (edutours_render_product_card()'s optional
   `badge_pill`) render identically. The product card positions it differently
   — see the override right below. */
.edt-dest-card__badge,
.edt-badge,
.edt-product-card__badge {
	position: absolute;
	top: -13px;
	left: 24px;
	margin: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: var(--wp--custom--radius--pill);
}

/* The dest-card pill hangs OVER the card's top border (top: -13px). A product
   card lives in a scroll track with `overflow` on both axes (§46), where a pill
   outside the card box would be clipped — so this one sits inside, over the
   photo slot. z-index because .edt-product-card__media is itself positioned and
   comes later in the DOM. */
.edt-product-card__badge {
	top: 16px;
	left: 16px;
	z-index: 2;
}

/* Containing block for the pill, and ONLY for cards that carry one — no other
   card gains a positioned ancestor it did not have before (:has is already the
   theme's idiom, cf. .edt-dest-cards:has(> :nth-child(3):last-child)). */
.edt-product-card:has(> .edt-product-card__badge) {
	position: relative;
}

/* Real markup (blocks/destination-cards.php): bare <h3>/<p> inside
   .edt-dest-card, not __title/__desc sub-classes. */
.edt-dest-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 8px;
}

.edt-dest-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--sm);
	margin-bottom: var(--wp--preset--spacing--40);
}

.edt-dest-card p {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 0;
}

/* -- 14b. Country groups + partner-school cards (issue #72) ----------------
   The revised Stínování mockup replaces the flat destinace grid with one
   group per country: heading (anchor target for /programy/stinovani/#finsko
   and friends), an intro line, and a 2-up grid of partner-school cards.
   A destinace row renders this shape as soon as its nested `schools`
   repeater is filled; the five other products keep the flat cards above.
   Type deliberately reuses the shipped .edt-dest-card scale (D-020) rather
   than the mockup's own px values. */

/* Decorative dashed rule with an end dot, drawn once above the destinace
   section — the revised Stínování mockup uses it to separate the „O programu"
   prose from the country list. Scoped with :has() so only the group layout
   gets it (same :has() technique as the 3-up card rule above). */
.edt-dest-section:has(.edt-dest-group)::before {
	content: "";
	display: block;
	height: 12px;
	margin-bottom: var(--wp--preset--spacing--60);
	background:
		radial-gradient(circle at calc(100% - 6px) 50%, var(--wp--preset--color--accent) 0 4.2px, transparent 4.3px) no-repeat,
		repeating-linear-gradient(to right, var(--wp--preset--color--accent) 0 9px, transparent 9px 17px) left center / calc(100% - 22px) 2.4px no-repeat;
}

.edt-dest-group + .edt-dest-group,
.edt-dest-cards + .edt-dest-group {
	margin-top: var(--wp--preset--spacing--60);
}

.edt-dest-group__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	/* Anchor targets sit under no sticky header, but a scroll cushion keeps
	   the country heading off the viewport edge on deep links. */
	scroll-margin-top: var(--wp--preset--spacing--60);
}

.edt-dest-group__intro {
	font-size: 0.9375rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 10px 0 0;
}

.edt-school-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

.edt-school-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
	overflow: hidden;
}

/* Photo bleeds to the card's top corners (mockup negative-margin slot). */
.edt-school-card__media {
	height: 170px;
	margin: calc(-1 * var(--wp--preset--spacing--50)) calc(-1 * var(--wp--preset--spacing--50)) 4px;
	border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
	overflow: hidden;
}

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

/* The shared slot is sized for full-width media (min-height 240) — inside the
   170px card header it has to shrink, and the corners are clipped by the
   media wrapper. Same treatment as the OPJAK variant cards (§36). */
.edt-school-card__media .edt-img-fallback {
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border-radius: 0;
}

.edt-school-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.edt-school-card__meta {
	font-size: 0.8125rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 0;
}

.edt-school-card__type {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.edt-school-card__desc {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 0;
}

/* One ✓ per line inside the card, unlike the two-column page-level lists.
   The compound selector is load-bearing: .edt-checklist (§16) declares
   `grid-template-columns: 1fr 1fr` LATER in this file at the same (0,1,0)
   specificity, so a bare .edt-school-card__checks lost the cascade and this
   rule never once took effect. The card is 2-up inside the product column, so
   two columns meant ~144px each at 820 and still only ~190px at 1440, where
   every item wrapped to three or four lines with the ✓ stranded from its
   text. */
.edt-checklist.edt-school-card__checks {
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	font-size: 0.875rem;
}

/* ==========================================================================
   15. Financování block
   ========================================================================== */

/* Two real shapes: the product-page ACF block (blocks/financovani-block.php)
   is just <section class="edt-section edt-financovani"><div
   class="edt-financovani__text">wysiwyg</div>{stat-tiles}</section>; the
   homepage pattern (patterns/financovani-home.php) adds
   .edt-financovani--home with an eyebrow/h2/p + .edt-financovani__cards
   (wp:columns) grid of .edt-financovani__card. .edt-financovani--dark is a
   reusable dark-card variant not currently wired to any template — kept
   available. */
.edt-financovani {
	position: relative;
	overflow: hidden;
}

.edt-financovani__text {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
}

.edt-financovani__text :last-child {
	margin-bottom: 0;
}

.edt-financovani__text + .edt-stat-tiles {
	margin-top: var(--wp--preset--spacing--60);
}

.edt-financovani--dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: 44px 40px;
}

.edt-financovani--dark .edt-eyebrow {
	color: var(--wp--preset--color--gold);
}

.edt-financovani__grid,
.edt-financovani__cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

.edt-financovani__card {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: 36px 32px;
	background: var(--wp--preset--color--base);
	position: relative;

	/* Align card internals across the row (Vik 2026-08-05): columns stretch
	   to equal height; flex column + margin-top:auto on the first ✓ item
	   pins every card's checkmark group to the same bottom edge. */
	display: flex;
	flex-direction: column;
}

/* 15px after the description text, before the checkmarks (Vik) — the auto
   margin above can only grow this gap, never shrink it. */
.edt-financovani__card > p.wp-block-paragraph:not(.edt-check-item):not(.edt-badge) {
	padding-bottom: 15px;
}

.edt-financovani__card > p:not(.edt-check-item) + .edt-check-item {
	margin-top: auto;
}

/* The floating badge is position:absolute, but WP's flow block-gap rule
   (> * + *) still counts it as a sibling — without this, the featured
   card's title starts a block-gap lower than its neighbours'. */
.edt-financovani__card > .edt-badge + * {
	margin-block-start: 0;
}

.edt-financovani__card--featured {
	border: 2px solid var(--wp--preset--color--accent);
}

/* Pill chips closing the navy band (kurzy / mobility / stínování mockups). */
.edt-financovani__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--wp--preset--spacing--50);
}

.edt-financovani__chip {
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 18px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--normal);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.edt-financovani--dark .edt-financovani__card {
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 18%);
	color: var(--wp--preset--color--base);
}

.edt-financovani__card-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.edt-financovani--dark .edt-financovani__card-title {
	color: var(--wp--preset--color--base);
}

.edt-financovani__card-desc {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 12px 0 20px;
}

.edt-financovani--dark .edt-financovani__card-desc {
	color: rgb(255 255 255 / 82%);
}

/* Product pages seed the section heading as the wysiwyg's opening
   <p><strong>…</strong></p> (the field group has no heading slot) — promote
   it visually to a display heading inside the dark band. */
.edt-financovani--dark .edt-financovani__text {
	color: rgb(255 255 255 / 85%);
}

.edt-financovani--dark .edt-financovani__text a {
	color: var(--wp--preset--color--base);
}

/* Stat tiles inside the dark band. blocks/financovani-block.php has always
   rendered them, but no product filled `stat_tiles` until „Stáže ve firmách"
   (#80, 2026-08-19) — and the shared .edt-stat-tile__caption is
   `--contrast`, i.e. the band's own navy, so the captions were invisible on
   first render. Same 85% white the band's prose uses; the accent numbers
   already read fine. Scoped to --dark, so /erasmus/ and /opjak/ (light
   backgrounds, own sizes in §33c/§39) are untouched. */
.edt-financovani--dark .edt-stat-tile__caption {
	color: rgb(255 255 255 / 85%);
}

.edt-financovani--dark .edt-financovani__text > p:first-child > strong:only-child {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Decorative travel-route SVG overlay used inside financovani/footer/hero-router dark sections */
.edt-route-deco {
	position: absolute;
	inset: 0;
	opacity: 0.18;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ==========================================================================
   16. Checklist / co je v ceně (also used for benefits, jistoty)
   ========================================================================== */

/* Two real shapes: blocks/co-je-v-cene.php renders a real
   <ul class="edt-checklist"><li class="edt-checklist__item">…</li></ul>
   (needs the grid + a list-style reset); patterns/flagship.php reuses the
   same .edt-checklist class on a wp:columns block wrapping .edt-check-item
   paragraphs (grid still applies fine, list-style reset is a no-op there). */
.edt-checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Same size as running text (Vik 2026-08-05) — don't scale the ✓ lists up. */
	font-size: inherit;
	color: var(--wp--preset--color--contrast);
}

.edt-checklist__item {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
}

/* Caveat line under the ✓ list (revised stínování: „U Německa a Slovenska
   doprava autobusem či vlakem z ČR…"). */
.edt-checklist-section__note {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: var(--wp--preset--spacing--40) 0 0;
}

.edt-checklist__item::before {
	content: "\2713";
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	flex-shrink: 0;
}

/* Real markup (patterns/flagship.php, patterns/financovani-home.php):
   <p class="edt-check-item"><span class="edt-check-mark">✓</span> …</p>
   Used both inside .edt-checklist columns and standalone in
   .edt-financovani__card. */
.edt-check-item {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	margin: 0;
	/* Same size as running text everywhere (Vik 2026-08-05) — inherit the
	   body size instead of pinning a preset. */
	font-size: inherit;
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--contrast);
}

.edt-check-item + .edt-check-item {
	margin-top: 8px;
}

.edt-check-mark {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	flex-shrink: 0;
}

.edt-flagship .edt-check-mark {
	color: var(--wp--preset--color--gold);
}

/* ==========================================================================
   17. Calculator (OPJAK)
   ========================================================================== */

/* Real DOM (blocks/calculator-opjak.php + assets/js/calculator.js):
   <section class="edt-calc" data-calc-varianta="…">
     <div class="edt-calc__mount">
       [.edt-calc-row (pills row, doma only)]
       .edt-calc-row (students stepper)
       [.edt-calc-row (teachers stepper, spanelsko only)]
       .edt-calc-row (doplatek)
       .edt-calc__outputs > .edt-calc-output × 2-3
       .edt-calc__note
       .edt-calc__share > .edt-calc__share-btn + .edt-calc__share-links > a × 2
     </div>
     <noscript>…</noscript>
   </section> */

.edt-calc {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) 32px;
}

.edt-calc__head {
	margin-bottom: var(--wp--preset--spacing--50);
}

.edt-calc__head h2 {
	font-size: 1.375rem;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.edt-calc__intro {
	font-size: 0.9375rem;
	color: var(--edt-text-secondary);
	margin: 0;
}

/* Orange benefit band under the calculator (mockup "15:1" banner). */
.edt-benefit-band {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.edt-benefit-band__stat {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1;
	flex: 0 0 auto;
}

.edt-benefit-band__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--normal);
	margin: 0;
}

.edt-benefit-band__sub {
	font-size: 0.875rem;
	color: rgb(255 255 255 / 85%);
	margin: 4px 0 0;
}

.edt-calc noscript p {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.edt-calc-row {
	border: 1px solid rgb(28 49 68 / 15%);
	border-radius: var(--wp--custom--radius--md);
	padding: 18px 20px;
}

.edt-calc-row + .edt-calc-row {
	margin-top: var(--wp--preset--spacing--40);
}

/* „Počet žáků" + „Počet pedagogů" side by side (mockup) — assets/js/
   calculator.js only emits this wrapper on the variant that has both. */
.edt-calc__steppers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

.edt-calc__steppers + .edt-calc-row {
	margin-top: var(--wp--preset--spacing--50);
}

.edt-calc__steppers .edt-calc-row + .edt-calc-row {
	margin-top: 0;
}

.edt-calc-row__label {
	font-weight: 600;

	/* Mockup 15px Maitree — the 1.125rem default read a step too loud beside
	   the 36px stepper numeral. */
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.edt-calc-row__control {
	margin-top: var(--wp--preset--spacing--30);
}

.edt-calc-row__control--doplatek {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

/* Mockup .m-calcrow: label, number input and the running total sit on ONE
   line; stacking the control under the label cost ~50px of card height. */
.edt-calc-row:has(> .edt-calc-row__control--doplatek) {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: 16px 20px;
}

.edt-calc-row:has(> .edt-calc-row__control--doplatek) .edt-calc-row__label {
	flex: 1;
}

.edt-calc-row:has(> .edt-calc-row__control--doplatek) .edt-calc-row__control {
	margin-top: 0;
}

/* Live „N zdarma, M za příplatek" note on the teachers row (mockup). */
.edt-calc-row__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.edt-calc-row__note {
	font-weight: 400;
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
}

.edt-calc__share-label {
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
}

.edt-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.edt-stepper__btn {
	width: 38px;
	height: 38px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(28 49 68 / 25%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	font-size: 1.25rem;
	line-height: 1;
	user-select: none;
	background: transparent;
	transition:
		background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-stepper__btn:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.edt-stepper__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	color: var(--wp--preset--color--accent);
	line-height: 1;
}

.edt-calc-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.edt-calc-pill {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 13.5px;
	padding: 9px 18px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(28 49 68 / 22%);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-calc-pill:hover {
	border-color: var(--wp--custom--border--strong);
}

.edt-calc-pill--active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

.edt-calc__doplatek-input {
	width: 110px;
	border: 1px solid rgb(28 49 68 / 25%);
	border-radius: var(--wp--custom--radius--sm);
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-align: right;
}

.edt-calc__doplatek-total {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.edt-calc__outputs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

/* Španělsko renders 3 tiles, Doma renders 2 — let the grid reflow instead of
   forcing empty tracks. */
.edt-calc__outputs:has(.edt-calc-output:nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
}

.edt-calc-output {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--md);
	padding: 20px;
}

.edt-calc-output--dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.edt-calc-output__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	color: var(--wp--preset--color--contrast);
	line-height: 1;
}

.edt-calc-output--dark .edt-calc-output__value {
	color: var(--wp--preset--color--gold);
}

.edt-calc-output__label {
	font-size: 12.5px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 8px;
}

.edt-calc-output--dark .edt-calc-output__label {
	color: rgb(255 255 255 / 70%);
}

.edt-calc__note {
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--40);
}

.edt-calc__share {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.edt-calc__share-btn {
	flex: 1;
	text-align: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.125rem;
	padding: 15px;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
	box-shadow: var(--wp--custom--shadow--orange-glow);
	transition:
		background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-calc__share-btn:hover {
	background: var(--wp--preset--color--accent-warm);
	transform: translateY(-2px);
}

.edt-calc__share-btn:active {
	background: var(--edt-orange-press);
	transform: translateY(0);
}

.edt-calc__share-links {
	display: flex;
	align-items: center;
	gap: 8px;
}

.edt-calc__share-link {
	width: 38px;
	height: 38px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(28 49 68 / 20%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--accent);
	transition:
		background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-calc__share-link::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentcolor;
	-webkit-mask: var(--edt-calc-share-icon) no-repeat center / contain;
	mask: var(--edt-calc-share-icon) no-repeat center / contain;
}

.edt-calc__share-link--mail {
	--edt-calc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'%3E%3C/rect%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'%3E%3C/path%3E%3C/svg%3E");
}

.edt-calc__share-link--whatsapp {
	--edt-calc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'%3E%3C/path%3E%3C/svg%3E");
}

.edt-calc__share-link--pdf {
	/* Download-to-document glyph, same 24px grid and stroke weight as the mail
	   and WhatsApp icons so the three read as one set (#68). */
	--edt-calc-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6z'%3E%3C/path%3E%3Cpath d='M15 2v4a2 2 0 0 0 2 2h4'%3E%3C/path%3E%3Cpath d='M12 11v5'%3E%3C/path%3E%3Cpath d='m9.5 14 2.5 2.5 2.5-2.5'%3E%3C/path%3E%3C/svg%3E");
}

.edt-calc__share-link:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   18. Enquiry rail
   ========================================================================== */

.edt-enquiry-rail {
	position: sticky;
	top: 96px;
	width: 380px;
}

/* Real DOM (blocks/enquiry-rail.php): <aside class="edt-enquiry-rail">
   <div class="edt-enquiry-card"><h2>…</h2>[edutours_form shortcode]
   <div class="edt-enquiry-rail__contact">tel + email links</div></div></aside>
   — no __title/__intro/__row sub-classes; the form owns its own layout
   (assets/css/edutours-forms.css). */
.edt-enquiry-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: 30px 28px;
	box-shadow: var(--wp--custom--shadow--lg);
}

.edt-enquiry-card h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.edt-enquiry-rail__intro {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: -8px 0 var(--wp--preset--spacing--40);
}

/* Small ✓ reassurance list under the form (mockup "Kalkulace zdarma" rail).
   Overrides the checklist's 2-col grid — the rail is too narrow for it. */
.edt-enquiry-rail__trust {
	margin-top: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
	gap: 8px;
}

.edt-enquiry-rail__trust .edt-checklist__item,
.edt-enquiry-rail__trust.edt-checklist li {
	font-size: 0.8125rem;
	color: var(--edt-text-secondary);
}

/* „Sdílet s kolegy" row under the submit (mockup rail). */
.edt-enquiry-rail__share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.edt-enquiry-rail__share-label {
	flex: 1;
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
}

.edt-icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border: 1px solid rgb(28 49 68 / 20%);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--accent);
	transition:
		background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-icon-link:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* The ✓ list closes the white card with a hairline above it (mockup). */
.edt-enquiry-rail__trust {
	padding-top: 18px;
	border-top: 1px solid var(--wp--custom--border--subtle);
}

.edt-enquiry-rail__contact-label {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* Mockup: 17px phone over a 14px muted e-mail. */
.edt-enquiry-rail__contact a {
	font-size: 1.0625rem;
}

.edt-enquiry-rail__contact a.edt-enquiry-rail__contact-email {
	font-size: 0.875rem;
	color: var(--edt-text-secondary);
}

.edt-enquiry-rail__contact,
.edt-enquiry-card__contact {
	margin-top: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--md);
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.edt-enquiry-rail__contact a,
.edt-enquiry-card__contact a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.edt-enquiry-rail__contact a:hover,
.edt-enquiry-card__contact a:hover {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   19. Reference slider
   ========================================================================== */

/* Real DOM (blocks/reference-slider.php + assets/js/slider.js):
   <section class="edt-reference" data-edt-slider>
     .edt-reference__head (eyebrow + h2)
     .edt-reference__track > .edt-reference__card (blockquote.__quote, .__name, .__org) × N
     button.edt-reference__arrow--prev   ┐
     .edt-reference__dots                ├ appended by slider.js as direct
     button.edt-reference__arrow--next  ┘  siblings of .track, in this order
   </section>
   slider.js pages via `track.style.transform = translateX(-(page*100)%)`,
   which requires the track's own box to have a *fixed* width (so the
   percentage resolves against a stable value) and each card to be exactly
   `1 / perView` of that width — a CSS grid (wrapping into rows) cannot do
   this; it must be a non-wrapping flex row. */

.edt-reference {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);

	/* Full-bleed breakout of the constrained parent, same recipe as
	   .edt-trust-strip — ACF blocks have align support disabled, so without
	   this the section gets boxed to contentSize (1200px) and its heading
	   lands 120px right of every pattern-based sibling section. */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.edt-reference__head {
	grid-column: 1 / -1;

	/* NOT a defence against a "stale global-styles DB snapshot" — the #18
	   audit (2026-08-19) proved this install has never had one
	   (`wp_global_styles` count 0, get_user_data() `{"version":3}`; the real
	   #18 cause was theme.json missing `defaultFontSizes`, fixed in 7cb98b6 —
	   see the tombstone in §0). Checked again 2026-08-26: the emitted
	   global-styles stylesheet contains no `text-align` declaration at all,
	   so nothing there can centre this. Kept as an explicit declaration
	   because the actual centring source was never re-identified once the
	   diagnosis collapsed. Removal candidate — but only after a browser check
	   confirms the head stays left-aligned without it. */
	text-align: left;
}

/* The VIEWPORT clips, the TRACK moves — they must not be the same element.
   An element with `overflow: hidden` carries its clip rect with it when it is
   transformed, so the old single-element track clipped away exactly the card
   it had just paged to: every page but the first rendered blank. Fixed
   2026-08-22 (reported on product pages, but it broke every paging state,
   including the 1-up mobile pager on the routers). */
.edt-reference__viewport {
	grid-column: 1 / -1;
	overflow: hidden;
	width: 100%;
}

.edt-reference__track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	transition: transform var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out);
}

.edt-reference__card {
	flex: 0 0 calc((100% - (2 * var(--wp--preset--spacing--50))) / 3);
	margin-right: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
}

/* Mockup: quotes are wrapped in Czech quotation marks („…"), no accent bar. */
/* 15px/1.65 — the shared Reference mockup component uses this at every
   viewport and on every page that imports it (homepage, routers, catalog,
   funding). Staging ran 19px/1.75, which was the whole of the reference
   band's +62px @1440 / +87px @390 overshoot (#52; measured, not guessed).
   The product-page single-quote variant keeps its own larger scale below. */
.edt-reference__quote {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--wp--preset--color--contrast);
}

.edt-reference__quote::before {
	content: "„";
}

.edt-reference__quote::after {
	content: "“";
}

.edt-reference__name {
	margin-top: var(--wp--preset--spacing--40);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.edt-reference__org {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.edt-reference__arrow {
	/* Row 3, under the track — the controls were pinned to row 2, which shoved
	   the full-width track down to row 3 and put the arrows/dots ABOVE the
	   quote card. Only visible where the arrows are (mobile, ≤768). (#52) */
	grid-row: 3;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(28 49 68 / 25%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	transition:
		background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-reference__arrow[hidden] {
	display: none;
}

.edt-reference__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.edt-reference__arrow:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.edt-reference__arrow--prev {
	grid-column: 1;
}

.edt-reference__arrow--next {
	grid-column: 3;
}

.edt-reference__dots {
	grid-row: 3;
	grid-column: 2;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.edt-reference__dots[hidden] {
	display: none;
}

.edt-reference__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: rgb(28 49 68 / 20%);
	padding: 0;
	border: none;
	cursor: pointer;
	transition: all var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-reference__dot--active {
	width: 22px;
	background: var(--wp--preset--color--accent);
}

/* Product pages: one large quote per page (mockup) — data-edt-per-view="1"
   pins the JS paging; margin-right must be 0 so translateX(-100%) steps
   land exactly on card edges. */
/* Mockup chrome: the quote is a LEFT-aligned full-width pull-quote with an
   orange rule down its left edge — no card, no centering — and the arrows +
   dots sit as one centered cluster under it (they used to sit at the two
   outer edges of the band). */
.edt-reference--single .edt-reference__card {
	flex: 0 0 100%;
	margin-right: 0;
	border: none;
	padding: 0;
	text-align: left;
}

/* Off-page slides contribute no height, so the band measures the ACTIVE
   quote instead of the longest hidden one (assets/js/slider.js marks them). */
.edt-reference--single .edt-reference__card--offpage {
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.edt-reference--single .edt-reference__quote {
	font-size: 1.1875rem;
	line-height: var(--wp--custom--line-height--loose);
	border-left: 4px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--50);
	margin-top: 20px;
}

.edt-reference--single .edt-reference__name {
	display: inline-block;
	margin-top: 18px;
	padding-left: 28px;
}

.edt-reference--single .edt-reference__org {
	display: inline;
}

.edt-reference--single .edt-reference__org::before {
	content: " · ";
}

.edt-reference--single {
	grid-template-columns: 1fr auto 1fr;
	gap: 28px var(--wp--preset--spacing--50);
}

.edt-reference--single .edt-reference__arrow--prev {
	justify-self: end;
}

.edt-reference--single .edt-reference__arrow--next {
	justify-self: start;
}

.edt-reference--single .edt-reference__arrow {
	width: 40px;
	height: 40px;
}

/* ==========================================================================
   20. FAQ accordion
   ========================================================================== */

.edt-faq {
	display: flex;
	flex-direction: column;
}

.edt-faq details {
	border-top: 1px solid var(--wp--custom--border--subtle);
	padding: 22px 4px;
	transition: background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-faq details:last-child {
	border-bottom: 1px solid var(--wp--custom--border--subtle);
}

.edt-faq details:hover {
	background: var(--wp--preset--color--cream);
}

.edt-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
}

.edt-faq summary::-webkit-details-marker {
	display: none;
}

.edt-faq summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-faq details[open] summary::after {
	transform: rotate(45deg);
}

.edt-faq__answer,
.edt-faq__a {
	font-size: 14.5px;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
	margin-top: 10px;
}

/* ==========================================================================
   21. Cross-sell / product card
   ========================================================================== */

/* Real DOM (blocks/cross-sell.php, blocks/program-grid.php,
   edutours_render_product_card() in inc/blocks.php):
   <section class="edt-section edt-cross-sell"><h2>…</h2>
     <div class="edt-cross-sell__grid"> .edt-product-card × N </div></section>
   <section class="edt-section edt-program-grid"> .edt-filter-bar…
     <div class="edt-product-card-grid"> .edt-product-card × N </div></section>
   Both grids share the same 3-up/1-col card layout. */
.edt-cross-sell__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}

/* Catalog (Programy): 2-up grid of vertical cards (mockup). */
.edt-product-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
}

/* Router pages (Pro učitele / Pro žáky): one full-width horizontal card per
   program — image left, content right, chips + CTA on one closing row
   (mockup: 420px media column, 36px/40px body padding, no card padding). */
.edt-program-grid--router .edt-product-card-grid {
	grid-template-columns: minmax(0, 1fr);
}

.edt-program-grid--router .edt-product-card {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	align-items: stretch;
	padding: 0;
}

.edt-program-grid--router .edt-product-card__media {
	height: auto;
	min-height: 300px;
}

.edt-program-grid--router .edt-product-card__body {
	padding: 36px 40px;
	justify-content: space-between;
	gap: 20px;
}

/* Chips left, CTA right on one baseline (mockup); the catalog card keeps the
   stacked order (chips above a right-aligned button). */
.edt-program-grid--router .edt-product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
}

.edt-program-grid--router .edt-product-card__chips {
	margin: 0;
}

.edt-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	padding: 0;
	transition:
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-product-card:hover {
	border-color: var(--wp--custom--border--strong);
	box-shadow: 0 12px 30px rgb(28 49 68 / 12%);
	transform: translateY(-3px);
}

/* #84: the flagship card's accent border, restored (Vik 2026-08-20).
   The curated `acf/destination-cards` section this carousel replaced painted it
   through `.edt-dest-card--featured`, and 56a7f13 dropped it reasoning that "a
   taller card inside a scroll-snap track fights its own snap points". That was
   never what the class did — it set a border and nothing else. Cards here are
   `flex: 0 0 calc(…)` under the global `border-box`, so 1px → 2px consumes
   padding, not width: no snap point and no neighbour moves.

   Keyed off the badge instead of a new field, because `badge_pill` is already
   opt-in per placement — only the carousel asks for it, so /programy/ and the
   routers keep the plain card with no further guard. Same `:has` selector as
   the position rule up in the badge section; it lives HERE, after :hover,
   because the two match at equal specificity and source order decides — up
   there the accent would vanish under the pointer. The lift and shadow still
   fire, which is the behaviour the curated card had. */
.edt-product-card:has(> .edt-product-card__badge) {
	border: 2px solid var(--wp--preset--color--accent);
}

/* Card body: the padded text column. Split out of the card itself (#52) so
   the media can sit flush against the card's rounded edge on both variants. */
.edt-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	padding: var(--wp--preset--spacing--50);
}

.edt-product-card__media {
	display: block;
	position: relative;
	height: 200px;
	margin: 0;
}

.edt-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photo yet → the mockup's framed LIGHT slot carrying its caption
   („Foto: stínování — hospitace ve třídě"), not a brand-mark placeholder. */
.edt-product-card__media--placeholder {
	background: var(--wp--preset--color--cream);
}

.edt-product-card__media .edt-img-fallback {
	min-height: 0;
	height: 100%;
	border-radius: 0;
	padding: var(--wp--preset--spacing--40);
}

.edt-product-card__media .edt-img-fallback::before {
	font-size: 1.75rem;
}

.edt-product-card__body > .edt-eyebrow {
	margin: 0 0 8px;
}

.edt-product-card__body > .edt-eyebrow a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.edt-product-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 8px;

	/* Long Czech words wrap whole, never mid-word ("PROJEKTOV-\nÁ"). */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.edt-product-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Router mockups size the horizontal-card titles as display headings
   (32px → 26px at theme scale); the catalog keeps 24px. */
.edt-program-grid--router .edt-product-card__title {
	font-size: 1.625rem;
}

.edt-product-card__excerpt {
	font-size: 14.5px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	flex: 1;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.edt-product-card__arrow {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.edt-product-card__foot {
	margin-top: auto;
}

.edt-product-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.edt-product-card__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid rgb(28 49 68 / 20%);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 12.5px;
	font-weight: 400;
	color: var(--edt-text-secondary);
	white-space: nowrap;
}

/* Mockup CTA is a sentence-case body-font button („Detail programu →"), not
   the uppercase display treatment — Cera Stencil has no arrow glyph, which is
   what rendered the trailing "→" as a stray "+" on staging (#52). */
.edt-product-card__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	padding: 13px 28px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: var(--wp--custom--tracking--normal);
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 8px 28px rgb(255 97 36 / 28%);
	transition: background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-product-card__btn:hover {
	background: var(--edt-orange-press);
	color: var(--wp--preset--color--base);
}

/* Cream cross-sell band variant (mockup: contextual headline + outline
   button right; blocks/cross-sell.php renders it when a headline is set). */
.edt-cross-sell--band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	flex-wrap: wrap;
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
}

.edt-cross-sell__copy h2 {
	/* Mockup band heading is 26px (below the H2 role) → 24px at theme scale. */
	font-size: 1.5rem;
	margin: 0 0 8px;
}

.edt-cross-sell__copy p:not(.edt-eyebrow) {
	font-size: 0.9375rem;
	color: var(--edt-text-secondary);
	margin: 0;
	max-width: 560px;
}

.edt-cross-sell__action {
	flex: 0 0 auto;
}

/* ==========================================================================
   22. CTA band
   ========================================================================== */

/* Two real shapes share `.edt-cta-band`:
   - ACF block (blocks/cta-band.php), used on product/router/funding/o-nas —
     flat: <section class="edt-section edt-cta-band"><h2 class="edt-cta-band__headline">
     …</h2><div class="edt-cta-band__actions"><button data-edt-modal-open>…</button></div></section>
   - Homepage pattern (patterns/cta-band.php), with a form —
     <section class="edt-section edt-cta-band"><div class="edt-cta-band__inner">
     (wp:columns)<div class="edt-cta-band__headline">(wp:column) h2+p+.__contact</div>
     <div class="edt-cta-band__form">(wp:column) [edutours_form]</div></div></section>
   `.edt-cta-band` itself stays a simple flex row so either shape (2 direct
   children, or 1 `.__inner` wrapper) lays out correctly without extra rules. */
.edt-cta-band {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.edt-cta-band h2,
.edt-cta-band p {
	color: var(--wp--preset--color--base);
}

.edt-cta-band h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.75rem;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	max-width: 720px;
}

/* ACF-block headline is the h2 itself; pattern headline is a column wrapping
   h2+p+.__contact — flex-basis works for both since either is a lone/paired
   direct child of .edt-cta-band or .edt-cta-band__inner. */
.edt-cta-band__headline {
	flex: 1 1 420px;
}

.edt-cta-band__contact {
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 2;
}

.edt-cta-band__contact a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.edt-cta-band__actions {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	align-items: center;
	flex: 0 0 auto;
}

/* The ACF block renders a bare <button class="wp-element-button">, so it
   inherits theme.json's elements.button — the SITE default: orange pill,
   body face, 0.875rem. This band's button is navy, uppercase and set in the
   display face, so its chrome is written out here on purpose. It is a design
   override, not a shield: there was never a "stale global-styles snapshot"
   to defend against (#18, 2026-08-19 — `wp_global_styles` count 0; the real
   cause there was theme.json missing `defaultFontSizes`, fixed in 7cb98b6,
   and the tombstone in §0 has the full story). Core emits the theme.json
   button as `:root :where(.wp-element-button, .wp-block-button__link)`,
   specificity (0,1,0), which this two-class selector clears without
   !important. */
.edt-cta-band .wp-element-button {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 16px 34px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	cursor: pointer;
}

.edt-cta-band .wp-element-button:hover {
	background: var(--wp--preset--color--contrast-dark);
}

.edt-cta-band__sub {
	margin-top: 10px;
	font-size: 1rem;
	color: rgb(255 255 255 / 90%);
}

/* justify-content: no-op at desktop (the pill is shrink-to-fit), load-bearing
   at ≤768 where .edt-cta-band__actions goes column/stretch and the pill is
   forced to full column width. The sibling `> * { text-align: center }` there
   centers the <button> but cannot move this one: it is a flex container, so
   its text node is a flex item packed to flex-start. (Vik, 2026-08-14) */
.edt-cta-band__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgb(255 255 255 / 75%);
	border-radius: var(--wp--custom--radius--pill);
	padding: 14px 30px;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.edt-cta-band__phone:hover {
	background: rgb(255 255 255 / 12%);
}

.edt-cta-band__inner {
	flex: 1 1 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--80);
	align-items: center;
}

/* The form column wraps the [edutours_form slug="poptavka-home"] shortcode
   output. Unlike the enquiry-rail/kontakt/modal contexts (whose form is
   double-boxed away in edutours-forms.css), this IS the mockup's white card
   — dimensions below are its exact numbers (item 10). */
.edt-cta-band__form {
	width: 100%;
}

.edt-cta-band__form .edutours-form__form {
	border-radius: var(--wp--custom--radius--lg);
	padding: 36px;
	box-shadow: 0 18px 42px rgb(28 49 68 / 18%);
}

/* Pairs the "name" text field with "email" into one row — email is already
   grid-column:auto by default; scoped here so kontakt's longer form (name +
   school on their own rows) keeps its current layout. */
.edt-cta-band__form .edutours-form__field--text {
	grid-column: auto;
}

/* Navy full-width submit in this context only — kontakt/rail/modal keep the
   site-default orange submit. */
.edt-cta-band .edutours-form__submit {
	background: var(--wp--preset--color--contrast);
}

.edt-cta-band .edutours-form__submit:hover {
	background: var(--wp--preset--color--contrast-dark);
	opacity: 1;
}

/* ==========================================================================
   23. Filter bar / chips
   ========================================================================== */

/* Horizontal header row above the results (mockup): labelled chip groups
   left, result count right. Outer spacing comes from the parent .edt-section. */
.edt-filter-bar {
	display: flex;
	gap: var(--wp--preset--spacing--70);
	align-items: flex-end;
	flex-wrap: wrap;
	padding: 0 0 var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--custom--border--subtle);
}

.edt-filter-bar__block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.edt-filter-bar__group-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.edt-filter-bar__chips,
.edt-filter-bar__group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.edt-chip {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(28 49 68 / 22%);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition:
		border-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-chip:hover {
	border-color: var(--wp--custom--border--strong);
}

.edt-chip--active,
.edt-chip--active:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);

	/* Also on :hover — otherwise .edt-chip:hover's subtle border wins by
	   source order and the active chip loses its navy edge (Agent C, #28). */
	border-color: var(--wp--preset--color--contrast);
}

.edt-filter-bar__count {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	padding-top: 2px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--normal);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.edt-filter-bar__clear {
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: none;
	padding: 0;
}

.edt-filter-bar__clear:hover {
	color: var(--wp--preset--color--accent-warm);
}

/* ==========================================================================
   24. Decision helper ("Rychlé srovnání")
   ========================================================================== */

/* Real DOM (blocks/decision-helper.php, #52): <section class="edt-section
   edt-decision"><div class="edt-decision__band">eyebrow + h2 +
   .edt-decision__grid(.edt-decision__row × N) + .edt-decision__note</div>.
   The mockup wraps the whole comparison in a cream band with white cards. */
.edt-decision__band {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	padding: 44px 40px;
}

.edt-decision__band > .edt-eyebrow {
	margin: 0;
}

.edt-decision__band > h2 {
	margin: 14px 0 28px;
}

.edt-decision__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

.edt-decision__row {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
}

.edt-decision__row h3 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.edt-decision__row p {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 8px 0 12px;
}

.edt-decision__row a {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--normal);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.edt-decision__row a:hover {
	color: var(--wp--preset--color--accent-warm);
}

/* Closing note under the three cards („Všechny formáty jsou podporovanou
   aktivitou Erasmus+ (KA1) — …"). */
.edt-decision__note {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
}

.edt-decision__note strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ==========================================================================
   25. Enquiry modal
   ========================================================================== */

.edt-modal[hidden] {
	display: none;
}

.edt-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--50);

	/* The blocks emit the modal inside a constrained wp:group whose `> *`
	   layout rule caps children at contentSize + auto margins — on a fixed
	   overlay that shrank the scrim to the 1200px column. modal.js reparents
	   the node to <body>; these two guards keep it viewport-wide even before
	   that script runs (or if it ever fails). */
	max-width: none;
	margin: 0;
}

/* Real markup (blocks/enquiry-modal.php): .edt-modal > .edt-modal__scrim +
   .edt-modal__card, siblings — modal.js binds click-to-close on the scrim. */
.edt-modal__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgb(28 49 68 / 60%);
	animation: edt-modal-fade var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-modal__card {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--70);
	width: 520px;
	max-width: 100%;
	max-height: 90vh;
	overflow: auto;
	box-shadow: var(--wp--custom--shadow--xl);
	animation: edt-modal-rise var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-modal__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 32px 6px 0; /* right margin clears the close button */
}

.edt-modal__sub {
	font-size: 14px;
	line-height: 1.55;
	color: var(--edt-text-secondary);
	margin: 0 0 18px;
}

.edt-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	transition:
		color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		background var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-modal__close:hover {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--cream);
}

/* Hidden-type form fields (e.g. poptavka calc_note): JS-populated payload
   rows the user never edits — the wrap still submits while display: none. */
.edutours-form__field--hidden {
	display: none;
}

.edt-modal__calc-note {
	margin-top: 14px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--sm);
	padding: 12px 15px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--edt-text-secondary);
}

.edt-modal__calc-note strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

@keyframes edt-modal-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes edt-modal-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   26. Mobile CTA bar
   ========================================================================== */

.edt-mobile-cta {
	display: none;
}

/* ==========================================================================
   27. Newsletter inline
   ========================================================================== */

.edt-newsletter {
	background: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--base);
}

.edt-newsletter__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.edt-newsletter__intro {
	font-size: 13.5px;
	line-height: var(--wp--custom--line-height--base);
	color: rgb(255 255 255 / 78%);
	margin: 10px 0 var(--wp--preset--spacing--40);
}

.edt-newsletter input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(255 255 255 / 25%);
	background: rgb(255 255 255 / 8%);
	border-radius: var(--wp--custom--radius--sm);
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--base);
}

.edt-newsletter input[type="email"]::placeholder {
	color: rgb(255 255 255 / 60%);
}

.edt-newsletter .wp-element-button {
	width: 100%;
	margin-top: 12px;
}

/* ==========================================================================
   28. Blog — card / category chip / article meta / author box
   ========================================================================== */

.edt-blog-card {
	display: grid;
	grid-template-columns: 300px 1fr;
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	text-decoration: none;
	transition:
		transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-blog-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow--md);
	border-color: var(--wp--custom--border--strong);
}

.edt-blog-card__media {
	position: relative;
	min-height: 210px;
}

.edt-blog-card__body {
	padding: 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.edt-blog-card__meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.edt-blog-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.edt-blog-card__excerpt {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	flex: 1;
}

.edt-blog-card__more {
	font-size: 13.5px;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.edt-category-chip {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgb(255 97 36 / 50%);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
}

.edt-article-meta {
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
}

.edt-author-box {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: 26px 28px;
}

.edt-author-box__photo {
	width: 96px;
	height: 96px;
	border-radius: var(--wp--custom--radius--pill);
	overflow: hidden;
}

/* The portrait arrives at its own aspect ratio (#39 slot 32 is 532×534); the
   frame is a fixed circle, so the image fills it and crops rather than
   overflowing it. Same treatment as the O nás team card. */
.edt-author-box__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edt-author-box__label {
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--display);
}

.edt-author-box__name {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
	margin-top: 4px;
}

.edt-author-box__bio {
	font-size: 13.5px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin-top: 6px;
}

/* ==========================================================================
   29. Stat tiles
   ========================================================================== */

.edt-stat-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.edt-stat-tile {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: 34px 32px;
	text-align: center;
}

.edt-stat-tile__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

.edt-stat-tile__caption {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
	margin-top: var(--wp--preset--spacing--30);
}

/* ==========================================================================
   30. Process steps + RDG connector
   ========================================================================== */

/* Real DOM (patterns/process-steps.php): the grid host is
   .edt-process-steps__grid (a wp:columns block of .edt-step columns), not
   .edt-process-steps itself (the outer alignfull section). */
.edt-process-steps__grid {
	gap: var(--wp--preset--spacing--50);
}

/* ACF-block variant (blocks/process-steps.php, funding pages): the block
   renders eyebrow + h2 + RDG + a .edt-process-steps__row of .edt-step —
   same look as the homepage pattern. */
.edt-process-steps__head {
	margin-bottom: var(--wp--preset--spacing--60);
}

.edt-process-steps__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.edt-step__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	color: var(--wp--preset--color--accent);
	line-height: 1;
}

.edt-step__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
	margin: 14px 0 8px;

	/* Never break mid-word ("administrativ-\na") — long Czech words wrap
	   whole or overflow gracefully. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.edt-step__desc {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
}

/* Funding pages (Erasmus/OPJAK mockups): the steps section is a navy band —
   white H2, gold eyebrow, white step titles, translucent-white descriptions.
   Same panel treatment as .edt-financovani--dark. */
.edt-funding .edt-process-steps {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: 44px 40px;
}

.edt-funding .edt-process-steps .edt-eyebrow {
	color: var(--wp--preset--color--gold);
}

.edt-funding .edt-process-steps h2,
.edt-funding .edt-process-steps .edt-step__title {
	color: var(--wp--preset--color--base);
}

.edt-funding .edt-process-steps .edt-step__desc {
	color: rgb(255 255 255 / 78%);
}

.edt-rdg {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--50);
}

/* The pattern's inner flex row (inline-styled div holding line + dot SVGs)
   must span the section, or the dashed route collapses to content width. */
.edt-rdg > div {
	width: 100%;
}

.edt-rdg--vertical {
	flex-direction: column;
	width: auto;
	height: 100%;
	margin-bottom: 0;
}

/* Generic error helper — kept as a standalone utility. In practice every
   .edt-* form context (.edt-enquiry-card, .edt-modal__card,
   .edt-cta-band__form) renders its fields via the [edutours_form] shortcode,
   whose own component (assets/css/edutours-forms.css → .edutours-form__error)
   owns that styling; this class is available for any block that ever needs
   an inline error message outside that framework. */
.edt-form-error {
	margin-top: 8px;
	font-size: 13px;
	color: #d7141a;
	background: #fdecea;
	border: 1px solid rgb(200 65 43 / 30%);
	border-radius: var(--wp--custom--radius--sm);
	padding: 10px 14px;
}

/* ==========================================================================
   30b. Contact strip (patterns/contact-strip.php) — the "slim" band per
   HANDOFF §3: cream, half the usual section rhythm, so the financování →
   process-steps run doesn't read as a 200px white void.
   ========================================================================== */

.edt-contact-strip {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--cream);
	border-top: 1px solid var(--wp--custom--border--subtle);
	border-bottom: 1px solid var(--wp--custom--border--subtle);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

.edt-contact-strip__invite {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.edt-contact-strip__actions {
	gap: 14px;
	align-items: center;
}

.edt-contact-strip__phone {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.edt-contact-strip__phone a {
	color: inherit;
	text-decoration: none;
}

/* Navy solid, not the site-default orange (item 5 — mockup "Zavoláme Vám
   zpět" is the one non-orange button on the homepage). */
.edt-contact-strip .wp-element-button {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.edt-contact-strip .wp-element-button:hover {
	background: var(--wp--preset--color--contrast-dark);
}

/* ==========================================================================
   31. Motion / reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.wp-element-button:hover,
	.edt-router-card:hover,
	.edt-zamereni-card:hover,
	.edt-product-card:hover,
	.edt-blog-card:hover,
	.edt-stepper__btn:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   32. Single-program two-column layout (.edt-product-layout)
   ========================================================================== */

/* Real DOM (templates/single-program.html):
   <div class="edt-product-layout"><div class="edt-product-layout__main">
   {info-table, program-obsah, zamereni-tags, program-tyden, misto-konani,
   destination-cards, financovani-block, co-je-v-cene, calculator-opjak,
   reference-slider, faq-accordion}
   </div><aside class="edt-enquiry-rail">…</aside></div>
   The rail's own sticky/width rules already live in §18; this section only
   owns the 2-column split. */

/* Full-bleed breakout (trust-strip / o-nás recipe — ACF blocks have align
   support disabled). The mockup product page is a 1440-wide sheet with 64px
   gutters, so its content column runs 860px; boxed to the 1200px contentSize
   the same column measured 636px, which re-wrapped the info-table values to
   two lines, stretched every week row and prose block, and inflated the
   document by ~25% (measured 8396px vs the mockup's 6704px @1440). */
.edt-single-program > .edt-breadcrumb,
.edt-single-program > .edt-hero-product,
.edt-single-program > .edt-product-layout,
.edt-single-program > .edt-cross-sell,
.edt-single-program > .edt-cta-band {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

/* Constrained-flow gap control: core adds a margin-block-start per child (and
   one on <main> itself, which pushed the breadcrumb 24px below the sticky
   header); the mockup rhythm lives in each section's own padding instead. */
.edt-single-program,
.edt-single-program > * {
	margin-block-start: 0;
}

/* Breadcrumb row: mockup 20px 64px inside a 62px row. Staging's crumb line
   box is 2px shorter, so 21px of padding lands the hero at the mockup's
   y=144 instead of 140. */
.edt-single-program > .edt-breadcrumb {
	padding: 21px var(--wp--preset--spacing--80);
}

/* Hero: 16px under the crumb, no bottom padding (the grid opens with 72px).
   Frame + fallback fill the 360px media box (o-nás / OPJAK hero recipe). */
.edt-single-program > .edt-hero-product {
	padding: 16px var(--wp--preset--spacing--80) 0;
}

.edt-single-program > .edt-hero-product .edt-stencil-frame,
.edt-single-program > .edt-hero-product .edt-img-fallback {
	height: 100%;
}

.edt-product-layout {
	display: grid;

	/* minmax(0, …) — a bare 1fr track can never shrink below its content's
	   min-width (the calculator/info-table grids), which blew the page out
	   to 422px on a 390px viewport. */
	grid-template-columns: minmax(0, 1fr) 380px;

	/* Mockup: `1fr 380px` / gap 72 inside 64px gutters, and the grid opens
	   72px under the hero. */
	gap: 72px;
	align-items: start;
	padding: 72px var(--wp--preset--spacing--80) 0;
}

.edt-product-layout__main {
	min-width: 0;
}

/* The gutter now belongs to the grid, not to each section, and the mockup's
   inter-section rhythm is a 72px margin — not the 64px top + 64px bottom
   .edt-section padding stacked on a 48px margin (176px per boundary, eight
   boundaries deep). */
.edt-product-layout__main > .edt-section {
	padding: 0;
}

.edt-product-layout__main > * + * {
	margin-top: 72px;
}

/* Mockup exceptions to the 72px rhythm. */
.edt-product-layout__main > .edt-info-table + * {
	margin-top: 56px;
}

.edt-product-layout__main > .edt-calc {
	margin-top: 24px;
}

.edt-product-layout__main > .edt-benefit-band {
	margin-top: 40px;
}

/* §19 gives .edt-reference its own 100vw breakout for the band contexts
   (routers, catalog, funding). Inside the product column it is a plain
   in-flow section again. */
.edt-product-layout__main > .edt-reference {
	width: auto;
	margin-left: 0;
}

/* The financování band is a padded navy card here, not a bleeding band. */
.edt-product-layout__main > .edt-financovani--dark {
	padding: 44px 40px;
}

/* §15 fixes the card grid at three tracks for the homepage band; the product
   mockups run two wider cards. auto-fit collapses the unused track, so a
   two-card band fills the width instead of leaving a third of it empty and
   wrapping every card to 296px tall against the mockup's ~150px. */
.edt-product-layout__main .edt-financovani__cards {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: 28px;
}

.edt-product-layout__main .edt-financovani__card {
	padding: 24px 26px;
}

.edt-product-layout__main .edt-financovani__card-title {
	font-size: 1.1875rem;
}

.edt-product-layout__main .edt-financovani__card-desc {
	margin: 8px 0 0;
}

/* Mockup band copy is 15px/1.65, a step under the running section text. */
.edt-product-layout__main .edt-financovani__text {
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Calculator card: mockup 36px box, 6px under its heading, 26px over the
   first stepper row. */
.edt-product-layout__main > .edt-calc {
	padding: 36px 36px 32px;
}

.edt-product-layout__main .edt-calc__head {
	margin-bottom: 26px;
}

.edt-product-layout__main .edt-calc-output__value {
	font-size: 1.875rem;
}

/* Every product mockup renders zázemí as plain flow copy — the cream card
   treatment in §13 belongs to the router/funding contexts. */
.edt-product-layout__main > .edt-misto {
	background: none;
	border-radius: 0;
}

/* Section heading rhythm inside the content column: flush eyebrow, 38px h2
   14px under it and 18px over its copy (mockup values, same treatment the
   o-nás sections got in §33). */
.edt-product-layout__main .edt-eyebrow {
	margin: 0;
}

.edt-product-layout__main .edt-section > h2 {
	font-size: 2.375rem;
	margin: 14px 0 18px;
}

/* Sub-band headings sit a step below the section role (mockup 32px navy
   band / 24px calculator card). */
.edt-product-layout__main .edt-section > h2.edt-band-heading {
	font-size: 2rem;
	margin: 12px 0 14px;
}

.edt-product-layout__main .edt-calc__head h2 {
	font-size: 1.5rem;
}

/* Zaměření cards title (mockup 20px) and FAQ question (mockup 16px). */
.edt-product-layout__main .edt-zamereni-card h3 {
	font-size: 1.25rem;
}

.edt-product-layout__main .edt-faq summary {
	font-size: 1rem;
}

/* ==========================================================================
   33. O nás sections
   ========================================================================== */

/* Real DOM (blocks/o-nas-sections.php): one consolidated
   <section class="edt-section edt-onas-sections">
     .edt-onas__pribeh-wrap > .edt-eyebrow + .edt-onas__pribeh (wysiwyg)
     .edt-onas__euta-section > .edt-onas__euta-media (stencil-frame photo/fallback)
       + .edt-onas__euta-body (eyebrow + h2>a + __euta-text wysiwyg + __euta-logo)
     .edt-onas__hodnoty > h2 + .edt-onas__hodnoty-grid > .edt-onas__hodnota (icon+h3+p) × 3
     .edt-onas__tym > h2 + .edt-onas__tym-grid > .edt-onas__tym-card (__tym-media+h3+p.__tym-role+p) × N
     .edt-onas__jistoty > p.edt-onas__jistota (✓ + strong — text) × N
   </section> */
/* Mockup rhythm: 72px hero→příběh, then 88px between the stacked sections
   (spacing-90 = 96px accumulated a visible drift over five sections). */
.edt-onas-sections {
	padding-top: 72px;
	padding-bottom: 88px;
}

.edt-onas-sections > * + * {
	margin-top: 88px;
}

/* Mockup section h2s on this page are 38px (theme default is 2rem), and the
   heading rhythm is tight: flush eyebrows (theme p-margins add 14px top+
   bottom), h2 14px under the eyebrow / 18px over its copy (28px over the
   hodnoty/tým grids, which then need no margin of their own) — the 0.83em
   h2 defaults read ~45px too tall per section, ~230px over the page. */
.edt-onas-sections .edt-eyebrow {
	margin: 0;
}

.edt-onas__pribeh h2,
.edt-onas__euta-body h2,
.edt-onas__hodnoty > h2,
.edt-onas__tym > h2 {
	font-size: 2.375rem;
	margin: 14px 0 18px;
}

.edt-onas__hodnoty > h2,
.edt-onas__tym > h2 {
	margin-bottom: 28px;
}

.edt-onas__pribeh {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
	/* Mockup příběh column is a 900px block, not the 760px prose default. */
	max-width: 900px;
}

/* Headings inside the příběh prose stay full navy (mockup) — only the body
   copy is the softer secondary ink. */
.edt-onas__pribeh h2,
.edt-onas__pribeh h3 {
	color: var(--wp--preset--color--contrast);
}

.edt-onas__pribeh :last-child {
	margin-bottom: 0;
}

/* EUTA „— Naše škola —" split section: framed photo LEFT, body right (mockup
   0.95fr/1.05fr, 56px gap, 340px slot). */
.edt-onas__euta-section {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 56px;
	align-items: center;
}

.edt-onas__euta-media {
	position: relative;
	height: 340px;
}

.edt-onas__euta-media .edt-stencil-frame,
.edt-onas__euta-media .edt-img-fallback {
	height: 100%;
}

/* Section h2 carries the orange underlined EUTA link (mockup: display font,
   38px like the other section h2s, link keeps accent + underline). */
.edt-onas__euta-body h2 a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.edt-onas__euta-text {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
}

.edt-onas__euta-text :last-child {
	margin-bottom: 0;
}

/* Mockup EUTA checklist is a SINGLE column (15px navy rows), unlike the
   2-column .edt-checklist default. */
.edt-onas__euta-text .edt-checklist {
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--50);
	font-size: 0.9375rem;
}

/* Logo chip = the clickthrough (design CLAUDE.md EUTA rule), 170×52 slot. */
.edt-onas__euta-logo {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--50);
	text-decoration: none;
}

.edt-onas__euta-logo img {
	display: block;
	height: 52px;
	width: auto;
}

.edt-onas__euta-logo .edt-img-fallback {
	width: 170px;
	height: 52px;
	min-height: 0;
	padding: 6px;
	gap: 6px;
	flex-direction: row;
}

.edt-onas__euta-logo .edt-img-fallback::before {
	font-size: 1.125rem;
}

.edt-onas__hodnoty-grid,
.edt-onas__jistoty {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.edt-onas__hodnota {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: 32px 28px;
}

/* Mockup hodnoty card titles: display-font CAPS, 20px, navy — under a bare
   28px orange stroke icon (no disc). */
.edt-onas__hodnota h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 10px;
}

.edt-onas__hodnota p {
	font-size: 14.5px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 0;
}

.edt-onas__tym-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}

/* Mockup: left-aligned cards, muted single-line roles. */
.edt-onas__tym-card {
	text-align: left;
}

/* Mockup team slot: full-width 300px rounded rect (photo or framed cream
   fallback with the member's „Foto: …" caption), name 14px below. */
.edt-onas__tym-media {
	height: 300px;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	margin-bottom: 14px;
}

.edt-onas__tym-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edt-onas__tym-media .edt-img-fallback {
	height: 100%;
	border-radius: 0;
}

.edt-onas__tym-card h3 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 4px;
}

.edt-onas__tym-role {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	margin: 0 0 8px;
}

.edt-onas__tym-card p:not(.edt-onas__tym-role) {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 0;
}

/* Bare orange stroke icon above hodnoty card titles (mockup: 28px SVG, no
   disc background, 16px gap to the title). */
.edt-onas__icon {
	display: block;
	color: var(--wp--preset--color--accent);
	margin-bottom: 16px;
}

.edt-onas__icon svg {
	display: block;
}

/* Jistoty as a tinted rounded band (mockup: eyebrow + heading + inline
   items + closing Kontakt link line), not three bare cards. */
.edt-onas__jistoty-band {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	padding: 44px 40px;
}

/* Mockup: dark-gold eyebrow (#C8932E works on cream, unlike the light gold)
   and a sub-band-sized 28px heading. */
.edt-onas__jistoty-band .edt-eyebrow {
	color: #c8932e;
}

.edt-onas__jistoty-band > h2 {
	font-size: 1.75rem;
	margin: 10px 0 22px;
}

/* Jistoty items (mockup): ✓ + bold navy lead-in — lowercase tail, one flowing
   14.5px line per grid cell. */
.edt-onas__jistota {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--edt-text-secondary);
}

.edt-onas__jistota strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.edt-onas__jistota-check {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.edt-onas__jistoty-note {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: 0.875rem;
	color: var(--edt-text-secondary);
}

.edt-onas__jistoty-note a {
	color: var(--wp--preset--color--accent);
}

/* Erasmus „Poradenství" band (page post_content): the mockup headline is a
   CTA-scale 44px display heading, not the 32px section H2. Direct child only —
   the nested enquiry-card keeps its own smaller heading. */
.edt-poradenstvi > h2 {
	font-size: 2.75rem;
	line-height: var(--wp--custom--line-height--tight);
}

/* ==========================================================================
   33c. Erasmus+ page (templates/page-erasmus.html — #30). The whole section
   stack lives in the seeded post_content (specs/seed/content/
   page-erasmus.json); shared funding CSS still applies via the retained
   .edt-funding class, everything below is .edt-erasmus-scoped.
   ========================================================================== */

/* Full-bleed breakout (trust-strip recipe): the page flows through
   wp:post-content inside the constrained main — bleed the content canvas and
   the hero to 100vw so sections own the mockup's 64px gutters. */
.edt-erasmus > .edt-hero-funding,
.edt-erasmus > .wp-block-post-content {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

/* Mockup rhythm: hero 16px under the breadcrumb, stats 64px after the hero,
   each later section 88px after the previous, no section bottoms (the next
   section's top owns the gap; FAQ closes the run before the CTA band). */
.edt-erasmus .edt-hero-funding {
	padding-top: 16px;
	padding-bottom: 0;
}

.edt-erasmus .edt-stat-tiles.edt-section {
	padding-top: 64px;
	padding-bottom: 0;
}

.edt-erasmus .edt-grant-covers,
.edt-erasmus .edt-definice,
.edt-erasmus .edt-dest-section,
.edt-erasmus .edt-program-links,
.edt-erasmus .edt-program-carousel,
.edt-erasmus .edt-reference,
.edt-erasmus .edt-faq {
	padding-top: 88px;
	padding-bottom: 0;
}

/* First section under the stats opens at 72px (mockup). Since the Vik ruling
   of 2026-08-18 that section is .edt-definice („Co je Erasmus+"), which moved
   directly under acf/stat-tiles; .edt-grant-covers dropped to the standard
   88px run below it. */
.edt-erasmus .edt-definice {
	padding-top: 72px;
}

.edt-erasmus .edt-faq {
	max-width: 900px;
	box-sizing: border-box;
	padding-bottom: 88px;
}

/* Funding hero media: frame + fallback fill the 360px box (o-nás recipe). */
.edt-erasmus .edt-hero-funding .edt-stencil-frame,
.edt-erasmus .edt-hero-funding .edt-img-fallback {
	height: 100%;
}

/* Mockup h1 balances its two lines („Erasmus+ pro" / „Vaši školu"). */
.edt-erasmus .edt-hero-funding h1 {
	text-wrap: balance;
}

/* Funding-hero eyebrow (optional `hero_eyebrow` on the funding field group).
   No funding page sets one today — /staze-ve-firmach/ carried „— Průvodce pro
   školy —" until #80 turned it into a product on 2026-08-19 — but the field
   and this rule stay for the next page that needs it. The flush-eyebrow rule
   below zeroes every .edt-erasmus eyebrow margin for the section headers, so
   the hero needs its own gap; 14px is the eyebrow→heading value §33c uses. */
.edt-erasmus .edt-hero-funding .edt-eyebrow {
	margin-bottom: 14px;
}

/* Stat tiles at the mockup's own scale (52px display numbers, 15px serif
   captions). */
.edt-erasmus .edt-stat-tile__number {
	font-size: 3.25rem;
}

.edt-erasmus .edt-stat-tile__caption {
	font-size: 15px;
}

/* Flush eyebrows + 38px section h2s at the mockup's 14/28px margins. */
.edt-erasmus .edt-eyebrow {
	margin: 0;
}

.edt-erasmus .edt-grant-covers > h2,
.edt-erasmus .edt-definice > h2,
.edt-erasmus .edt-program-links > h2,
.edt-erasmus .edt-program-carousel > h2,
.edt-erasmus .edt-dest-section > h2,
.edt-erasmus .edt-faq > h2 {
	font-size: 2.375rem;
	margin: 14px 0 28px;
}

/* „Co je Erasmus+" definition section (#79, blocks/definice.php) — the
   quotable answer above „Jak Erasmus+ funguje". Eyebrow and h2 come from the
   two rules above; the body copy repeats .edt-dest-section__intro's values
   verbatim (D-020 — same measure, size and colour as the section intro right
   below it), only spread over two paragraphs. */
.edt-erasmus .edt-definice__text {
	max-width: 720px;
}

.edt-erasmus .edt-definice__text p {
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.edt-erasmus .edt-definice__text p:last-child {
	margin-bottom: 0;
}

/* Tři cesty: 12px to the intro, intro then 36px to the cards. */
.edt-erasmus .edt-dest-section > h2 {
	margin-bottom: 12px;
}

.edt-erasmus .edt-dest-section__intro {
	margin: 0 0 36px;
}

/* KA cards carry the mockup's 32/28px padding and 24px grid gap. */
.edt-erasmus .edt-dest-cards {
	gap: 24px;
}

.edt-erasmus .edt-dest-section .edt-dest-card {
	padding: 32px 28px;
}

/* KA checklists single-column (#19 — the shared .edt-checklist 2-col grid
   outranks .edt-dest-card__checks on source order) + the mockup's divider. */
.edt-erasmus .edt-dest-card__checks {
	grid-template-columns: 1fr;
	border-top: 1px solid var(--wp--custom--border--subtle);
	padding-top: 16px;
}

/* „Z čeho se výjezd platí" cards (#16): orange Lucide icon over a serif
   16px title on the mockup's tighter 24px / 12px-radius card. */
.edt-erasmus .edt-grant-covers .edt-financovani__card {
	display: block;
	padding: 24px 22px;
	border-radius: 12px;
}

.edt-erasmus .edt-grant-covers .edt-financovani__card h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--contrast);
	margin: 14px 0 6px;
}

.edt-erasmus .edt-grant-covers .edt-financovani__card p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--edt-text-secondary);
	margin: 0;
}

.edt-erasmus .edt-grant-covers__icon,
.edt-erasmus .edt-poradenstvi__card-icon {
	display: block;
}

/* „Co lze" link cards: navy CAPS display titles + trailing orange arrow —
   the mockup card reads as one row-link, not an underlined orange link. */
.edt-erasmus .edt-program-links .edt-dest-card {
	border-radius: 12px;
	padding: 26px 64px 26px 28px;
}

.edt-erasmus .edt-program-links .edt-dest-card::after {
	content: "→";
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--accent);
	font-size: 20px;
}

.edt-erasmus .edt-program-links .edt-dest-card h3 {
	font-size: 19px;
	margin: 0 0 6px;
}

.edt-erasmus .edt-program-links .edt-dest-card h3 a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.edt-erasmus .edt-program-links .edt-dest-card h3 a:hover {
	color: var(--wp--preset--color--accent);
}

.edt-erasmus .edt-program-links .edt-dest-card p {
	font-size: 13.5px;
}

/* Navy steps band: inset rounded box (mockup margin: 88px 64px 0) — the
   full-bleed canvas would otherwise paint it edge to edge. */
.edt-erasmus .edt-process-steps {
	margin: 88px var(--wp--preset--spacing--80) 0;
	padding: 52px 48px;
}

/* Poradenství band: cream full-bleed opened by a 3px accent rule; the
   „I bez výjezdu s námi" pill sits beside the flush eyebrow. */
.edt-erasmus .edt-poradenstvi {
	margin-top: 88px;
	padding: 72px var(--wp--preset--spacing--80) 80px;
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 0;
}

.edt-erasmus .edt-poradenstvi__eyebrow-row {
	gap: 14px;
	align-items: center;
}

.edt-erasmus .edt-poradenstvi__pill {
	margin: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
}

.edt-erasmus .edt-poradenstvi > h2 {
	margin: 14px 0 12px;
}

.edt-erasmus .edt-poradenstvi__intro {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--edt-text-secondary);
	max-width: 760px;
	margin: 0 0 36px;
}

/* Service cards: white, orange icon over CAPS display titles. */
.edt-erasmus .edt-poradenstvi .edt-financovani__card {
	display: block;
	padding: 30px;
}

.edt-erasmus .edt-poradenstvi .edt-financovani__card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 14px 0 10px;
}

.edt-erasmus .edt-poradenstvi .edt-financovani__card p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--edt-text-secondary);
	margin: 0;
}

.edt-erasmus .edt-poradenstvi .edt-financovani__card + * {
	margin-block-start: 20px;
}

.edt-erasmus .edt-poradenstvi__note {
	font-size: 14.5px;
	color: var(--edt-text-secondary);
}

/* Consult card („Domluvte si konzultaci"): mockup's shadowed white card,
   22px display heading, name + e-mail sharing one row (cta-band pairing
   recipe — text field drops its full-row span next to the email field). */
.edt-erasmus .edt-poradenstvi .edt-enquiry-card {
	padding: 34px;
}

.edt-erasmus .edt-enquiry-card h2 {
	font-size: 1.375rem;
}

.edt-erasmus .edt-enquiry-card .edutours-form__field--text {
	grid-column: auto;
}

/* CTA band: the mockup's 72px band padding, and the phone pill must NOT
   inherit the prose-link paint — on this page the band renders inside
   post_content, where `.wp-block-post-content a` (0,1,1) outranks
   .edt-cta-band__phone (0,1,0) and turned the number accent-on-accent. */
.edt-erasmus .edt-cta-band {
	padding: 72px var(--wp--preset--spacing--80);
}

.edt-erasmus .edt-cta-band__phone,
.edt-erasmus .edt-cta-band__phone:hover {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

@media (max-width: 768px) {
	/* Mobile keeps the mockup's DESKTOP vertical rhythm (computed pass at
	   390/768: sections hold 72/88px tops, the navy band its 64px inset and
	   52/48px padding — mobile.css only drops the side gutters to 20px).
	   These re-open the 20px gutters the higher-specificity desktop rules
	   above would otherwise hold at 64px. */
	.edt-erasmus .edt-hero-funding {
		padding: 16px 20px 0;
	}

	/* Mockup order at tablet width: copy first, framed slot below (the
	   global mobile rule flips the funding hero media on top). */
	.edt-erasmus .edt-hero-product__media {
		order: 0;
	}

	/* Stat tiles took the 64px gutter on phones too. The comment that used to
	   sit here justified it as "the mockup's own m-grid margins" — mobile.css
	   has no such margin: `.m-grid` sets only grid-template-columns, and the
	   mockup's one and only mobile gutter is `.m-pad` at 20px. So this was a
	   64px inset on a 390px screen (262px of content) resting on a misread. */
	.edt-erasmus .edt-stat-tiles.edt-section {
		padding: 64px 20px 0;
	}

	.edt-erasmus .edt-grant-covers,
	.edt-erasmus .edt-dest-section,
	.edt-erasmus .edt-program-links,
	.edt-erasmus .edt-program-carousel,
	.edt-erasmus .edt-reference,
	.edt-erasmus .edt-faq {
		padding: 88px 20px 0;
	}

	/* Mirrors the desktop rule: the first section under the stat tiles is
	   .edt-definice since the 2026-08-18 reorder. It was missing from the
	   mobile list entirely (shipped with #79), so it also kept the default
	   .edt-section side padding instead of the erasmus 20px. */
	.edt-erasmus .edt-definice {
		padding: 72px 20px 0;
	}

	.edt-erasmus .edt-faq {
		padding-bottom: 88px;
	}

	/* Postup panel: 64px margin + 48px padding = 112px of gutter per side, i.e.
	   a 166px ribbon of content at 390. This is the identical defect that was
	   fixed on /opjak/ (§37 mobile, `.page-slug-opjak .edt-funding >
	   .edt-process-steps`) — both pages render the same block from the shared
	   funding template, and that fix was deliberately prefixed to keep it off
	   /erasmus/ while an earlier brief required proving this page had not
	   moved. That constraint is gone, so /erasmus/ now takes the same numbers:
	   the 20px gutter every neighbour here already uses, and 32/20 inside,
	   which is what .edt-process-steps runs at ≤768 everywhere else on the
	   site. Content width at 390 goes 166px → 310px. */
	.edt-erasmus .edt-process-steps {
		margin: 88px 20px 0;
		padding: 32px 20px;
	}

	.edt-erasmus .edt-poradenstvi {
		margin-top: 88px;
		padding: 72px 20px 80px;
	}

	/* Missing from this mobile list entirely — the same omission the
	   .edt-definice rule above documents. `.edt-erasmus .edt-cta-band` (0,2,0)
	   outranks §3's mobile `.edt-section` gutter (0,1,0), so the band kept its
	   desktop 64px on every phone. 56/20 matches what /opjak/'s CTA band
	   already runs at ≤768. */
	.edt-erasmus .edt-cta-band {
		padding: 56px 20px;
	}

	.edt-erasmus .edt-poradenstvi .edt-enquiry-card {
		padding: 24px 20px;
	}
}

/* ==========================================================================
   33b. Kontakt page (page-kontakt.html renders post_content; classes are
   authored in the seeded page body)
   ========================================================================== */

.edt-kontakt__hero {
	align-items: flex-start;
}

/* Mockup section h2s on this page are 38px (theme default is 2rem). */
.edt-kontakt__udaje h2,
.edt-kontakt__dokumenty h2 {
	font-size: 2.375rem;
}

.edt-kontakt__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.edt-kontakt__card {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--md);

	/* Mockup contact cards carry 24px padding all round (140px tall @390). */
	padding: var(--wp--preset--spacing--50);
}

/* Lucide icon above the label (wp:html in the seeded card markup, #33). */
.edt-kontakt__card-icon {
	display: block;
	margin-bottom: 6px;
}

/* Mockup card labels are plain body serif, not the CAPS display style. */
.edt-kontakt__card-label {
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
	margin: 0 0 6px;
}

.edt-kontakt__card-value {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* Values stay navy even when linked (tel:/mailto:), per mockup. */
.edt-kontakt__card-value a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.edt-kontakt__doc {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
}

/* Mockup doc titles are display headings (Cera uppercase 19px), not serif. */
.edt-kontakt__doc h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	font-weight: 500;
	text-transform: uppercase;
}

.edt-kontakt__doc .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Download glyph in the PDF button (mockup inline SVG → CSS mask). */
.edt-kontakt__doc .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   ≤768px — global shell (HANDOFF §6)
   ========================================================================== */

@media (max-width: 768px) {
	html,
	body {
		overflow-x: clip;
	}

	h1 {
		font-size: clamp(33px, 9vw, 44px) !important;
	}

	h2 {
		font-size: clamp(26px, 7.5vw, 34px) !important;
	}

	.edt-eyebrow {
		font-size: 12px;

		/* Mockup mobile.css .m-eyebrow: 0.1em (1.2px @ 12px), not zero. */
		letter-spacing: 0.1em;
		line-height: 1.5;
	}

	.edt-section {
		padding: var(--wp--preset--spacing--60) 20px;
	}

	/* -- 4. Header -------------------------------------------------------- */
	/* parts/header.html sets left/right padding via inline style (block
	   spacing support), which outranks a plain class rule — !important is
	   required here. See final report for the missing-hook note. */
	.edt-site-header {
		padding: 10px 10px 10px 16px !important;
	}

	.edt-header-cluster {
		gap: 2px;
	}

	/* Nav collapses to core's hamburger overlay (see the 601–768px bridge
	   rule in §4) — do NOT display:none the nav here or the hamburger dies. */

	/* Core's layout support emits .wp-block-buttons.is-layout-flex
	   { display: flex } (0,2,0) inline at render — a bare class can't hide
	   this block reliably, hence the !important. */
	.edt-site-header .edt-header-cta {
		display: none !important;
	}

	.edt-lang-flag {
		display: none;
	}

	.edt-icon-btn {
		width: 44px;
		height: 44px;
	}

	.edt-header-icons {
		border-left: none;
		padding-left: 0;
		gap: 0;
	}

	/* WP core Navigation block responsive overlay — best-effort mapping of
	   the mockup's full-width panel / 50px rows spec (§6 site-header). */
	.edt-header-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--base);
		padding: 4px 20px 18px;
	}

	.edt-header-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
		min-height: 50px;
		font-size: 15px !important;
		border-bottom: 1px solid rgb(28 49 68 / 7%);
	}

	/* -- 5. Footer ---------------------------------------------------------- */
	.edt-site-footer {
		padding: var(--wp--preset--spacing--60) 20px var(--wp--preset--spacing--40) !important;
	}

	/* Swap the landscape route drawing for the portrait one (slice arithmetic
	   in §5). Kept on this block's 768px breakpoint rather than the 781px
	   column collapse so the footer follows the same breakpoint as everything
	   else here; 769-781px is a 12px window where the desktop drawing survives
	   over a stacked footer, which is the lesser of the two inconsistencies. */
	.edt-footer-route--desktop {
		display: none;
	}

	.edt-footer-route--mobile {
		display: block;
	}

	.edt-footer-grid {
		grid-template-columns: 1fr !important;
		gap: var(--wp--preset--spacing--60) !important;
	}

	.edt-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* .edt-footer-legal (item 12a) replaced the old single last-child <p> —
	   the wrap target moves with it. */
	.edt-footer-legal {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* -- 6. Breadcrumb ------------------------------------------------------ */
	.edt-breadcrumb {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.edt-breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.edt-breadcrumb > * {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* -- 7. Hero ------------------------------------------------------------ */
	.edt-hero-product {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	.edt-hero-product__media {
		height: 260px;
		order: -1;
	}

	/* (The o-nás hero used to reset `order` here so its photo stacked BELOW the
	   copy, against the funding heroes' photo-first flip above. It has no photo
	   any more — see .edt-hero-onas in §7 — so the rule would match nothing.) */

	/* Hero-home stays ONE layered unit at mobile too (mockup .m-hero/.m-heroc):
	   photo + readability gradient fill the whole box (grid-area:1/1 from the
	   desktop rule keeps applying — do NOT switch to display:block, that was
	   what split it into two stacked boxes and lost the overlay). The content
	   panel has no background of its own; its 300px top padding is what
	   exposes the photo above the text, exactly like the mockup's offset. */
	/* Full-bleed at mobile too (Vik 2026-08-21: „it doesnt stretch full width
	   on phone"). The desktop rule already sets padding:0 on the hero, but §3's
	   mobile `.edt-section { padding: … 20px }` sits LATER in this file at the
	   same specificity, so below 768px it won the cascade and inset the navy
	   band to x:20 / w:350 on a 390px phone. Repeating padding:0 inside the
	   query is the whole fix — no gutter is lost, because both children that
	   hold copy already carry their own 20px: __content (56px 20px 36px) and
	   __routers (0 20px). */
	.edt-hero-home {
		padding: 0;
	}

	.edt-hero-home__media {
		min-height: 0;
	}

	.edt-hero-home__content {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--60);
		align-self: auto;
		/* Was 300px, which existed ONLY to expose the photo above the text
		   (Vik 2026-08-21: no photo). Left as-is it was 300px of blank navy
		   on every phone. */
		padding: 56px 20px 36px;
		background: transparent;
	}

	.edt-hero-home__text {
		max-width: none;
	}

	.edt-hero-home__text p {
		max-width: none;
	}

	.edt-hero-home__routers {
		margin-top: 24px;
		padding: 0 20px;
	}

	/* -- 8. Trust strip ------------------------------------------------------ */
	.edt-trust-strip {
		flex-direction: column;
		gap: 10px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.edt-trust-strip__item {
		padding: 0;
	}

	.edt-trust-strip__item:not(:first-child)::before {
		display: none;
	}

	.edt-trust-strip__divider {
		display: none;
	}

	/* -- 9. Info table -------------------------------------------------------- */
	.edt-info-table__grid {
		grid-template-columns: 1fr;
	}

	/* -- 11/12/13/14/15/16 — grids to 1 col --------------------------------- */
	.edt-zamereni-grid,
	.edt-misto__media,
	.edt-dest-cards,
	.edt-school-cards,
	.edt-financovani__grid,
	.edt-financovani__cards,
	.edt-checklist,
	.edt-decision__grid,
	.edt-stat-tiles {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	/* -- 17. Calculator -------------------------------------------------------- */
	.edt-calc__steppers {
		grid-template-columns: 1fr;
	}

	.edt-calc__steppers .edt-calc-row + .edt-calc-row {
		margin-top: var(--wp--preset--spacing--40);
	}

	.edt-calc-row {
		text-align: center;
	}

	.edt-calc-row__label {
		margin-bottom: 10px;
	}

	.edt-stepper {
		max-width: 220px;
		margin: 0 auto;
	}

	.edt-calc-pills {
		justify-content: center;
	}

	.edt-calc-row__control--doplatek {
		flex-wrap: wrap;
		justify-content: center;
	}

	.edt-calc__outputs {
		grid-template-columns: 1fr;
	}

	.edt-calc__share {
		flex-direction: column;
		align-items: stretch;
	}

	.edt-calc__share-links {
		justify-content: center;
	}

	/* -- 18. Enquiry rail ------------------------------------------------------ */
	.edt-enquiry-rail {
		position: static;
		width: auto;
	}

	/* -- 19. Reference slider --------------------------------------------------- */
	.edt-reference {
		grid-template-columns: auto 1fr auto;
	}

	.edt-reference__card {
		flex-basis: 100%;
		margin-right: 0;
	}

	/* -- 30b. Contact strip -------------------------------------------------- */
	.edt-contact-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.edt-contact-strip__actions {
		flex-wrap: wrap;
	}

	/* -- 21. Cross-sell / product card ------------------------------------------ */
	.edt-cross-sell__grid,
	.edt-product-card-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	/* -- 22. CTA band ------------------------------------------------------------ */
	.edt-cta-band {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--50);
	}

	/* In column direction the desktop flex-basis:420px becomes HEIGHT —
	   ~270px of empty band on every page's mobile CTA (found during #64;
	   mockup stínování band is 385px, staging rendered 631px). */
	.edt-cta-band__headline {
		flex-basis: auto;
	}

	.edt-cta-band h2 {
		max-width: none;
	}

	.edt-cta-band__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.edt-cta-band__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.edt-cta-band__actions > * {
		text-align: center;
	}

	/* Undo the desktop name+email pairing (item 10) — stack every field. */
	.edt-cta-band__form .edutours-form__field--text {
		grid-column: 1 / -1;
	}

	.edt-cta-band__form .edutours-form__form {
		padding: 28px 22px;
	}

	/* -- 23. Filter bar / chips --------------------------------------------------- */
	/* No horizontal padding of its own — the enclosing .edt-section already
	   supplies the mockup's 20px mobile gutter, and adding 20px here read as
	   a 40px double gutter against the cards below (#52). */
	.edt-filter-bar {
		flex-direction: column;
		gap: 22px;
		padding: 24px 0 36px;
	}

	.edt-filter-bar__count {
		margin-left: 0;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding-top: 0;
	}

	/* Explicit exception (HANDOFF §6): chips keep their desktop ~38px height. */
	.edt-chip {
		display: inline-flex;
		align-items: center;
	}

	/* -- 25. Modal ------------------------------------------------------------------ */
	.edt-modal__card {
		padding: 28px 20px;
		width: 100%;
	}

	/* -- 26. Mobile CTA bar ----------------------------------------------------------- */
	/* Only reserve room for the fixed bar where it's actually visible (≤768) —
	   this used to run unscoped and padded every viewport width. */
	body:has(.edt-mobile-cta) {
		padding-bottom: 74px;
	}

	.edt-mobile-cta {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 70;
		gap: 10px;
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--custom--border--subtle);
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -10px 30px rgb(28 49 68 / 14%);
	}

	.edt-mobile-cta__phone {
		flex: 0 0 auto;
		width: 50px;
		height: 50px;
		border-radius: var(--wp--custom--radius--md);
		border: 2px solid var(--wp--preset--color--contrast);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.125rem;
		color: var(--wp--preset--color--accent);
		text-decoration: none;
	}

	.edt-mobile-cta__cta {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
	}

	/* -- 28. Blog card ------------------------------------------------------------------- */
	.edt-blog-card {
		grid-template-columns: 1fr;
	}

	.edt-author-box {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	/* -- 30. Process steps -------------------------------------------------------------- */
	.edt-rdg {
		flex-direction: column;
		width: auto;
	}

	/* -- 32. Single-program layout -------------------------------------------------------- */
	/* Mockup mobile.css: .m-grid → 1 col, .m-gapmd → 32px, .m-pad → 20px.
	   The rail is the second grid item, so stacking already lands it after
	   the FAQ exactly like the mockup. */
	.edt-product-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.edt-single-program > .edt-product-layout {
		padding: var(--wp--preset--spacing--60) 20px 0;
		gap: var(--wp--preset--spacing--60);
	}

	.edt-single-program > .edt-breadcrumb {
		padding: 14px 20px;
	}

	.edt-single-program > .edt-hero-product {
		padding: 16px 20px 0;
	}

	/* Mockup .m-grid keeps DOM order — the hero photo sits BELOW the intro
	   copy (same correction as Erasmus, 4b3657f) — and mobile.css never
	   shrinks the slot, so it keeps the desktop 360px box (the shared 260px
	   mobile height cost ~100px of the hero band at both 768 and 390). */
	.edt-single-program .edt-hero-product__media {
		order: 0;
		height: 360px;
	}

	.edt-product-layout__main > * + * {
		margin-top: var(--wp--preset--spacing--70);
	}

	.edt-product-layout__main > .edt-financovani--dark {
		padding: var(--wp--preset--spacing--60) 20px;
	}

	/* -- 18. Enquiry rail: fixed 380px sticky column → fluid block (it was
	   the last 422px-wide element blowing out the 390px viewport). */
	.edt-enquiry-rail {
		position: static;
		width: 100%;
		max-width: 100%;
	}

	/* -- 33. O nás sections ---------------------------------------------------------------- */
	.edt-onas__hodnoty-grid,
	.edt-onas__jistoty,
	.edt-onas__tym-grid {
		grid-template-columns: 1fr;
	}

	/* Mockup mobile eyebrows drop to 12px/0.1em (h1/h2 already ride the
	   !important clamp shield above). */
	.edt-onas-sections .edt-eyebrow {
		font-size: 12px;
		letter-spacing: 0.1em;
	}

	/* EUTA split section stacks, photo (first in DOM) on top like the mockup. */
	.edt-onas__euta-section {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	.edt-onas__euta-media {
		height: 260px;
	}

	/* -- 21/23. Cards + filter bar ------------------------------------------------------- */
	.edt-product-card-grid,
	.edt-cross-sell__grid,
	.edt-dest-cards,
	.edt-dest-cards:has(> :nth-child(3):last-child),
	.edt-kontakt__cards {
		grid-template-columns: 1fr;
	}

	/* Router horizontal cards stack: media back on top, full width. Since #52
	   the card carries no padding of its own (.edt-product-card__body does),
	   so the media needs no negative-margin bleed either. */
	.edt-program-grid--router .edt-product-card {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.edt-program-grid--router .edt-product-card__media {
		width: 100%;
		min-height: 200px;
		height: 200px;
		margin: 0;
		border-radius: 0;
	}

	.edt-filter-bar {
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
	}

	.edt-filter-bar__count {
		margin-left: 0;
		align-items: flex-start;
	}

	/* -- 30. Process steps (ACF-block row) ------------------------------------------------ */
	.edt-process-steps__row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   36. OP JAK page (issue #31) — mockup-parity pass
   ==========================================================================
   Scoped to body.page-slug-opjak (functions.php body_class filter): the
   page shares template/blocks with Erasmus+, so every rule here must touch
   /opjak/ only. Mockup canon: Edutours OPJAK.dc.html — full-width sections
   with 64px gutters, 16/72/56/88px rhythm, 38px section h2s, single cream
   stat band, photo-slot variant cards, inline CTA-band form. */

/* Full-bleed breakout (trust-strip recipe): the ACF sections escape the
   1200px constrained main. WP's `.is-layout-constrained > :where(…)` pins
   inline margins auto !important — width:100vw + auto margins centers the
   box into a full bleed, so no margin override is needed.

   .edt-program-carousel joined the list on 2026-08-20 (Vik: „Width of the
   whole thing, Erasmus+ is wide and OPJAK is narrow“). The #84 swap dropped
   the carousel into the template slot .edt-dest-section used to own, but this
   selector list still named only the retired section — so the carousel was
   the one section left inside the 1200px content column while every neighbour
   bled to 100vw (measured @1440: 1200px wide at x=120, H2 at x=184, against
   /erasmus/'s 1440px at x=0, H2 at x=64). On /erasmus/ the same block is wide
   for free: §33c bleeds the whole post-content canvas it renders inside, so
   nothing there needs to change. Below a 1200px viewport this rule is a no-op
   — the constrained column already equals the viewport width. The
   .edt-dest-section entry stays: restoring the curated variant cards is still
   one line in templates/page-funding.html. */
.page-slug-opjak .edt-funding > .edt-breadcrumb,
.page-slug-opjak .edt-funding > .edt-hero-funding,
.page-slug-opjak .edt-funding > .entry-content,
.page-slug-opjak .edt-funding > .edt-dest-section,
.page-slug-opjak .edt-funding > .edt-program-carousel,
.page-slug-opjak .edt-funding > .edt-faq,
.page-slug-opjak .edt-funding > .edt-cta-band {
	width: 100vw;
	max-width: none;
}

/* Constrained-flow gap control: core adds 24px margin-block-start per child;
   the mockup rhythm lives in each section's own padding/margins instead. */
.page-slug-opjak .edt-funding > * {
	margin-block-start: 0;
}

/* Breadcrumb: mockup 20px 64px gutter row — vertical trimmed to 12px to
   absorb the ~16px-taller staging header (computed comparison @1440:
   H1 sat at y=249 vs the mockup's 234; the sections above the cards were
   double-ghosting in the pixel diff by that constant). */
.page-slug-opjak .edt-funding > .edt-breadcrumb {
	padding: 12px 64px;
}

/* Hero: 16px under the crumb, no bottom padding (explainer opens with 72px).
   Frame + fallback fill the 360px media box (o-nás hero recipe). */
.page-slug-opjak .edt-hero-funding {
	padding: 16px 64px 0;
}

.page-slug-opjak .edt-hero-funding .edt-stencil-frame,
.page-slug-opjak .edt-hero-funding .edt-img-fallback {
	height: 100%;
}

/* „Co je to šablona" explainer (post_content group): left-aligned 980px
   column at the 64px gutter, 72px above. */
.page-slug-opjak .edt-sablona-explainer {
	width: min(980px, calc(100vw - 128px));
	max-width: none;
	margin: 0 0 0 64px;

	/* 72px in the mockup — minus 8px of extra staging hero flow height
	   (same computed-drift compensation as the breadcrumb above). */
	padding: 64px 0 0;
}

.page-slug-opjak .edt-sablona-explainer p:not(.edt-eyebrow) {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--edt-text-secondary);
	margin-block-start: 16px;
}

/* „Pravidla ve zkratce": ONE cream rounded band, three left-aligned stats
   (mockup) — not the Erasmus-style bordered centered tiles. */
.page-slug-opjak .edt-stat-tiles.edt-section {
	/* 56px in the mockup — minus 8px drift compensation (see breadcrumb). */
	margin: 48px 64px 0;
	padding: 36px 40px;
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	gap: 32px;
}

.page-slug-opjak .edt-stat-tile {
	border: none;
	border-radius: 0;
	padding: 0;
	text-align: left;
}

.page-slug-opjak .edt-stat-tile__number {
	font-size: 1.875rem;
}

.page-slug-opjak .edt-stat-tile__caption {
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--edt-text-secondary);
	margin-top: 6px;
}

/* Section rhythm + heading scale (o-nás recipe: flush eyebrows, 38px h2s,
   14px eyebrow→h2 / 18–28px h2→copy). */
.page-slug-opjak .edt-funding .edt-eyebrow {
	margin: 0;
}

.page-slug-opjak .edt-sablona-explainer h2,
.page-slug-opjak .edt-dest-section > h2,
.page-slug-opjak .edt-faq > h2 {
	font-size: 2.375rem;
	margin: 14px 0 18px;
}

.page-slug-opjak .edt-dest-section > h2 {
	margin-bottom: 28px;
}

.page-slug-opjak .edt-faq > h2 {
	margin-bottom: 24px;
}

/* Varianty (dvě karty): 88px above, 64px gutters, 24px card gap. */
.page-slug-opjak .edt-dest-section {
	padding: 88px 64px 0;
}

/* …and the carousel that took that slot inherits the slot's rhythm (Vik
   approved 2026-08-20, the residual delta left over from the full-bleed fix
   in the breakout list above). #84 dropped acf/program-carousel where
   .edt-dest-section used to sit, but the block only ever carried the generic
   .edt-section `4rem 64px` — 64px above instead of the mockup's 88px, plus a
   64px bottom the retired section never had, so the run into the navy Postup
   panel measured 64 + 88 = 152px. These are the same three numbers /erasmus/
   uses in §33c, which is what „match OPJAK to Erasmus+“ means for the
   vertical axis. The bottom stays 0 deliberately: §36 gives no section a
   bottom — the next one's top owns the gap — and .edt-process-steps below
   already carries `margin-block-start: 88px` (it is always the next sibling
   here; acf/reference-slider renders nothing on this page). 0 keeps that gap
   at exactly 88px instead of re-adding a second one. */
.page-slug-opjak .edt-funding > .edt-program-carousel {
	padding: 88px 64px 0;
}

.page-slug-opjak .edt-dest-cards {
	gap: 24px;
}

/* Card shell: 14px radius, photo slot bleeding to the edges (negative
   margins against the 28px card padding), body column flexed so the
   „Zjistit více" row bottom-aligns across both cards. */
.page-slug-opjak .edt-dest-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Whole-card click-through (mockup wraps the card in <a>): stretch the
   existing link over the card. */
.page-slug-opjak .edt-dest-card .edt-product-card__arrow::after {
	content: "";
	position: absolute;
	inset: 0;
}

.page-slug-opjak .edt-dest-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow--md);
}

.page-slug-opjak .edt-dest-card__media {
	position: relative;
	height: 220px;
	margin: -28px -28px 28px;
}

.page-slug-opjak .edt-dest-card__media .edt-img-fallback,
.page-slug-opjak .edt-dest-card__media img {
	height: 100%;
	border-radius: 0;
	margin: 0;
}

.page-slug-opjak .edt-dest-card__media img {
	width: 100%;
	object-fit: cover;
}

/* Badge sits ON the photo (mockup top:16/left:16), not floating above. */
.page-slug-opjak .edt-dest-card__badge {
	top: 16px;
	left: 16px;
	z-index: 2;
}

.page-slug-opjak .edt-dest-card h3 {
	font-size: 1.5rem;
	margin: 0;
}

.page-slug-opjak .edt-dest-card > p {
	flex: 1;
	font-size: 14.5px;
	margin-top: 10px;
}

/* Tag pills: cream fill, no border (mockup). */
.page-slug-opjak .edt-dest-card__tag {
	background: var(--wp--preset--color--cream);
	border: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
	font-size: 12px;
	padding: 5px 12px;
}

/* Card CTA: sentence-case body-font link (mockup), not the CAPS arrow. */
.page-slug-opjak .edt-dest-card .edt-product-card__arrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 18px;
}

/* Postup: navy panel inset 64px inside the full bleed, 88px above. */
.page-slug-opjak .edt-funding > .edt-process-steps {
	width: calc(100vw - 128px);
	max-width: none;
	margin-block-start: 88px;
	padding: 52px 48px;
}

/* FAQ: left-aligned 900px column at the 64px gutter, 88px block padding. */
.page-slug-opjak .edt-funding > .edt-faq {
	padding: 88px max(64px, calc(100vw - 964px)) 88px 64px;
}

/* CTA band: mockup 72px 64px. */
.page-slug-opjak .edt-cta-band {
	padding: 72px 64px;
}

.page-slug-opjak .edt-cta-band h2 {
	margin: 0;
}

/* -- CTA band inline-form variant (blocks/cta-band.php, `cta_form_slug`) --
   Only ever rendered on OP JAK (seeded field), so the modifier class is the
   scope. Headline + phone left, 460px white card right (mockup). */
.edt-cta-band--form .edt-cta-band__inner {
	grid-template-columns: 1fr 460px;
	gap: 56px;
}

.edt-cta-band--form .edt-cta-band__phone {
	margin-top: 22px;
}

.edt-cta-band--form .edt-cta-band__form {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: 32px;
	box-shadow: var(--wp--custom--shadow--lg);
}

.edt-cta-band__form-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 16px;
}

/* The card chrome above replaces the form's own — strip the double box. */
.edt-cta-band--form .edt-cta-band__form .edutours-form__form {
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	gap: 14px;
}

.edt-cta-band--form .edutours-form__fields {
	gap: 12px;
}

/* Mockup rows: jméno* + škola paired (both text → auto via the __form
   pairing rule), e-mail full-width. */
.edt-cta-band--form .edutours-form__field--email {
	grid-column: 1 / -1;
}

/* Orange full-width submit in this card (the navy override upstream targets
   the on-band form; this one sits on white). */
.edt-cta-band--form .edutours-form__submit {
	background: var(--wp--preset--color--accent);
}

.edt-cta-band--form .edutours-form__submit:hover {
	background: #f96d3b;
}

/* -- OP JAK mobile (mockup mobile.css: 20px gutters, text-first hero) ----- */
@media (max-width: 768px) {
	.page-slug-opjak .edt-funding > .edt-breadcrumb {
		padding: 16px 20px;
	}

	.page-slug-opjak .edt-hero-funding {
		padding: 16px 20px 0;
	}

	/* Mockup keeps DOM order at mobile — copy first, framed photo below
	   (the global funding rule pulls media above the H1 with order:-1). */
	.page-slug-opjak .edt-hero-product__media {
		order: 0;
		height: 360px;
	}

	.page-slug-opjak .edt-sablona-explainer {
		width: auto;
		margin: 0;
		padding: 72px 20px 0;
	}

	/* Band keeps its 56/64 margins at mobile (mockup m-pad trims only the
	   inner padding to 20px). */
	.page-slug-opjak .edt-stat-tiles.edt-section {
		padding: 36px 20px;
	}

	.page-slug-opjak .edt-dest-section {
		padding: 88px 20px 0;
	}

	/* Mirrors the desktop pairing above — same slot, same rhythm, 20px
	   gutters (and the same three numbers as /erasmus/ at main.css:4715).
	   Without this the carousel would keep .edt-section's mobile `32px 20px`
	   at ≤768, so unlike the width rule the mobile block IS in play here. The
	   `.edt-funding >` chain is required: at (0,3,0) it outranks the desktop
	   rule it overrides. */
	.page-slug-opjak .edt-funding > .edt-program-carousel {
		padding: 88px 20px 0;
	}

	/* Postup: the desktop rule above insets the navy panel 64px inside the
	   full bleed and pads it 52/48, and until now the mobile block had no
	   override — so at 390 the panel was 262px wide with 96px of its own
	   padding, i.e. a 166px ribbon of content (measured on staging; the same
	   two numbers hold from the day the panel was built). Now it takes the
	   20px gutter every neighbour in this block already uses
	   (`calc(100vw - 40px)` = 20px each side, same mechanism as the desktop
	   `calc(100vw - 128px)`: width + auto margins from the constrained
	   parent), and the inner padding drops to `32px 20px` — which is not a
	   new number either, it is exactly what .edt-process-steps runs at ≤768
	   everywhere else on the site, via §3's mobile `.edt-section` rule (the
	   homepage Postup band measures 32/20 at 390 today). Content width at
	   390 goes 166px → 310px. Same `.edt-funding >` chain as the carousel
	   rule above, and for the same reason: at (0,3,0) it outranks the
	   desktop rule, and the `.page-slug-opjak` prefix keeps it off /erasmus/,
	   which renders the identical block from the shared funding template. */
	.page-slug-opjak .edt-funding > .edt-process-steps {
		width: calc(100vw - 40px);
		padding: 32px 20px;
	}

	.page-slug-opjak .edt-funding > .edt-faq {
		padding: 88px 20px;
	}

	/* m-secv: 56px vertical, 20px gutters. */
	.page-slug-opjak .edt-cta-band {
		padding: 56px 20px;
	}

	/* Stack headline over the form card (the global __inner rule loses to
	   the higher-specificity desktop columns above). */
	.edt-cta-band--form .edt-cta-band__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   37. Filter-bar JS companions + Programy katalog (issue #28)
   ========================================================================== */

/* The reset link and the no-results panel are created by assets/js/filter.js
   (neither is reachable without JS, so neither is server-rendered) — this is
   their stylesheet half. Not page-scoped: the same two affordances appear on
   the router mockups (#52/#53). */

/* Result count lives in its own child so the reset link below it survives
   every re-render; the wrapper already supplies the display-font uppercase
   treatment, so the label needs nothing of its own. */

/* Mockup reset link: body font, 13px, sentence case — it must NOT inherit the
   uppercase display treatment of the .edt-filter-bar__count wrapper. */
.edt-filter-bar__clear {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: var(--wp--custom--tracking--normal);
	text-transform: none;
}

/* No-results panel: dashed frame, centred, sits where the card grid was. */
.edt-filter-empty {
	border: 1px dashed rgb(28 49 68 / 25%);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--70);
	text-align: center;
}

.edt-filter-empty__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking--normal);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.edt-filter-empty__text {
	margin: 10px 0 0;
	font-size: 15px;
	color: var(--edt-text-secondary);
}

@media (max-width: 768px) {
	.edt-filter-empty {
		padding: var(--wp--preset--spacing--50);
	}

	.edt-filter-empty__title {
		font-size: 18px;
	}
}

/* ==========================================================================
   38. Router + catalog templates (page-router / page-programy) — mockup
   parity pass, issue #52 (shared with #53 and #28).
   Mockup canon: Edutours Pro Ucitele.dc.html / Pro Zaky / Programy — one
   full-width column with 64px gutters, navy hero flush under the header,
   filter bar, cards, cream RYCHLÉ SROVNÁNÍ band, financování band, steps,
   references, CTA band.
   ========================================================================== */

/* Full-bleed breakout for every ACF section on both templates (trust-strip
   recipe — ACF blocks have align support disabled, so they would otherwise be
   boxed to the 1200px contentSize and lose the mockup's 64px gutters). */
.edt-router > section.edt-section,
.edt-programy > section.edt-section {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

/* Constrained-flow gap control: core adds 24px margin-block-start per child;
   the mockup rhythm lives in each section's own padding instead. */
.edt-router > *,
.edt-programy > * {
	margin-block-start: 0;
}

/* Mockup vertical rhythm — read straight off the mockup's own boxes, band by
   band. NOTE the mockup's gaps are ADDITIVE: a band's bottom padding and the
   next band's top padding both apply (decision 72/72 then financování 88/88
   = 160px of air between them). Zeroing the bottoms "because the next section
   owns the gap" cost 85–132px per band. The reference band is the exception —
   it genuinely has no top padding of its own (m-pad: 0 64px 96px). */
.edt-router .edt-program-grid,
.edt-programy .edt-program-grid {
	padding-top: 36px;
	padding-bottom: 0;
}

.edt-router .edt-decision,
.edt-programy .edt-decision {
	padding-top: 72px;
	padding-bottom: 72px;
}

.edt-router .edt-financovani--band,
.edt-programy .edt-financovani--band {
	padding-top: 88px;
	padding-bottom: 88px;
}

.edt-router .edt-process-steps,
.edt-programy .edt-process-steps {
	padding-top: 88px;
	padding-bottom: 88px;
}

.edt-router .edt-reference,
.edt-programy .edt-reference {
	padding-top: 0;
	padding-bottom: 96px;

	/* Mockup reference band is left-aligned. The "stale global-styles
	   snapshot" this used to blame never existed (#18, 2026-08-19 —
	   `wp_global_styles` count 0), and the emitted global styles declare no
	   `text-align` at all. Same correction as .edt-reference__head above, and
	   the same open question: kept explicit until a browser check confirms
	   nothing else centres it. */
	text-align: left;
}

.edt-router .edt-cta-band,
.edt-programy .edt-cta-band {
	padding-top: 88px;
	padding-bottom: 88px;
}

/* FAQ — new on these templates 2026-08-18, so there is no mockup box to read.
   Rhythm: the reference band above closes with 96px and the CTA band below
   opens with 88px, so the block declares no vertical padding of its own (the
   reference band's own `padding-top: 0` uses the same reasoning). Measure: the
   full-bleed section would set a ~1300px line length at 1440, so the right
   gutter grows to cap the column at the 900px the funding pages already use
   (opjak recipe, §36). Below ~1028px the max() falls back to the shared 64px
   gutter, i.e. the block is then identical to every sibling section. */
.edt-router .edt-faq,
.edt-programy .edt-faq {
	padding-top: 0;
	padding-bottom: 0;
	padding-right: max(var(--wp--preset--spacing--80), calc(100vw - 964px));
}

/* Optional section heading above the filter bar (#78, blocks/program-grid.php
   `programs_heading`) — the routers' only seedable H2. Type is the theme's own
   h2 element style (D-020: no new text style); the block's raw markup carries
   no WP block-gap, so only the rhythm is declared here. */
.edt-program-grid__heading {
	margin: 0 0 28px;
}

/* Filter bar: the card grid opens 72px below it in the mockup, and the bar
   itself carries the hairline rule that closes the hero region. */
.edt-router .edt-filter-bar,
.edt-programy .edt-filter-bar {
	padding-bottom: 36px;
}

.edt-router .edt-product-card-grid,
.edt-programy .edt-product-card-grid {
	margin-top: 72px;
}

/* Financování band (blocks/financovani-band.php): raw markup with no WP
   layout block-gap, so the internal rhythm is explicit. */
.edt-financovani--band > .edt-eyebrow {
	margin: 0;
}

.edt-financovani--band > h2 {
	margin: var(--wp--preset--spacing--40) 0 12px;
}

.edt-financovani__lead {
	max-width: 640px;
	margin: 0;
	font-size: 17px;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
}

.edt-financovani--band .edt-financovani__cards {
	margin-top: 48px;
}

.edt-financovani--band .edt-financovani__card > * {
	margin: 0;
}

.edt-financovani--band .edt-financovani__card > h3 {
	margin-bottom: 12px;
}

.edt-financovani--band .edt-financovani__card > p:not(.edt-check-item):not(.edt-badge) {
	font-size: 0.875rem;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	padding-bottom: 20px;
}

.edt-financovani--band .edt-financovani__card > p:not(.edt-check-item) + .edt-check-item {
	margin-top: auto;
}

.edt-financovani--band .edt-check-item + .edt-check-item {
	margin-top: 8px;
}

/* Footer dashed separators stack away with the columns (wp:columns collapses
   at 781px) — a left border on a full-width row reads as a stray line. */
@media (max-width: 781px) {
	.edt-footer-grid > .wp-block-column + .wp-block-column {
		border-left: none;
		padding-left: 0;
	}
}

@media (max-width: 1024px) {
	.edt-program-grid--router .edt-product-card {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	}

	.edt-program-grid--router .edt-product-card__body {
		padding: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 768px) {
	.edt-hero-router {
		padding-top: 48px;
		padding-bottom: 44px;
	}

	.edt-breadcrumb--hero {
		margin-bottom: 20px;
	}

	/* Router cards stack: photo slot on top, body below (mockup mobile).
	   Measured against the mockup: the slot is a 3:2 box with a 300px floor
	   (726×484 @768, 348×300 @390) and the chips/CTA row stays a wrapping
	   flex row — the button drops to its own left-aligned line at 390 rather
	   than stretching full width. */
	.edt-program-grid--router .edt-product-card {
		display: flex;
		flex-direction: column;
	}

	.edt-program-grid--router .edt-product-card__media {
		height: auto;
		aspect-ratio: 3 / 2;
		min-height: 300px;
	}

	.edt-program-grid--router .edt-product-card__body {
		padding: 36px 20px;
	}

	.edt-program-grid--router .edt-product-card__foot {
		align-items: center;
		row-gap: var(--wp--preset--spacing--40);
	}

	.edt-program-grid--router .edt-product-card__btn {
		align-self: flex-start;
	}

	.edt-decision__band {
		padding: var(--wp--preset--spacing--50);
	}

	.edt-router .edt-product-card-grid,
	.edt-programy .edt-product-card-grid {
		margin-top: 40px;
	}

	/* Mockup mobile: .m-secv bands go 56px/56px; the reference wrapper is
	   .m-pad only, so it keeps 0 top / 96px bottom at every width. */
	.edt-router .edt-decision,
	.edt-programy .edt-decision,
	.edt-router .edt-financovani--band,
	.edt-programy .edt-financovani--band,
	.edt-router .edt-process-steps,
	.edt-programy .edt-process-steps,
	.edt-router .edt-cta-band,
	.edt-programy .edt-cta-band {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.edt-router .edt-reference,
	.edt-programy .edt-reference {
		padding-top: 0;
		padding-bottom: 96px;
	}

	/* The desktop rule caps the FAQ's line length with
	   `padding-right: max(spacing-80, calc(100vw - 964px))` and its comment
	   reasons that "below ~1028px the max() falls back to the shared 64px
	   gutter, i.e. the block is then identical to every sibling section".
	   That holds down to 769px — but the shared gutter on a phone is 20px,
	   not 64px, and only padding-LEFT came from §3's mobile .edt-section rule.
	   The result was a visibly lopsided 20/64 FAQ on every phone. */
	.edt-router .edt-faq,
	.edt-programy .edt-faq {
		padding-right: 20px;
	}
}

/* -----------------------------------------------------------------
   39. Pro žáky router page (issue #53) — page-scoped mockup parity
   Scoped to body.page-slug-pro-zaky (functions.php body_class filter).
   Everything structural on this template is shared with Pro učitele and
   lives in section 38; only genuinely page-unique rules belong here.
   ----------------------------------------------------------------- */

/* The middle product card's eyebrow is dark gold in this mockup only — the
   in-school format reads as a quieter, non-flagship marker while the other
   two stay accent orange. Verified unique: every card eyebrow in the Pro
   učitele and Programy mockups is #FF6124, so this cannot go in the shared
   .edt-product-card rule. Same dark gold as the O nás jistoty band (the
   preset --gold #EEBA56 is too light to read here).

   Hook: the empty country attribute. `edutours_render_product_card()` always
   prints data-zeme, so the in-school program — the only card on this page
   with no `zeme` term — matches on [data-zeme=""], which is the very fact
   the „Bez cestování" badge is announcing. */
.page-slug-pro-zaky .edt-product-card[ data-zeme="" ] .edt-eyebrow {
	color: #c8932e;
}

/* -- Programy katalog (#28) -------------------------------------------------
   Catalog cards only (`.page-slug-programy`); the same .edt-product-card also
   renders the cross-sell rail on program pages and must keep its own rhythm.
   Mockup card body: padding 28px 30px, 14px between every block. Staging used
   spacing-50 (24px) plus per-child bottom margins, which stacked ~50px shorter
   per card and — because the 6px-wider text column changed the wrap — dropped
   the popis from three lines to two. */
.page-slug-programy .edt-product-card__body {
	padding: 28px 30px;
	gap: 14px;
}

.page-slug-programy .edt-product-card__body > .edt-eyebrow,
.page-slug-programy .edt-product-card__title,
.page-slug-programy .edt-product-card__excerpt {
	margin-bottom: 0;
}

.page-slug-programy .edt-product-card__chips {
	margin-bottom: 14px;
}

/* No mobile step-down: the mockup card body keeps 28px 30px at 768 and 390
   (`.m-boxsm` does not apply to it), and the measured card heights confirm it. */

/* ==========================================================================
   40. Router + catalog — pass 2 corrections against the mockup screenshots
   (issue #52; shared with #53 / #28).
   ========================================================================== */

/* Hero rhythm: mockup is breadcrumb 28px → eyebrow → 16px → H1 → 18px → lead. */
.edt-hero-router h1 {
	margin-top: 16px;
	margin-bottom: 0;
}

.edt-hero-router__lead {
	margin-top: 18px;
}

/* Filter bar: mockup top-aligns the result count with the group labels. */
.edt-filter-bar {
	align-items: flex-start;
}

/* The framed photo slot is wrapped in the card's permalink — kill the
   inherited underline so the caption reads as a caption, not a link. */
.edt-product-card__media,
.edt-product-card__media .edt-img-fallback {
	text-decoration: none;
}

/* Mockup card copy wraps at 640px, not the full body width. */
.edt-program-grid--router .edt-product-card__excerpt {
	max-width: 640px;
}

/* Financování band card titles are display-uppercase in the mockup (26px →
   the .edt-band-heading step), not the body-font h3 the pattern inherits. */
.edt-financovani--band .edt-financovani__card > h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.625rem;
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--tracking--normal);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* -- CTA band, router/catalog variant ------------------------------------
   Mockup differences from the OPJAK band: no card title, jméno + e-mail
   paired on one row, navy submit, phone + e-mail as two plain lines. */
.edt-cta-band--form-router .edutours-form__field--email {
	grid-column: auto;
}

.edt-cta-band--form-router .edutours-form__submit {
	background: var(--wp--preset--color--contrast);
}

.edt-cta-band--form-router .edutours-form__submit:hover {
	background: var(--wp--preset--color--contrast-dark);
}

.edt-cta-band--form-router .edt-cta-band__contact {
	margin-top: 26px;
	font-size: 0.9375rem;
}

/* ==========================================================================
   41. Router + catalog — mobile corrections (issue #52)
   ========================================================================== */

@media (max-width: 768px) {
	/* ROUTERS ONLY. The two router mockups leave their filter bar a plain
	   wrapping flex row (no .m-filters/.m-count classes), so the count keeps
	   `margin-left:auto` and lands hard right on its own wrapped line. The
	   CATALOG mockup does carry .m-count, whose mobile override is
	   `margin-left: 0` — it sits at the left gutter there, which is what the
	   shared rule above already gives it. Do not add .edt-programy here. */
	.edt-router .edt-filter-bar__count {
		align-self: flex-end;
	}
}

/* Section rhythm. The mockup pairs a bottom padding with the next section's
   top padding at every boundary; the theme sections carry padding-top only,
   so each catalog boundary lost one side. Measured at 1440 (mockup → staging):
   grid→financování 160 → 88, financování→proces 176 → 88, CTA 176 → 128.
   Restoring the three missing bottoms puts every band back on the mockup's
   grid without touching the shared section defaults. */
.page-slug-programy .edt-program-grid {
	padding-bottom: 72px;
}

@media (min-width: 769px) {
	.page-slug-programy .edt-financovani {
		padding-bottom: 88px;
	}

	.page-slug-programy .edt-cta-band {
		padding-top: 88px;
		padding-bottom: 88px;
	}
}

/* ≤768 the mockup's shared `.m-secv` rule takes every band to 56/56 — the
   desktop bottoms above must not leak into it (the page-class specificity
   outranks the theme's own mobile rules). */
@media (max-width: 768px) {
	.page-slug-programy .edt-financovani {
		padding-bottom: 56px;
	}

	.page-slug-programy .edt-cta-band {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* CTA band: the catalog mockup splits the band 1fr/1fr with a 64px gutter and
   a 36px-padded card (measured card width 622 at 1440); the shared inline-form
   variant still carries OP JAK's fixed 460px card, which left the white card
   160px too narrow and hard against the right gutter. */
@media (min-width: 769px) {
	.page-slug-programy .edt-cta-band--form .edt-cta-band__inner {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}

	.page-slug-programy .edt-cta-band--form .edt-cta-band__form {
		padding: 36px;
	}
}

/* Router/catalog CTA band: the mockup splits the band 1fr/1fr with a 64px
   gap (form card ≈624px), not the OPJAK band's fixed 460px card. */
.edt-cta-band--form-router .edt-cta-band__inner {
	grid-template-columns: 1fr 1fr;
	gap: 64px;
}

.edt-cta-band--form-router .edt-cta-band__form {
	padding: 36px;
}

/* The 1fr/1fr split above is desktop-only. It outranks the shared mobile
   stack rule (same specificity, later in the file), so restate the stack —
   including the page-scoped catalog selector, which outranks both. */
@media (max-width: 768px) {
	.edt-cta-band--form .edt-cta-band__inner,
	.edt-cta-band--form-router .edt-cta-band__inner,
	.page-slug-programy .edt-cta-band--form .edt-cta-band__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   40. Blog templates — výpis + článek (issues #64/#65)
   Mockup canon: Edutours Blog.dc.html / Edutours Blog Clanek.dc.html.
   home.html + archive.html + single.html share one column set
   (.edt-blog-layout: content + 340px sidebar, 48px gap). Everything below
   breaks out of the 1200px contentSize (trust-strip recipe) so the grid
   owns the mockup's 64px gutters, same as the product/router templates.
   ========================================================================== */

/* Constrained-flow gap control (same as §32/§38): rhythm lives in each
   band's own padding, not in core's 24px inter-child margins — including
   the margin on <main> itself, which pushed the whole page 24px down. */
.edt-blog,
.edt-article,
.edt-blog > *,
.edt-article > * {
	margin-block-start: 0;
}

.edt-blog > .edt-breadcrumb,
.edt-article > .edt-breadcrumb,
.edt-blog > .edt-blog-hero,
.edt-blog > .edt-blog-layout,
.edt-article > .edt-blog-layout,
.edt-blog > .edt-cta-band {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.edt-blog > .edt-breadcrumb,
.edt-article > .edt-breadcrumb {
	padding: 20px var(--wp--preset--spacing--80);
}

/* -- Hero (výpis) ---------------------------------------------------------- */

.edt-blog-hero {
	padding: 16px var(--wp--preset--spacing--80) 0;
}


.edt-blog-hero h1 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 54px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 14px 0 0;
	text-wrap: balance;
}

.edt-blog-hero__lead {
	font-size: 17px;
	line-height: 1.65;
	color: var(--edt-text-secondary);
	margin: 16px 0 0;
	max-width: 640px;
}

/* -- Column set ------------------------------------------------------------ */

.edt-blog-layout {
	padding: 48px var(--wp--preset--spacing--80) 88px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

/* Core's default block gap adds margin-block-start:24px to the grid's
   children (it pushed the sidebar 24px below the card column). */
.edt-blog-layout > * {
	margin-block-start: 0;
}

/* Článek: the meta row opens 16px under the breadcrumb, not 48px. */
.edt-blog-layout--article {
	padding-top: 16px;
}

.edt-article-main {
	min-width: 0;
}

/* -- Card list (blocks/blog-loop.php) --------------------------------------- */

.edt-blog-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* §28 sized the card title before the mockup existed — mockup says 23px. */
.edt-blog-card__title {
	font-size: 23px;
	font-weight: 500;
	margin: 0;
}

.edt-blog-card__date {
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
}

.edt-blog-card__excerpt {
	font-size: 14px;
	margin: 0;
}

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

/* The slot fills the card's 300px media cell edge-to-edge; its own dashed
   chrome would double the card border. */
.edt-blog-card__media .edt-img-fallback {
	position: absolute;
	inset: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
}

.edt-blog-list__empty {
	font-size: 1rem;
	color: var(--edt-text-secondary);
}

/* Pagination (paginate_links list markup). Mockup shows none — the seeded
   archive fits one page — but the loop must survive real post counts.
   NB: paginate_links puts class="page-numbers" on the UL itself too — item
   chrome must stay scoped to li children or the list grows an outer pill. */
.edt-blog-pagination {
	margin-top: 40px;
}

.edt-blog-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.edt-blog-pagination li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--edt-text-secondary);
	font-size: 14px;
	text-decoration: none;
	transition: all var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-blog-pagination li a.page-numbers:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.edt-blog-pagination li .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Blog CTA band: the mockup's headline is 38px, not the band default 44px. */
.edt-cta-band--blog h2 {
	font-size: 2.375rem;
}

/* -- Sidebar (blocks/blog-sidebar.php) -------------------------------------- */

.edt-blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

/* Článek: sticky rail; top is clamped by rail.js so the last card never
   hides below the fold on short viewports (same recipe as §18). */
.edt-blog-sidebar--sticky {
	position: sticky;
	top: 96px;
}

.edt-sidebar-card {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: 26px 28px;
}

.edt-sidebar-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 16px;
}

.edt-sidebar-card__title--lg {
	font-size: 18px;
	letter-spacing: 0.06em;
	margin: 0;
}

.edt-sidebar-card__intro {
	font-size: 13.5px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: 10px 0 16px;
}

.edt-sidebar-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.edt-sidebar-cats a {
	border: 1px solid rgb(28 49 68 / 18%);
	color: var(--edt-text-secondary);
	font-size: 13px;
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	transition: all var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.edt-sidebar-cats a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.edt-sidebar-latest {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.edt-sidebar-latest a {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 14px;
	align-items: center;
	text-decoration: none;
}

.edt-sidebar-latest__thumb {
	position: relative;
	height: 56px;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.edt-sidebar-latest__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edt-sidebar-latest__thumb .edt-img-fallback {
	min-height: 56px;
	padding: 2px;
	gap: 2px;
	font-size: 10px;
	border-radius: 0;
}

.edt-sidebar-latest__thumb .edt-img-fallback::before {
	font-size: 1rem;
}

.edt-sidebar-latest__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}

.edt-sidebar-latest__date {
	font-size: 12px;
	color: var(--wp--preset--color--muted);
	margin-top: 3px;
}

/* Newsletter card: §27 owns the navy chrome; mockup pads 28px and the form
   stacks single-column with a full-width orange submit. */
.edt-blog-sidebar .edt-newsletter {
	padding: 28px;
}

/* The framework's default white form card (bg/radius/32px padding/shadow)
   would nest a card inside the sidebar cards — same strip-down as the
   CTA-band inline form (§38 recipe). */
.edt-blog-sidebar .edutours-form__form {
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	gap: 10px;
}

.edt-blog-sidebar .edutours-form__fields {
	grid-template-columns: 1fr;
	gap: 10px;
}

.edt-blog-sidebar .edutours-form textarea {
	min-height: 72px;
}

/* Mockup sidebar fields: 14px type on 12px padding (the framework default
   16px/14px renders 52px-tall inputs vs the mockup's 45px). */
.edt-blog-sidebar .edutours-form__input,
.edt-blog-sidebar .edutours-form textarea {
	font-size: 14px;
	padding: 12px 14px;
}

.edt-blog-sidebar .edutours-form__submit {
	padding: 12px;
	font-size: 14px;
}

.edt-blog-sidebar .edutours-form__consent-note {
	font-size: 12px;
	margin: 0;
}

.edt-blog-sidebar .edutours-form__submit {
	width: 100%;
	margin-top: 12px;
}

/* §40's generic card-title navy would be invisible on the navy card. */
.edt-newsletter .edt-sidebar-card__title {
	color: var(--wp--preset--color--base);
}

.edt-newsletter .edutours-form__consent,
.edt-newsletter .edutours-form__consent a,
.edt-newsletter .edutours-form__consent-note,
.edt-newsletter .edutours-form__consent-note a {
	color: rgb(255 255 255 / 60%);
}

.edt-newsletter input[type="email"]::placeholder {
	color: rgb(255 255 255 / 60%);
}

/* Navy CTA card (článek sidebar). */
.edt-sidebar-card--cta {
	background: var(--wp--preset--color--contrast);
	border: none;
	padding: 28px;
}

.edt-sidebar-card--cta .edt-sidebar-card__title {
	color: var(--wp--preset--color--base);
}

.edt-sidebar-card--cta .edt-sidebar-card__intro {
	color: rgb(255 255 255 / 78%);
}

.edt-sidebar-card__button {
	display: block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 14px;
	padding: 12px;
	border-radius: var(--wp--custom--radius--md);
	text-align: center;
	text-decoration: none;
	transition: background var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-sidebar-card__button:hover {
	background: var(--edt-orange-press);
	color: var(--wp--preset--color--base);
}

/* -- Článek: hlavička (blocks/article-header.php) ---------------------------- */

.edt-article-header__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.edt-article-header__meta .edt-category-chip {
	text-decoration: none;
}

.edt-article-header__date {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.edt-article-header__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 44px;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 16px 0 0;
	text-wrap: balance;
}

.edt-article-header__perex {
	font-size: 17px;
	line-height: 1.7;
	color: var(--edt-text-secondary);
	margin: 16px 0 0;
}

.edt-article-header__hero {
	height: 380px;
	margin: 32px 0;
}

.edt-article-header__hero .edt-img-fallback {
	min-height: 100%;
	border-radius: 0;
}

/* -- Článek: tělo (post_content) --------------------------------------------- */

.edt-article .wp-block-post-content {
	max-width: 720px;
}

.edt-article .wp-block-post-content > p:first-child {
	margin-top: 0;
}

.edt-article .wp-block-post-content p {
	/* px, not rem: the article mockup keeps 16px at every viewport. */
	font-size: 16px;
	line-height: var(--wp--custom--line-height--loose);
	color: var(--edt-text-secondary);
	margin: 14px 0 0;
}

.edt-article .wp-block-post-content h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 27px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 40px 0 0;
}

.edt-article .wp-block-post-content strong {
	color: var(--wp--preset--color--contrast);
}

/* Mockup body links (the EUTA mention) read semibold. */
.edt-article .wp-block-post-content p a {
	font-weight: 600;
}

/* Mid-article CTA — seeded/editor group, cream callout with orange spine. */
.edt-article-cta {
	background: var(--wp--preset--color--cream);
	border: 1px solid rgb(28 49 68 / 10%);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 12px;
	padding: 28px 30px;
	margin: 36px 0;
}

.edt-article-cta__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 20px;
	line-height: var(--wp--custom--line-height--snug);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.edt-article .wp-block-post-content .edt-article-cta p {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 8px 0 16px;
}

.edt-article-cta .wp-block-buttons {
	gap: 12px;
}

/* Explicit button chrome. The orange-on-orange this fixes was real, but the
   cause was OURS — not a "stale global-styles snapshot", which never existed
   (#18, 2026-08-19: `wp_global_styles` count 0; the real #18 cause was
   theme.json missing `defaultFontSizes`, fixed in 7cb98b6). This CTA sits
   inside .wp-block-post-content, and §2's body-link rule sets
   `color: accent` on `.wp-block-post-content a` at specificity (0,2,0) —
   which outranks core's theme.json button rule
   `:root :where(.wp-element-button, .wp-block-button__link)` at (0,1,0). So
   the button's <a> took the orange LINK colour on its own orange background,
   underline included. This rule wins both back at the same (0,2,0), later in
   the file. Mockup: filled orange 11px/22px + navy 2px outline pair,
   radius 8px. */
.edt-article-cta .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--radius--md);
	padding: 11px 22px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: all var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-article-cta .wp-block-button__link:hover {
	background: var(--edt-orange-press);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}

.edt-article-cta .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
	padding: 9px 22px;
}

.edt-article-cta .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transform: none;
}

/* FAQ — static open rows per the article mockup (NOT the sitewide accordion).
   The section is plain h2/h3/p since 2026-08-24 so inc/schema.php can read it
   back as FAQPage (contract C2) — the old .edt-article-faq* group wrapper is
   gone and its rules with it. The FAQ always closes the article, so its h2 is
   the LAST h2 in post_content and needs no class hook; that also means a new
   article gets this styling for free. (The one post where the last h2 is not a
   FAQ is the `vyzvy-a-terminy-2026-27` draft, which must never be published —
   see the _comment in specs/seed/content/posts.json.) */
.edt-article .wp-block-post-content h2:last-of-type {
	margin-top: 44px;
}

.edt-article .wp-block-post-content h2:last-of-type ~ h3 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	padding: 18px 4px 0;
	border-top: 1px solid rgb(28 49 68 / 10%);
}

.edt-article .wp-block-post-content h2:last-of-type ~ p {
	font-size: 14.5px;
	line-height: 1.65;
	margin: 8px 0 0;
	padding: 0 4px 18px;
}

.edt-article .wp-block-post-content h2:last-of-type ~ p:last-child {
	border-bottom: 1px solid rgb(28 49 68 / 10%);
}

/* Pull-quotes (testimonials in 02/04/06, the worked example in 05). */
.edt-article .wp-block-post-content .edt-article-quote {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: 4px 0 4px 20px;
	margin: 28px 0 0;
}

.edt-article .wp-block-post-content .edt-article-quote p {
	font-size: 17px;
	line-height: 1.6;
	font-style: italic;
	color: var(--wp--preset--color--contrast);
}

/* Lists — the article body CSS only ever styled p/h2/strong/a. */
.edt-article .wp-block-post-content ul,
.edt-article .wp-block-post-content ol {
	margin: 14px 0 0;
	padding-left: 22px;
	color: var(--edt-text-secondary);
}

.edt-article .wp-block-post-content li {
	font-size: 16px;
	line-height: var(--wp--custom--line-height--loose);
	margin: 6px 0 0;
}

/* Hero credit line (#39): Unsplash attribution under a real featured photo. */
.edt-article-header__hero:has(+ .edt-article-header__credit) {
	margin-bottom: 8px;
}

.edt-article-header__credit {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0 0 32px;
}

.edt-article-header__credit a {
	color: inherit;
	text-decoration: underline;
}

/* Author box: §28 owns the card; the mockup keeps it inside the 720px
   column, 40px under the FAQ. Circle slot ≠ the 240px default fallback. */
.edt-article .edt-author-box {
	max-width: 720px;
	margin-top: 40px;
}

.edt-article .edt-author-box__name {
	font-size: 17px;
}

.edt-author-box__photo .edt-img-fallback {
	min-height: 96px;
	height: 96px;
	padding: 6px;
	gap: 2px;
	font-size: 10px;
	border-radius: 50%;
}

.edt-author-box__photo .edt-img-fallback::before {
	font-size: 1.25rem;
}

/* -- ≤768px ------------------------------------------------------------------ */

@media (max-width: 768px) {
	/* Mockup mobile.css only narrows the 64px gutters to 20px (.m-pad) —
	   every vertical padding and the 48px column gap survive unchanged. */
	.edt-blog > .edt-breadcrumb,
	.edt-article > .edt-breadcrumb {
		padding: 20px;
	}

	.edt-blog-hero {
		padding: 16px 20px 0;
	}

	.edt-blog-hero h1 {
		font-size: clamp(33px, 9vw, 44px);
	}

	.edt-blog-layout {
		grid-template-columns: 1fr;
		padding: 48px 20px 88px;
	}

	.edt-blog-layout--article {
		padding-top: 16px;
	}

	/* .m-secv: bands drop to 56px vertical padding on mobile. */
	.edt-blog > .edt-cta-band {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.edt-blog-card {
		grid-template-columns: 1fr;
	}

	/* Stacked cards: the mockup's image-slot falls back to full width at a
	   3:2 aspect when its height turns indefinite (image-slot.js). */
	.edt-blog-card__media {
		min-height: 0;
		aspect-ratio: 3 / 2;
	}

	.edt-blog-sidebar--sticky {
		position: static;
	}

	/* The článek mockup is the one page with raw h1/h2 + inline px sizes
	   and NO mobile overrides — shield it from the global !important
	   clamps (§ global shell), which shrank the H1 to 35px @390 and grew
	   the body h2s to 34px @768. */
	.edt-article-header__title {
		font-size: 44px !important;
	}

	.edt-article .wp-block-post-content h2 {
		font-size: 27px !important;
	}
}

/* ==========================================================================
   42. Ceník — skrytá QR stránka (templates/single-cenik.html, issue #69)
   Mockup: design/homepage-directions/Edutours Cenik.dc.html (canon, ADR-018).
   The page still stays OUT of the automated parity page lists
   (design/parity-approved.json) and must never be linked from menu/footer.
   Mockup canvas = 1440 sheet with a 64px page padding; the built page maps
   that onto the constrained 1200px box (120px edge @1440, see below) and caps
   the reading column at the mockup's 980px.
   ========================================================================== */

/* Constrained-flow gap control (same recipe as §32/§38/§40): vertical
   rhythm lives in each band's own padding, not in core's 24px inter-child
   margins — including the one core puts on <main> itself. */
.edt-cenik-page,
.edt-cenik-page > * {
	margin-block-start: 0;
}

/* Left edge = the sitewide 120px @1440, same mechanism as /kontakt/
   (page-kontakt.html): NO full-bleed breakout here — the constrained <main>
   boxes every child to the 1200px contentSize and centres it, so at 1440 the
   breadcrumb, the H1 and the sections all start at (1440 − 1200) / 2 = 120px.
   The 64px page padding below is only a floor for viewports narrower than
   1200 + 2 × 64: while the viewport is wide enough for the 1200px box the
   padding is absorbed by the auto margins and the edge stays at 120px.
   (The earlier full-bleed + 64px-gutter recipe of §32/§38 put the breadcrumb
   and the sections at 64px while the H1 — centred a second time inside the
   nested constrained .edt-cenik-head — sat at 120px; QA #69.)
   The reading column is capped on the hero/section/note blocks below. */
.edt-cenik-page {
	padding-inline: var(--wp--preset--spacing--80);
}

.edt-cenik-page > .edt-breadcrumb {
	padding: 21px 0;
}

.edt-cenik-head {
	padding: 4px 0 0;
}

.edt-cenik-head .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 54px;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	text-wrap: balance;
}

/* .edt-section (§3) hands every ACF block 4rem/64px of padding; here the
   horizontal gutter lives on .edt-cenik-page (otherwise the table would start
   at 64 + 120px) and the vertical rhythm is carried by the hero, the sections
   and the CTA band's own margins. */
.edt-cenik {
	padding: 0;
}

/* -- hero (intro + platnost pill + RDG divider) -------------------------------- */

.edt-cenik__hero {
	max-width: 980px;
	padding-top: 18px;
}

.edt-cenik__intro {
	max-width: 640px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--edt-text-secondary);
}

.edt-cenik__intro p {
	margin: 0;
}

.edt-cenik__intro p + p {
	margin-top: 12px;
}

.edt-cenik__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
}

/* Orange outlined pill with the calendar glyph; 0.08em sits between the
   `wide`/`wider` tracking tokens, so the mockup value is literal here. */
.edt-cenik__platnost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 20px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.edt-cenik__platnost svg {
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
}

.edt-cenik__dph {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* Shared RDG connector (§ .edt-rdg); the mockup spaces it 34px under the pill
   and puts the whole gap to the sections below on .edt-cenik__sekce. */
.edt-cenik__rdg {
	margin: 34px 0 0;
}

/* -- sections ------------------------------------------------------------------ */

.edt-cenik__sekce {
	max-width: 980px;
}

.edt-cenik__hero + .edt-cenik__sekce,
.edt-cenik__sekce + .edt-cenik__sekce {
	margin-top: var(--wp--preset--spacing--70);
}

.edt-cenik__sekce-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.875rem;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 18px;
}

/* Optional per-section lead — rendered only when the ACF field is non-empty. */
.edt-cenik__sekce-popis {
	font-size: 15px;
	line-height: var(--wp--custom--line-height--base);
	color: var(--edt-text-secondary);
	margin: -6px 0 18px;
	max-width: 640px;
}

.edt-cenik__table {
	border: 1px solid var(--wp--custom--border--subtle);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

/* One shape for both row variants: plain <div> rows and, when the row points
   at a program, a full-row <a> (blocks/cenik.php). */
.edt-cenik__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: baseline;
	padding: 17px var(--wp--preset--spacing--50);
	border-bottom: 1px solid rgb(28 49 68 / 8%);
	text-decoration: none;
	color: inherit;
}

.edt-cenik__row:last-child {
	border-bottom: none;
}

.edt-cenik__row--link {
	transition: background 150ms ease;
}

.edt-cenik__row--link:hover,
.edt-cenik__row--link:focus-visible {
	background: var(--wp--preset--color--cream);
}

.edt-cenik__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.edt-cenik__nazev {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

.edt-cenik__poznamka {
	font-size: 13px;
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--muted);
}

/* „V ceně: …" — what the row's price includes. Same 13px muted family as the
   poznámka above it (frozen type scale, D-020 — no new size); only the label is
   set in the row weight so the list reads as a caption, not a second title. */
.edt-cenik__v-cene {
	font-size: 13px;
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
}

.edt-cenik__v-cene-label {
	font-weight: 600;
}

/* „Zobrazit produkt ›" / „Více informací ›" line on rows that link out. */
.edt-cenik__produkt {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.edt-cenik__cena {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
	white-space: nowrap;
}

/* Placeholder rows (price 0/unset) print „— Kč" / „— €" in the same orange —
   the em dash carries the currency, see edutours_cenik_format_price(). */
.edt-cenik__castka {
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.edt-cenik__jednotka {
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

/* -- note under the pricelist -------------------------------------------------- */

.edt-cenik__note {
	max-width: 980px;
	margin: var(--wp--preset--spacing--70) 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* -- CTA band ------------------------------------------------------------------ */

/* SAME block as everywhere else (blocks/cta-band.php, modal-opening button +
   phone pill) — only repainted here: the Ceník mockup boxes it as a navy card
   inside the reading width instead of the sitewide full-bleed orange band.
   Scoped to this page so no other call site changes. */
.edt-cenik-page > .edt-cta-band {
	position: relative;
	overflow: hidden;
	margin: 56px 0 88px;
	padding: 48px 56px;
	background: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--lg);
}

.edt-cenik-page > .edt-cta-band > .edt-cta-band__headline,
.edt-cenik-page > .edt-cta-band > .edt-cta-band__actions {
	position: relative;
}

.edt-cenik-page .edt-cta-band h2 {
	font-size: 1.75rem;
	max-width: 520px;
}

.edt-cenik-page .edt-cta-band__sub {
	font-size: 15px;
	max-width: 520px;
	color: rgb(255 255 255 / 78%);
}

/* Navy band: the sitewide navy button would disappear into it. */
.edt-cenik-page .edt-cta-band .wp-element-button {
	background: var(--wp--preset--color--accent);
}

.edt-cenik-page .edt-cta-band .wp-element-button:hover {
	background: var(--wp--preset--color--accent-warm);
}

/* Dashed travel-route decor (blocks/cta-band.php, cenik-only). */
.edt-cta-band__deco {
	opacity: 0.3;
}

/* -- ≤768px ------------------------------------------------------------------ */

@media (max-width: 768px) {
	/* Same single gutter as the desktop rule, dropped to the mobile 20px of
	   §3; the children keep their 0 horizontal padding from above. */
	.edt-cenik-page {
		padding-inline: 20px;
	}

	.edt-cenik__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.edt-cenik__cena {
		flex-direction: row;
		align-items: baseline;
		text-align: left;
		gap: 8px;
	}

	.edt-cenik-page > .edt-cta-band {
		margin: 48px 0 64px;
		padding: 32px 24px;
	}
}

/* ==========================================================================
   43. Cosmetics pass (issue #63) — footer seam, breadcrumb gutters above
   1440, Kontakt @390 gutters, product financování route, kurzy hero EUTA
   logo. Measured on staging 0.2.65 against the mockups; every number in the
   comments is a DOM measurement, not an estimate.
   ========================================================================== */

/* -- White strip above the footer ----------------------------------------- */

/* WP's root layout gives every .wp-site-blocks child a 24px
   margin-block-start (--wp--style--block-gap: 24px), so the navy footer
   floated 24px below the last section — measured at exactly 24px on all 16
   pages, and visible as a white seam under the orange CTA band on the 12 of
   them that close with a coloured section. Every mockup butts the CTA band
   straight onto the footer (measured gap 0 on homepage / programy / erasmus /
   o-nás / produkt). The margin sits on the template-part WRAPPER, not on the
   inner .edt-site-footer group — targeting the inner element does nothing.
   The header is the first child, so `* + *` never applied to it; only the
   footer needs zeroing. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* -- Breadcrumb gutters on the constrained-layout pages -------------------- */

/* /erasmus/ and /o-nás/ left the crumb as a plain constrained child, so it was
   boxed to the 1200px contentSize and centred — measured x=120 @1440, x=360
   @1920, x=680 @2560 — while the header, the footer and the page's own H1 all
   hold a flat 64px gutter at every width. Every mockup crumb row sits at 64px
   (`.m-pad.m-crumb`, padding 20px 64px). Horizontal only: the vertical rhythm
   under the crumb is already tuned (H1 lands at y=218/234 against the mockup's
   201/235) and must not move, so no vertical padding is added here.
   /kontakt/ is deliberately NOT in this list — its whole body is the 1200px
   column, so its crumb and H1 are already aligned with each other at 120px;
   moving only the crumb would break that. */
.edt-funding.edt-erasmus > .edt-breadcrumb,
.edt-o-nas > .edt-breadcrumb {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	padding-inline: var(--wp--preset--spacing--80);
}

/* -- Product financování band: dashed travel route ------------------------- */

/* All six Produkt *.dc.html mockups paint the navy financování card with the
   same absolutely-positioned dashed route (viewBox 0 0 900 400, slice, opacity
   0.18) behind the copy. .edt-financovani already carries position:relative +
   overflow:hidden, so the SVG only needs the footer-route recipe (§5): a
   negative z-index inside a z-index:0 stacking context paints above the navy
   background but below the in-flow content, with no wrapper div. */
.edt-financovani--dark {
	z-index: 0;
}

.edt-financovani__route {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.18;
	pointer-events: none;
}

/* -- Product hero: EUTA logo chip ------------------------------------------ */

/* Mockup „Kurzy a školení pro učitele": the hero copy closes with the EUTA
   logo in a 170×52 slot, 20px under the lead, and the logo IS the link (no
   „→" text link beside it — site-wide EUTA rule, HANDOFF §4). Same chip shape
   as .edt-misto__euta / .edt-onas__euta-logo. */
.edt-hero-product__euta {
	display: inline-block;
	margin-top: 20px;
	text-decoration: none;
}

.edt-hero-product__euta img {
	display: block;
	height: 52px;
	width: auto;
}

.edt-hero-product__euta .edt-img-fallback {
	width: 170px;
	height: 52px;
	min-height: 0;
	padding: 6px;
	gap: 6px;
	flex-direction: row;
}

.edt-hero-product__euta .edt-img-fallback::before {
	font-size: 1.125rem;
}

/* -- ≤768px ---------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Mockup mobile.css narrows every .m-pad gutter to 20px, crumb rows
	   included (measured: mockup crumb x=20 @390 on all pages). */
	.edt-funding.edt-erasmus > .edt-breadcrumb,
	.edt-o-nas > .edt-breadcrumb {
		padding-inline: 20px;
	}

	/* Kontakt @390: the page body is a constrained column with no root
	   padding, so at 1440 the 1200px contentSize leaves 120px gutters but at
	   390 the column fills the viewport and the crumb, the H1 and the hero
	   columns all sat flush at x=0 — the H1 „OZVĚTE SE NÁM" literally touched
	   the viewport edge (measured text rect left = 0; mockup = 20). The two
	   lower sections already carry .edt-section's 20px, so only these three
	   rows need it. */
	.edt-kontakt > .edt-breadcrumb,
	.edt-kontakt > .wp-block-post-title,
	.edt-kontakt__hero {
		padding-inline: 20px;
	}
}

/* ==========================================================================
   44. Design completion pass (Vik 2026-08-14) — <main> top-margin
   inconsistency + the mockups' card-eyebrow scale. Measured on staging
   0.2.68 against the mockups at 1440; every number below is a DOM
   measurement on both sides, not an estimate.
   ========================================================================== */

/* -- <main> top margin ----------------------------------------------------- */

/* Same root cause as the footer seam in §43: WP's root layout gives every
   .wp-site-blocks child a 24px margin-block-start. <main> is child #1 on every
   template, so it takes the margin too — the §43 note that "only the footer
   needs zeroing" was measuring the footer alone and missed this.

   It only SHOWED on 8 pages because five page families already zero it by
   hand, each with its own copy of the same recipe: .edt-single-program (§32),
   .edt-blog/.edt-article (§40), .edt-cenik-page (§42). The other families zero
   the CHILDREN but not <main> itself (`.edt-router > *`, `.edt-programy > *`,
   `.page-slug-opjak .edt-funding > *`), and homepage/erasmus/o-nás/kontakt
   have no rule at all — so those 8 pages sat 24px lower than the mockup:
   homepage, programy, erasmus, opjak, pro-ucitele, pro-zaky, o-nas, kontakt
   measured margin-top 24px; the other 8 measured 0.

   All 12 mockups butt the first content row straight onto the header
   (measured header-bottom → next-element-top = 0 on every one). Zeroing it at
   the root makes the 8 correct and is a no-op on the 8 already handled. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* -- Card eyebrows: the mockups' second eyebrow size ----------------------- */

/* The mockups run TWO eyebrow scales and staging only implemented one:
     section eyebrows  14px / 0.16em  (.edt-eyebrow base — correct already,
                                       verified 14px on all 51 section
                                       eyebrows across 8 pages)
     card eyebrows     13px / 0.14em  (never implemented — every card eyebrow
                                       on staging measured 14px / 2.24px)
   Confirmed identical in all 21 mockups: homepage routers, the router-page
   and catalog product cards, and the product cross-sell band all use
   13px/0.14em, while every section eyebrow uses 14px/0.16em.
   0.14em × 13px = 1.82px. */
.edt-router-card .edt-eyebrow,
.edt-product-card__body > .edt-eyebrow,
.edt-cross-sell__copy > .edt-eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
}

/* -- Cross-sell band eyebrow colour --------------------------------------- */

/* All six product mockups paint this one #C8932E, not the accent orange —
   the same dark-gold already used for the o-nás jistoty band (§33) and the
   pro-žáky „Bez cestování" card (§39), and for the same reason: it is the
   gold that stays legible on cream, unlike --gold. Staging rendered it
   rgb(255,97,36) on all six. */
.edt-cross-sell__copy > .edt-eyebrow {
	color: #c8932e;
}

/* ==========================================================================
   46. Program carousel (blocks/program-carousel.php, #84) — „Co lze
   z Erasmus+ financovat" on /erasmus/. Component-scoped (no page prefix): the
   block is driven by a funding term, so /opjak/ can adopt it unchanged.
   ========================================================================== */

/* Real DOM: <section class="edt-section edt-program-carousel" data-edt-carousel>
     <p class="edt-eyebrow"> + <h2>
     <div class="edt-program-carousel__tabs" role="tablist">
       button.edt-chip.edt-program-carousel__tab × N
     <div class="edt-program-carousel__panel" role="tabpanel"> × N
       <div class="edt-program-carousel__track"> .edt-product-card × N </div>
       <div class="edt-program-carousel__foot"> .__tail link + .__controls
         (two .edt-program-carousel__arrow buttons, server-rendered hidden) </div>
   Cards are the SHARED product card (§21) — the section inherits the catalog's
   card style by construction, so it can never drift into a second card style. */

.edt-program-carousel__tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* Same trap assets/js/filter.js documents: a class that sets `display` beats
   the UA `[hidden] { display: none }` rule at equal specificity. The panel is a
   plain div today, but the guard has to be explicit or the next layout tweak
   silently shows both categories at once. */
.edt-program-carousel__panel[hidden] {
	display: none;
}

/* The row itself: a horizontal scroller, not a transform pager. Scroll-snap +
   overflow-x means swipe and trackpad work with no JS at all, and „does it
   overflow" is a real measurement (scrollWidth vs clientWidth) rather than a
   breakpoint guess — which is what keeps the arrows away at 1440 (#84). */
.edt-program-carousel__track {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;

	/* Product cards lift 3px and cast a shadow on hover (§21); the scroller
	   would clip both, so the padding buys room and the negative margin gives
	   it straight back to the section's own gutters. `scroll-padding-inline`
	   matches the horizontal half: without it the first card's snap position is
	   scrollLeft 4, not 0, and the „prev" arrow never reads as disabled at the
	   start of the row. */
	padding: 4px 4px 14px;
	margin: -4px -4px -14px;
	scroll-padding-inline: 4px;
}

.edt-program-carousel__track::-webkit-scrollbar {
	display: none;
}

.edt-program-carousel__track > .edt-product-card {
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--50)) / 3);
	scroll-snap-align: start;
}

/* Pro žáky ships ONE card and that is the truth (Vik 2026-08-19) — it keeps the
   width it would have had inside the three-up row instead of stretching to a
   full-bleed hero nobody designed. */
.edt-program-carousel__track--single > .edt-product-card {
	flex-basis: min(100%, 420px);
}

/* The same specificity trap the CTA band documents in §33c: on /erasmus/ this
   block renders inside post_content, where `.wp-block-post-content a` (0,1,1)
   outranks the product card's own `.edt-product-card__btn` / `__media` rules
   (0,1,0) — it painted the „Detail programu →" label accent-on-accent
   (invisible) and underlined the photo-slot caption. Restated at (0,2,0) so a
   card looks identical wherever the block is placed. The excerpt's inline EUTA
   links keep the prose-link paint on purpose — the catalog shows them that way
   too. */
.edt-program-carousel .edt-product-card__btn,
.edt-program-carousel .edt-product-card__btn:hover {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.edt-program-carousel .edt-product-card__media {
	text-decoration: none;
}

.edt-program-carousel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--50);
}

.edt-program-carousel__tail {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.edt-program-carousel__tail a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.edt-program-carousel__tail a:hover {
	color: var(--wp--preset--color--accent-warm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Controls sit in a foot row rather than floating over the cards — the same
   place (and the same 44px pill) the reference slider uses at §19, and the only
   position that survives a 390px viewport without covering a card link. */
.edt-program-carousel__controls {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.edt-program-carousel__arrow {
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(28 49 68 / 25%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	font-size: 20px;
	line-height: 1;
	transition:
		background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.edt-program-carousel__arrow[hidden] {
	display: none;
}

.edt-program-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.edt-program-carousel__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Two-up between the mobile breakpoint and the point where three cards stop
   being readable; the row then genuinely overflows and the arrows appear. */
@media (max-width: 1100px) {
	.edt-program-carousel__track > .edt-product-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--50)) / 2);
	}

	/* Re-assert the single-card width: the rule above lands later in the
	   cascade at equal specificity and would otherwise size a lone card as if
	   it had a neighbour. */
	.edt-program-carousel__track--single > .edt-product-card {
		flex-basis: min(100%, 420px);
	}
}

@media (max-width: 768px) {
	/* A partly visible next card is the affordance that says „swipe" — but
	   only where there IS a next card. */
	.edt-program-carousel__track > .edt-product-card {
		flex-basis: min(85%, 320px);
	}

	/* One card on a phone reads as the catalog does at this width: full width,
	   nothing peeking (.edt-product-card-grid drops to 1fr here too). */
	.edt-program-carousel__track--single > .edt-product-card {
		flex-basis: 100%;
	}

	.edt-program-carousel__foot {
		align-items: flex-start;
	}
}

/* Honour the OS setting for the arrow scroll — carousel.js switches its own
   scrollBy() to `behavior: auto` under the same query. */
@media (prefers-reduced-motion: reduce) {
	.edt-program-carousel__track {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   47. Article closing CTA band (templates/single.html, issue #85)
   ==========================================================================

   Blog articles gained the closing band (Vik ruling on #85) — until then the
   band only ever rendered under `.edt-blog`, so §40's full-bleed breakout was
   written as `.edt-blog > .edt-cta-band` and the band on `.edt-article` would
   have stayed boxed at the 1200px contentSize while the layout above it runs
   edge to edge. Same two declarations, same values, article branch only. */

.edt-article > .edt-cta-band {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

@media (max-width: 768px) {
	/* .m-secv: bands drop to 56px vertical padding on mobile (§40 does this
	   for the listing band; the article band is the same band). */
	.edt-article > .edt-cta-band {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* ==========================================================================
   48. 404 (templates/404.html + patterns/404-programy.php) — the page that did
   not exist until 2026-08-21: with no 404.html the FSE hierarchy fell back to
   index.html, so every mistyped URL answered HTTP 404 with an empty blog loop.
   ========================================================================== */

.edt-404__intro {
	text-align: center;

	/* The carousel underneath brings its own 4rem .edt-section top padding —
	   closing the intro at 0 keeps one section gap between them, not two. */
	padding-bottom: 0;
}

/* Decorative dashed route (the markup and the scale arithmetic are documented
   in templates/404.html). Capped at the viewBox width and never stretched:
   `width: min(360px, 100%)` + `height: auto` + no preserveAspectRatio override
   means the rendered box always matches the 360x56 viewBox, so the 1.7px stroke
   can never be blown up the way the footer's landscape viewBox was inside its
   portrait box (fixed twice on 2026-08-21). */
.edt-404__route {
	display: block;
	width: min(360px, 100%);
	height: auto;

	/* Bottom margin is deliberately 0: core's flow-layout rule already puts a
	   block-gap between every child of the group, and setting one here would
	   stack the two. */
	margin: 0 auto;
}

/* Eyebrow → heading → body at the 14/28px rhythm every section header on
   /erasmus/ uses (§33c). No font-size anywhere in this section: the h1 keeps
   the global clamp and the paragraphs the global body size (D-020). */
.edt-404__intro h1 {
	margin: 14px 0 28px;
	text-wrap: balance;
}

/* 640px is the site's lead measure (.edt-hero-router__lead,
   .edt-financovani__lead). Centred copy needs it more than left-aligned prose
   does — past ~640px the eye starts losing the line start on every return. */
.edt-404__intro p:not(.edt-eyebrow) {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* `justify-content` is already emitted by core's flex-layout support from the
   block's own `layout.justifyContent` attribute — repeated here because the
   whole point of this page's CTA row is that it is centred, and a layout
   attribute is exactly the kind of thing an editor session silently drops. */
.edt-404__ctas {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
}

/* Both existing placements of this block bleed to the viewport — /erasmus/ for
   free (§33c bleeds the whole post-content canvas it renders inside) and
   /opjak/ through the breakout list in §44. Inside this template's constrained
   main the same block would sit in the 1200px content column, i.e. 341px cards
   against their 421px at 1440, which is the one divergence „same component"
   cannot absorb. Same trust-strip recipe as §44: width:100vw and the inline
   `margin: auto !important` WP already forces on constrained children centre it.
   Below a 1200px viewport the rule is a no-op. */
.edt-404 > .edt-program-carousel {
	width: 100vw;
	max-width: none;
}

/* Switcher centred above the track — Vik's explicit instruction for THIS page
   („switcher centered on top"), and the one way the 404's carousel differs from
   the identical component on /erasmus/ and /opjak/. Scoped to the `.edt-404`
   ancestor rather than a modifier class on the section, so the block itself
   needs no new argument and the two funding pages cannot be reached by it: the
   heading pair is centred with it, because a centred tab row under a
   left-aligned H2 reads as a mistake rather than a choice. */
.edt-404 .edt-program-carousel__tabs {
	justify-content: center;
}

.edt-404 .edt-program-carousel > .edt-eyebrow,
.edt-404 .edt-program-carousel > h2 {
	text-align: center;
}

/* Flush eyebrow + the same 14/28px header rhythm .edt-erasmus pins on this very
   block. Without it the pair falls back to UA margins (1em on the eyebrow,
   0.83em on the h2): the section is raw HTML, not a flow-layout container, so
   nothing else is setting them. */
.edt-404 .edt-program-carousel > .edt-eyebrow {
	margin: 0;
}

.edt-404 .edt-program-carousel > h2 {
	margin: 14px 0 28px;
}

/* ==========================================================================
   34. Tablet tier — 769px to 1366px

   Before this section the theme had exactly two layout tiers: desktop, and
   the ≤768 mobile pass. Every viewport from 769 to 1023 therefore rendered
   the FULL desktop layout, which produced four defects measured on staging
   across all 19 pages:

     1. Document width 872px at every viewport 769–871 → horizontal scroll on
        EVERY page at every modern iPad portrait width (810/820/834). Cause:
        the nowrap header cluster's content floor. Fixed by raising the
        burger bridge in §4 to 1024.
     2. The header CTA squeezed to 61px and wrapped one letter per line — a
        470px-tall vertical pill hanging off the right edge.
     3. .edt-product-layout kept `minmax(0,1fr) 380px`, leaving a 240px main
        column at 820px whose inner grids overflowed and ran UNDER the sticky
        rail: it painted over the program cards and cut the itinerary text
        mid-sentence.
     4. .edt-footer-grid stayed five columns at ~80px, hyphen-breaking every
        word ("Projekt / ová / výuka / Španěl / sko").

   Four bands, because the defects do not share one edge — each cut is a
   measured number, not a round one:
     · header                ≤1365  (the desktop bar is 477px tall at 1080
       and 105px with wrapped labels at 1280; it is only clean at 1366)
     · blog shell, hero,
       grid step-downs       ≤1024  (from 1025 up every 3-up row clears
       280px/column and the squeezed-text count is already zero)
     · single-program layout ≤1200  (the 380px rail + 72px gap eats 38% of an
       1180px iPad Air landscape, starving the info table to a 105px value
       column)
     · footer                ≤1366  (its last column still lands at 149px on
       a 12.9" landscape, so this one includes 1366 where the header excludes
       it — the two genuinely break at different widths)

   Every block is scoped `(min-width: 769px)`. This section is appended AFTER
   the ≤768 block, so an unscoped max-width query would win the cascade at
   equal specificity and restyle the phone.
   ========================================================================== */

/* -- 34a-i. Header — 769–1365 -------------------------------------------- */

@media (min-width: 769px) and (max-width: 1365px) {
	/* -- 4. Header ---------------------------------------------------------- */
	/* The nav is a burger from here down (bridge rule, §4). What stays on the
	   bar is logo · icons · CTA · flag — roughly 514px inside an 820px
	   viewport's 692px content box, so the CTA keeps its full label rather
	   than collapsing. Keeping it is not cosmetic: .edt-mobile-cta (§26) is
	   display:none above 768, so hiding the header CTA here would leave the
	   tablet with no call to action anywhere. */
	.edt-site-header {
		padding-left: var(--wp--preset--spacing--60) !important;
		padding-right: var(--wp--preset--spacing--60) !important;
	}

	.edt-header-cluster {
		gap: var(--wp--preset--spacing--40);
		min-width: 0;
	}

	.edt-header-cta,
	.edt-header-cta .wp-block-button {
		flex: 0 0 auto;
	}

	.edt-header-cta .wp-element-button {
		padding: 10px 20px;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	/* Same overlay chrome the phone gets — core's default panel is unstyled
	   and reads as a different component sitting next to it. */
	.edt-header-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--base);
		padding: 4px var(--wp--preset--spacing--60) 18px;
	}

	.edt-header-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
		min-height: 50px;
		font-size: 15px !important;
		border-bottom: 1px solid rgb(28 49 68 / 7%);
	}

	/* Burger to the far right — it is the last control in the bar, but it is
	   the FIRST child of the cluster in parts/header.html (the nav is the
	   desktop nav). Reordering here beats touching the template, which the
	   desktop layout still depends on. */
	.edt-header-nav {
		order: 9;
	}

	/* -- 7. Home hero -------------------------------------------------------- */
	/* .edt-hero-home__content is a space-between row: copy left, CTA pair
	   right. At 820 that leaves the buttons stranded against the right gutter
	   opposite a three-line headline. Same column stack the phone gets, at
	   tablet padding. */
	.edt-hero-home__content {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--60);
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}

	.edt-hero-home__text,
	.edt-hero-home__text p {
		max-width: none;
	}
}

/* -- 34a-ii. Blog shell, hero and grid step-downs — 769–1024 -------------- */
/* These stop at 1024 on measurement, not by symmetry with the header: at
   1080 and above every 3-up row already clears 280px/column and the blog
   sidebar leaves the card column wide enough, so the squeezed-text count is
   zero from 1025 up. Only the header stays broken past this point. */

@media (min-width: 769px) and (max-width: 1024px) {
	/* -- Grid step-downs: 3-up → 2-up --------------------------------------- */
	/* At 820px a 3-up row is ~215px/column, which is where the Czech
	   compounds start hyphen-breaking. Two-up lands at ~322px. */
	.edt-dest-cards,
	.edt-dest-cards:has(> :nth-child(3):last-child),
	.edt-decision__grid,
	.edt-financovani__cards,
	.edt-stat-tiles,
	.edt-onas__hodnoty-grid,
	.edt-onas__jistoty,
	.edt-onas__tym-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* wp:columns is flex with editor-set percentage bases and only wraps
	   below 781px, so these need display:grid to re-flow at all. The
	   .wp-block-columns prefix outranks core's single-class container rule
	   (.wp-container-core-columns-is-layout-*), which otherwise wins on
	   source order and re-pins flex-wrap:nowrap. */
	.wp-block-columns.edt-hero-home__routers {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Five numbered steps → 3 + 2 (Vik's approved tablet shape). Five across
	   is 119px/column here. */
	.wp-block-columns.edt-process-steps__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--60);
	}

	/* Four .edt-financovani__card columns on /erasmus/ sit in a bare wp:columns
	   with no hook class of its own, so the container has to be reached
	   through the card. :has() is already the theme's idiom here (§14
	   .edt-dest-cards, §26 body:has). */
	.wp-block-columns:has(> .edt-financovani__card) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* -- 19. Reference slider ------------------------------------------------ */
	/* The track's per-card basis is a hard /3; the arrows already handle the
	   overflow, so 2-up just widens each quote. */
	.edt-reference__track > .edt-reference__card {
		flex: 0 0 calc((100% - var(--wp--preset--spacing--50)) / 2);
	}
}

/* -- 34b. Fixed side-column layouts — 769–1200 ---------------------------- */
/* Both layouts here are "fluid content + a fixed-width column": the product
   page's 380px enquiry rail and the blog's 340px sidebar. They share a
   breakpoint because they fail the same way — the fixed track keeps its full
   width while the fluid one absorbs the whole shortfall. */

@media (min-width: 769px) and (max-width: 1200px) {
	/* -- 28. Blog shell ----------------------------------------------------- */
	/* content + 340px sidebar leaves the card column at ~509px even at 1025,
	   which drives .edt-blog-card's 300px media track down to a 147px body.
	   Dropping the sidebar under the list restores the full width and the
	   card itself needs no change. */
	.edt-blog-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
		padding-left: var(--wp--preset--spacing--60);
		padding-right: var(--wp--preset--spacing--60);
	}

	/* -- 32. Single-program layout ------------------------------------------ */
	/* The rail goes under the content, full width, unstuck. Above 1200 the
	   main column still clears ~786px beside the rail, which the info table
	   and calculator both fit. */
	.edt-product-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}

	.edt-single-program > .edt-product-layout {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) 0;
		gap: var(--wp--preset--spacing--70);
	}

	.edt-enquiry-rail {
		position: static;
		width: 100%;
		max-width: 100%;
	}
}

/* -- 34d. Info table on narrow phones — ≤480 ----------------------------- */
/* Not a tablet rule, but it belongs with the other breakpoint work: §9's
   `130px 1fr` is a FIXED label track, so on a 360px screen it eats 130 of the
   318px row and leaves the value 124px; at 390 the value is ~132px. Values
   here are things like "Benalmádena, Španělsko — pouze v angličtině", so that
   column wrapped four and five lines deep. Stacking label over value gives the
   value the full row. 480 is the width at which the two-column form still
   leaves the value ~254px. */

@media (max-width: 480px) {
	.edt-info-table__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.edt-info-table__label {
		font-size: 13px;
	}
}

/* -- 34c. Footer — 769–1366 ---------------------------------------------- */

@media (min-width: 769px) and (max-width: 1366px) {
	/* Same core-columns problem as the routers above, hence display:grid and
	   the .wp-block-columns prefix. Five link columns across only clear
	   150px/column at 1366 and 80px at 820. */
	.wp-block-columns.edt-footer-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	}

	/* Swap in the tablet twin (parts/footer.html). The desktop drawing is
	   hand-routed around the headings of a 5-across footer and stretched with
	   `slice`, so on a 2- or 3-column footer its runs land across the link
	   text; the tablet twin only uses horizontal bands measured to be free of
	   text and media at every width from 790 to 1366. */
	.edt-footer-route--desktop {
		display: none;
	}

	.edt-footer-route--tablet {
		display: block;
	}

	/* The left border/padding is the desktop row's gutter rhythm; on a
	   wrapped grid it reads as a stray rule down the middle — the same
	   reasoning as the 781px column-collapse rule in §5. */
	.edt-footer-grid > .wp-block-column + .wp-block-column {
		padding-left: 0;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	/* Brand + address take their own row; the four link columns pair off. */
	.wp-block-columns.edt-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.edt-footer-grid > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}
}