/* AUTO-GENERATED from app.css by .work/build_css.py — DO NOT hand-edit.
 * Edit the partial, re-run the script, bump PRIVILIO_VERSION. */

/* ==== _brand-tokens.css ==== */
/**
 * Privilio brand tokens (Task 11 base + Task 30 semantic / type / spacing).
 *
 * Source: DIZAJN-MANUAL-PRIVILIO.pdf v. 2025_07 (Levosphere), page 7.
 * Spec & rationale: inputs/brand-manual/brand-tokens.md
 * Section spec: docs/section-styling-spec.md §1
 *
 * Three-colour palette per brand manual (orange, blue, black).
 * Paper/white is the canvas, not formal palette.
 *
 * Brand black is #0f0f0f, NOT #000000. Use the token.
 *
 * Accessibility:
 *   - orange on paper ~1.7:1 (decorative only, never for text)
 *   - black on paper  ~19:1 (AAA)
 *   - blue on paper   ~5:1  (AAA normal text)
 */

:root {
	/* ------- 1.1 Brand palette ------- */
	--privilio-orange: #fcc552;
	--privilio-blue: #5270eb;
	--privilio-black: #0f0f0f;
	--privilio-paper: #ffffff;

	/* ------- Semantic tokens (spec §1.1) ------- */
	--text-primary: var(--privilio-black);
	--text-inverse: var(--privilio-paper);
	--text-muted: color-mix(in srgb, var(--privilio-black) 70%, transparent);

	--bg-page: var(--privilio-paper);
	--bg-section-alt: #f7f7f5;        /* warm off-white for striping */
	--bg-dark: var(--privilio-black);

	--link: var(--privilio-blue);
	--link-hover: #3d57d4;             /* derived darker blue, AA on paper */

	/* Primary CTA — Figma-declared: blue fill, white text, radius 50.
	   The brand-tokens.md doc suggested orange CTA, but Figma p1 uses blue
	   throughout the homepage (button color #5270eb, text #ffffff). Figma
	   wins per the "no inventions" rule. Orange is reserved for the active
	   filter pill ("Všetci") + decorative accents. */
	--cta: var(--privilio-blue);
	--cta-hover: var(--link-hover);
	--cta-text: var(--text-inverse);   /* white on blue */
	--cta-radius: 50px;                /* declared in Figma; NOT pill */

	/* Yellow accent — used for active filter pills, star ratings, "Smile"
	   decoration. NEVER for primary CTAs (1.7:1 contrast on white). */
	--accent-yellow: var(--privilio-orange);
	--accent-yellow-hover: #f0b62e;
	--accent-yellow-text: var(--privilio-black); /* black on yellow only */

	--border: #e5e5e3;
	--border-strong: #c7c7c4;

	--focus-ring: var(--privilio-blue);
	--error: #c0392b;                  /* derived, not in brand palette */
	--success: #2a8a4f;                /* derived, not in brand palette */

	/* Pattern fills — page 25 of the manual. */
	--pattern-fill-1: var(--privilio-orange);
	--pattern-fill-2: var(--privilio-blue);
	--pattern-fill-3: var(--privilio-black);

	/* ------- Backwards compatibility aliases (Task 11) ------- */
	/* Older code references these; keep until grep returns 0 hits. */
	--color-text: var(--text-primary);
	--color-bg: var(--bg-page);
	--color-link: var(--link);
	--color-link-hover: var(--link-hover);
	--color-cta-bg: var(--cta);
	--color-cta-text: var(--cta-text);
	--color-accent: var(--privilio-blue);
	--color-focus-ring: var(--focus-ring);

	/* ------- 1.2 Typography ------- */
	/* Sizes below match Figma p1 declared values 1:1 at desktop. Mobile
	   values are scaled by ~0.6 (no mobile frames exist in this Figma file
	   — sizes derived; Eva to validate on staging). */
	--font-body: "Mundial", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-display: var(--font-body);

	/* Mobile-first base. Desktop overrides via @media below. */
	--fs-display: 2.75rem;    /*  44 → 76 (hero H1; Figma 76px) */
	--fs-h1: 2rem;            /*  32 → 48 (section H2; Figma 48px) */
	--fs-h2: 1.625rem;        /*  26 → 48 (kept for legacy fallback) */
	--fs-card-h-lg: 1.875rem; /*  30 → 40 (Komu pomáhame H3; Figma 40) */
	--fs-card-h: 1.375rem;    /*  22 → 30 (service / step card H3; Figma 30) */
	--fs-cta-tile: 1.75rem;   /*  28 → 42 (yellow CTA tile H; Figma 42) */
	--fs-stat-number: 3rem;   /*  48 → 80 (stat big number; Figma 80) */
	--fs-stat-label: 1.25rem; /*  20 → 26 (stat label; Figma 26) */
	--fs-h4: 1.125rem;        /*  18 → 20 (review quote; Figma 20) */
	--fs-body: 1rem;          /*  16 → 18 (body; Figma 18) */
	--fs-card-body: 0.9375rem;/*  15 → 16 (card body; Figma 16) */
	--fs-small: 0.875rem;     /*  14 → 16 (eyebrow / tagline; Figma 14–16) */
	--fs-xs: 0.75rem;         /*  12 (service-card badge; Figma 12) */

	/* Line-height (declared = absolute px; we approximate with ratios). */
	--lh-display: 1.1;        /* hero 76→83.6 = 1.1 */
	--lh-heading: 1.2;        /* H2 48→57.6 = 1.2 */
	--lh-body: 1.5;           /* body 18→27 = 1.5 */
	--lh-tight: 1;            /* stat number 80→80 = 1 */

	--ls-display: 0;          /* declared 0 — no negative tracking */
	--ls-eyebrow: 0.04em;     /* small visual lift on the blue tagline */

	/* ------- 1.3 Spacing scale (8px grid) ------- */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;
	--space-8: 8rem;

	/* Section default padding — mobile small, desktop large. */
	--section-pad-y: var(--space-5);

	/* ------- 1.4 Container ------- */
	--container-max: 1240px;
	--container-pad-x: 1rem;

	/* ------- 1.5 Radii ------- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* ------- 1.6 Elevation ------- */
	--shadow-md: 0 4px 16px rgba(15, 15, 15, 0.08);
	--shadow-lg: 0 8px 32px rgba(15, 15, 15, 0.12);

	/* ------- Motion ------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 150ms;
	--dur-base: 200ms;
	--dur-slow: 300ms;
}

/* Desktop type-scale — Figma p1 declared sizes, exact. */
@media (min-width: 768px) {
	:root {
		--fs-display: 4.75rem;   /* 76px hero H1 (declared) */
		--fs-h1: 3rem;           /* 48px section H2 (declared) */
		--fs-h2: 3rem;
		--fs-card-h-lg: 2.5rem;  /* 40px Komu pomáhame H3 (declared) */
		--fs-card-h: 1.875rem;   /* 30px service/step card H3 (declared) */
		--fs-cta-tile: 2.625rem; /* 42px yellow CTA tile (declared) */
		--fs-stat-number: 5rem;  /* 80px stat number (declared) */
		--fs-stat-label: 1.625rem;/* 26px stat label (declared) */
		--fs-h4: 1.25rem;        /* 20px review quote (declared) */
		--fs-body: 1.125rem;     /* 18px body (declared) */
		--fs-card-body: 1rem;    /* 16px card body (declared) */
		--fs-small: 1rem;        /* 16px tagline (declared min 14, max 16) */
		--container-pad-x: 2rem;
		--section-pad-y: var(--space-7);
	}
}

@media (min-width: 1280px) {
	:root {
		--container-pad-x: 3rem;
	}
}

/* Reduced-motion users get instant transitions (spec §1.6). */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}

/* ==== _fonts.css ==== */
/**
 * Mundial webfont (@font-face) — Task 31 / B3.
 *
 * MyFonts-licensed web kit delivered 2026-06-16 (inputs/brand-manual/fonts-web/).
 * The kit shipped one per-weight font-family per file (MundialRegular,
 * MundialDemiBold, …); here we CONSOLIDATE to a single family "Mundial" with
 * weight/style discriminators, which is what _brand-tokens.css already targets
 * (--font-body: "Mundial", …). No token change is needed — supplying this
 * family activates the brand font; until now the stack fell back to Helvetica.
 *
 * font-display: swap — show the fallback immediately, swap to Mundial when
 * loaded. Layouts were made fallback-robust during the 2026-06-15 visual QA, so
 * the swap is safe; Regular + DemiBold + Bold are preloaded in header.php
 * (the three faces that paint above-the-fold chrome) to minimise FOUT.
 *
 * Weight map: Mundial ships Regular(400) / DemiBold(600) / Bold(700) only — no
 * Medium(500). The theme uses font-weight:500 in ~14 UI-emphasis spots (nav,
 * pills, chips, form labels, FAQ questions, active states). To keep that
 * emphasis instead of silently collapsing 500→Regular, the DemiBold face spans
 * the 500–600 range, so 500 renders as DemiBold (the closest available weight).
 *
 * --- MyFonts licence notice (retain per EULA) -----------------------------
 *   MyFonts Webfont Build ID 3867246, 2020-12-16
 *   Mundial by TipoType — https://www.myfonts.com/collections/tipotype-foundry
 *   Subject to the End User License Agreement entered into by the website
 *   owner. All other parties are explicitly restricted from using these
 *   Licensed Webfonts. © 2026 MyFonts Inc.
 * --------------------------------------------------------------------------
 */

@font-face {
	font-family: "Mundial";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/mundial-regular.woff2") format("woff2"),
	     url("../fonts/mundial-regular.woff") format("woff");
}

@font-face {
	font-family: "Mundial";
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/mundial-italic.woff2") format("woff2"),
	     url("../fonts/mundial-italic.woff") format("woff");
}

/* DemiBold spans 500–600: there is no Mundial Medium, so font-weight:500
   resolves here (emphasis preserved) rather than collapsing to Regular. */
@font-face {
	font-family: "Mundial";
	font-weight: 500 600;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/mundial-demibold.woff2") format("woff2"),
	     url("../fonts/mundial-demibold.woff") format("woff");
}

@font-face {
	font-family: "Mundial";
	font-weight: 500 600;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/mundial-demibold-italic.woff2") format("woff2"),
	     url("../fonts/mundial-demibold-italic.woff") format("woff");
}

@font-face {
	font-family: "Mundial";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/mundial-bold.woff2") format("woff2"),
	     url("../fonts/mundial-bold.woff") format("woff");
}

@font-face {
	font-family: "Mundial";
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/mundial-bold-italic.woff2") format("woff2"),
	     url("../fonts/mundial-bold-italic.woff") format("woff");
}

/* ==== _base.css ==== */
/**
 * Base reset + element defaults (Task 30).
 *
 * Mobile-first. Tokens come from _brand-tokens.css.
 */

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

html {
	font-family: var(--font-body);
	font-size: 100%;
	line-height: var(--lh-body);
	color: var(--text-primary);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	font-size: var(--fs-body);
	color: var(--text-primary);
	background: var(--bg-page);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-2);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--text-primary);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 500; }

p {
	margin: 0 0 var(--space-2);
}

a {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--link-hover);
}

:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	margin: 0 0 var(--space-2);
	padding-left: var(--space-3);
}

blockquote {
	margin: 0;
	padding: 0;
}

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
}

/* Page-level container helper. Apply to top-level inner wrappers of sections
   that should respect the readable max-width + side gutters. */
.l-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

/* Section vertical rhythm. Sections inherit this unless overridden. */
.l-section {
	padding-block: var(--section-pad-y);
}

/* Visually-hidden text — for SR-only labels. WP-compatible class name. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--bg-dark);
	color: var(--text-inverse);
	padding: var(--space-2) var(--space-3);
	z-index: 100;
}

.skip-link:focus {
	top: 0;
}

/* Print sanitization (spec §8 acceptance: print stylesheet at least suppresses nav/footer). */
@media print {
	.site-header,
	.site-topbar,
	.site-footer,
	.poradca-modal,
	.poradca-banner,
	[data-open-poradca] {
		display: none !important;
	}
	body {
		font-size: 11pt;
		color: #000;
	}
	a {
		color: #000;
		text-decoration: underline;
	}
}

/* ==== layout/_header.v8.css ==== */
/**
 * Header + top bar (Task 30, spec §3).
 *
 * Two-row: slim top bar (≥768px only) and main nav (sticky on scroll).
 */

/* Top bar — Figma `394:1419` Top Bar fill #5270eb, height 49.
   Inside: single text line `394:1420` Mundial@600/18 lh=27 #ffffff
   "recepcia@privilio.sk +421 948 697 379". */
.site-topbar {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	min-height: 49px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-weight: 600;
	font-size: 1rem;            /* mobile fallback */
	line-height: 1.5;
	padding-inline: var(--container-pad-x);
}

/* Constrain the contact line to the navbar's container so it aligns
   to the navbar's right edge rather than the raw viewport edge
   (Figma `394:1420` right-aligned). */
.site-topbar__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	justify-content: flex-end;
}

@media (min-width: 768px) {
	.site-topbar {
		font-size: 1.125rem;      /* 18 declared */
	}
}

.site-topbar a {
	color: inherit;
	text-decoration: none;
}

.site-topbar a:hover {
	text-decoration: underline;
}

.site-topbar__contact {
	margin: 0;
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg-page);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-md);
	border-bottom-color: var(--border);
}

.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	height: 64px;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

@media (min-width: 768px) {
	.site-header__inner {
		height: 80px;
	}
}

.site-header__brand {
	display: inline-block;
	width: 140px;
	height: auto;
	color: var(--privilio-black);
	text-decoration: none;
}

/* Desktop: bigger wordmark (Eva 2026-07-26 — "logo je pomerne malé"). 176px
   ≈ 54px glyph height, still comfortably inside the 80px header bar. Mobile
   keeps 140px so the burger row doesn't crowd. v8. */
@media (min-width: 64rem) {
	.site-header__brand {
		width: 176px;
	}
}

.site-header__brand svg {
	width: 100%;
	height: auto;
	display: block;
}

.site-header__nav {
	display: none;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.site-header__nav {
		display: block;
	}
}

.site-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-3);
}

.site-header__nav a {
	position: relative;
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	white-space: nowrap;   /* "Pre firmy" / "O nás" must never break to 2 lines */
	color: var(--text-primary);
	font-weight: 400;            /* Figma nav links = Mundial Regular 400 (not 500) */
	font-size: var(--fs-body);
	text-decoration: none;
}

.site-header__nav a:hover::after,
.site-header__nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: var(--space-2);
	right: var(--space-2);
	bottom: 0;
	height: 2px;
	background: var(--privilio-blue);
}

.site-header__nav a[aria-current="page"]::after {
	background: var(--privilio-orange);
}

/* Dropdown caret on every mega-menu trigger (Služby + O nás; Figma `Služby ⌄`).
   Targets the `.has-mega` <li> set by the nav fallback, so both dropdown items
   get the affordance (and no `:has()` / exact-href dependency). The link's own
   ::after is the hover/active underline, so the chevron lives on the <li>. */
.site-header__nav li.has-mega {
	display: inline-flex;
	align-items: center;
}

.site-header__nav li.has-mega::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	margin-inline-start: -0.125em;
	margin-block-start: 0.125em;
	border-right: 1.5px solid var(--privilio-black);
	border-bottom: 1.5px solid var(--privilio-black);
	transform: rotate(45deg);
}

.site-header__cta {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	margin-inline-start: auto;
}

@media (min-width: 1024px) {
	.site-header__cta {
		margin-inline-start: 0;
	}
}

.site-header__cta-poradca {
	display: none;
	padding: 0.5rem 1rem;
	white-space: nowrap;   /* single-line pill per Figma */
	background: transparent;
	color: var(--privilio-black);
	border: 1px solid var(--link);
	border-radius: var(--radius-pill);
	font-weight: 500;
	font-size: var(--fs-small);
	font-family: inherit;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out);
}

.site-header__cta-poradca:hover,
.site-header__cta-poradca:focus-visible {
	background: var(--link);
	color: var(--text-inverse);
}

@media (min-width: 768px) {
	.site-header__cta-poradca {
		display: inline-flex;
	}
}

.site-header__cta-kurzy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;    /* match poradca's centering if it ever wraps */
	white-space: nowrap;   /* single-line pill per Figma */
	padding: 0.5rem 1rem;
	background: var(--privilio-orange);
	color: var(--privilio-black);
	border-radius: var(--radius-pill);
	font-weight: 600;            /* Figma "Kurzy…" CTA = Mundial DemiBold 600 (not 700) */
	font-size: var(--fs-small);
	text-decoration: none;
}

.site-header__cta-kurzy:hover {
	background: var(--cta-hover);
	color: var(--privilio-black);
}

/* Narrow desktop (nav visible from 1024px): with the nowrap rules above the
   row can overflow before ~1280px — tighten gaps/padding in that band so
   everything stays on one line (Tomas review 2026-07-10). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.site-header__nav ul { gap: var(--space-1); }
	.site-header__nav a { padding: var(--space-1) 10px; }
	.site-header__cta-poradca,
	.site-header__cta-kurzy { padding: 0.5rem 0.75rem; }
}


/* WP admin bar (logged-in) sits above the sticky header — offset the header so
   its top isn't hidden behind the admin bar (Eva 2026-07-22, „lišta orezaná"). */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* ==== layout/_footer.v12.css ==== */
/**
 * Site footer (T41 v2, Figma `394:1506` Footer / 3 /, 1418×563 #5270eb).
 *
 * Source of truth: `.work/figma-refs/394_1506-footer-3.png` (live Figma
 * render). The JSON cache mis-reported text content for the link lists
 * (component-default values, not the rendered overrides).
 *
 * Layout, top to bottom:
 *   Content row: brand column + 2 link lists
 *   Yellow divider line
 *   Credits row: copyright + 3 underlined legal links
 *
 * Text everywhere is WHITE on the blue background. Phone, email, and legal
 * links are underlined. Service / info link lists are NOT underlined (but
 * underline on hover).
 *
 * Social icons are yellow #fcc552 (recoloured at render via fill replacement).
 */

.site-footer {
	background: var(--privilio-blue);     /* #5270eb */
	color: var(--text-inverse);            /* white */
	width: 100%;
	overflow: hidden;
	position: relative;                    /* anchors the ::before pattern field */
}

/* Hidden-logo pattern field (Julian's mock, 2026-07-14): the brand pattern
   (assets/img/pattern.svg, same mask technique as _pattern.v2.css) tiled
   tone-on-tone across the whole footer. White at low opacity over the brand
   blue so text contrast is untouched; pointer-events off, purely decorative. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0.07;
	-webkit-mask-image: url("../img/pattern.svg");
	mask-image: url("../img/pattern.svg");
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: auto 680px;
	mask-size: auto 680px;
	pointer-events: none;
}

/* Keep the orange divider strip + all content above the pattern field. */
.site-footer .pattern-divider--footer {
	position: relative;
}

.site-footer__inner {
	position: relative;
}

.site-footer__inner {
	max-width: 1418px;
	margin-inline: auto;
	padding: 86px 80px 51px;
}

@media (max-width: 767.98px) {
	.site-footer__inner {
		padding: 48px 24px 32px;
	}
}

/* Content row ─────────────────────────────────────────────────────────── */

.site-footer__content {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.site-footer__content {
		/* 4-track: brand | link list 1 | link list 2 | newsletter (far right).
		   Figma: lists sit close together (gap ~26px), newsletter at x1016.
		   2026-07-28 (Eva, notebook ~1366px): brand 1.7→1.5fr v prospech link
		   listov, aby „Individuálna fyzioterapia" nezalamovala na 2 riadky. */
		/* 2026-07-29 (Eva): newsletter stĺpec širší (súhlas menej riadkov),
		   link stĺpce = max-content s väčšou medzerou (druhý „ďalej od prvého"). */
		grid-template-columns: minmax(0, 1.2fr) max-content max-content minmax(0, 1.5fr);
		column-gap: 48px;
		row-gap: 32px;
		align-items: start;
	}


}

/* Brand column ────────────────────────────────────────────────────────── */

.site-footer__col--brand {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.site-footer__logo {
	display: inline-block;
	width: 240px;            /* matches Figma render width ≈ 250 */
	height: auto;
	color: var(--text-inverse);
}

.site-footer__logo svg {
	width: 100%;
	height: auto;
	display: block;
}

.site-footer__group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-footer__label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--text-inverse);
	margin: 0 0 4px;
}

.site-footer__text {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--text-inverse);
	margin: 0;
}

.site-footer__text a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.site-footer__text a:hover {
	text-decoration-thickness: 2px;
}

.site-footer__social {
	display: flex;
	gap: 16px;
	margin-block-start: 8px;
}

.site-footer__social a {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
}

.site-footer__social svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Link lists ──────────────────────────────────────────────────────────── */

.site-footer__linklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.site-footer__linklist a {
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--text-inverse);
	text-decoration: none;
}

.site-footer__linklist a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Položky link listov na jeden riadok na desktope (Eva 2026-07-28: „aby bola
   individuálna fyzioterapia v jednom riadku"). Pod 1200px necháme zalamovať,
   tracky sú tam priúzke. */
@media (min-width: 1200px) {
	.site-footer__linklist a { white-space: nowrap; }
}


/* Newsletter column (Figma 4116:1024) ─────────────────────────────────── */

.site-footer__col--newsletter {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__newsletter-title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.5rem;          /* ≈ 36px-tall heading in Figma */
	line-height: 1.2;
	color: var(--text-inverse);
	margin: 0;
}

.site-footer__newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;   /* 345→420 so širším stĺpcom (Eva 2026-07-29) */
}

/* Súhlas zbalený na 2 riadky, rozbalí ho tlačidlo „viac" (Eva 2026-07-29).
   Toggle je MIMO <label> — klik naň nesmie prepínať checkbox (súhlas). */
.site-footer__newsletter-consent-text.is-collapsed {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.site-footer__consent-toggle {
	align-self: flex-start;
	/* zarovnané s textom súhlasu, nie s checkboxom (Eva 2026-07-29):
	   16px checkbox + 8px gap */
	margin-inline-start: 24px;
	background: none;
	border: 0;
	padding: 0;
	margin-block-start: -6px;
	color: inherit;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Each field is its own white pill (Eva/Tomáš 2026-07-20 redesign): meno na
   vlastnom riadku, e-mail s tlačidlom „Odoberať" vnútri pilulky. */
.site-footer__newsletter-field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: #fff;
	border-radius: 100px;
}

.site-footer__newsletter-field input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0 8px 0 14px;
	color: #000;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 45px;
	outline: 0;
}

.site-footer__newsletter-field input::placeholder {
	color: #000;            /* Figma placeholder is solid black, not grey */
	opacity: 1;
}

.site-footer__newsletter-field--email button {
	background: var(--privilio-blue);   /* #5270eb */
	color: #fff;
	border: 0;
	border-radius: 100px;
	/* 24px→16px bočný padding (Eva 2026-07-28, notebook 1366px: „Váš e-mail"
	   sa orezával o tlačidlo). */
	padding: 12px 16px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.site-footer__newsletter-field--email button:hover {
	opacity: 0.9;
}

.site-footer__newsletter-field--email button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Inline result of the API subscribe (Option B). Hidden until JS speaks. */
.site-footer__newsletter-status {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-inverse);
	margin: 0;
}

.site-footer__newsletter-status.is-success {
	color: #fcc552;   /* brand gold — reads as a positive on the dark footer */
}

.site-footer__newsletter-status.is-error {
	color: #ffd7d0;   /* soft warm red, legible on dark */
}

.site-footer__newsletter-consent {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-inverse);
	margin: 0;
}

.site-footer__newsletter-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Credits ─────────────────────────────────────────────────────────────── */

.site-footer__credits {
	margin-block-start: 64px;
}

.site-footer__divider {
	border: 0;
	/* Explicit gold so the line is clearly visible (Figma 394:1549, #fcc552);
	   the token-based value washed out on staging. */
	border-top: 1px solid #fcc552;
	opacity: 1;
	margin: 0 0 32px;
}

.site-footer__credits-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.site-footer__copyright {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-inverse);
	margin: 0;
}

/* „Vytvorilo Tridaz" kredit (Eva 2026-08-04) — nenápadný, v riadku s copyrightom. */
.site-footer__madeby {
	opacity: 0.75;
}

.site-footer__madeby a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.site-footer__madeby a:hover {
	text-decoration-thickness: 2px;
}

.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.site-footer__legal a {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-inverse);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.site-footer__legal a:hover {
	text-decoration-thickness: 2px;
}

/* Newsletter GDPR consent checkbox (osobnyudaj.sk 2026-07-22): samostatný,
   predvolene nezaškrtnutý, aktívny súhlas + odkaz na Zásady. */
.site-footer__newsletter-consent-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--text-inverse);
	cursor: pointer;
}

.site-footer__newsletter-consent-check input[type="checkbox"] {
	flex: none;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--privilio-blue);
	cursor: pointer;
}

.site-footer__newsletter-consent-check a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Eva 2026-07-29: oba link stĺpce začínajú na úrovni riadku „Adresa", nie na
   úrovni loga (logo 240×72 + 32px gap = 104px). Na konci súboru, aby base
   pravidlo .site-footer__linklist { margin: 0 } vyššie neprebilo offset. */
@media (min-width: 768px) {
	.site-footer__linklist {
		margin-block-start: 104px;
	}
}

/* ==== components/_buttons.css ==== */
/**
 * Buttons (T38, Figma-declared values).
 *
 * Primary CTA: blue fill #5270eb, white text, radius 50, padding 12/24,
 * Mundial 600/16. Figma p1 button frame `394:1088`.
 *
 * Secondary CTA (text + chevron, no border): used as "Programy pre firmy ›"
 * style chevron-link in card actions.
 *
 * Outline CTA: used in navbar "Online poradca" (transparent fill, dark text,
 * radius 50, light border). Figma p1 button frame `394:1037`.
 */

.button-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: 12px 24px;          /* Figma-declared */
	background: var(--cta);       /* #5270eb */
	color: var(--cta-text);        /* #ffffff */
	border: 2px solid var(--cta);
	border-radius: var(--cta-radius);  /* 50px */
	font-weight: 600;
	font-size: 1rem;               /* 16px declared */
	line-height: 1.5;              /* 24px declared */
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out),
	            color var(--dur-base) var(--ease-out);
}

.button-cta:hover,
.button-cta:focus-visible {
	background: var(--cta-hover);
	border-color: var(--cta-hover);
	color: var(--cta-text);
	text-decoration: none;
}

/* Outline variant (navbar "Online poradca" button — transparent fill, dark
   text, dark border, radius 50). */
.button-cta--outline {
	background: transparent;
	color: var(--privilio-blue);
	border-color: var(--privilio-blue);
}

.button-cta--outline:hover,
.button-cta--outline:focus-visible {
	background: var(--privilio-blue);
	border-color: var(--privilio-blue);
	color: var(--text-inverse);
}

/* Yellow accent button (decorative, used for filter "Všetci" active pill +
   any orange-coded CTAs Eva may add). Orange on white is 1.7:1 so text MUST
   be black-on-orange. */
.button-cta--yellow {
	background: var(--accent-yellow);
	color: var(--accent-yellow-text);
	border-color: var(--accent-yellow);
}

.button-cta--yellow:hover,
.button-cta--yellow:focus-visible {
	background: var(--accent-yellow-hover);
	border-color: var(--accent-yellow-hover);
	color: var(--accent-yellow-text);
}

/* Chevron-link CTA: text + ›, no fill, no border. Used in card actions
   alongside the primary pill button (Figma "Programy pre firmy ›"). */
.button-cta--chevron {
	background: transparent;
	color: var(--privilio-black);
	border-color: transparent;
	border-radius: 0;
	padding: 12px 0;
	font-weight: 400;
}

.button-cta--chevron::after {
	content: " ›";
	display: inline-block;
	font-weight: 600;
}

.button-cta--chevron:hover,
.button-cta--chevron:focus-visible {
	background: transparent;
	border-color: transparent;
	color: var(--link);
}

/* Legacy alias — kept so older template-parts that still use the
   "--secondary" / "--ghost" modifiers don't crash. Both map to outline. */
.button-cta--secondary,
.button-cta--ghost {
	background: transparent;
	color: var(--privilio-black);
	border-color: var(--privilio-black);
}

.button-cta--secondary:hover,
.button-cta--secondary:focus-visible,
.button-cta--ghost:hover,
.button-cta--ghost:focus-visible {
	background: var(--privilio-black);
	border-color: var(--privilio-black);
	color: var(--text-inverse);
}

/* ==== components/_forms.css ==== */
/**
 * Form controls (Task 30, spec §2.3).
 */

.form-group {
	margin-block: 0 var(--space-3);
}

.form-label {
	display: block;
	margin-block-end: 0.25rem;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--text-primary);
}

.form-label__required {
	color: var(--error);
	margin-inline-start: 0.125rem;
}

.form-input,
.form-textarea,
.form-select {
	display: block;
	width: 100%;
	padding: 0.625rem 0.875rem;
	font-family: inherit;
	font-size: var(--fs-body);
	color: var(--text-primary);
	background: var(--bg-page);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease-out);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	border-color: var(--focus-ring);
	outline: 3px solid color-mix(in srgb, var(--focus-ring) 30%, transparent);
	outline-offset: 0;
}

.form-textarea {
	min-height: 7rem;
	resize: vertical;
}

.form-error {
	margin-block-start: 0.25rem;
	font-size: var(--fs-small);
	color: var(--error);
}

.form-help {
	margin-block-start: 0.25rem;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* Checkbox + radio inputs default to the brand-blue accent (modern browsers). */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--privilio-blue);
}

/* Disabled states. */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled,
.button-cta:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ==== components/_cards.css ==== */
/**
 * Card component (Task 30, spec §2.4). Used by services-grid, kurz tiles,
 * magazín cards, related-services strips.
 */

.card {
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-out);
}

.card:hover,
.card:focus-within {
	border-color: var(--privilio-blue);
}

.card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

.card__body {
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
}

.card__title {
	font-size: var(--fs-h4);
	font-weight: 700;
	margin: 0;
}

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

.card__title a:hover {
	color: var(--link);
}

.card__excerpt {
	font-size: var(--fs-body);
	color: var(--text-primary);
	margin: 0;
}

.card__meta {
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin: 0;
}

.card__cta {
	margin-block-start: auto;
	padding-block-start: var(--space-1);
}

/* ==== components/_chips.css ==== */
/**
 * Chip / pill component (Task 30, spec §2.5). Used by filter rows + tag lists.
 */

.chip,
[data-filter],
[data-problem],
.magazin-rubriky a {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	background: var(--bg-section-alt);
	color: var(--text-primary);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out);
}

.chip:hover,
[data-filter]:hover,
[data-problem]:hover,
.magazin-rubriky a:hover {
	border-color: var(--border-strong);
}

[data-filter].is-active,
[data-problem].is-selected,
[data-problem][aria-pressed="true"],
.chip[aria-pressed="true"],
.magazin-rubriky a.is-active {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	border-color: var(--privilio-blue);
}

[data-filter].is-active:hover,
.chip[aria-pressed="true"]:hover {
	background: var(--link-hover);
	border-color: var(--link-hover);
	color: var(--text-inverse);
}

/* ==== components/_faq.css ==== */
/**
 * Accordion / FAQ item (Task 30, spec §2.6). Native <details>/<summary>
 * driven — no JS dependency. Open one item by adding `open` attribute.
 */

.faq__item {
	border-bottom: 1px solid var(--border);
	padding-block: var(--space-2);
}

.faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-h4);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	padding-block: var(--space-1);
}

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

/* Chevron pseudo-element — black per Figma keyboard_arrow_down icon. */
.faq__item summary::after {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-right: 2px solid var(--privilio-black);
	border-bottom: 2px solid var(--privilio-black);
	transform: rotate(45deg);
	transition: transform var(--dur-base) var(--ease-out);
	flex-shrink: 0;
}

.faq__item[open] summary::after {
	transform: rotate(-135deg);
}

.faq__body {
	font-size: var(--fs-body);
	color: var(--text-muted);
	margin-block-start: var(--space-1);
	max-width: 65ch;
}

/* ==== components/_poradca-modal.css ==== */
/**
 * Online poradca modal (Task 30, spec §6 + Task 15).
 */

.poradca-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2);
}

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

.poradca-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 15, 0.6);
	animation: poradca-fade-in var(--dur-base) var(--ease-out);
}

.poradca-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--bg-page);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	animation: poradca-slide-up var(--dur-slow) var(--ease-out);
}

.poradca-modal__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	width: 2rem;
	height: 2rem;
	font-size: 1.5rem;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--text-muted);
	border-radius: var(--radius-pill);
}

.poradca-modal__close:hover {
	background: var(--bg-section-alt);
	color: var(--text-primary);
}

.poradca-modal__header {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	padding: var(--space-4) var(--space-4) var(--space-3);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.poradca-modal__header h2,
.poradca-modal__header p {
	color: var(--text-inverse);
}

.poradca-modal__eyebrow {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--space-1);
}

.poradca-modal__desc {
	font-size: var(--fs-small);
	margin-block: var(--space-1) var(--space-1);
}

.poradca-modal__trust {
	font-size: var(--fs-xs);
	margin: 0 0 var(--space-2);
}

.poradca-modal__bypass {
	display: inline-block;
	font-size: var(--fs-small);
	color: rgba(255, 255, 255, 0.85);
}

.poradca-modal__steps {
	display: flex;
	padding: var(--space-2) var(--space-4);
	background: var(--bg-section-alt);
	border-bottom: 1px solid var(--border);
}

.poradca-modal__steps ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.poradca-modal__steps li {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-small);
	color: var(--text-muted);
	flex: 1;
	min-width: 0;
}

.poradca-modal__steps li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--border);
	color: var(--text-muted);
	font-weight: 700;
	font-size: var(--fs-xs);
	flex-shrink: 0;
}

.poradca-modal__steps li.is-active {
	color: var(--text-primary);
	font-weight: 500;
}

.poradca-modal__steps li.is-active span {
	background: var(--privilio-orange);
	color: var(--text-primary);
}

.poradca-modal__steps li.is-complete span {
	background: var(--success);
	color: var(--text-inverse);
}

.poradca-modal__step {
	padding: var(--space-4);
}

.poradca-modal__step h3 {
	font-size: var(--fs-h3);
	margin-block: 0 var(--space-2);
}

.poradca-modal__hint {
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin-block-end: var(--space-2);
}

.poradca-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-block-end: var(--space-3);
}

/* Explicit [hidden] guard (0.9.79 lesson): author display:flex beats the UA
 * [hidden] rule, so bez guardu krok 2 ukazuje zoznamy VŠETKÝCH publík naraz
 * (Eva 2026-08-07). poradca.js prepína group.hidden per zvolené publikum. */
.poradca-options[hidden] {
	display: none;
}

.poradca-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	padding: var(--space-2) var(--space-3);
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out),
	            background-color var(--dur-fast) var(--ease-out);
}

.poradca-option:hover {
	border-color: var(--border-strong);
}

.poradca-option.is-selected,
.poradca-option[aria-pressed="true"],
.poradca-option[aria-checked="true"] {
	border-color: var(--privilio-blue);
	background: color-mix(in srgb, var(--privilio-blue) 8%, transparent);
}

.poradca-option__label {
	font-weight: 500;
	color: var(--text-primary);
}

.poradca-option__sub {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.poradca-modal__actions {
	display: flex;
	gap: var(--space-2);
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-block-start: var(--space-3);
}

.poradca-result {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-block-end: var(--space-2);
}

.poradca-result--primary {
	border-color: var(--privilio-orange);
	border-width: 2px;
	background: color-mix(in srgb, var(--privilio-orange) 8%, transparent);
}

.poradca-result__badge {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-primary);
	margin: 0 0 var(--space-1);
}

.poradca-result h4 {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-1);
}

.poradca-result__price {
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin: 0 0 var(--space-2);
}

.poradca-result__body {
	font-size: var(--fs-body);
	margin: 0 0 var(--space-2);
}

.poradca-result__more {
	display: inline-block;
	margin-inline-start: var(--space-2);
	font-size: var(--fs-small);
}

.poradca-result__alts {
	display: grid;
	gap: var(--space-2);
	margin-block: var(--space-3);
}

@media (min-width: 640px) {
	.poradca-result__alts {
		grid-template-columns: 1fr 1fr;
	}
}

.poradca-result__global-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block: var(--space-3);
	font-size: var(--fs-small);
}

.poradca-result__call,
.poradca-result__email {
	color: var(--link);
	background: transparent;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.poradca-result__ymyl {
	font-size: var(--fs-small);
	color: var(--text-muted);
	padding: var(--space-2) var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--privilio-blue);
	margin-block: var(--space-3);
}

.poradca-modal__restart {
	background: transparent;
	border: 0;
	color: var(--link);
	text-decoration: underline;
	font-size: var(--fs-small);
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.poradca-noscript {
	position: fixed;
	bottom: var(--space-2);
	right: var(--space-2);
	max-width: 320px;
	padding: var(--space-2);
	background: var(--bg-section-alt);
	border-left: 4px solid var(--privilio-orange);
	font-size: var(--fs-small);
}

.poradca-toast {
	position: fixed;
	bottom: var(--space-3);
	left: 50%;
	transform: translateX(-50%) translateY(2rem);
	padding: var(--space-2) var(--space-3);
	background: var(--bg-dark);
	color: var(--text-inverse);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
	z-index: 1100;
}

.poradca-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@keyframes poradca-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes poradca-slide-up {
	from { opacity: 0; transform: translateY(2rem); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.poradca-modal__backdrop,
	.poradca-modal__panel {
		animation: none;
	}
}

/* ==== components/_mega-menu.v6.css ==== */
/**
 * "Služby" header mega-menu (#11, Figma page-04).
 *
 * Desktop-only dropdown anchored to the sticky .site-header (its containing
 * block). Opens on hover OR focus-within of the .has-mega <li>, so it works for
 * mouse + keyboard with no JS; mega-menu.js only switches hub tabs. The nav is
 * display:none below 1024px, so the panel never shows on mobile.
 *
 * Layout: a centered white card with three areas — hub tabs (col 1), the active
 * hub's services grouped by kategoria (cols 2–3), a brand media panel (col 4,
 * photo-gated B5 → placeholder).
 *
 * v6 (2026-07-17): hub tabs are now <a> links to the /sluzby/<hub>/ landing
 * pages (Eva: click on the heading navigates; hover still switches the panel)
 * — text-decoration neutralised on the tab.
 */

.site-header__nav .has-mega {
	position: static; /* let .mega-menu anchor to .site-header, not the <li> */
}

/* The mega-menu lives inside .site-header__nav, so the nav's link rules cascade
   in. Neutralise the global `.site-header__nav a:hover::after` underline bar so
   it doesn't paint a stray blue line on every panel link. */
.mega-menu a::after {
	content: none;
}

.mega-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 90;
	padding: 0 var(--container-pad-x) var(--space-4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/* Hover-intent close grace (250ms): the header strip between the nav
	   link's text and the panel top belongs to neither the <li> nor the
	   panel, so a normal-speed mouse travel dropped :hover and closed the
	   menu mid-crossing (Tomáš review 2026-07-10). The delay keeps the panel
	   open while the pointer crosses; re-entering the panel (a child of
	   .has-mega) restores :hover and cancels the close. The old
	   `pointer-events: none` made the still-fading panel hover-transparent,
	   which is exactly what broke re-entry — removed; `visibility: hidden`
	   already blocks events once fully closed. */
	transition: opacity var(--dur-base) var(--ease-out) 250ms,
	            transform var(--dur-base) var(--ease-out) 250ms,
	            visibility 0s linear calc(250ms + var(--dur-base));
}

.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.mega-menu__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-4);
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 280px;
	gap: var(--space-4);
	align-items: stretch;
	/* The longest hub (Individuálna, 28 services) can exceed a short laptop
	   viewport — cap to the space below the header and scroll if needed. */
	max-height: calc(100vh - 150px);
	overflow-y: auto;
}

/* ── Col 1: hub tabs ──────────────────────────────────────────────────── */
.mega-menu__hubs {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	border-right: 1px solid var(--border);
	padding-right: var(--space-3);
}

.mega-menu__hub {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-2);
	background: transparent;
	border: 0;
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--fs-card-body);
	font-weight: 600;
	color: var(--text-primary);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.mega-menu__hub:hover,
.mega-menu__hub.is-active {
	background: var(--bg-section-alt);
}

.mega-menu__hub-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: var(--privilio-blue);
}

.mega-menu__hub[data-mm-color="0"] .mega-menu__hub-icon { background: var(--privilio-orange); }
.mega-menu__hub[data-mm-color="1"] .mega-menu__hub-icon { background: var(--privilio-blue); }
.mega-menu__hub[data-mm-color="2"] .mega-menu__hub-icon { background: color-mix(in srgb, var(--privilio-blue) 55%, var(--privilio-paper)); }

.mega-menu__hub-title { flex: 1 1 auto; }

.mega-menu__hub-arrow {
	flex: 0 0 auto;
	color: var(--text-muted);
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.mega-menu__hub:hover .mega-menu__hub-arrow,
.mega-menu__hub.is-active .mega-menu__hub-arrow {
	opacity: 1;
}

/* ── Cols 2–3: services grouped by kategoria ──────────────────────────── */
.mega-menu__panel[hidden] { display: none; }

/* The header nav's `white-space: nowrap` (_header.v6: "Pre firmy" / "O nás"
   must never break) cascades into this panel, which sits inside
   .site-header__nav — long service titles then overflowed their grid column
   onto the neighbour (Tomáš review 2026-07-10). Same specificity (0,1,1),
   this file imports later, so links inside the panel wrap normally again. */
.mega-menu a {
	white-space: normal;
}

.mega-menu__cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3) var(--space-4);
	align-content: start;
}

.mega-menu__cat { break-inside: avoid; }

.mega-menu__cat-title {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--text-primary);
}

/* `.mega-menu` prefix raises specificity to (0,2,0) so the tight 2px gap wins
   over the global `.site-header__nav ul { gap: var(--space-3) }` (0,1,1). */
.mega-menu .mega-menu__services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mega-menu__services a {
	display: block;
	padding: 4px 0;
	font-size: var(--fs-card-body);
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.mega-menu__services a:hover,
.mega-menu__services a:focus-visible {
	color: var(--link);
}

.mega-menu__all {
	display: inline-block;
	margin-top: var(--space-3);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--link);
	text-decoration: none;
}

.mega-menu__all:hover { text-decoration: underline; }

/* ── Col 4: brand media (photo-gated, B5) ─────────────────────────────── */
.mega-menu__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	min-height: 220px;
}

.mega-menu__media-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt));
}

/* Narrower desktops: drop the media column, keep tabs + services. */
@media (max-width: 1279.98px) {
	.mega-menu__inner { grid-template-columns: 240px minmax(0, 1fr); }
	.mega-menu__media { display: none; }
}

/* ==== components/_mobile-nav.css ==== */
/**
 * Mobile-nav drawer + hamburger (#11 follow-up).
 *
 * The desktop nav is display:none < 1024px; this off-canvas drawer exposes the
 * same links there. Burger shows < 1024px (where the nav hides); the desktop
 * CTAs move into the drawer on mobile. Opens via a class toggle (mobile-nav.js)
 * — visibility + transform so it animates and stays out of the a11y tree when
 * closed. Reduced motion is handled globally (zeroed --dur-* tokens).
 */

/* ── Hamburger (mobile only) ──────────────────────────────────────────── */
.site-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline-start: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--privilio-black);
	cursor: pointer;
}

@media (min-width: 1024px) {
	.site-header__burger { display: none; }
}

.site-header__burger-bar,
.site-header__burger-bar::before,
.site-header__burger-bar::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.site-header__burger-bar { position: relative; }
.site-header__burger-bar::before { content: ""; position: absolute; left: 0; top: -7px; }
.site-header__burger-bar::after  { content: ""; position: absolute; left: 0; top: 7px; }

/* On mobile the desktop CTAs live inside the drawer instead. */
@media (max-width: 1023.98px) {
	.site-header__cta { display: none; }
}

/* ── Drawer ───────────────────────────────────────────────────────────── */
html.mobile-nav-open,
html.mobile-nav-open body { overflow: hidden; }

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	transition: visibility 0s linear var(--dur-base);
}

.mobile-nav.is-open {
	visibility: visible;
	transition-delay: 0s;
}

@media (min-width: 1024px) {
	.mobile-nav { display: none; }
}

.mobile-nav__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 15, 0.45);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.mobile-nav.is-open .mobile-nav__overlay { opacity: 1; }

.mobile-nav__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(360px, 86vw);
	background: var(--bg-page);
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--dur-base) var(--ease-out);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3);
	border-bottom: 1px solid var(--border);
}

.mobile-nav__brand { display: inline-block; width: 120px; }
.mobile-nav__brand svg { width: 100%; height: auto; display: block; }

.mobile-nav__close {
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	font-size: 2rem;
	line-height: 1;
	color: var(--privilio-black);
	cursor: pointer;
}

.mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: var(--space-2);
	flex: 1 1 auto;
}

.mobile-nav__item { border-bottom: 1px solid var(--border); }

.mobile-nav__item > a,
.mobile-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-2) var(--space-1);
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.mobile-nav__chevron {
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-fast) var(--ease-out);
}

.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__chevron { transform: rotate(-135deg); }

.mobile-nav__sub {
	list-style: none;
	margin: 0 0 var(--space-2);
	padding: 0 0 0 var(--space-2);
}

.mobile-nav__sub a {
	display: block;
	padding: var(--space-1);
	font-size: var(--fs-card-body);
	color: var(--text-muted);
	text-decoration: none;
}

.mobile-nav__sub a:hover,
.mobile-nav__sub a:focus-visible { color: var(--link); }

.mobile-nav__cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	border-top: 1px solid var(--border);
}

.mobile-nav__cta .button-cta { width: 100%; text-align: center; }

/* ==== components/_iso-badge.css ==== */
/**
 * ISO 9001 certificate badge (§J₂) + footer trust row (§J₂ badge + §M komora).
 *
 * Component rendered by template-parts/iso-badge.php. Two variants:
 *   .iso-badge--footer   compact, tuned for the blue footer (white on blue)
 *   .iso-badge--inline   page trust badge for light backgrounds (/kontakt/,
 *                        /o-nas/o-firme/ — wired by other agents)
 *
 * The badge links the bundled PDF; it is intentionally NOT part of any YMYL
 * "Obsah odborne overili" block (Pavel email 5).
 */

.iso-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	border-radius: var(--radius-pill);
	font-weight: 500;
	line-height: 1.2;
	transition: border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

.iso-badge__mark {
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.iso-badge:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ── Footer variant (dark blue background) ─────────────────────────────── */
.iso-badge--footer {
	padding: 0.375rem 0.75rem 0.375rem 0.5rem;
	font-size: var(--fs-xs);
	color: var(--text-inverse);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.iso-badge--footer .iso-badge__mark {
	color: var(--privilio-orange);
}

.iso-badge--footer:hover,
.iso-badge--footer:focus-visible {
	border-color: var(--privilio-orange);
	background: rgba(255, 255, 255, 0.12);
}

.iso-badge--footer:focus-visible {
	outline-color: var(--privilio-orange);
}

/* ── Inline variant (light page background) ───────────────────────────── */
.iso-badge--inline {
	padding: 0.5rem 0.875rem;
	font-size: var(--fs-small);
	color: var(--text-primary);
	background: var(--bg-page);
	border: 1px solid var(--border-strong);
}

.iso-badge--inline .iso-badge__mark {
	color: var(--accent-yellow-text);
	background: var(--privilio-orange);
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
}

.iso-badge--inline:hover,
.iso-badge--inline:focus-visible {
	border-color: var(--privilio-blue);
}

/* ── Footer trust row: ISO badge + komora line (§J₂ + §M) ─────────────── */
.site-footer__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-block-end: var(--space-3);
}

.site-footer__komora {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--text-inverse);
	opacity: 0.85;
}

/* ==== components/_consent.css ==== */
/**
 * Cookie-consent lišta (inc/consent/bootstrap.php + assets/js/consent.js).
 *
 * Fixed bottom banner, white card on the brand shadow, buttons reuse
 * .button-cta / .button-cta--outline. z-index 900: above all page chrome
 * (header 100, mobile-nav 200), below the poradca modal (1000) — a modal
 * the visitor deliberately opened stays on top.
 *
 * The [hidden] guard is explicit: `display: flex` on the root would
 * otherwise beat the UA's [hidden] rule (author > UA — the 0.9.79
 * services-grid lesson).
 */

.cookie-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	justify-content: center;
	padding: var(--space-2);
	pointer-events: none; /* the panel re-enables; the page behind stays scrollable + clickable */
}

.cookie-consent[hidden] {
	display: none;
}

.cookie-consent__panel {
	pointer-events: auto;
	width: 100%;
	max-width: 780px;
	background: var(--bg-page);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 40px rgba(15, 15, 15, 0.18);
	padding: var(--space-3);
}

.cookie-consent__title {
	font-size: var(--fs-card-h);
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-1);
}

.cookie-consent__text {
	font-size: var(--fs-card-body);
	line-height: var(--lh-body);
	margin: 0 0 var(--space-2);
	color: var(--text-muted);
}

.cookie-consent__text a {
	color: var(--link);
	text-decoration: underline;
}

/* ---- Category rows (expanded "Prispôsobiť" mode) ---- */

.cookie-consent__cats {
	display: grid;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
	padding: var(--space-2);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
}

.cookie-consent__cats[hidden] {
	display: none;
}

.cookie-consent__cat-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-weight: 500; /* → Mundial DemiBold per the 500–600 face mapping */
	cursor: pointer;
}

.cookie-consent__cat-label input {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--privilio-blue);
	cursor: inherit;
}

.cookie-consent__cat-label input:disabled {
	cursor: not-allowed;
}

.cookie-consent__cat-desc {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--text-muted);
	margin: 0.25rem 0 0;
}

/* ---- Actions ---- */

.cookie-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.cookie-consent__actions .button-cta {
	font-size: var(--fs-card-body);
	padding: 10px 20px;
}

.cookie-consent__actions [hidden] {
	display: none;
}

/* ---- Phones: full-width bottom sheet, stacked buttons ---- */

@media (max-width: 767px) {
	.cookie-consent {
		padding: 0;
	}

	.cookie-consent__panel {
		max-width: none;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		border-inline: 0;
		border-bottom: 0;
		/* Keep the panel scrollable if the expanded categories outgrow a
		   short landscape viewport. */
		max-height: 85vh;
		overflow-y: auto;
	}

	.cookie-consent__actions .button-cta {
		flex: 1 1 100%;
	}
}

/* ==== components/_video-modal.css ==== */
/**
 * Hero video overlay (Eva 2026-07-24, option B — on-site click-to-load YouTube).
 * Mirrors the poradca-modal conventions: fixed backdrop + centred panel,
 * hidden/aria-hidden toggled by assets/js/hero-video.js.
 */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;                 /* above poradca modal (1000) + header */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3, 1.5rem);
}

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

.video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 15, 0.8);
	animation: video-modal-fade var(--dur-base, 0.2s) var(--ease-out, ease);
}

.video-modal__panel {
	position: relative;
	width: 100%;
	max-width: 960px;
	animation: video-modal-in var(--dur-slow, 0.32s) var(--ease-out, ease);
}

/* 16:9 responsive frame; the iframe is injected by JS on open. */
.video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	box-shadow: var(--shadow-lg, 0 24px 82px rgba(15, 15, 15, 0.35));
}

.video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modal__close {
	position: absolute;
	top: -2.75rem;                 /* sits above the video, clear of the frame */
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.75rem;
	line-height: 1;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	border-radius: var(--radius-pill, 999px);
	transition: background 0.15s ease;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

@keyframes video-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes video-modal-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* On very short/small screens keep the close button reachable. */
@media (max-width: 600px) {
	.video-modal { padding: var(--space-2, 1rem); }
	.video-modal__close { top: -2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
	.video-modal__backdrop,
	.video-modal__panel {
		animation: none;
	}
}

/* ==== sections/_hero.v8.css ==== */
/**
 * Hero (T39 Phase B, Figma `394:1057` Header | HP, 1440×866).
 *
 * Hybrid positioning model: each absolutely-positioned PARENT is placed at
 * its declared Figma bbox (percentage of 1440 ref width). Children inside
 * each parent flow normally with declared gaps. This gives pixel-perfect
 * structure at desktop without forcing every glyph to be position:absolute.
 *
 * Layer map (Figma absolute coords within the hero frame 1440×866):
 *   .hero__smile         500,26   335×431    smile.svg (decoration)
 *   .hero__text          160,158  608×~384   H1 + sub + CTA flow inside
 *   .hero__media         736,26   624×638    photo overflows down to 738
 *   .hero__video-overlay 650,529  607×191    overflows left of photo
 *   .hero__trust         80,631   ~378×73    avatars + text row
 *
 * Mobile <1024px: collapses to flow layout.
 */

.hero {
	position: relative;
	width: 100%;
	background: var(--bg-page);
	overflow: hidden;
}

/* ───── Desktop ≥1024px: absolute positioning matching Figma. ──────────── */
@media (min-width: 1024px) {
	.hero {
		max-width: 1440px;
		margin-inline: auto;
		/* Height is driven by the flowing text column (left); the media + smile
		   are absolutely-positioned overlays. Was `aspect-ratio: 1440/866`, a
		   fixed height that clipped the trust row once the fallback font (Mundial
		   pending, B3) reflowed the H1/lead taller. min-height keeps room for the
		   media when the copy is short. */
		min-height: 37rem;
	}

	.hero__inner {
		position: relative;
		display: block;
		max-width: none;
		min-height: inherit;
		padding: 9.875rem 0 4rem;   /* 158px Figma top offset + bottom breathing room */
	}

	.hero__smile {
		position: absolute;
		left: 34.722%;             /* 500/1440 */
		top: 3.002%;                /* 26/866 */
		width: 23.264%;             /* 335/1440 */
		height: auto;
		z-index: 1;
		pointer-events: none;
	}

	.hero__text {
		position: relative;        /* flows → drives the hero height (no clip) */
		margin-left: 11.111%;      /* 160/1440 */
		width: 42.222%;             /* 608/1440 */
		max-width: 608px;
		z-index: 2;
	}

	.hero__text h1 {
		font-size: clamp(2.5rem, 5.28vw, 4.75rem);   /* 76px @ 1440 */
		font-weight: 700;
		line-height: 1.1;
		letter-spacing: 0;
		color: var(--privilio-black);
		margin: 0 0 1.5rem;
	}

	.hero__sub {
		font-size: clamp(1rem, 1.25vw, 1.125rem);
		font-weight: 400;
		line-height: 1.5;
		color: var(--privilio-black);
		margin: 0 0 2rem;
		max-width: 553px;
	}

	.hero__actions {
		display: flex;
		gap: 16px;
	}

	.hero__media {
		position: absolute;
		left: 51.111%;             /* 736/1440 */
		top: 3.002%;                /* 26/866 */
		width: 43.333%;             /* 624/1440 */
		aspect-ratio: 624 / 738;    /* photo overflows to 738 declared */
		/* z-index 1 == .hero__smile: the smile <img> comes AFTER the media in
		   DOM, so it deliberately paints OVER the video card. A z-2 "fix" was
		   shipped and REVERTED the same day — Tomáš prefers the overlapping
		   smile (2026-07-10); Eva to confirm on client review. To flip:
		   z-index: 2 here puts the card above the smile. */
		z-index: 1;
	}

	.hero__photo {
		position: absolute;
		inset: 0;
		overflow: hidden;
		background: var(--bg-section-alt);
	}

	.hero__video-overlay {
		position: absolute;
		left: -8%;                    /* bleeds slightly left of photo per Figma */
		right: 4%;
		bottom: 8%;
		width: auto;
		height: auto;
		min-height: 25.881%;
		background: var(--bg-page);
		padding: 24px;
		display: grid;
		grid-template-columns: 1fr 160px;   /* text left, thumbnail right (Figma 394:1062) */
		gap: 16px;
		align-items: stretch;
		z-index: 3;
		box-shadow: 0 24px 82px rgba(15, 15, 15, 0.12);   /* Figma 394:1063 blur r=82 */
	}

	.hero__trust {
		/* Flows below the CTA inside the text column (Figma 394:1083). Was
		   absolutely positioned at a fixed top, which collided with the lead
		   text once it reflowed taller under the fallback font (Mundial woff2
		   still pending, B3) — see Session 2026-06-15 visual QA. */
		display: flex;
		gap: 24px;
		align-items: center;
		margin: 2.5rem 0 0;
		padding: 0;
	}
}

/* ───── Mobile/tablet <1024px: flow layout. ────────────────────────────── */
@media (max-width: 1023.98px) {
	.hero {
		padding-block: var(--space-5) var(--space-4);
	}

	.hero__inner {
		display: grid;
		gap: 32px;
		grid-template-columns: 1fr;
		padding-inline: var(--container-pad-x);
		max-width: 1280px;
		margin-inline: auto;
	}

	.hero__text { order: 1; }
	.hero__media { order: 2; position: relative; width: 100%; aspect-ratio: 4 / 3; }

	.hero__text h1 {
		font-size: clamp(2rem, 7vw, 3rem);
		font-weight: 700;
		line-height: 1.15;
		margin: 0 0 1rem;
		color: var(--privilio-black);
	}

	.hero__sub {
		font-size: 1.0625rem;
		line-height: 1.5;
		margin: 0 0 1.5rem;
		color: var(--privilio-black);
	}

	.hero__actions {
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
	}

	.hero__photo { position: absolute; inset: 0; }

	/* Mobile hero box is landscape (4/3), so object-fit:cover + default centre
	   crops the subject's head off the top. Bias the crop upward. Desktop uses
	   a portrait box (624/738) where centre is correct, so scope this to mobile.
	   Eva 2026-07-19. */
	.hero__photo img,
	.hero__media img { object-position: 50% 20%; }

	.hero__video-overlay {
		position: absolute;
		left: 8px;
		right: 8px;
		bottom: 8px;
		background: var(--bg-page);
		padding: 12px;
		display: grid;
		grid-template-columns: 1fr 96px;   /* text left, thumbnail right (matches markup order) */
		gap: 12px;
	}

	.hero__trust {
		/* Now lives inside .hero__text (the padded column), so no extra
		   padding-inline — it would double-indent. */
		display: flex;
		gap: 16px;
		align-items: center;
		margin-top: 24px;
	}

	.hero__smile { display: none; }
}

/* ───── Shared visual rules. ───────────────────────────────────────────── */

.hero__photo img,
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__photo--placeholder,
.hero__video-thumb--placeholder {
	background:
		repeating-linear-gradient(
			135deg,
			var(--bg-section-alt) 0 12px,
			color-mix(in srgb, var(--bg-section-alt) 92%, var(--text-muted)) 12px 13px
		);
}

.hero__video-thumb {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 160 / 156;     /* Figma 394:1064 Images rect 160×156 */
	overflow: hidden;
	border-radius: 0;            /* sharp corners per Figma (no rounding) */
	background: #d9d9d9;
	align-self: center;
}

.hero__video-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Whole poster links to the video (same target as the "Pustiť video" text CTA).
   Previously only the ▶ triangle was clickable. */
.hero__video-poster-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;              /* kill the inline-img descender gap */
	cursor: pointer;
}

.hero__video-poster-link:focus-visible {
	outline: 2px solid var(--privilio-black);
	outline-offset: -2px;
}

/* Figma 394:1068 Polygon 5 — bare black triangle, no circular chrome.
   Now a visual cue inside .hero__video-poster-link; the poster handles the click. */
.hero__video-play {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: auto;
	height: auto;
	border: 0;
	background: none;
	color: var(--privilio-black);
	font-size: 28px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	pointer-events: none;        /* clicks fall through to the poster link */
	transition: opacity 0.15s ease;
}

.hero__video-poster-link:hover .hero__video-play,
.hero__video-poster-link:focus-visible .hero__video-play {
	opacity: 0.7;
}

.hero__video-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}

.hero__video-title {
	font-weight: 700;
	font-size: clamp(1.125rem, 1.4vw, 2rem);
	line-height: 1.05;
	color: #1c1c1c;
	margin: 0;
}

.hero__video-body {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #1c1c1c;
	margin: 0;
}

.hero__video-cta-label {
	font-weight: 700;
	font-size: 0.9375rem;
	color: #1c1c1c;
}

.hero__trust-avatars {
	position: relative;
	width: 201px;
	height: 65px;
	flex-shrink: 0;
}

.hero__trust-avatar {
	position: absolute;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: #d9d9d9;
	border: 4px solid var(--bg-page);
}

.hero__trust-avatars .hero__trust-avatar:nth-child(1) { left: 0; }
.hero__trust-avatars .hero__trust-avatar:nth-child(2) { left: 45.5px; }
.hero__trust-avatars .hero__trust-avatar:nth-child(3) { left: 91px; }
.hero__trust-avatars .hero__trust-avatar:nth-child(4) { left: 136.5px; }

.hero__trust-text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hero__trust-line {
	font-size: 1.25rem;          /* 20 declared */
	font-weight: 400;
	line-height: 1.5;             /* 30/20 declared */
	color: rgba(12, 14, 18, 0.56);   /* Figma 394:1077/1078 caption op=0.56 */
	margin: 0;
}

/* "Pomohli sme už viac ako" stays on one line at desktop (Figma 394:1069). */
@media (min-width: 1024px) {
	.hero__trust-line {
		white-space: nowrap;
	}
}

/* "8.000+" inline within the second line, declared Mundial@600/26 lh=39. */
.hero__trust-number {
	font-size: 1.625rem;          /* 26 declared */
	font-weight: 600;
	color: #0c0e12;
	margin-inline-end: 0.25em;
}

/* ==== sections/_trust-banner.v2.css ==== */
/**
 * Trust banner (Task 30, spec §4.2). Slim horizontal strip under hero.
 */

.trust-banner {
	background: var(--bg-section-alt);
	padding-block: var(--space-3);
	border-block: 1px solid var(--border);
}

.trust-banner__list {
	list-style: none;
	margin: 0 auto;
	max-width: var(--container-max);
	padding-inline: var(--container-pad-x);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-5);
}

.trust-banner__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--text-primary);
}

.trust-banner__check {
	color: var(--privilio-blue);
	font-weight: 700;
}

/* ==== sections/_chip-strip.v5.css ==== */
/**
 * Chip-strip "Words" (T39 Phase B, Figma `394:1421` Words, 1815×39).
 *
 * v5 (2026-07-17, Eva): dynamický pásik — a CSS marquee. The track holds a
 * belt with TWO identical [word, star] sequences; the belt translates -50%
 * and loops, so the second copy splices seamlessly (no double star at the
 * seam). Hover/focus pauses the belt. prefers-reduced-motion restores the v4
 * static, hand-scrollable strip and hides the duplicate sequence.
 *
 * Declared: words Mundial@600/24 lh=28 #000, stars 39×39 #000, gap 23.
 */

.chip-strip {
	background: var(--bg-page);
	overflow: hidden;
	/* Top padding larger than Figma: the trust-banner chips sit directly
	   above and the two rows read squeezed together (Eva 2026-07-16). */
	padding-block: var(--space-4) 12px;
	max-width: 1440px;
	margin-inline: auto;
	/* Figma `394:1421` Words frame has op=0.60 on the whole group, so the
	   #000 text/stars read as ~grey over the paper background. */
	opacity: 0.6;
}

@media (min-width: 1024px) {
	.chip-strip {
		padding-block: var(--space-4) 8px;
	}
}

.chip-strip__track {
	overflow: hidden;
	width: 100%;
}

.chip-strip__belt {
	display: flex;
	width: max-content;
	gap: 23px;
	animation: chip-strip-marquee 45s linear infinite;
}

.chip-strip__seq {
	display: flex;
	gap: 23px;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

/* -50% is exactly one sequence (both copies are identical), so the loop
   restart is invisible. The belt gap (23px) matches the in-sequence gap. */
@keyframes chip-strip-marquee {
	to {
		transform: translateX(calc(-50% - 11.5px));
	}
}

.chip-strip__track:hover .chip-strip__belt,
.chip-strip__track:focus-visible .chip-strip__belt,
.chip-strip__track:focus-within .chip-strip__belt {
	animation-play-state: paused;
}

.chip-strip__word {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.67vw, 1.5rem);   /* 24 @ 1440 */
	line-height: 1.17;
	color: var(--privilio-black);
}

.chip-strip__star {
	width: clamp(0.875rem, 1.2vw, 1.125rem);
	height: auto;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.chip-strip__belt {
		animation: none;
		width: auto;
	}

	.chip-strip__seq[aria-hidden="true"] {
		display: none;
	}

	.chip-strip__track {
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-inline: var(--container-pad-x);
	}

	.chip-strip__track::-webkit-scrollbar {
		display: none;
	}
}

/* ==== sections/_trust-stats.v7.css ==== */
/**
 * Trust stats (T39 Phase B, Figma `394:1089` Stats, 1440×930).
 *
 * 3 white cards in a row inside a 1280-wide container. Cards float with a
 * soft drop shadow (Figma) rather than a flat border.
 *
 * Decorative overlays (desktop only, Figma 394:1090 + 394:1110):
 *   .trust-stats__bg-vector       smooth black wave anchored across the TOP
 *   .trust-stats__shape--blue     #5270EB disc clipped at the left edge → half
 *   .trust-stats__shape--square   #FCC552 square, lower-left
 *   .trust-stats__shape--triangle #FCC552 triangle, right edge
 */

.trust-stats {
	position: relative;
	width: 100%;
	background: var(--bg-page);
	overflow: hidden;
}

@media (max-width: 1023.98px) {
	.trust-stats {
		padding-block: var(--space-5);
	}
}

@media (min-width: 1024px) {
	.trust-stats {
		max-width: 1440px;
		margin-inline: auto;
		/* Tight Figma composition: just enough room for the wave above the
		   cards plus breathing room below — no large empty band. */
		padding-block: 120px 96px;
	}
}

/* ── Squiggle: smooth wave anchored to the TOP, full-bleed ─────────────── */
.trust-stats__bg-vector {
	display: none;
	position: absolute;
	left: -36px;             /* Figma 394:1090 x ≈ -36, overflows both sides */
	right: -36px;
	top: 10px;               /* Figma y ≈ 10px from section top */
	width: auto;
	height: 200px;
	pointer-events: none;
	z-index: 0;
}

@media (min-width: 1024px) {
	.trust-stats__bg-vector { display: block; }
}

.trust-stats__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.trust-stats__inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

.trust-stats__box {
	background: var(--bg-page);
	box-shadow: var(--shadow-md);     /* Figma: cards float (soft drop shadow) */
	border-radius: 2px;
	padding: 32px 28px;
}

.trust-stats__value {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(3rem, 5.56vw, 5rem);   /* 80 @ 1440 */
	line-height: 1;
	color: var(--privilio-blue);
	letter-spacing: 0;
	margin: 0 0 1rem;
}

.trust-stats__label {
	font-weight: 700;
	font-size: clamp(1.25rem, 1.81vw, 1.625rem);
	line-height: 1;
	color: #1c1c1c;
	margin: 0 0 1rem;
}

.trust-stats__body {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
	color: #1c1c1c;
	margin: 0;
	max-width: 360px;
}

/* ── Trio: three separately-positioned shapes (desktop only) ──────────── */
.trust-stats__shape {
	display: none;
	position: absolute;
	z-index: 2;               /* above cards, matching Figma overlap */
	pointer-events: none;
}

@media (min-width: 1024px) {
	.trust-stats__shape { display: block; }
}

/* Blue disc 77×77 at Figma x=-24 → clipped to a flush half-circle by the
   section's overflow:hidden. Figma y ≈ 280; shifted up ~45px to track the
   tighter card band under the reduced top padding. */
.trust-stats__shape--blue {
	left: -24px;
	top: 235px;
	width: 77px;
	height: 77px;
	border-radius: 50%;
	background: var(--privilio-blue);
}

/* Yellow square 61×61, Figma (40, 425), shifted up with the card band. */
.trust-stats__shape--square {
	left: 40px;
	top: 380px;
	width: 61px;
	height: 61px;
	background: var(--accent-yellow);
}

/* Yellow triangle 124×124 at the 3rd card's right edge (Figma 394:1089). Placed
   BEHIND the card (z-index 0) so it peeks from the card's right edge and can
   never cover "Hodnotenie Google" — the fallback font (Mundial pending, B3)
   widens that text ~200px past its Mundial extent, into the triangle's footprint.
   Once Mundial loads the text narrows and more of the triangle is exposed. */
.trust-stats__shape--triangle {
	right: 16px;
	top: 175px;
	z-index: 0;
	width: 0;
	height: 0;
	border-left: 62px solid transparent;
	border-right: 62px solid transparent;
	border-bottom: 108px solid var(--accent-yellow);
}

/* ==== sections/_audience.v9.css ==== */
/**
 * Audience "Komu pomáhame" (T39 Phase B, Figma `394:1114` Naše služby, 1440×1108;
 * v7 = Eva 2026-07-16 revision: eyebrow + title above the photo, actions always
 * stacked, photo clickable).
 *
 * v7 dropped the Figma desktop aspect-ratio pin (1440/1108): the title-above-photo
 * layout makes the cards taller and the pinned height + overflow:hidden clipped
 * the card bottoms. Height now follows content, spacing via padding-block.
 *
 *   vzor decoration at (~bottom-right) — Figma `394:1147` 445×373
 */

.audience {
	position: relative;
	width: 100%;
	background: var(--bg-page);
	overflow: hidden;
	padding-block: var(--space-5);
}

@media (min-width: 1024px) {
	.audience {
		max-width: 1440px;
		margin-inline: auto;
		padding-block: var(--space-6);
	}
}

.audience__vzor {
	display: none;
	position: absolute;
	right: 2%;
	bottom: 8%;
	width: 30.9%;             /* 445/1440 */
	max-width: 445px;
	height: auto;
	pointer-events: none;
	/* BEHIND the cards: Figma 394:1147 shows this overlapping the bottom-right of
	   card 2, but the fallback font (Mundial pending, B3) widens the card body
	   text + button into the decoration's footprint, so on top it covered
	   "…PNF, Mulligan…" and the "Prejsť na všetky kurzy" button. Behind, the white
	   card protects the content and the disc/squiggle peek from the corner. */
	z-index: 0;
}

@media (min-width: 1024px) {
	.audience__vzor { display: block; }
}

.audience__header {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto 48px;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 768px) {
	.audience__header {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);   /* Figma: H2 narrower left, lead wider right */
		gap: 48px;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.audience__header {
		padding-inline: 80px;
		margin-block-end: 64px;
	}
}

.audience__header h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.33vw, 3rem);    /* 48 @ 1440 */
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.audience__lead {
	font-weight: 400;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.5;
	color: var(--privilio-black);
	max-width: 614px;
	margin: 0;
}

.audience__cards {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.audience__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.audience__cards {
		padding-inline: 80px;
	}
}

.audience__card {
	background: var(--bg-page);
	box-shadow: 0 4px 82px rgba(15, 15, 15, 0.08);   /* Figma 394:1121 DROP_SHADOW r=82, no stroke */
	display: flex;
	flex-direction: column;
}

.audience__card-head {
	padding: 24px 24px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 768px) {
	.audience__card-head {
		padding: 48px 48px 0;
	}
}

.audience__card-media {
	display: block;               /* the media is an <a> since v7 */
	width: 100%;
	aspect-ratio: 624 / 360;
	overflow: hidden;
	background: #d9d9d9;          /* Figma 394:1123 placeholder mid-grey (no token; brand greys are warmer) */
	margin-block-start: 16px;
}

@media (min-width: 768px) {
	.audience__card-media {
		margin-block-start: 32px;
	}
}

.audience__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.audience__card-media--placeholder {
	background-color: #d9d9d9;   /* Figma 394:1123 flat mid-grey placeholder + centered image glyph */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.audience__card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Fill the card's remaining height so .audience__text{flex:1} actually
	   bites and both cards' actions pin to the card bottom (button alignment,
	   Eva 2026-07-16 — the v7 restructure left card 2's button floating). */
	flex: 1;
}

@media (min-width: 768px) {
	.audience__card-body {
		padding: 48px;             /* declared */
		gap: 32px;                 /* declared */
	}
}

.audience__eyebrow {
	font-weight: 600;
	font-size: 1rem;                /* 16 declared */
	line-height: 1.5;
	color: var(--privilio-blue);
	margin: 0;
}

.audience__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 2.78vw, 2.5rem);   /* 40 @ 1440 */
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.audience__text {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--privilio-black);
	margin: 0;
	flex: 1;
}

.audience__actions {
	/* Stacked at ALL widths since v7 — Eva 2026-07-16: the chevron link
	   ("Programy pre firmy") belongs UNDER the primary button, not next to it. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

@media (min-width: 768px) {
	.audience__actions {
		/* Cards sit side by side and the blocks are bottom-pinned; card 1 has
		   button + chevron (52 + 16 + 52), card 2 button only. Reserve the
		   chevron row on both so the primary buttons land on one line. */
		min-height: 120px;
	}
}

/* Section-scoped CTA: Figma 394:1132 outlined pill has dark (#000000) text,
   not blue. Override the shared .button-cta--outline text colour here. */
.audience .button-cta--outline {
	color: var(--privilio-black);
}

.audience .button-cta--outline:hover,
.audience .button-cta--outline:focus-visible {
	color: var(--text-inverse);
}

/* ==== sections/_services-grid.v6.css ==== */
/**
 * Services grid — Ponuka služieb (T46, Figma `394:1151`).
 *
 * Header is 2-column at desktop:
 *   LEFT  → eyebrow + H2 + audience-pill filter (Všetci/Dospelí/Deti/Seniori/Ženy)
 *   RIGHT → lead + 2 dropdown selects (skupina / kategoria)
 *
 * 3-col grid of service cards with audience + service-type badges, 1 yellow
 * CTA tile in the last cell. "Zobraziť viac služieb kategórie" link below.
 * Inline blue "CTA FORMA" banner at the end with 2 grey avatars + heading +
 * body + yellow Zavolať pill.
 */

.services-grid {
	background: var(--bg-page);
	padding-block: var(--space-5);
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.services-grid { padding-block: var(--space-7); }
}

.services-grid__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

@media (min-width: 1024px) {
	.services-grid__inner { padding-inline: 80px; }
}

/* Header — 2-col split (eyebrow+H2+pills | lead+dropdowns) */
.services-grid__header {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	margin-block-end: 40px;
	align-items: start;
}

@media (min-width: 1024px) {
	.services-grid__header {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 64px;
	}
}

.services-grid__header-left,
.services-grid__header-right {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.services-grid__eyebrow {
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--privilio-blue);
	margin: 0;
}

.services-grid__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.33vw, 3rem);
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.services-grid__lead {
	font-weight: 400;
	font-size: clamp(1rem, 1.05vw, 1.0625rem);
	line-height: 1.5;
	color: var(--privilio-black);
	margin: 0;
}

/* Audience-pill filter (left column) */
.services-grid__audience {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.services-grid__audience-label {
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--privilio-blue);
	margin: 0;
}

.services-grid__audience-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.services-grid__pill {
	font-family: inherit;
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1;
	padding: 10px 20px;
	border-radius: 100px;
	border: 1px solid var(--border-strong);
	background: var(--bg-page);
	color: var(--privilio-black);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.services-grid__pill:hover,
.services-grid__pill:focus-visible {
	border-color: var(--privilio-black);
}

.services-grid__pill.is-active {
	background: var(--privilio-orange);
	border-color: var(--privilio-orange);
	color: var(--privilio-black);
}

/* Dropdown filters (right column) */
.services-grid__filters {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.services-grid__filters {
		grid-template-columns: repeat(2, 1fr);
	}
}

.services-grid__filter-select {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* The explicit display above would override the UA [hidden] rule — the
   skupinová-mode select swap (kategória ↔ deň) relies on the attribute. */
.services-grid__filter-select[hidden] {
	display: none;
}

.services-grid__filter-label {
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--privilio-blue);
}

.services-grid__filter-select select {
	font-family: inherit;
	padding: 12px 16px;
	background: var(--bg-page);
	color: var(--privilio-black);
	border: 1px solid var(--border-strong);
	border-radius: 100px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%230f0f0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 44px;
}

.services-grid__filter-select select:focus {
	outline: none;
	border-color: var(--privilio-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--privilio-blue) 25%, transparent);
}

/* Cards grid */
.services-grid__list {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.services-grid__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.services-grid__list { grid-template-columns: repeat(3, 1fr); }
}

.services-grid__card,
.services-grid__cta-tile {
	background: var(--bg-page);
	border-radius: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.services-grid__card {
	box-shadow: 0 8px 32px rgba(15, 15, 15, 0.08);
}

.services-grid__card[hidden],
.services-grid__cta-tile[hidden] { display: none; }

.services-grid__card-media {
	display: block;               /* the media is an <a> since v6 (clickable photo) */
	position: relative;
	width: 100%;
	aspect-ratio: 410 / 177;
	overflow: hidden;
	background: var(--bg-section-alt);
}

.services-grid__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.services-grid__card-media--placeholder {
	background:
		repeating-linear-gradient(
			135deg,
			var(--bg-section-alt) 0 12px,
			color-mix(in srgb, var(--bg-section-alt) 92%, var(--text-muted)) 12px 13px
		);
}

.services-grid__card-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 8px;
}

.services-grid__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--text-inverse);
}

.services-grid__badge--blue { background: var(--privilio-blue); }
.services-grid__badge--green { background: #00c864; }
.services-grid__badge--purple { background: #a046dc; }
.services-grid__badge--pink { background: #ff96aa; }
.services-grid__badge--yellow { background: var(--privilio-orange); color: var(--privilio-black); }

.services-grid__card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.services-grid__card-tag {
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--privilio-blue);
	margin: 0;
}

.services-grid__card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.services-grid__card-text {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #1c1c1c;
	margin: 0;
	flex: 1;
}

.services-grid__card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* Yellow CTA tile */
.services-grid__cta-tile {
	background: var(--privilio-orange);
}

.services-grid__cta-tile-body {
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

.services-grid__cta-tile-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 2.92vw, 2.625rem);
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.services-grid__cta-tile-text {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--privilio-black);
	margin: 0;
	flex: 1;
}

.services-grid__cta-tile-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.services-grid__cta-tile .button-cta--outline {
	color: var(--privilio-black);
	border-color: var(--privilio-black);
}

.services-grid__cta-tile .button-cta--outline:hover,
.services-grid__cta-tile .button-cta--outline:focus-visible {
	background: var(--privilio-black);
	color: var(--privilio-orange);
	border-color: var(--privilio-black);
}

/* In-card "Viac o službe" outline button — black text/border (Figma 394:1201). */
.services-grid__card .button-cta--outline {
	color: var(--privilio-black);
	border-color: var(--privilio-black);
}

/* Empty / fallback */
.services-grid__empty,
.services-grid__empty-content {
	margin-block-start: 32px;
	text-align: center;
	color: var(--text-muted);
}

.services-grid__empty button,
.services-grid__inline-cta {
	background: transparent;
	border: 0;
	color: var(--link);
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
	font-size: inherit;
	padding: 0;
}

/* "Zobraziť viac služieb kategórie" link below cards */
.services-grid__more {
	text-align: center;
	margin: 32px 0 48px;
}

.services-grid__more a {
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--text-muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Blue "CTA FORMA" banner */
.services-grid__cta-forma {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	padding: 24px 28px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

@media (min-width: 768px) {
	.services-grid__cta-forma {
		padding: 24px 40px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}
}

.services-grid__cta-forma-avatars {
	display: inline-flex;
	flex-shrink: 0;
}

.services-grid__cta-forma-avatar {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: 3px solid var(--privilio-blue);
	margin-inline-start: -14px;
}

.services-grid__cta-forma-avatar:first-child { margin-inline-start: 0; }

.services-grid__cta-forma-text { flex: 1; }

.services-grid__cta-forma-heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--text-inverse);
	margin: 0 0 4px;
}

.services-grid__cta-forma-body {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-inverse);
	margin: 0;
}

/* ==== sections/_poradca-banner.v7.css ==== */
/**
 * Online poradca CTA banner (T45, Figma `394:1414` alt variant — sits between
 * FAQ and image-grid).
 *
 * Layout: blue background, white text. Two-column at lg: left = heading +
 * 4 checkmark bullets + white pill CTA, right = square placeholder image.
 * Black squiggly-line decoration drapes from upper-right around the banner.
 */

.poradca-banner {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	padding-block: var(--space-6);
	position: relative;
	/* overflow visible so the squiggle's lower loops bleed below the banner edge
	   as in Figma. The blue background fill is clipped to the box regardless of
	   overflow, so only child decorations spill out. */
	overflow: visible;
}

@media (min-width: 768px) {
	.poradca-banner { padding-block: 80px; }
}

/* Real Figma squiggle `394:1413` (1577x467 black wavy line). In Figma (`394:1363`)
   it's the LAST child of the FAQ container, so it paints ON TOP of the banner +
   CTA and its lower loops bleed below the banner bottom edge. We echo that:
   anchored to the bottom so the loops overflow downward, drawn above the content. */
.poradca-banner__squiggle {
	display: none;
	position: absolute;
	/* Drapes just below the banner. Was -120px, whose lower loops reached down
	   over the NEXT section's heading ("Naše priestory v Košiciach") — the gap is
	   smaller than the bleed. -36px keeps the drape without crossing it. */
	bottom: -36px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% + 110px);
	max-width: none;
	height: auto;
	pointer-events: none;
	z-index: 2;
}

@media (min-width: 1024px) {
	.poradca-banner__squiggle { display: block; }
}

/* Yellow triangle decoration (`yellow-leaf.svg`) overlaid near the squiggle peak,
   upper-center, painting on top of the banner + squiggle as in Figma. */
.poradca-banner__triangle {
	display: none;
	position: absolute;
	top: 0;
	left: 52%;
	width: 126px;
	height: auto;
	pointer-events: none;
	z-index: 2;
}

@media (min-width: 1024px) {
	.poradca-banner__triangle { display: block; }
}

.poradca-banner__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 1024px) {
	.poradca-banner__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
		gap: 80px;
		padding-inline: 80px;
	}
}

.poradca-banner__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.poradca-banner__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
	line-height: 1.2;
	color: var(--text-inverse);
	margin: 0;
}

.poradca-banner__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px 32px;
	grid-template-columns: repeat(2, max-content);
}

.poradca-banner__bullet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 1rem;
	color: var(--text-inverse);
}

.poradca-banner__check {
	flex-shrink: 0;
	color: var(--text-inverse);
}

.poradca-banner__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	max-width: 320px;
	justify-self: end;
}

.poradca-banner__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.poradca-banner__media--placeholder {
	background:
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.35) 0 12px,
			rgba(255, 255, 255, 0.5) 12px 13px
		);
}

/* White-on-blue button variant — fills white, black text (Figma `394:1403`). */
.button-cta.button-cta--on-blue {
	background: var(--bg-page);
	color: var(--privilio-black);
	border-color: var(--bg-page);
}

.button-cta.button-cta--on-blue:hover,
.button-cta.button-cta--on-blue:focus-visible {
	background: var(--text-inverse);
	color: var(--privilio-black);
}

/* ==== sections/_steps.v6.css ==== */
/**
 * Steps "Ako to funguje" (T39 Phase B, Figma `394:1447` 1281×942).
 *
 * Group is technically a floating sibling inside the homepage frame, not its
 * own background-filled section. Two-column layout:
 *   left  → eyebrow + H2 + sub at (0-411 × 6-280)
 *   right → 4 cards 782×216 stacked at x=499, y=0/242/484/726 (gap 26)
 */

.steps {
	position: relative;
	width: 100%;
	background: var(--bg-page);
}

/* Decoration cluster: 4 real Figma vectors (`394:1497-1500`) placed by their
   bbox-relative offset within the 1281x942 design frame (`394:1447`). The
   wrapper is pinned to the centered 1280 content box so the design coordinates
   map ~1:1 at desktop (the section height equals the 942 card-stack height).
   Hidden below lg. */
.steps__decorations {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1280px;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

@media (min-width: 1024px) {
	.steps__decorations { display: block; }
}

.steps__deco {
	position: absolute;
	height: auto;
}

/* left/top = % of the 1280x942 frame; width = % of frame width.
   1500 (black) renders last so it sits above 1499 (blue) where they overlap. */
.steps__deco--1498 { left: 0.70%;  top: 41.5%; width: 11.02%; }  /* yellow 141x140 @ (9,391)   */
.steps__deco--1499 { left: 15.70%; top: 45.3%; width: 10.23%; }  /* blue   131x130 @ (201,427) */
.steps__deco--1497 { left: 3.05%;  top: 59.1%; width: 12.66%; }  /* blue   162x162 @ (39,557)  */
.steps__deco--1500 { left: 18.28%; top: 47.0%; width: 5.62%;  }  /* black  72x72   @ (234,443) */
.steps__deco--1501 { left: -14.9%; top: 24.8%; width: 42.62%; }  /* black face line-art 546x735 @ (-191,234) — over the shapes */
.steps__deco--1505 { left: 24.90%; top: 75.0%; width: 83.76%; }  /* black squiggle 1073x284 @ (319,706) — topmost, sweeps the bottom */

@media (min-width: 1024px) {
	.steps {
		max-width: 1440px;
		margin-inline: auto;
		padding-block: 0;
	}
}

@media (max-width: 1023.98px) {
	.steps {
		padding-block: var(--space-5);
	}
}

.steps__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.steps__inner {
		grid-template-columns: 411fr 782fr;
		gap: 88px;                  /* declared between column-end 411 and card-start 499 = 88px */
		padding-inline: 80px;        /* matches hero/stats 80px outer margin */
		align-items: start;
	}
}

.steps__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.steps__eyebrow {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--privilio-blue);
	margin: 0;
}

.steps__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.33vw, 3rem);
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.steps__lead {
	font-weight: 400;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.5;
	color: var(--privilio-black);
	max-width: 411px;
	margin: 0;
}

.steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;                       /* declared between cards */
}

.steps__card {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	background: var(--bg-page);
	border: 1px solid var(--privilio-black);
	border-radius: 4px;
	padding: 24px;
	align-items: center;
}

/* Descending opacity per Figma card frames (1.0 / 0.70 / 0.40 / 0.15).
   Desktop-only — on mobile the cards stay fully opaque for readability
   since the decoration cluster is hidden below lg. */
@media (min-width: 1024px) {
	.steps__list .steps__card:nth-child(2) { opacity: 0.70; }
	.steps__list .steps__card:nth-child(3) { opacity: 0.40; }
	.steps__list .steps__card:nth-child(4) { opacity: 0.15; }
}

/* Interactive stepper on desktop (Eva 2026-07-19): the descending-opacity look
   above read as "clickable but dead" on PC while mobile showed every card lit.
   assets/js/steps.js adds .steps__list--interactive and moves .is-active on
   hover / click / focus, so the active card comes to full opacity and the rest
   recede. No-JS fallback = the static Figma fade above. Mobile (no matchMedia
   match) never gets the interactive class, so all cards stay fully opaque.
   The double-class ancestor keeps specificity above the :nth-child rules. */
@media (min-width: 1024px) {
	.steps__list.steps__list--interactive .steps__card {
		opacity: 0.4;
		cursor: pointer;
		transition: opacity 0.25s ease;
	}
	.steps__list.steps__list--interactive .steps__card.is-active { opacity: 1; }
	.steps__list.steps__list--interactive .steps__card:focus-visible {
		outline: 2px solid var(--privilio-blue, #1b6ef3);
		outline-offset: 3px;
	}
}

@media (min-width: 640px) {
	.steps__card {
		grid-template-columns: 161px 1fr;
		align-items: center;
		min-height: 216px;              /* declared card height */
		padding: 24px 32px;
		gap: 32px;
	}
}

.steps__card-media {
	width: 100%;
	aspect-ratio: 161 / 153;          /* declared placeholder image */
	overflow: hidden;
	background: var(--bg-section-alt);
}

.steps__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.steps__card-media--placeholder {
	/* Figma placeholder is a flat grey image fill (~#E5E5E5), not a hatch. */
	background: #e5e5e5;
}

.steps__card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.steps__card-n {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--privilio-blue);
	margin: 0;
}

.steps__card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.08vw, 1.875rem);  /* 30 @ 1440 */
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.steps__card-text {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: #1c1c1c;
	margin: 0;
}

/* ==== sections/_reviews.v5.css ==== */
/**
 * Reviews — Testimonial 11 (T45, Figma `394:1288`).
 *
 * Header: eyebrow + H2 on left, outlined pill "Prečítať si viac referencií"
 * pinned top-right. Carousel of cards (2 visible at 1440): 5 stars (filled
 * #fcc552 / empty grey), quote Mundial@700/20 #000 (NOT italic), avatar 56×56
 * + name + sub. Below: thin progress bar (left) + circular nav arrows (right).
 */

.reviews {
	background: var(--bg-page);
	padding-block: var(--space-5);
}

@media (min-width: 768px) {
	.reviews { padding-block: var(--space-7); }
}

.reviews__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

@media (min-width: 1024px) {
	.reviews__inner { padding-inline: 80px; }
}

.reviews__header {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	margin-block-end: 48px;
}

@media (min-width: 768px) {
	.reviews__header {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 32px;
		align-items: start;
		justify-items: start;
	}
}

.reviews__eyebrow {
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--privilio-blue);
	margin: 0 0 16px;
}

.reviews__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
	line-height: 1.2;
	color: #000;                   /* Figma 394:1291 pure #000000 */
	margin: 0;
}

@media (min-width: 768px) {
	.reviews__header .button-cta {
		justify-self: end;
		align-self: start;
		margin-top: 16px;
	}
}

/* Section override: outlined pill keeps a black label (Figma 394:1361 text
   fill #000000) over the 2px blue border. Hover still flips to white text via
   the shared .button-cta--outline:hover rule. */
.reviews__header .button-cta--outline {
	color: var(--privilio-black);
}

.reviews__list {
	display: grid;
	gap: 32px;
	grid-auto-flow: column;
	grid-auto-columns: minmax(85%, 1fr);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-block-end: 24px;
	scrollbar-width: none;
}

.reviews__list::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.reviews__list {
		grid-auto-columns: minmax(50%, 1fr);
	}
}

@media (min-width: 1024px) {
	.reviews__list {
		/* v5 (2026-07-26): plain track size, NOT minmax(0, …). With min=0 the
		   grid is allowed to shrink tracks once their sum overflows the
		   container — invisible with the former 2 cards (2×50% = no overflow),
		   but with the 10-card CPT pool every column collapsed to slivers.
		   A fixed track size overflows into the scroll axis as intended. */
		grid-auto-columns: calc(50% - 16px);
	}
}

.reviews__card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 0;
	padding-inline-end: 32px;
}

@media (max-width: 1023.98px) {
	.reviews__card { padding-inline-end: 0; }
}

.reviews__stars {
	display: flex;
	gap: 2px;                       /* tighter cluster to match Figma 394:1294 */
	font-size: 1.25rem;            /* 20px — solid rating row */
	line-height: 1;
	margin: 0;
	letter-spacing: 0;
}

.reviews__star {
	color: #d9d9d9;                /* empty star — grey */
}

.reviews__star--filled {
	color: var(--privilio-orange); /* filled — #fcc552 */
}

.reviews__quote {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.4;
	color: #000;                   /* Figma quote pure #000000 */
	margin: 0;
}

.reviews__avatar-row {
	display: flex;
	gap: 20px;
	align-items: center;
}

.reviews__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: #d9d9d9;
}

.reviews__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reviews__avatar-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.reviews__name {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--privilio-black);
	margin: 0;
}

.reviews__sub {
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

/* Controls row — progress bar (left) + circular nav buttons (right) */
.reviews__controls {
	display: flex;
	gap: 32px;
	align-items: center;
	margin-block-start: 32px;
}

.reviews__progress {
	flex: 1;
	height: 3px;
	background: #ccc;                /* Figma 394:1358 track #CCCCCC */
	position: relative;
	overflow: hidden;
}

.reviews__progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 25%;
	max-width: 120px;               /* Figma 394:1359 active segment 120×3 — cap the
	                                   short black fill even when JS sets width:100%
	                                   (no carousel overflow on a 2-review homepage) */
	height: 3px;
	background: var(--privilio-black);
	transition: width 0.25s ease;
}

.reviews__nav {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.reviews__nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--privilio-blue);   /* Figma strokeWeight 2 */
	background: #fff;
	color: #000;                              /* arrow glyph pure black (Figma 394:1356) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Glyph follows the button colour — pin to currentColor so it stays #000 at rest
   and flips to white on hover (never inherits a greyed value). */
.reviews__nav-btn svg path {
	stroke: currentColor;
}

.reviews__nav-btn:hover,
.reviews__nav-btn:focus-visible {
	background: var(--privilio-blue);
	color: var(--text-inverse);
}

/* Figma 394:1356 shows the first-page (prev) arrow at full saturation — solid
   2px --privilio-blue border, black glyph. Keep border + glyph colour intact and
   signal the disabled state via cursor only (no opacity wash that greys it out). */
.reviews__nav-btn[disabled] {
	cursor: not-allowed;
}

/* ==== sections/_faq-section.v2.css ==== */
/**
 * FAQ section (T38, Figma `394:1362` FAQ / 3 /, 1440×2561).
 *
 * Two-column at lg: left header block (H2 + sub + CTA), right accordion.
 * Section padding 112 top/bottom + 64 sides declared.
 */

.faq {
	background: var(--bg-page);
	padding-block: var(--space-6);
	position: relative;
}

.faq__inner { position: relative; z-index: 1; }

@media (min-width: 768px) {
	.faq {
		padding-block: 112px;
	}
}

.faq__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.faq__inner {
		grid-template-columns: minmax(0, 500fr) minmax(0, 780fr);
		gap: 64px;
	}
}

.faq__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.faq__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.faq__lead {
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--privilio-black);
	margin: 0;
}

.faq__actions {
	margin-block-start: 8px;
}

.faq__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
}

.faq__item {
	border-bottom: 1px solid var(--border);
}

.faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-block: 20px;                      /* declared */
	font-weight: 700;
	font-size: 1.125rem;                       /* 18 declared */
	line-height: 1.5;                           /* 27 declared */
	color: var(--privilio-black);
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

/* Chevron — Figma uses keyboard_arrow_down/up icon at #0f0f0f (black). */
.faq__q::after {
	content: "";
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--privilio-black);
	border-bottom: 2px solid var(--privilio-black);
	transform: rotate(45deg);
	transition: transform var(--dur-base) var(--ease-out);
	flex-shrink: 0;
}

.faq__item[open] .faq__q::after {
	transform: rotate(-135deg);
}

.faq__a {
	font-weight: 400;
	font-size: 1rem;                            /* 16 declared */
	line-height: 1.5;                            /* 24 declared */
	color: var(--privilio-black);
	margin: 0;
	padding-block-end: 24px;                    /* declared */
	max-width: 65ch;
}

/* ==== sections/_image-grid.v3.css ==== */
/**
 * Image reel "Naše priestory v Košiciach" (T39 Phase B,
 * Figma loose siblings `4108:941` H2 + `4112:942` button + `394:1414` reel).
 *
 * Layout in Figma:
 *   H2 "Naše priestory v Košiciach" at hero-y=7207, size 669×116
 *   Button "Zobraziť viac foto" at x=1183, y=7260, size 177×48
 *   Image reel at (-117, 7362), size 1646×358 — bleeds left of page
 *     4 placeholder rectangles: 304×358, 362×358, 451×358, 451×358 with gaps
 *
 * Section height ≈ 670 (header 116 + 110 gap + reel 358 + bottom pad)
 */

.image-grid {
	position: relative;
	/* Above the poradca-banner squiggle (z-index 2) so this section's opaque
	   background cleanly covers any of that decoration's downward bleed — keeps
	   the "Naše priestory v Košiciach" heading crisp. */
	z-index: 3;
	width: 100%;
	background: var(--bg-page);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.image-grid {
		max-width: 1440px;
		margin-inline: auto;
	}
}

@media (max-width: 1023.98px) {
	.image-grid {
		padding-block: var(--space-5);
	}
}

.image-grid__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

@media (min-width: 1024px) {
	.image-grid__inner {
		padding-inline: 80px;
	}
}

.image-grid__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-block-end: 48px;
}

.image-grid__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.33vw, 3rem);
	line-height: 1.2;
	color: var(--privilio-black);
	margin: 0;
}

.image-grid__reel {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--space-2);
}

@media (min-width: 1024px) {
	.image-grid__reel {
		overflow: visible;
		flex-wrap: nowrap;
		gap: 24px;
		margin-inline-start: -80px;       /* bleed left to match Figma -117 offset (-80 outer pad) */
	}
}

.image-grid__tile {
	flex-grow: 0;
	flex-shrink: 0;
	height: 358px;
	scroll-snap-align: start;
	overflow: hidden;
	background: var(--bg-section-alt);
}

@media (max-width: 1023.98px) {
	.image-grid__tile {
		flex-basis: 280px !important;
		height: 280px;
	}
}

.image-grid__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-grid__tile--placeholder {
	background:
		repeating-linear-gradient(
			135deg,
			var(--bg-section-alt) 0 12px,
			color-mix(in srgb, var(--bg-section-alt) 92%, var(--text-muted)) 12px 13px
		);
}

/* CTA "Zobraziť viac foto" — Figma 4112:942: transparent fill, 2px #5270eb
   border (pill), BLACK label text (#000000). The shared .button-cta--outline
   gives transparent fill + blue border but blue text, so override to black
   here without touching the shared button file. */
.image-grid .button-cta--outline {
	color: var(--privilio-black);
}

.image-grid .button-cta--outline:hover,
.image-grid .button-cta--outline:focus-visible {
	color: var(--text-inverse);
}

/* ==== templates/_sluzba.v2.css ==== */
/**
 * Single sluzba (Task 30, spec §5.1).
 *
 * Hero (title + lead, no image) → body sections → cenník block → FAQ →
 * featured photo → poradca banner → related services. Body column 720px.
 */

.sluzba {
	padding-block: var(--space-5);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.sluzba__hero {
	max-width: 720px;
	margin: 0 auto var(--space-5);
	text-align: center;
}

.sluzba__hero h1 {
	font-size: var(--fs-h1);
	margin-block-end: var(--space-2);
}

.sluzba__hero .sluzba__lead {
	font-size: var(--fs-h4);
	color: var(--text-muted);
}

.sluzba__body {
	max-width: 720px;
	margin-inline: auto;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.sluzba__body h2 {
	font-size: var(--fs-h2);
	margin-block: var(--space-5) var(--space-2);
}

.sluzba__body h3 {
	font-size: var(--fs-h3);
	margin-block: var(--space-4) var(--space-2);
}

.sluzba__cennik {
	max-width: 720px;
	margin: var(--space-5) auto;
	padding: var(--space-4);
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-left: 4px solid var(--privilio-orange);
	border-radius: var(--radius-md);
}

.sluzba__cennik h2 {
	font-size: var(--fs-h3);
	margin-block: 0 var(--space-2);
}

.sluzba__variants {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.sluzba__variant {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-2);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--border);
}

.sluzba__variant:last-child {
	border-bottom: 0;
}

.sluzba__variant-name {
	font-weight: 700;
}

.sluzba__variant-meta {
	color: var(--text-muted);
	font-size: var(--fs-small);
}

.sluzba__variant-price {
	font-weight: 700;
	color: var(--privilio-blue);
	font-size: var(--fs-h4);
	white-space: nowrap;
}

.sluzba__tomesa {
	max-width: 720px;
	margin: var(--space-5) auto;
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
	font-size: var(--fs-small);
}

.sluzba__related {
	margin-block-start: var(--space-6);
}

.sluzba__related h2 {
	font-size: var(--fs-h2);
	text-align: center;
	margin-block-end: var(--space-4);
}

/* Breadcrumb + booking CTA + related-services grid (Task 46). */
.sluzba__breadcrumb {
	max-width: 720px;
	margin: 0 auto var(--space-3);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.sluzba__breadcrumb a {
	color: var(--text-muted);
}

.sluzba__breadcrumb a:hover {
	color: var(--privilio-blue);
}

.sluzba__cennik .button-cta,
.sluzba__booking-embed {
	margin-block-start: var(--space-3);
}

.sluzba__variant-meta {
	display: block;
}

.sluzba__related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-3);
	max-width: var(--container-max);
	margin-inline: auto;
}

.sluzba__related-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-page);
	color: var(--text-primary);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sluzba__related-card:hover {
	border-color: var(--privilio-blue);
	box-shadow: var(--shadow-md);
}

.sluzba__related-title {
	font-weight: 700;
}

.sluzba__related-arrow {
	color: var(--privilio-blue);
}

/* ==== templates/_sluzba-detail.v4.css ==== */
/**
 * Single sluzba — service-detail enrichment (Task 46, Figma page-07).
 *
 * Upgrades the previously single-column service page into a two-column layout:
 *   - hero: title + lead LEFT, featured photo RIGHT (≥1024px)
 *   - main band: body LEFT, sticky booking sidebar (cenník + CTA) RIGHT (≥1024px)
 *   - related / reviews / poradca below remain full-width (unchanged).
 *
 * This file only adds .sluzba-detail__* classes plus a handful of scoped
 * overrides of the centered (max-width:720px;margin:auto) rules from
 * _sluzba.v2.css, so the reused .sluzba__* elements flow inside the columns.
 * Inner element styling (variants, body headings, related cards) still comes
 * from _sluzba.v2.css. Tokens are reused from _brand-tokens.css.
 */

/* The grid sits inside the .sluzba container (which already supplies the
   max-width + horizontal padding). Override the legacy centered constraints
   only when scoped to this detail template. */
.sluzba-detail .sluzba__body,
.sluzba-detail .sluzba__cennik,
.sluzba-detail .sluzba__tomesa,
.sluzba-detail .sluzba-detail__breadcrumb {
	max-width: none;
	margin-inline: 0;
}

/* ------------------------------------------------------------------ *
 * Hero — title + lead, optional featured photo                        *
 * ------------------------------------------------------------------ */
.sluzba-detail__hero {
	margin: 0 0 var(--space-6);
	text-align: left;
}

.sluzba-detail__hero-text {
	max-width: 760px;
}

.sluzba-detail__title {
	font-size: var(--fs-display);
	line-height: 1.05;
	margin-block: 0 var(--space-3);
}

.sluzba-detail__lead {
	font-size: var(--fs-h4);
	color: var(--text-muted);
	margin: 0;
	max-width: 60ch;
}

.sluzba-detail__hero-media {
	margin: var(--space-4) 0 0;
}

.sluzba-detail__hero-media :is(img, picture) {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.sluzba-detail__hero-media img {
	object-fit: cover;
	aspect-ratio: 16 / 11;
}

/* Two-column hero on desktop: text left, photo right. */
@media (min-width: 1024px) {
	.sluzba-detail__hero--has-photo {
		display: grid;
		grid-template-columns: 1fr 40%;
		align-items: center;
		gap: var(--space-6);
	}

	.sluzba-detail__hero--has-photo .sluzba-detail__hero-media {
		margin: 0;
	}

	.sluzba-detail__hero--has-photo .sluzba-detail__hero-media img {
		aspect-ratio: 4 / 5;
	}
}

/* ------------------------------------------------------------------ *
 * Main band — body LEFT, sticky booking sidebar RIGHT                 *
 * ------------------------------------------------------------------ */
.sluzba-detail__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: start;
}

@media (min-width: 1024px) {
	.sluzba-detail__layout {
		grid-template-columns: 1fr 360px;
		gap: var(--space-6);
	}
}

.sluzba-detail__main {
	min-width: 0;
}

.sluzba-detail__body {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.sluzba-detail__tomesa {
	margin-block: var(--space-4) 0;
}

/* ------------------------------------------------------------------ *
 * Booking sidebar                                                     *
 * ------------------------------------------------------------------ */
.sluzba-detail__sidebar {
	min-width: 0;
}

@media (min-width: 1024px) {
	.sluzba-detail__sidebar {
		position: sticky;
		top: var(--space-4);
	}
}

.sluzba-detail__booking {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* Cenník moves into the sidebar: drop the standalone card chrome it had as a
   full-width block, since the sidebar itself is now the card. */
.sluzba-detail__cennik {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.sluzba-detail__cennik h2 {
	font-size: var(--fs-card-h);
	margin-block: 0 var(--space-2);
}

.sluzba-detail__cta {
	padding-block-start: var(--space-3);
	border-top: 1px solid var(--border);
}

/* When there are no variants the booking card holds only the CTA — no divider. */
.sluzba-detail__booking > .sluzba-detail__cta:first-child {
	padding-block-start: 0;
	border-top: 0;
}

.sluzba-detail__cta-heading {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--space-2);
}

.sluzba-detail__cta-button {
	display: block;
	width: 100%;
	text-align: center;
}

.sluzba-detail__embed {
	margin: 0;
}

.sluzba-detail__embed :is(iframe, img) {
	max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * Related services — full-width below the band                        *
 * ------------------------------------------------------------------ */
.sluzba-detail__related {
	margin-block-start: var(--space-7);
}

/* ------------------------------------------------------------------ *
 * Service video (YouTube oEmbed, privacy-filtered by inc/embed)       *
 * ------------------------------------------------------------------ */
.sluzba-detail__video {
	margin-block-start: var(--space-6);
}

/* Video moved ABOVE the body copy (Eva 2026-07-26 — "ľudia si radšej pozrú
   video"): first element of the main column, so the top margin goes and a
   bottom gap separates it from "O službe". v4. */
.sluzba-detail__video--top {
	margin-block-start: 0;
	margin-block-end: var(--space-5);
}

/* Hero "Pozrieť video o službe" anchor button (scrolls to #sluzba-video). */
.sluzba-detail__video-cta {
	margin-block: var(--space-3) 0;
}

.sluzba-detail__video-cta-play {
	font-size: 0.72em;
	line-height: 1;
}

/* Responsive 16:9 frame — wp_oembed_get() returns a bare iframe without the
   block editor's responsive wrapper, so we constrain it ourselves. */
.sluzba-detail__video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--privilio-black, #0f0f0f);
}

.sluzba-detail__video-frame :where(iframe, object, embed) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==== templates/_kurz.css ==== */
/**
 * Single kurz (Task 30, spec §5.2). Shares the body shell with sluzba,
 * adds the kurz-specific hero pills + lektor card + program timeline.
 */

.kurz {
	padding-block: var(--space-5);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.kurz__hero {
	max-width: 720px;
	margin: 0 auto var(--space-5);
}

.kurz__hero h1 {
	font-size: var(--fs-h1);
	margin-block-end: var(--space-2);
}

.kurz__hero-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-block: var(--space-2);
}

.kurz__hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	background: var(--bg-section-alt);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
}

.kurz__hero-pill--price {
	background: var(--privilio-orange);
	color: var(--text-primary);
	font-weight: 700;
}

.kurz__body {
	max-width: 720px;
	margin-inline: auto;
}

.kurz__lektor {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
	margin-block: var(--space-4);
}

.kurz__lektor img {
	width: 4rem;
	height: 4rem;
	border-radius: var(--radius-pill);
	object-fit: cover;
	flex-shrink: 0;
}

.kurz__program {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.kurz__program li {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: var(--space-2);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--border);
}

.kurz__program-time {
	font-weight: 700;
	color: var(--privilio-blue);
}

.kurz__bookio {
	margin-block: var(--space-4);
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
}

.kurz__program-pdf {
	display: inline-flex;
	gap: var(--space-1);
	align-items: center;
	margin-block: var(--space-2);
}

.kurz__program-pdf-toggle {
	display: inline-flex;
	gap: 0.25rem;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.kurz__program-pdf-toggle button {
	background: transparent;
	border: 0;
	padding: 0 0.25rem;
	color: var(--link);
	text-decoration: underline;
	cursor: pointer;
	font-family: inherit;
}

/* ==== templates/_kurz-detail.v10.css ==== */
/**
 * Single kurz — detail-layout enrichment (Task 12a, SPEC §5.2).
 *
 * Upgrades the course page into the same two-column shell as the service
 * detail page: course body LEFT, a booking/info box RIGHT (≥1024px).
 *
 * This file only adds the .kurz-detail__* classes the markup needs that are
 * NOT already provided by _kurz.css (which keeps the hero, hero-pills, body,
 * bookio and program-pdf element styles). It also scopes a couple of
 * overrides so the reused centered .kurz__* elements flow inside the columns.
 * Tokens come from _brand-tokens.css. Loaded via wp_enqueue_style from
 * single-kurz.php so app.css stays untouched.
 */

/* The .kurz container already supplies max-width + horizontal padding; let the
   reused centered blocks fill the column instead of re-centering at 720px. */
.kurz-detail .kurz__hero,
.kurz-detail .kurz__body,
.kurz-detail .kurz-detail__breadcrumb {
	max-width: none;
	margin-inline: 0;
}

/* ------------------------------------------------------------------ *
 * Breadcrumb                                                          *
 * ------------------------------------------------------------------ */
.kurz-detail__breadcrumb {
	margin-block-end: var(--space-4);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.kurz-detail__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.kurz-detail__breadcrumb a:hover,
.kurz-detail__breadcrumb a:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Two-column band — body LEFT, info/booking box RIGHT                 *
 * ------------------------------------------------------------------ */
.kurz-detail__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: start;
}

@media (min-width: 1024px) {
	.kurz-detail__layout {
		grid-template-columns: 1fr 360px;
		gap: var(--space-6);
	}
}

.kurz-detail__main {
	min-width: 0;
}

.kurz-detail__body {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* ------------------------------------------------------------------ *
 * Info / booking box (sidebar)                                        *
 * ------------------------------------------------------------------ */
.kurz-detail__sidebar {
	min-width: 0;
}

@media (min-width: 1024px) {
	.kurz-detail__sidebar {
		position: sticky;
		/* Clear the 80px sticky header so the box top („Termín") isn't cut when
		   it sticks (Eva 2026-07-22). +32px more when the WP admin bar is shown. */
		top: calc( 80px + var(--space-4) );
	}
	body.admin-bar .kurz-detail__sidebar {
		top: calc( 80px + 32px + var(--space-4) );
	}
}

.kurz-detail__box {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* Lokalita row */
.kurz-detail__lokalita {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	margin: 0;
}

.kurz-detail__lokalita-label {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.kurz-detail__lokalita-value {
	font-weight: 700;
}

/* Bratislava partner (Eva 2026-07-21): „v spolupráci s fyziodom.sk" + logo. */
.kurz-detail__partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	padding-block-start: var(--space-3);
	margin-block-start: var(--space-3);
	border-top: 1px solid var(--border);
	text-align: center;
}

.kurz-detail__partner-label {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.kurz-detail__partner-logo {
	width: auto;
	height: 64px;
	max-width: 100%;
}

.kurz-detail__partner-note {
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin: 0;
}

.kurz-detail__partner-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Program PDFs — let the reused .kurz__program-pdf links stack full-width. */
.kurz-detail__programs {
	display: grid;
	gap: var(--space-1);
	padding-block-start: var(--space-3);
	border-top: 1px solid var(--border);
}

/* When the box opens with the programs (no lokalita above), drop the divider. */
.kurz-detail__box > .kurz-detail__programs:first-child {
	padding-block-start: 0;
	border-top: 0;
}

.kurz-detail__programs .kurz__program-pdf {
	margin-block: 0;
}

/* Bookio / CTA block — neutralise the standalone card chrome _kurz.css gives
   .kurz__bookio, since the box itself is already the card. */
.kurz-detail__bookio {
	margin: 0;
	padding: var(--space-3) 0 0;
	background: transparent;
	border-radius: 0;
	border-top: 1px solid var(--border);
}

.kurz-detail__box > .kurz-detail__bookio:first-child {
	padding-block-start: 0;
	border-top: 0;
}

.kurz-detail__cta-heading {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--space-2);
}

.kurz-detail__cta-button {
	display: block;
	width: 100%;
	text-align: center;
}

/* "No term yet" note: shown in place of the CTA button when a kurz has no
   Bookio mapping and no external/email override (Bobath, Mulligan). */
.kurz-detail__note {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

.kurz-detail__note a {
	color: var(--privilio-blue);
	font-weight: 600;
}

.kurz-detail__embed {
	margin: 0;
}

.kurz-detail__embed :is(iframe, img) {
	max-width: 100%;
}

/* Linked-webinar cross-reference */
.kurz-detail__webinar {
	padding-block-start: var(--space-3);
	border-top: 1px solid var(--border);
}

.kurz-detail__webinar-heading {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--space-2);
}

.kurz-detail__webinar-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
}

.kurz-detail__webinar-link:hover,
.kurz-detail__webinar-link:focus-visible {
	background: var(--border);
}

.kurz-detail__webinar-title {
	font-weight: 600;
}

.kurz-detail__webinar-arrow {
	color: var(--privilio-blue);
	flex-shrink: 0;
}

/* Method/provider logo in the course hero (Eva 2026-07-19), above the H1. */
.kurz__hero-logo { margin: 0 0 12px; }
.kurz__hero-logo img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

/* Lecturer portrait inside the course body "Lektor" section (Eva 2026-07-19:
   Karolína Ptáková bio + foto on DNS). Constrained so a portrait doesn't span
   the full content width. */
.kurz-lektor-foto {
	max-width: 200px;
	margin: 0 0 1rem;
}
.kurz-lektor-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Recenzie absolventov na stránke kurzu (Eva 2026-07-20). */
.kurz-reviews {
	max-width: 1000px;
	margin: 48px auto;
	padding-inline: var(--container-pad-x, 20px);
}
.kurz-reviews__title { font-size: 1.75rem; font-weight: 700; margin: 0 0 24px; }
.kurz-reviews__list { display: grid; gap: 20px; }
.kurz-reviews__item {
	margin: 0;
	background: var(--bg-alt, #f6f6f8);
	border-radius: 12px;
	padding: 24px 28px;
}
.kurz-reviews__stars { color: #f5a623; letter-spacing: 3px; font-size: 1.1rem; margin-bottom: 10px; }
.kurz-reviews__text { font-size: 1.125rem; line-height: 1.55; margin: 0 0 12px; }
.kurz-reviews__author { font-weight: 700; }

/* Zrušený termín (Pavel 2026-07-21): oznam v hlavnom stĺpci + sidebar stav. */
.kurz-notice--cancelled {
	border: 1px solid #e6b0a6;
	background: #fdf1ee;
	border-radius: 12px;
	padding: 16px 20px;
	margin-block-end: 24px;
}

.kurz-notice__title {
	font-weight: 700;
	margin: 0 0 4px;
	color: #a33b28;
}

.kurz-notice__text {
	margin: 0;
}

.kurz-notice__text + .kurz-notice__text {
	margin-block-start: 6px;
}

.kurz-notice__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kurz-detail__cta-heading--cancelled {
	color: #a33b28;
}


/* Uniform sidebar rows (Eva 2026-07-22 redesign): label left, value right. */
.kurz-detail__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	margin: 0;
}

.kurz-detail__row-label {
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

.kurz-detail__row-value {
	font-weight: 700;
	text-align: right;
}

.kurz-detail__row--eb .kurz-detail__row-value {
	color: var(--privilio-blue);
}

.kurz-detail__row-note {
	display: block;
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--text-muted);
}

/* FyzioDom spolupráca — presunuté nad FAQ (Eva 2026-07-22), horizontálny prúžok. */
.kurz-fyziodom {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	max-width: 760px;
	margin-inline: auto;
	margin-block: var(--space-5);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-page);
}

.kurz-fyziodom__logo {
	width: auto;
	height: 56px;
	flex: none;
}

.kurz-fyziodom__note {
	margin: 0;
	color: var(--text-muted);
}

.kurz-fyziodom__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 600px) {
	.kurz-fyziodom {
		flex-direction: column;
		text-align: center;
	}
}

/* Kurz footer ako na /kurzy/ (Eva 2026-07-22): lektori + FyzioHub komunita na
   single-kurz sa renderujú za </article> na plnú šírku, tak ich constrainneme
   na obsahovú šírku (na archíve to constrainuje article). */
.kurz-detail__platforma {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

/* ── Video recenzie kurzu (Eva 2026-08-01, YouTube Shorts = vertikálne 9:16) ── */
.kurz-reviews__videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
	gap: var(--space-3);
	justify-content: start;
	margin-block-end: var(--space-3);
}
.kurz-reviews__video { margin: 0; }
.kurz-reviews__video-frame {
	width: 100%;
	aspect-ratio: 9 / 16;
	border: 0;
	border-radius: var(--radius-lg, 16px);
	background: #000;
}

/* ==== templates/_kurz-listing.v4.css ==== */
/**
 * Kurz listing + detail extras (#9): date-forward archive cards, hero
 * date/audience pills, booking-box date row, and the YouTube video frame.
 * Builds on `.sluzba-archive__*` (archive grid) + `.kurz__*` (detail).
 */

/* ── /kurzy/ archive cards ────────────────────────────────────────────── */
.kurz-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.kurz-card__date {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--link);
}

.kurz-card__meta {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* ── single-kurz hero pills ───────────────────────────────────────────── */
.kurz__hero-pill--datum {
	background: var(--privilio-blue);
	color: var(--text-inverse);
}

.kurz__hero-pill--audience {
	background: var(--bg-section-alt);
	color: var(--text-primary);
}

/* ── single-kurz booking-box date row ─────────────────────────────────── */
.kurz-detail__datum {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 var(--space-3);
}

.kurz-detail__datum-value {
	font-size: var(--fs-card-h);
	font-weight: 700;
	color: var(--text-primary);
}

/* ── single-kurz YouTube video ────────────────────────────────────────── */
.kurz-detail__video {
	margin-block: var(--space-4);
}

.kurz-detail__video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--bg-section-alt);
}

.kurz-detail__video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.kurz-detail__video-link {
	font-weight: 600;
	color: var(--link);
}

/* ── single-kurz hero photo (featured image) ──────────────────────────── */
.kurz-detail__photo {
	margin: 0 0 var(--space-4);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.kurz-detail__photo-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Method/provider logo just under the course card photo, at the top of the card
   body (Eva 2026-07-19: "pod fotkou malé logo kurzu" — the international-course
   mark of authenticity). On the light body background, above the date. */
.kurz-card__logo {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
}
.kurz-card__logo img {
	display: block;
	height: 34px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

/* ==== templates/_kurz-platforma.v2.css ==== */
/**
 * Vzdelávacia platforma enrichment on /kurzy/ (archive-kurz.php) + the in-body
 * kurz-detail sections (lead / termín note / facts list / FAQ accordion) that
 * single-kurz.php renders from the_content. Builds on `.sluzba-archive__*`,
 * `.page__*`, `.person-card__*`, and the brand tokens.
 */

/* ── platforma hero CTAs ──────────────────────────────────────────────── */
.kurz-platforma__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

/* ── trust stats (3 boxes) ────────────────────────────────────────────── */
.kurz-platforma__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin: var(--space-5) 0;
}

@media (min-width: 768px) {
	.kurz-platforma__stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kurz-platforma__stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	background: var(--bg-section-alt);
	border-radius: var(--radius-lg);
}

.kurz-platforma__stat-num {
	font-size: var(--fs-stat-number);
	line-height: var(--lh-tight);
	font-weight: 700;
	color: var(--privilio-blue);
}

.kurz-platforma__stat-label {
	font-size: var(--fs-stat-label);
	font-weight: 600;
	color: var(--text-primary);
}

.kurz-platforma__stat-desc {
	font-size: var(--fs-card-body);
	color: var(--text-muted);
	line-height: var(--lh-body);
}

/* ── lektori preview ──────────────────────────────────────────────────── */
.kurz-platforma__lektori {
	margin: var(--space-6) 0 var(--space-5);
}

.kurz-platforma__lektori-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.kurz-platforma__lektori-all {
	font-weight: 600;
	color: var(--link);
	white-space: nowrap;
}

.kurz-platforma__lektori-all:hover {
	color: var(--link-hover);
}

.kurz-platforma__lektori-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 640px) {
	.kurz-platforma__lektori-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.kurz-platforma__lektori-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* "Pozrieť všetkých lektorov" under the 4 cards (Eva 2026-07-26 — the
   header-row link alone was easy to miss when scanning the cards). v2. */
.kurz-platforma__lektori-foot {
	margin: var(--space-4) 0 0;
	text-align: center;
}

/* ── Facebook community banner ────────────────────────────────────────── */
.kurz-platforma__community {
	margin: var(--space-5) 0;
	padding: var(--space-5);
	background: var(--privilio-black);
	border-radius: var(--radius-lg);
	color: var(--text-inverse);
}

.kurz-platforma__community-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: flex-start;
	max-width: 60ch;
}

.kurz-platforma__community-title {
	font-size: var(--fs-card-h);
	line-height: var(--lh-heading);
	color: var(--text-inverse);
}

.kurz-platforma__community-desc {
	color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
}

/* ── in-body kurz-detail sections (single-kurz.php the_content) ────────── */
.kurz-detail__body .kurz-lead {
	font-size: var(--fs-h4);
	line-height: var(--lh-body);
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--space-3);
}

.kurz-detail__body .kurz-note {
	padding: var(--space-2) var(--space-3);
	background: var(--bg-section-alt);
	border-left: 4px solid var(--privilio-orange);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-weight: 500;
}

.kurz-detail__body .kurz-facts {
	list-style: none;
	margin: 0;
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.kurz-detail__body .kurz-facts li {
	margin: 0;
}

/* ── in-body FAQ accordion (matches .faq visual language) ─────────────── */
.kurz-faq {
	margin-top: var(--space-4);
}

.kurz-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-top: var(--space-2);
}

.kurz-faq__item {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	background: var(--bg-page);
}

.kurz-faq__q {
	font-weight: 600;
	color: var(--text-primary);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: var(--space-4);
}

.kurz-faq__q::-webkit-details-marker {
	display: none;
}

.kurz-faq__q::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-weight: 400;
	color: var(--privilio-blue);
	transition: transform var(--dur-base) var(--ease-out);
}

.kurz-faq__item[open] .kurz-faq__q::after {
	content: "–";
}

.kurz-faq__a {
	margin-top: var(--space-2);
	color: var(--text-primary);
	line-height: var(--lh-body);
}

.kurz-faq__a p {
	margin: 0;
}

/* ==== templates/_lektor-detail.css ==== */
/**
 * Single lektor detail (single-lektor.php) — Figma page-29.
 * Breadcrumb → hero (portrait + name + pozícia eyebrow) → the_content
 * (intro + „O lektorovi" + „Odborné zameranie" + „Certifikáty a vzdelanie" +
 * „Kurzy lektora"). Uses brand tokens; mirrors the sluzba/kurz detail rhythm.
 */

.lektor-detail {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	padding-block: var(--space-4) var(--space-6);
}

.lektor-detail__breadcrumb {
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin-bottom: var(--space-3);
}

.lektor-detail__breadcrumb a {
	color: var(--link);
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.lektor-detail__hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
	.lektor-detail__hero {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
	}
}

.lektor-detail__media {
	flex: 0 0 auto;
	width: 100%;
	max-width: 320px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-section-alt);
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.lektor-detail__media {
		width: 320px;
	}
}

.lektor-detail__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lektor-detail__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--bg-section-alt), var(--border));
}

.lektor-detail__name {
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	color: var(--text-primary);
	margin: 0;
}

.lektor-detail__role {
	margin-top: var(--space-1);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	color: var(--privilio-blue);
	text-transform: none;
}

/* ── body ─────────────────────────────────────────────────────────────── */
.lektor-detail__body {
	max-width: 72ch;
	line-height: var(--lh-body);
}

.lektor-detail__body .lektor-intro {
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--space-3);
}

.lektor-detail__body h2 {
	font-size: var(--fs-card-h);
	line-height: var(--lh-heading);
	margin: var(--space-4) 0 var(--space-2);
}

.lektor-detail__body .lektor-zameranie,
.lektor-detail__body .lektor-certifikaty {
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.lektor-detail__body .lektor-zameranie li,
.lektor-detail__body .lektor-certifikaty li {
	position: relative;
	padding-left: var(--space-3);
}

.lektor-detail__body .lektor-zameranie li::before,
.lektor-detail__body .lektor-certifikaty li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--privilio-orange);
}

.lektor-detail__body .lektor-kurzy {
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.lektor-detail__body .lektor-kurzy a {
	font-weight: 600;
	color: var(--link);
}

.lektor-detail__body .lektor-kurzy a:hover {
	color: var(--link-hover);
}

/* ==== templates/_webinar.css ==== */
/**
 * Single webinar (Task 30, spec §5.3). Lighter than kurz.
 */

.webinar {
	padding-block: var(--space-5);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.webinar__hero {
	max-width: 720px;
	margin: 0 auto var(--space-4);
	text-align: center;
}

.webinar__hero h1 {
	font-size: var(--fs-h1);
	margin-block-end: var(--space-2);
}

.webinar__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin-block-end: var(--space-3);
}

.webinar__body {
	max-width: 720px;
	margin-inline: auto;
}

.webinar__zoom-cta {
	margin-block: var(--space-4);
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-left: 4px solid var(--privilio-blue);
	border-radius: var(--radius-md);
	text-align: center;
}

/* ==== templates/_clanok.v2.css ==== */
/**
 * Single clanok (Task 30, spec §5.4 + Task 16).
 *
 * 2-column body (66% main / 34% sticky sidebar) on lg. Mobile stacks: body
 * first, then sidebar (TOC / series / CTA / tags).
 */

.clanok {
	padding-block: var(--space-5);
}

.clanok > .breadcrumb {
	max-width: var(--container-max);
	margin: 0 auto var(--space-3);
	padding-inline: var(--container-pad-x);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.breadcrumb__sep {
	margin-inline: 0.5rem;
	color: var(--border-strong);
}

.clanok__hero {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: var(--space-4);
	margin-block-end: var(--space-5);
}

@media (min-width: 768px) {
	.clanok__hero {
		grid-template-columns: 7fr 5fr;
		align-items: center;
	}
}

.clanok__rubrika {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--privilio-blue);
	margin-block-end: var(--space-1);
	text-decoration: none;
}

.clanok__hero h1 {
	font-size: var(--fs-h1);
	margin-block-end: var(--space-2);
}

.clanok__perex {
	font-size: var(--fs-h4);
	color: var(--text-muted);
	margin-block-end: var(--space-2);
}

.clanok__meta {
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin: 0;
}

.clanok__meta a {
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 500;
}

.clanok__meta a:hover {
	color: var(--link);
}

.clanok__hero-media img {
	border-radius: var(--radius-lg);
}

.clanok__layout {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.clanok__layout {
		grid-template-columns: 2fr 1fr;
		gap: var(--space-6);
	}
}

.clanok__body {
	max-width: 720px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.clanok__body h2 {
	font-size: var(--fs-h2);
	margin-block: var(--space-4) var(--space-2);
}

.clanok__body h3 {
	font-size: var(--fs-h3);
	margin-block: var(--space-3) var(--space-2);
}

.clanok__body p {
	margin-block: 0 var(--space-2);
}

.clanok__body img {
	border-radius: var(--radius-md);
	margin-block: var(--space-3);
}

.clanok__body blockquote {
	border-left: 4px solid var(--privilio-orange);
	padding-inline-start: var(--space-3);
	font-style: italic;
	font-size: var(--fs-h4);
	margin-block: var(--space-3);
}

.clanok__sources,
.clanok__author-box {
	margin-block: var(--space-5);
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
}

.clanok__sources h2,
.clanok__author-box h3 {
	font-size: var(--fs-h4);
	margin-block: 0 var(--space-2);
}

.clanok__author-box {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.clanok__author-img img {
	width: 5rem;
	height: 5rem;
	border-radius: var(--radius-pill);
	object-fit: cover;
}

.clanok__ymyl {
	margin-block: var(--space-5);
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-left: 4px solid var(--privilio-blue);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.clanok__ymyl h3 {
	font-size: var(--fs-h4);
	color: var(--text-primary);
	margin-block: 0 var(--space-1);
}

.clanok__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.clanok__sidebar[data-sticky] {
		position: sticky;
		top: 96px;
		align-self: flex-start;
	}
}

.clanok__toc,
.clanok__series,
.clanok__cta,
.clanok__tags {
	padding: var(--space-3);
	background: var(--bg-section-alt);
	border-radius: var(--radius-md);
}

.clanok__toc h2,
.clanok__series h2,
.clanok__cta h3,
.clanok__tags h3 {
	font-size: var(--fs-h4);
	margin-block: 0 var(--space-2);
}

.clanok__series ol {
	list-style: decimal inside;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--fs-small);
}

.clanok__cta {
	border-left: 4px solid var(--privilio-orange);
}

.clanok__cta--booking {
	border-left-color: var(--privilio-blue);
}

.clanok__cta .button-cta {
	width: 100%;
	margin-block-start: var(--space-2);
	justify-content: center;
}

.clanok__tags ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.clanok__tags a {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	color: var(--text-muted);
	text-decoration: none;
}

.clanok__tags a:hover {
	color: var(--link);
	border-color: var(--link);
}

/* Zdieľanie článku (Eva 2026-07-13): FB/LinkedIn share odkazy pod telom článku. */
.clanok__share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-block-start: var(--space-3);
}

.clanok__share-label {
	font-weight: 600;
	margin-inline-end: var(--space-1);
}

.clanok__share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1rem;
	border: 1px solid var(--privilio-black);
	border-radius: 999px;
	font-size: var(--fs-small);
	text-decoration: none;
	color: var(--privilio-black);
}

.clanok__share-btn:hover {
	background: var(--accent-yellow);
	border-color: var(--accent-yellow);
	color: var(--accent-yellow-text);
}

.clanok__share-btn svg {
	inline-size: 1rem;
	block-size: 1rem;
}

/* ==== templates/_archive.v9.css ==== */
/**
 * Archive templates (Task 30, spec §5.5).
 *
 * Shared by archive-sluzba.php, archive-clanok.php, taxonomy archives.
 */

/* Magazine overview hero. */
.magazin-archive {
	padding-block: var(--space-5);
}

.magazin-hero {
	max-width: var(--container-max);
	margin: 0 auto var(--space-5);
	padding-inline: var(--container-pad-x);
	text-align: left;
}

.magazin-hero__breadcrumb {
	margin-block-end: var(--space-2);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.magazin-hero h1 {
	font-size: var(--fs-h1);
	margin-block-end: var(--space-2);
}

.magazin-hero__lead {
	max-width: 60ch;
	margin-inline: 0;
	color: var(--text-muted);
	text-align: left;
}

.magazin-rubriky {
	max-width: var(--container-max);
	margin: 0 auto var(--space-4);
	padding-inline: var(--container-pad-x);
}

.magazin-rubriky ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: center;
}

/* Active rubrika chip: dark near-black pill (Figma parity, not blue). */
.magazin-rubriky a.is-active {
	background: var(--privilio-black);
	color: var(--text-inverse);
	border-color: var(--privilio-black);
}

.magazin-rubriky a.is-active:hover {
	background: var(--privilio-black);
	border-color: var(--privilio-black);
	color: var(--text-inverse);
}

.magazin-editorial-stack {
	max-width: var(--container-max);
	margin: 0 auto var(--space-5);
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.magazin-editorial-stack {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: repeat(3, auto);
	}
	.magazin-card--lead {
		grid-row: 1 / span 3;
	}
}

.magazin-card {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-out);
}

.magazin-card:hover {
	border-color: var(--privilio-blue);
}

.magazin-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.magazin-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

.magazin-card__body {
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.magazin-card__rubrika {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--privilio-blue);
}

.magazin-card__badge {
	display: inline-block;
	/* The card body is a flex column (align-items: stretch), which would blow this
	   pill up to the full card width — a solid orange bar — on cards without a
	   thumbnail. Size it to its content instead. */
	align-self: flex-start;
	padding: 0.125rem 0.5rem;
	background: var(--privilio-orange);
	color: var(--text-primary);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--radius-pill);
	margin-inline-start: 0.5rem;
}

.magazin-card__title {
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.magazin-card--lead .magazin-card__title {
	font-size: var(--fs-h3);
}

.magazin-card__excerpt {
	font-size: var(--fs-body);
	color: var(--text-muted);
	margin: 0;
}

.magazin-card__meta {
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin: 0;
}

.magazin-card__readmore {
	display: inline-block;
	margin-block-start: 0.25rem;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--privilio-blue);
}

.magazin-card__link:hover .magazin-card__readmore {
	color: var(--link-hover);
}

.magazin-grid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.magazin-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.magazin-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.magazin-grid__more {
	max-width: var(--container-max);
	margin: var(--space-4) auto 0;
	padding-inline: var(--container-pad-x);
	text-align: center;
}

.magazin-cta-banner {
	background: var(--bg-section-alt);
	margin-block: var(--space-5);
	padding-block: var(--space-5);
}

.magazin-cta-banner__inner {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	text-align: center;
}

.magazin-cta-banner h2 {
	font-size: var(--fs-h3);
	margin-block-end: var(--space-1);
}

.magazin-cta-banner p {
	color: var(--text-muted);
	margin-block-end: var(--space-2);
}

.magazin-pagination {
	max-width: var(--container-max);
	margin: var(--space-5) auto 0;
	padding-inline: var(--container-pad-x);
	text-align: center;
}

.magazin-empty {
	max-width: 720px;
	margin: var(--space-4) auto;
	padding-inline: var(--container-pad-x);
	text-align: center;
	color: var(--text-muted);
}

/* ── Service archive (`/sluzby/`, archive-sluzba.php) — Task 46 ── */

.sluzba-archive {
	padding-block: var(--space-5);
}

.sluzba-archive__hero {
	max-width: var(--container-max);
	margin: 0 auto var(--space-6);
	padding-inline: var(--container-pad-x);
	text-align: center;
}

.sluzba-archive__title {
	font-size: var(--fs-h1);
	margin-block-end: var(--space-2);
}

.sluzba-archive__lead {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--text-muted);
}

.sluzba-archive__group {
	max-width: var(--container-max);
	margin: 0 auto var(--space-6);
	padding-inline: var(--container-pad-x);
}

.sluzba-archive__group-title {
	font-size: var(--fs-h2);
	margin-block-end: var(--space-3);
}

.sluzba-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-3);
}

.sluzba-archive__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 140px;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-page);
	color: var(--text-primary);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sluzba-archive__card:hover {
	border-color: var(--privilio-blue);
	box-shadow: var(--shadow-md);
}

.sluzba-archive__card-title {
	font-weight: 700;
	font-size: var(--fs-h4);
}

.sluzba-archive__card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sluzba-archive__card-price {
	font-weight: 700;
	color: var(--privilio-blue);
}

.sluzba-archive__card-price--more {
	color: var(--text-muted);
	font-weight: 500;
}

.sluzba-archive__card-arrow {
	color: var(--privilio-blue);
}

.sluzba-archive__empty {
	text-align: center;
	color: var(--text-muted);
	padding-block: var(--space-6);
}

/* ================================================================== *
 * F5 — "Definujte symptom" selector + "Vyberte si" category picker    *
 * (service archive, archive-sluzba.php; behaviour in                  *
 *  assets/js/archive-filters.js).                                     *
 * ================================================================== */

.sluzba-symptom,
.sluzba-picker {
	max-width: var(--container-max);
	margin: 0 auto var(--space-6);
	padding-inline: var(--container-pad-x);
}

.sluzba-symptom__heading,
.sluzba-picker__heading {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 700;
	margin: 0 0 var(--space-4);
	color: var(--privilio-black);
}

/* --- Symptom selector --------------------------------------------- */
.sluzba-symptom__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 900px) {
	.sluzba-symptom__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.sluzba-symptom__label,
.sluzba-symptom__rec-label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: var(--privilio-black);
}

.sluzba-symptom__select {
	width: 100%;
	padding: 0.875rem 1rem;
	font-size: 1rem;
	border: 1px solid var(--border, #d9d9d9);
	border-radius: 8px;
	background: var(--bg-page, #fff);
	color: var(--privilio-black);
	margin-block-end: var(--space-3);
	cursor: pointer;
}

.sluzba-symptom__select:focus-visible {
	outline: 2px solid var(--privilio-blue);
	outline-offset: 2px;
}

.sluzba-symptom__card {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	border: 1px solid var(--border, #e6e6e6);
	border-radius: 12px;
	padding: var(--space-3);
}

.sluzba-symptom__card[hidden],
.sluzba-symptom__rec[hidden] { display: none; }

.sluzba-symptom__photo {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 8px;
	background: var(--bg-section-alt, #f1f1f1);
	overflow: hidden;
}

/* Evine fotky k symptómom (2026-08-03) — assets/img/symptomy/, wired in
   archive-sluzba.php. Decorative (alt=""), cover-cropped to the square. */
.sluzba-symptom__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sluzba-symptom__name { font-weight: 700; margin: 0 0 0.375rem; color: var(--privilio-black); }
.sluzba-symptom__desc { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #4a4a4a; }

.sluzba-symptom__rec {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sluzba-symptom__rec-item {
	position: relative;
	padding-inline-start: 1.75rem;
	line-height: 1.4;
}

.sluzba-symptom__rec-item::before {
	content: "\2713";   /* ✓ */
	position: absolute;
	inset-inline-start: 0;
	color: var(--privilio-blue);
	font-weight: 700;
}

.sluzba-symptom__rec-item a { color: var(--privilio-black); text-decoration: none; font-weight: 600; }
.sluzba-symptom__rec-item a:hover { color: var(--privilio-blue); text-decoration: underline; }

/* --- Category picker + search ------------------------------------- */
.sluzba-picker__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	margin-block-end: var(--space-4);
}

.sluzba-picker__heading { margin: 0; }
.sluzba-picker__search { position: relative; flex: 1 1 280px; max-width: 420px; }

/* Vyhľadávanie presunuté do symptóm sekcie (Eva 2026-07-27) — v jej kontexte
   je to blok pod nadpisom, nie flex položka hlavičky pickera. */
.sluzba-symptom__search { margin: var(--space-2, 8px) 0 var(--space-4, 24px); max-width: 420px; }
.sluzba-symptom__search .sluzba-symptom__label { display: block; margin-block-end: 6px; }

.sluzba-picker__search-input {
	width: 100%;
	padding: 0.75rem 1.125rem;
	font-size: 0.9375rem;
	border: 1px solid var(--border, #d9d9d9);
	border-radius: var(--radius-pill, 999px);
	background: var(--bg-page, #fff);
	color: var(--privilio-black);
}

.sluzba-picker__search-input:focus-visible { outline: 2px solid var(--privilio-blue); outline-offset: 2px; }

.sluzba-picker__tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 720px) {
	.sluzba-picker__tiles { grid-template-columns: 1fr 1fr; }
}

.sluzba-picker__tile {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	border: 1px solid var(--border, #e6e6e6);
	border-radius: 12px;
	padding: var(--space-3);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sluzba-picker__tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.sluzba-picker__tile-photo {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border-radius: 8px;
	background: var(--bg-section-alt, #f1f1f1);
}

.sluzba-picker__tile-body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.sluzba-picker__tile-title { font-weight: 700; font-size: 1.125rem; color: var(--privilio-black); }
.sluzba-picker__tile-list { display: flex; flex-direction: column; gap: 0.125rem; }
.sluzba-picker__tile-item { font-size: 0.875rem; color: #5a5a5a; }
.sluzba-picker__tile-more { font-weight: 700; font-size: 0.875rem; color: var(--privilio-blue); margin-block-start: 0.25rem; }

.sluzba-archive__card[hidden],
.sluzba-archive__group[hidden] { display: none; }

.sluzba-picker__no-results {
	max-width: var(--container-max);
	margin: var(--space-4) auto 0;
	padding-inline: var(--container-pad-x);
	color: #5a5a5a;
}


/* ── Media cards (photo-top + padded body) — archive service/kurz cards (#11
   follow-up). The base .sluzba-archive__card (hub tiles) stays a padded text
   card; only `--media` cards carry a photo (or a gradient placeholder). ── */
.sluzba-archive__card--media {
	padding: 0;
	gap: 0;
	overflow: hidden;
	justify-content: flex-start;
}

.sluzba-archive__card-photo {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--bg-section-alt);
	overflow: hidden;
}

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

.sluzba-archive__card-ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt));
}

.sluzba-archive__card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3);
}

/* Autocomplete dropdown pod vyhľadávacím poľom (Eva 2026-07-20): okamžitá,
   klikateľná spätná väzba namiesto filtrovania mriežky ďaleko pod záhybom. */
.sluzba-picker__suggestions {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 30;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--bg-page, #fff);
	border: 1px solid var(--privilio-black, #1c1c1c);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 340px;
	overflow-y: auto;
}
.sluzba-picker__suggestions[hidden] { display: none; }
.sluzba-picker__suggestion { margin: 0; }
.sluzba-picker__suggestion a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	color: var(--privilio-black, #1c1c1c);
	text-decoration: none;
	font-size: 0.95rem;
}
.sluzba-picker__suggestion a:hover,
.sluzba-picker__suggestion.is-active a {
	background: var(--privilio-blue, #1b6ef3);
	color: #fff;
}

/* ==== templates/_page.v2.css ==== */
/**
 * Generic WP `page` template (page.php).
 *
 * Content-agnostic layout for stub pages (kontakt / o-nas / pre-firmy):
 *   styled hero (breadcrumb + H1) → constrained prose body.
 * Reuses the .sluzba container-width pattern (var(--container-max),
 * 720px body column) and brand tokens. No section-specific styling —
 * these pages currently carry stub content only.
 */

.page {
	padding-block: var(--space-5);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.page__hero {
	max-width: 720px;
	margin: 0 auto var(--space-5);
	text-align: center;
}

.page__breadcrumb {
	margin-block-end: var(--space-3);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.page__breadcrumb a {
	color: var(--text-muted);
}

.page__breadcrumb a:hover {
	color: var(--privilio-blue);
}

.page__title {
	font-size: var(--fs-h1);
	margin-block: 0;
}

/* Body prose — constrained reading column, matches .sluzba__body. */
.page__body {
	max-width: 720px;
	margin-inline: auto;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.page__body > :first-child {
	margin-block-start: 0;
}

.page__body h2 {
	font-size: var(--fs-h2);
	margin-block: var(--space-5) var(--space-2);
}

.page__body h3 {
	font-size: var(--fs-h3, var(--fs-card-h));
	margin-block: var(--space-4) var(--space-2);
}

.page__body p,
.page__body ul,
.page__body ol {
	margin-block: 0 var(--space-3);
}

/* Prose links only. `.button-cta` must keep its component colours: --link and
   --cta are the SAME blue, so this rule (higher specificity than .button-cta,
   and imported after it) painted CTA buttons blue-on-blue = a pill with an
   invisible label. Eva 2026-07-25: "vo všetkých 3 firemných službách je button
   bez popisu" — the /pre-firmy/ detail CTA sits inside .page__body. v2. */
.page__body a:not(.button-cta) {
	color: var(--link);
}

.page__body a:not(.button-cta):hover {
	color: var(--link-hover);
}

.page__body--empty {
	color: var(--text-muted);
	text-align: center;
}

/* ==== templates/_media.v2.css ==== */
/**
 * "My v médiách" listing cards (#10, Figma page-20).
 * Used by page-my-v-mediach.php — a responsive grid of media-mention cards.
 */

.media-grid {
	max-width: var(--container-max);
	margin: var(--space-5) auto 0;
	padding-inline: var(--container-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
}

.media-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}

a.media-card:hover,
a.media-card:focus-visible {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.media-card--static {
	cursor: default;
}

.media-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--bg-section-alt);
	overflow: hidden;
}

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

.media-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt));
}

.media-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
}

.media-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.media-card__badge {
	display: inline-block;
	padding: 2px 10px;
	background: var(--privilio-blue);
	color: var(--text-inverse);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.media-card__outlet {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.media-card__title {
	font-size: var(--fs-card-h);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--text-primary);
}

.media-card__link {
	margin-top: auto;
	padding-top: var(--space-2);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--link);
}

/* ── Odborné publikácie (Eva + Pavel 2026-07-30) ─────────────────────────
   Karty 2 vedľa seba na desktope, 1 pod druhou na mobile; odkazy len ako
   tlačidlá (žiadne surové URL), otvárajú sa v novej karte. */
.pub-section { margin-block-start: var(--space-6); }
.pub-section__title { margin: 0 0 8px; }
.pub-section__lead { margin: 0 0 var(--space-3); color: var(--text-muted, #555); }
.pub-section__year {
	margin: var(--space-4) 0 var(--space-2);
	font-size: 1.25rem;
}
.pub-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pub-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var(--space-3);
	background: var(--bg-page, #fff);
	border: 1px solid var(--border, #e3e3e3);
	border-radius: var(--radius-lg, 16px);
}
.pub-card__badge { align-self: flex-start; }
.pub-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.pub-card__meta { margin: 0; display: grid; gap: 4px; font-size: 0.9375rem; }
.pub-card__meta div { display: flex; gap: 6px; }
.pub-card__meta dt { font-weight: 700; }
.pub-card__meta dt::after { content: ":"; }
.pub-card__meta dd { margin: 0; }
.pub-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: auto; }
.pub-card__btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--privilio-blue, #5270eb);
	border-radius: 100px;
	color: var(--privilio-blue, #5270eb);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
}
.pub-card__btn:hover { background: var(--privilio-blue, #5270eb); color: #fff; }

/* ==== templates/_o-nas.v7.css ==== */
/**
 * O nás suite (#11): team/lektori cards + bio, referencie cards, people CTA,
 * and the "O nás" mega-menu internal layout. Reuses `.page__*`, `.media-card`
 * grid conventions, and the `.mega-menu`/`.mega-menu__inner` wrapper.
 */

/* ── People grid (team / lektori archives) ────────────────────────────── */
.people-grid {
	max-width: var(--container-max);
	margin: var(--space-5) auto 0;
	padding-inline: var(--container-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-4);
}

.person-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.person-card:hover,
.person-card:focus-visible {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.person-card__photo {
	aspect-ratio: 3 / 4;
	background: var(--bg-section-alt);
	overflow: hidden;
}

/* 15% top bias: portraits carry the head in the upper third, the default
   50/50 crop cut foreheads on the /tim/ cards (Tomas review 2026-07-10). */
.person-card__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }

.person-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt));
}

.person-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.person-card__name { font-size: var(--fs-card-body); font-weight: 700; color: var(--text-primary); }
.person-card__role { font-size: var(--fs-small); color: var(--text-muted); }
.person-card__arrow { padding: 0 var(--space-3) var(--space-3); color: var(--link); }

/* ── Person bio (single) ──────────────────────────────────────────────── */
.person-bio__layout {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: var(--space-5);
	align-items: start;
}

@media (max-width: 767.98px) {
	.person-bio__layout { grid-template-columns: 1fr; }
}

.person-bio__media { border-radius: var(--radius-lg); overflow: hidden; }
.person-bio__img { width: 100%; height: auto; display: block; }
.person-bio__ph { display: block; aspect-ratio: 3 / 4; background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt)); }
.person-bio__name { font-size: var(--fs-h1); margin: 0 0 var(--space-1); }
.person-bio__role { font-size: var(--fs-h4); color: var(--link); font-weight: 600; margin: 0 0 var(--space-3); }

/* ── People CTA banner (tím → kariéra) ────────────────────────────────── */
.people-cta {
	max-width: var(--container-max);
	margin: var(--space-6) auto 0;
	padding-inline: var(--container-pad-x);
}

.people-cta__inner {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.people-cta__title { margin: 0; color: var(--text-inverse); }

/* ── Referencie quote cards ───────────────────────────────────────────── */
.referencie-grid {
	max-width: var(--container-max);
	margin: var(--space-5) auto 0;
	padding-inline: var(--container-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-4);
}

.referencia-card {
	margin: 0;
	background: var(--bg-section-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}

.referencia-card__quote { margin: 0 0 var(--space-2); font-size: var(--fs-h4); line-height: var(--lh-body); }
.referencia-card__author { font-weight: 700; color: var(--text-primary); }

/* ── O nás mega-menu (Figma page-11) ──────────────────────────────────── */
.mega-menu--onas .mega-menu__inner {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 280px;
}

/* Higher specificity than the global `.site-header__nav ul { display:flex }`
   (the mega-menu ul lives inside the nav), so the links lay out as a 2-col grid
   instead of inheriting the nav's flex row. */
.mega-menu--onas .mega-menu__onas-links {
	list-style: none;
	margin: 0;
	padding-right: var(--space-3);
	border-right: 1px solid var(--border);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px var(--space-3);
	align-content: start;
}

.mega-menu__onas-links li { margin: 0; }

.mega-menu__onas-links a {
	display: block;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-md);
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.mega-menu__onas-links a:hover,
.mega-menu__onas-links a:focus-visible { background: var(--bg-section-alt); }

.mega-menu__onas-heading {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.mega-menu__article { display: block; padding: var(--space-1) 0; text-decoration: none; }
.mega-menu__article-title { display: block; font-size: var(--fs-card-body); font-weight: 600; color: var(--text-primary); }
.mega-menu__article-link { font-size: var(--fs-small); color: var(--link); }
.mega-menu__article:hover .mega-menu__article-title { color: var(--link); }

@media (max-width: 1279.98px) {
	.mega-menu--onas .mega-menu__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}


/* ── Hero banner photo (O nás page + Tím archive, #11 photo-polish) ────── */
.page-hero-photo {
	max-width: var(--container-max);
	margin: var(--space-4) auto 0;
	padding-inline: var(--container-pad-x);
}

.page-hero-photo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* Non-banner sources (ratio < 2:1) render in their OWN ratio — the 21:9 crop
   above decapitates them. The /o-nas/ team photo is 3:2 full-body: the centred
   crop cut ~36 % of the height, i.e. heads at the top and shoes at the bottom
   (Eva 2026-07-25: "fotka s useknutými hlavami"). The modifier is set in PHP
   from the attachment's real dimensions (privilio_hero_photo_view()), so a
   photo Eva swaps in later self-corrects. v6 (Eva 2026-07-26 "dosť
   roztiahnutá"): height-capped as well — at 56rem wide the 3:2 photo was
   ~600px tall and swallowed a laptop viewport; the cap scales it down whole
   (width follows via aspect ratio), never crops. */
.page-hero-photo--natural {
	max-width: 56rem;
}

.page-hero-photo--natural .page-hero-photo__img {
	/* The box ratio is pinned by an INLINE aspect-ratio (real attachment
	   dimensions, privilio_hero_photo_view()) — v7 (2026-07-26): with
	   sizes="auto" lazy-loading the auto-resolved box came out
	   container-wide × capped-high and object-fit stretched the photo.
	   With the ratio pinned, height caps and width follows proportionally. */
	object-fit: cover;   /* box ratio == photo ratio, so never actually crops */
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(52vh, 27rem);
	margin-inline: auto;
}

/* ==== templates/_tim-single.v2.css ==== */
/**
 * Tím špecialista — single (detail) layout (§A / §A₂, 2026-07-07).
 *
 * Full Figma page-13 layout for fyzioterapeut profiles: 2-column hero with a
 * portrait badge, warm intro, the „Kto som" / „Odborné zameranie" 25/75
 * section grid, „Vzdelanie a certifikáty" (the E-E-A-T cert list, rendered in
 * columns), „Pracovné skúsenosti", „Zaujímavosť o mne" and a personalised CTA
 * banner. Base person-card / person-bio styles live in templates/_o-nas.v3.css;
 * this file adds the detail layout + the static (non-linking) admin card.
 */

.tim-detail {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--section-pad-y) var(--container-pad-x);
}

.tim-detail__top {
	margin-bottom: var(--space-4);
}

/* --- Hero ------------------------------------------------------------- */
.tim-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
}

.tim-hero__name {
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-2);
}

.tim-hero__role {
	font-size: var(--fs-h4);
	color: var(--link);
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

.tim-hero__bio {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	margin: 0 0 var(--space-4);
}

.tim-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
}

.tim-hero__more {
	font-weight: 600;
	color: var(--link);
	text-decoration: none;
}

.tim-hero__more:hover,
.tim-hero__more:focus-visible {
	color: var(--link-hover);
	text-decoration: underline;
}

.tim-hero__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.tim-hero__img {
	width: 100%;
	height: auto;
	display: block;
}

.tim-hero__ph {
	display: block;
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt));
}

.tim-hero__badge {
	position: absolute;
	left: var(--space-3);
	bottom: var(--space-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 84px;
	padding: var(--space-2) var(--space-3);
	background: var(--bg-page, #fff);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.tim-hero__badge-num {
	font-family: var(--font-display);
	font-size: var(--fs-stat-number);
	font-weight: 800;
	line-height: 1;
	color: var(--privilio-black, var(--text-primary));
}

.tim-hero__badge-label {
	font-size: var(--fs-xs);
	color: var(--text-muted);
	text-align: center;
	line-height: 1.2;
}

/* --- Warm intro ------------------------------------------------------- */
.tim-intro {
	text-align: center;
	max-width: 46rem;
	margin: var(--space-7) auto 0;
}

.tim-intro__eyebrow {
	font-size: var(--fs-small);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-accent, var(--privilio-orange));
	font-weight: 700;
	margin: 0 0 var(--space-2);
}

.tim-intro__lead {
	font-size: var(--fs-h4);
	line-height: var(--lh-body);
	color: var(--text-primary);
	margin: 0;
}

/* --- 25/75 content sections ------------------------------------------ */
.tim-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: var(--space-4) var(--space-6);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border);
}

.tim-section__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	margin: 0;
}

.tim-section__body {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
}

.tim-section__body > :first-child { margin-top: 0; }
.tim-section__body > :last-child { margin-bottom: 0; }
.tim-section__body p { margin: 0 0 var(--space-3); }

/* Vzdelanie a certifikáty */
.tim-edu__sub {
	font-size: var(--fs-card-h);
	margin: var(--space-4) 0 var(--space-2);
}
.tim-edu__sub:first-child { margin-top: 0; }

.tim-edu__list {
	margin: 0 0 var(--space-2);
	padding-left: 1.2em;
}
.tim-edu__list li { margin: 0 0 var(--space-1); }

/* the long cert list flows into columns on wider screens */
.tim-edu__list--certs {
	columns: 2;
	column-gap: var(--space-6);
}
.tim-edu__list--certs li { break-inside: avoid; }

.tim-praca__list {
	margin: 0;
	padding-left: 1.2em;
}
.tim-praca__list li { margin: 0 0 var(--space-2); }

/* --- Zaujímavosť o mne ------------------------------------------------ */
.tim-zaujimavost {
	margin-top: var(--space-7);
	padding: var(--space-5);
	background: var(--bg-section-alt);
	border-radius: var(--radius-lg);
	text-align: center;
	max-width: 52rem;
	margin-inline: auto;
}

.tim-zaujimavost__eyebrow {
	font-size: var(--fs-small);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-accent, var(--privilio-orange));
	font-weight: 700;
	margin: 0 0 var(--space-2);
}

.tim-zaujimavost__title {
	font-size: var(--fs-h4);
	margin: 0 0 var(--space-3);
}

.tim-zaujimavost__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	margin: 0;
}

/* --- CTA banner ------------------------------------------------------- */
.tim-cta {
	margin-top: var(--space-7);
}

.tim-cta__inner {
	background: var(--bg-dark, #3a4448);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.tim-cta__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	color: var(--text-inverse);
	margin: 0 0 var(--space-4);
}

.tim-cta__list {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.tim-cta__list li {
	position: relative;
	padding-left: 1.8em;
	line-height: var(--lh-body);
}

.tim-cta__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--accent-yellow, var(--privilio-orange));
	font-weight: 700;
}

.tim-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
}

.button-cta--light {
	background: var(--text-inverse, #fff);
	color: var(--privilio-black, #1a1a1a);
}
.button-cta--light:hover,
.button-cta--light:focus-visible {
	background: color-mix(in srgb, var(--text-inverse, #fff) 88%, #000);
}

.tim-cta__phone {
	color: var(--text-inverse);
	font-weight: 600;
	text-decoration: none;
}
.tim-cta__phone:hover,
.tim-cta__phone:focus-visible { text-decoration: underline; }

/* --- Static (non-linking) admin card on the archive ------------------ */
.person-card--static {
	cursor: default;
}
.person-card--static:hover,
.person-card--static:focus-visible {
	transform: none;
	box-shadow: none;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 880px) {
	.tim-hero {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}
	.tim-hero__media { order: -1; max-width: 26rem; }
	.tim-section {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}
	.tim-edu__list--certs { columns: 1; }
}

/* Publikačná činnosť (Eva 2026-07-30): názov = odkaz, sivá meta linka pod ním. */
.tim-publikacie__item { margin-block-end: 10px; }
.tim-publikacie__item a { font-weight: 700; text-underline-offset: 3px; }
.tim-publikacie__meta { display: block; font-size: 0.9375rem; color: var(--text-muted, #666); }

/* ==== templates/_kontakt.v2.css ==== */
/**
 * Kontakt page (§D, page-kontakt.php).
 *
 * Hero (2-col) + 3 utility cards + contact details/photo + doprava (3-col) +
 * map + FAQ (reuses .faq component) + newsletter. Additive — does not touch
 * _page.css / _o-nas.v3.css. Reuses brand tokens + .button-cta.
 */

.kontakt-page {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	padding-block: var(--space-5);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.kontakt-hero { max-width: none; text-align: left; }

.kontakt-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-4);
	align-items: end;
}

.kontakt-hero__kicker {
	margin: 0 0 var(--space-1);
	color: var(--link);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
}

.kontakt-hero__title { margin: 0; }

.kontakt-hero__subtext {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

/* ── Section rhythm ───────────────────────────────────────────────────── */
.kontakt-cards,
.kontakt-details,
.kontakt-doprava,
.kontakt-mapa,
.kontakt-faq,
.kontakt-newsletter {
	margin-block-start: var(--space-6);
}

/* ── 3 utility cards ──────────────────────────────────────────────────── */
.kontakt-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}

.kontakt-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}

.kontakt-card--accent { border-color: var(--privilio-blue); box-shadow: var(--shadow-md); }

.kontakt-card__title { margin: 0; font-size: var(--fs-card-h); }

.kontakt-card__text { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }

.kontakt-card__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kontakt-card__hours li { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-card-body); }
.kontakt-card__hours span:first-child { color: var(--text-muted); }

.kontakt-card__cta { margin-block-start: auto; align-self: flex-start; }

/* ── Contact details + photo ──────────────────────────────────────────── */
.kontakt-details {
	/* #kontaktne-udaje anchor target — offset lives on the section itself. */
	scroll-margin-top: var(--space-5);
}

.kontakt-details__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-5);
	align-items: start;
}

.kontakt-details__heading { margin: 0 0 var(--space-3); }

.kontakt-block { margin-block-end: var(--space-3); }
.kontakt-block__label { margin: 0 0 4px; font-weight: 700; }
.kontakt-block__line { margin: 0 0 2px; line-height: var(--lh-body); }
.kontakt-block__note { margin: 0 0 2px; font-size: var(--fs-small); color: var(--text-muted); }

.kontakt-details__iso { margin-block-start: var(--space-2); }

.kontakt-details__photo-img,
.kontakt-details__photo-ph {
	width: 100%;
	border-radius: var(--radius-lg);
	display: block;
}

.kontakt-details__photo-img { height: auto; object-fit: cover; }

.kontakt-details__photo-ph {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt));
}

/* ── Doprava (3 columns) ──────────────────────────────────────────────── */
.kontakt-doprava__heading { margin: 0 0 var(--space-3); }

.kontakt-doprava__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
}

.kontakt-doprava__col-title { margin: 0 0 var(--space-1); font-size: var(--fs-card-h); }
.kontakt-doprava__col p { margin: 0 0 var(--space-2); color: var(--text-muted); line-height: var(--lh-body); }

/* ── Map ──────────────────────────────────────────────────────────────── */
.kontakt-mapa__frame {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--radius-lg);
}

/* ── Newsletter ───────────────────────────────────────────────────────── */
.kontakt-newsletter__inner {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	/* space-5→space-4 (Eva 2026-07-29: sekcia „menšej výšky"; embed nahradil
	   kompaktný footer formulár). */
	padding: var(--space-4);
}

/* Zdieľaný footer formulár v modrej bande — širší než footer stĺpec. */
.kontakt-newsletter .site-footer__newsletter-form { max-width: 560px; }

.kontakt-newsletter__title { margin: 0 0 var(--space-3); color: var(--text-inverse); }

.kontakt-newsletter__form { display: grid; gap: var(--space-2); max-width: 560px; }
.kontakt-newsletter__form input,
.kontakt-newsletter__form select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font: inherit;
}
.kontakt-newsletter__type { display: block; }
.kontakt-newsletter__consent { display: flex; gap: var(--space-1); font-size: var(--fs-small); align-items: flex-start; }
.kontakt-newsletter__consent a { color: var(--text-inverse); text-decoration: underline; }
.kontakt-newsletter__form button {
	justify-self: start;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--cta-radius);
	background: var(--accent-yellow);
	color: var(--accent-yellow-text);
	font-weight: 600;
	cursor: pointer;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
	.kontakt-cards { grid-template-columns: 1fr; }
	.kontakt-doprava__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px) {
	.kontakt-hero__grid,
	.kontakt-details__grid,
	.kontakt-doprava__grid { grid-template-columns: 1fr; }
}

/* ── Map click-to-load facade (v7 §7: no Google request pre-click) ─────── */
.kontakt-mapa__facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 280px;
	padding: var(--space-5) var(--space-3);
	background: var(--bg-section-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-align: center;
}

.kontakt-mapa__addr { margin: 0; font-size: var(--fs-lead); }
.kontakt-mapa__note { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.kontakt-mapa__ext { margin: 0; font-size: var(--fs-small); }
.kontakt-mapa__load { cursor: pointer; }

/* ── FAQ follow-up link chips (v7 §8) ──────────────────────────────────── */
.faq__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	margin: var(--space-2) 0 0;
}

.faq__link-chip {
	font-weight: 600;
	text-decoration: none;
}

.faq__link-chip:hover,
.faq__link-chip:focus-visible { text-decoration: underline; }

/* ── Newsletter pre-embed note (sits on the blue panel) ────────────────── */
.kontakt-newsletter__note {
	margin: 0;
	color: var(--text-inverse);
}

.kontakt-newsletter__note a { color: var(--text-inverse); text-decoration: underline; }

/* ==== templates/_o-firme.css ==== */
/**
 * O firme page (§C, page-o-firme.php).
 *
 * Brand-led sections: hero, founder quote + video slot, 6-card USP grid,
 * 3 Brand-DNA pillars, kompetencie accordion, ISO/komora trust strip,
 * media cards, CV CTA. Additive; reuses brand tokens + .button-cta.
 */

.ofirme-page {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	padding-block: var(--space-5);
}

.ofirme-eyebrow {
	margin: 0 0 var(--space-1);
	color: var(--link);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	font-size: var(--fs-small);
}

.ofirme-h2 { margin: 0 0 var(--space-4); }

.ofirme-hero { max-width: none; text-align: left; }
.ofirme-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-4);
	align-items: end;
}
.ofirme-hero__kicker { margin: 0 0 var(--space-1); color: var(--link); font-weight: 600; letter-spacing: var(--ls-eyebrow); }
.ofirme-hero__title { margin: 0; }
.ofirme-hero__subtext { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }

/* Section rhythm */
.ofirme-quote,
.ofirme-usp,
.ofirme-dna,
.ofirme-komp,
.ofirme-trust,
.ofirme-media,
.ofirme-cv { margin-block-start: var(--space-6); }

/* ── Founder quote + video ────────────────────────────────────────────── */
.ofirme-quote {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-4);
	align-items: center;
}
.ofirme-quote__box { margin: 0; }
.ofirme-quote__text { font-size: var(--fs-card-h); line-height: 1.35; margin: 0 0 var(--space-3); }
.ofirme-quote__author { display: flex; flex-direction: column; }
.ofirme-quote__name { font-weight: 700; }
.ofirme-quote__role { color: var(--text-muted); font-size: var(--fs-small); }
.ofirme-quote__video-ph {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 14%, var(--privilio-paper)), var(--bg-section-alt));
}

/* ── USP grid ─────────────────────────────────────────────────────────── */
.ofirme-usp__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}
.ofirme-usp__card {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}
.ofirme-usp__card-title { margin: 0 0 var(--space-1); font-size: var(--fs-card-h); }
.ofirme-usp__card-text { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }

/* ── Brand DNA pillars ────────────────────────────────────────────────── */
.ofirme-dna__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}
.ofirme-dna__card {
	position: relative;
	background: var(--bg-section-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}
.ofirme-dna__num {
	display: block;
	font-size: var(--fs-stat-number);
	line-height: 1;
	font-weight: 700;
	color: color-mix(in srgb, var(--privilio-orange) 85%, var(--privilio-black));
	margin-block-end: var(--space-2);
}
.ofirme-dna__title { margin: 0 0 var(--space-1); font-size: var(--fs-card-h); }
.ofirme-dna__text { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }
.ofirme-dna__claim {
	margin: var(--space-4) 0 0;
	text-align: center;
	font-size: var(--fs-card-h-lg);
	font-weight: 700;
	color: var(--privilio-blue);
}

/* ── Kompetencie accordion + photo ────────────────────────────────────── */
.ofirme-komp__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--space-5);
	align-items: start;
}
.ofirme-komp__item {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-block-end: var(--space-2);
}
.ofirme-komp__q { cursor: pointer; font-weight: 700; font-size: var(--fs-card-h); }
.ofirme-komp__a { margin-block-start: var(--space-2); color: var(--text-muted); line-height: var(--lh-body); }
.ofirme-komp__a p { margin: 0 0 var(--space-2); }
.ofirme-komp__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ofirme-komp__links a { color: var(--link); font-weight: 600; }
.ofirme-komp__photo-ph {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, color-mix(in srgb, var(--privilio-blue) 12%, var(--privilio-paper)), var(--bg-section-alt));
}

/* ── ISO + komora trust strip ─────────────────────────────────────────── */
.ofirme-trust__inner {
	background: var(--bg-section-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	align-items: center;
	justify-content: space-between;
}
.ofirme-trust__iso { display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; }
.ofirme-trust__text { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }
.ofirme-trust__komora { margin: 0; font-weight: 600; }

/* ── Media cards ──────────────────────────────────────────────────────── */
.ofirme-media__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}
.ofirme-media__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ofirme-media__card:hover,
.ofirme-media__card:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ofirme-media__tag { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ofirme-media__title { font-weight: 700; font-size: var(--fs-card-body); }
.ofirme-media__source { font-size: var(--fs-small); color: var(--text-muted); }
.ofirme-media__cta { margin-block-start: auto; color: var(--link); font-weight: 600; }
.ofirme-media__all { margin: var(--space-3) 0 0; }
.ofirme-media__all a { color: var(--link); font-weight: 600; }

/* ── CV CTA ───────────────────────────────────────────────────────────── */
.ofirme-cv__inner {
	background: var(--privilio-blue);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
}
.ofirme-cv__title { margin: 0 0 var(--space-1); color: var(--text-inverse); }
.ofirme-cv__text { max-width: 640px; }
.ofirme-cv__text p { margin: 0; color: color-mix(in srgb, var(--text-inverse) 85%, transparent); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
	.ofirme-usp__grid,
	.ofirme-media__grid { grid-template-columns: 1fr 1fr; }
	.ofirme-dna__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
	.ofirme-hero__grid,
	.ofirme-quote,
	.ofirme-usp__grid,
	.ofirme-komp__grid,
	.ofirme-media__grid { grid-template-columns: 1fr; }
}

/* ==== templates/_partneri.v2.css ==== */
/**
 * Naši partneri page (§C, page-partneri.php).
 *
 * Hero + vertical list of horizontal partner cards + B2B CTA banner.
 * Additive; reuses brand tokens + .button-cta.
 */

.partneri-page {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	padding-block: var(--space-5);
}

.partneri-hero { max-width: none; text-align: left; }
.partneri-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-4);
	align-items: end;
}
.partneri-hero__title { margin: 0; }
.partneri-hero__subtext { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }

.partneri-list {
	margin-block-start: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.partneri-card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) 2rem;
	align-items: center;
	gap: var(--space-4);
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.partneri-card:hover,
.partneri-card:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.partneri-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	background: var(--bg-section-alt);
	font-weight: 700;
	text-align: center;
	color: var(--text-primary);
}

.partneri-card__body { display: flex; flex-direction: column; gap: 4px; }
.partneri-card__name { font-weight: 700; font-size: var(--fs-card-h); }
.partneri-card__desc { color: var(--text-muted); line-height: var(--lh-body); }
.partneri-card__arrow { color: var(--link); font-size: var(--fs-card-h); justify-self: end; }

.partneri-cta { margin-block-start: var(--space-6); }
.partneri-cta__inner {
	background: var(--bg-section-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
}
.partneri-cta__title { margin: 0; max-width: 640px; }

@media (max-width: 767.98px) {
	.partneri-hero__grid { grid-template-columns: 1fr; }
	.partneri-card { grid-template-columns: 1fr; text-align: left; }
	.partneri-card__logo { justify-content: flex-start; }
	.partneri-card__arrow { display: none; }
}

/* Real partner logos (Eva 2026-07-26) — image fills the former text slot. v2. */
.partneri-card__logo--img {
	background: #fff;
	border: 1px solid var(--border, #ececec);
}

.partneri-card__logo-img {
	display: block;
	max-width: 132px;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ==== templates/_referencie.v2.css ==== */
/**
 * Referencie page (§C, page-referencie.php).
 *
 * Adds trust-stat cards, video-review cards, and star review cards on top of
 * the existing .referencie-grid / .referencia-card rules (those stay in
 * _o-nas.v3.css). Additive — does not edit _o-nas.v3.css. Reuses brand tokens.
 */

.referencie-page {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	padding-block: var(--space-5);
}

.referencie-hero { max-width: none; text-align: left; }
.referencie-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-4);
	align-items: end;
}
.referencie-hero__title { margin: 0; }
.referencie-hero__subtext { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }

.ref-section-title { margin: 0 0 var(--space-1); }
.ref-section-lead { margin: 0 0 var(--space-4); color: var(--text-muted); }

.ref-stats,
.ref-videos,
.ref-reviews,
.ref-cta { margin-block-start: var(--space-6); }

/* ── Trust stats ──────────────────────────────────────────────────────── */
.ref-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}
.ref-stat {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.ref-stat__num { font-size: var(--fs-stat-number); line-height: 1; font-weight: 700; color: var(--privilio-blue); }
.ref-stat__label { font-weight: 700; font-size: var(--fs-stat-label); }
.ref-stat__desc { color: var(--text-muted); line-height: var(--lh-body); }

/* ── Video review cards ───────────────────────────────────────────────── */
.ref-videos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-3);
}
.ref-video {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-section-alt);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ref-video:hover,
.ref-video:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ref-video__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: var(--radius-pill);
	background: var(--privilio-blue);
	color: var(--text-inverse);
	font-size: 1rem;
}
.ref-video__label { font-weight: 700; }
.ref-video__city { color: var(--text-muted); font-size: var(--fs-small); }

/* ── Star review cards ────────────────────────────────────────────────── */
.ref-reviews__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}
.ref-review {
	margin: 0;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.ref-stars { display: inline-flex; gap: 2px; color: var(--accent-yellow); }
.ref-review__quote { margin: 0; line-height: var(--lh-body); }
.ref-review__meta { display: flex; flex-direction: column; }
.ref-review__author { font-weight: 700; }
.ref-review__sluzba { color: var(--text-muted); font-size: var(--fs-small); }

/* ── CTA banner ───────────────────────────────────────────────────────── */
.ref-cta__inner {
	background: var(--bg-dark);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.ref-cta__title { margin: 0 0 var(--space-3); color: var(--text-inverse); }
.ref-cta__benefits {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
}
.ref-cta__benefits li { display: flex; gap: var(--space-1); align-items: baseline; }
.ref-cta__check { color: var(--accent-yellow); font-weight: 700; }

@media (max-width: 767.98px) {
	.referencie-hero__grid,
	.ref-stats,
	.ref-reviews__grid,
	.ref-cta__benefits { grid-template-columns: 1fr; }
}

/* Supplement grid service sub-label (CPT pool, 2026-07-26). v2. */
.referencia-card__sluzba {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

/* ==== templates/_skupinova-hub.v2.css ==== */
/**
 * Skupinová parent hub — audience anchor sections (Eva 1.1 / item E).
 *
 * The 4 #pre-* sections + an anchor nav that smooth-scrolls to them. Cards
 * themselves reuse `.sluzba-archive__*` from _archive.v6.css.
 *
 * v2 (2026-07-17, Eva): `--overlay` photo tiles for ALL /sluzby/<hub>/ grids —
 * the service's featured photo fills the card and the title + foot sit over a
 * bottom gradient ("text cez fotku"). Services without a photo keep the plain
 * padded text card. Only page-sluzby-hub.php emits the --overlay class.
 */

html {
	scroll-behavior: smooth;
}

.skup-anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 2.5rem;
}

.skup-anchors__link {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--color-surface-muted, #f1f1f5);
	color: var(--color-ink, #1d1d2b);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.skup-anchors__link:hover,
.skup-anchors__link:focus-visible {
	background: var(--color-brand, #5270eb);
	color: #fff;
}

/* Offset the scroll target so the sticky header doesn't cover the heading. */
.skup-section {
	scroll-margin-top: 6rem;
	margin-bottom: 3rem;
}

.skup-section__title {
	margin-bottom: 1.25rem;
}

/* ── Overlay photo tiles (hub grids) ────────────────────────────────────── */

.sluzba-archive__card--overlay {
	position: relative;
	overflow: hidden;
	justify-content: flex-end;
	min-height: 240px;
}

.sluzba-archive__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sluzba-archive__card-bg .sluzba-archive__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

/* Bottom gradient so the white text stays readable over any photo. */
.sluzba-archive__card--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 35%, rgba(0, 0, 0, 0.72) 100%);
	pointer-events: none;
}

.sluzba-archive__card--overlay .sluzba-archive__card-title,
.sluzba-archive__card--overlay .sluzba-archive__card-foot {
	position: relative;
	z-index: 2;
}

.sluzba-archive__card--overlay .sluzba-archive__card-title {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.sluzba-archive__card--overlay .sluzba-archive__card-price--more {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 500;
}

.sluzba-archive__card--overlay .sluzba-archive__card-arrow {
	color: #fff;
}

.sluzba-archive__card--overlay:hover .sluzba-archive__card-img,
.sluzba-archive__card--overlay:focus-visible .sluzba-archive__card-img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.sluzba-archive__card-bg .sluzba-archive__card-img {
		transition: none;
	}
}

/* ==== templates/_ymyl.v2.css ==== */
/**
 * YMYL — odborná garancia block (item H) on single-sluzba: reviewer(s),
 * last-updated date, expert sources. New file (not an edit of an @imported file)
 * to sidestep the W3TC minify sub-file cache.
 */

.ymyl-block {
	margin: 2.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-border, #e3e3ea);
	border-left: 4px solid var(--color-brand, #5270eb);
	border-radius: 8px;
	background: var(--color-surface-muted, #f7f7fa);
	font-size: 0.95rem;
	line-height: 1.6;
}

.ymyl-block p {
	margin: 0 0 0.5rem;
}

.ymyl-block p:last-child {
	margin-bottom: 0;
}

.ymyl-block__label {
	font-weight: 600;
}

.ymyl-block__reviewer a {
	color: var(--color-brand, #5270eb);
}

.ymyl-block__date {
	color: var(--color-ink-muted, #5b5b6b);
}

.ymyl-block__sources ul {
	margin: 0.25rem 0 0;
	padding-left: 1.25rem;
}

.ymyl-block__sources li {
	margin-bottom: 0.25rem;
}

/* Reviewer role/specialization, rendered in parentheses after the name (§U). */
.ymyl-block__role {
	color: var(--text-muted);
	font-size: var(--fs-small);
}

/* ==== templates/_pre-firmy.v3.css ==== */
/**
 * Pre firmy B2B hub + detail (§E, Figma page-22 / page-23).
 *
 * New file (not an edit of an @imported file) so it sidesteps the W3TC minify
 * sub-file cache. Reuses .button-cta, .sluzba-archive__* (card grid), .faq,
 * .page__* from existing imports; only the B2B-specific sections live here.
 *
 * @import order: after _o-nas.v3.css, before _ymyl.css is fine (independent
 * selectors, all .pre-firmy* scoped).
 */

/* ---------- Hero ---------- */
.pre-firmy__hero-grid {
	display: grid;
	gap: var(--space-4);
}

.pre-firmy__lead {
	max-width: 60ch;
	margin: var(--space-2) 0 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--text-primary);
}

.pre-firmy__hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.pre-firmy__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.pre-firmy__tag {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--border-strong, #c7c7c4);
	border-radius: var(--radius-pill, 999px);
	background: var(--bg-page, #fff);
	font-size: 0.9rem;
	font-weight: 500;
}

/* ---------- Shared section heads ---------- */
.pre-firmy__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--link, #5270eb);
}

.pre-firmy__h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	line-height: 1.2;
}

.pre-firmy__section-head {
	margin: 0 0 var(--space-3);
}

.pre-firmy__section-lead {
	max-width: 56ch;
	margin: var(--space-1) 0 0;
	color: var(--text-muted);
	line-height: 1.6;
}

.pre-firmy__services,
.pre-firmy__pains,
.pre-firmy__process,
.pre-firmy__downloads {
	margin: var(--space-6) 0 0;
}

/* card description under the reused .sluzba-archive__card */
.pre-firmy__card-desc {
	display: block;
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--text-muted);
}

/* ---------- Pain points ---------- */
.pre-firmy__pain-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.pre-firmy__pain-card {
	padding: var(--space-3);
	border: 1px solid var(--border, #e5e5e3);
	border-radius: var(--radius-md, 8px);
	background: var(--bg-page, #fff);
}

.pre-firmy__pain-title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
}

.pre-firmy__pain-text {
	margin: 0;
	line-height: 1.6;
	color: var(--text-primary);
}

/* ---------- Consult banner (blue) ---------- */
.pre-firmy__consult,
.pre-firmy__final-cta {
	margin: var(--space-6) 0 0;
	padding: var(--space-4);
	border-radius: var(--radius-lg, 16px);
	background: var(--privilio-blue, #5270eb);
	color: var(--text-inverse, #fff);
}

.pre-firmy__consult {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.pre-firmy__consult-title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	line-height: 1.25;
}

.pre-firmy__consult-sub {
	margin: 0;
	max-width: 48ch;
	line-height: 1.55;
	opacity: 0.92;
}

/* ---------- Process steps ---------- */
.pre-firmy__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-3);
}

.pre-firmy__step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3);
	border: 1px solid var(--border, #e5e5e3);
	border-radius: var(--radius-md, 8px);
	background: var(--bg-section-alt, #f7f7f5);
}

.pre-firmy__step-num {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--privilio-blue, #5270eb);
}

.pre-firmy__step-title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
}

.pre-firmy__step-text {
	margin: 0;
	line-height: 1.6;
	color: var(--text-primary);
}

/* ---------- Downloads ---------- */
.pre-firmy__download-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.pre-firmy__download-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border, #e5e5e3);
	border-radius: var(--radius-md, 8px);
	background: var(--bg-page, #fff);
	text-decoration: none;
	color: var(--text-primary);
	transition: border-color var(--dur-base, 0.15s) ease, box-shadow var(--dur-base, 0.15s) ease;
}

.pre-firmy__download-card:hover,
.pre-firmy__download-card:focus-visible {
	border-color: var(--privilio-blue, #5270eb);
	box-shadow: 0 2px 12px rgba(82, 112, 235, 0.12);
}

.pre-firmy__download-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-sm, 4px);
	background: var(--privilio-orange, #fcc552);
	color: var(--privilio-black, #0f0f0f);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.pre-firmy__download-title {
	flex: 1 1 auto;
	font-weight: 600;
}

.pre-firmy__download-action {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--link, #5270eb);
}

/* ---------- Final CTA banner (blue) ---------- */
.pre-firmy__final-cta-title {
	margin: 0 0 var(--space-3);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	line-height: 1.2;
}

.pre-firmy__final-cta-bullets {
	margin: 0 0 var(--space-3);
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

.pre-firmy__final-cta-bullet,
.pre-firmy-detail__benefit {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.5;
}

.pre-firmy__check {
	flex: 0 0 auto;
	margin-top: 0.25rem;
}

/* ---------- Detail page ---------- */
.pre-firmy-detail__intro {
	font-size: 1.125rem;
	line-height: 1.65;
}

.pre-firmy-detail__benefits {
	margin: var(--space-3) 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.pre-firmy-detail__benefit {
	color: var(--text-primary);
}

.pre-firmy-detail__benefit .pre-firmy__check {
	color: var(--privilio-blue, #5270eb);
}

.pre-firmy-detail__disclaimer {
	margin: var(--space-3) 0 0;
	padding: var(--space-2) var(--space-3);
	border-left: 4px solid var(--privilio-orange, #fcc552);
	background: var(--bg-section-alt, #f7f7f5);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text-muted);
}

.pre-firmy-detail__disclaimer-label {
	font-weight: 600;
	color: var(--text-primary);
}

.pre-firmy-detail__cta {
	margin: var(--space-4) 0 0;
}

/* ---------- Responsive ---------- */
@media (min-width: 48rem) {
	.pre-firmy__pain-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.pre-firmy__download-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pre-firmy__final-cta-bullets {
		grid-template-columns: repeat(2, 1fr);
	}

	.pre-firmy__final-cta-inner {
		max-width: 62rem;
	}
}

/* ── Referencie firiem (prvá: Visma, 2026-07-10) ───────────────────────── */
.pre-firmy__reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: var(--space-3);
}

.pre-firmy__review {
	margin: 0;
	padding: var(--space-4);
	background: var(--bg-section-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.pre-firmy__review-quote p {
	margin: 0 0 var(--space-3);
	line-height: var(--lh-body);
	font-style: italic;
}

.pre-firmy__review-meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.pre-firmy__review-logo {
	width: auto;
	height: 22px;
	flex: 0 0 auto;
}

.pre-firmy__review-author {
	font-weight: 600;
}

/* ── Nezáväzný dopyt: on-page form (Eva 2026-07-26) ─────────────────────
   Replaces the mailto: CTA. Fields reuse the brand input look (pill-less,
   soft border); consent row reuses the footer checkbox classes but flips
   the colour for the light background. v3. */
.pre-firmy-dopyt {
	margin-block: var(--space-6);
	scroll-margin-top: 96px; /* sticky header offset for the #dopyt anchor */
}

.pre-firmy-dopyt__inner {
	max-width: 46rem;
	margin-inline: auto;
	padding: var(--space-4) var(--space-4) var(--space-5);
	background: var(--bg-section-alt, #f7f7f5);
	border-radius: var(--radius-lg, 16px);
}

.pre-firmy-dopyt__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-block-end: var(--space-3);
}

@media (min-width: 40rem) {
	.pre-firmy-dopyt__grid {
		grid-template-columns: 1fr 1fr;
	}

	.pre-firmy-dopyt__field--wide {
		grid-column: 1 / -1;
	}
}

.pre-firmy-dopyt__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pre-firmy-dopyt__label {
	font-weight: 600;
	font-size: 0.9rem;
}

.pre-firmy-dopyt__field input,
.pre-firmy-dopyt__field textarea {
	padding: 10px 14px;
	border: 1px solid var(--border, #d9d9d9);
	border-radius: 10px;
	font: inherit;
	background: #fff;
	color: var(--text-primary, #0f0f0f);
}

.pre-firmy-dopyt__field input:focus-visible,
.pre-firmy-dopyt__field textarea:focus-visible {
	outline: 2px solid var(--privilio-blue, #5270eb);
	outline-offset: 1px;
	border-color: var(--privilio-blue, #5270eb);
}

/* Honeypot: out of sight AND out of the accessibility tree (aria-hidden). */
.pre-firmy-dopyt__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	margin: 0;
}

/* Consent row inherits the footer classes — flip white→dark for light bg. */
.pre-firmy-dopyt__consent {
	color: var(--text-primary, #0f0f0f);
	margin-block: var(--space-2);
}

.pre-firmy-dopyt__actions {
	margin-block: var(--space-3) 0;
}

.pre-firmy-dopyt__status {
	margin-block: var(--space-2) 0;
	font-weight: 600;
}

.pre-firmy-dopyt__status.is-success {
	color: #157347;
}

.pre-firmy-dopyt__status.is-error {
	color: #b32d2e;
}

.pre-firmy-dopyt__alt {
	margin-block: var(--space-2) 0;
	font-size: 0.85rem;
	color: var(--text-muted);
}

.pre-firmy-dopyt__alt a {
	color: var(--link);
}

/* ==== templates/_na-stiahnutie.css ==== */
/**
 * "Na stiahnutie" downloads page (item T / page-na-stiahnutie.php).
 *
 * Reuses the `.page` container + `.page__hero` (breadcrumb / H1 / intro) from
 * _page.css and the `.button-cta` component. Adds the download-card grid (2+1),
 * the e-book / brochure / contact feature bands, all on brand tokens.
 * Loaded via app.css @import (see theme/privilio/README.md build-chain note).
 */

/* ------------------------------------------------------------------ *
 * Document card grid — 2 cols desktop, 2 tablet (3rd wraps), 1 mobile *
 * ------------------------------------------------------------------ */
.na-stiahnutie__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-block: var(--space-6);
}

@media (min-width: 700px) {
	.na-stiahnutie__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

.na-stiahnutie__card {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	background: var(--bg-page, #fff);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.na-stiahnutie__card:hover,
.na-stiahnutie__card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.na-stiahnutie__card-thumb {
	flex: 0 0 auto;
	width: 120px;
}

.na-stiahnutie__thumb-img {
	display: block;
	width: 120px;
	height: auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

.na-stiahnutie__card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.na-stiahnutie__card-title {
	font-size: var(--fs-card-h, var(--fs-h4));
	margin-block: 0 var(--space-2);
}

.na-stiahnutie__card-text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	margin-block: 0 var(--space-3);
}

.na-stiahnutie__download {
	margin-block-start: var(--space-1);
}

/* On very small screens stack the thumbnail above the content. */
@media (max-width: 460px) {
	.na-stiahnutie__card {
		flex-direction: column;
	}

	.na-stiahnutie__card-thumb,
	.na-stiahnutie__thumb-img {
		width: 96px;
	}
}

/* ------------------------------------------------------------------ *
 * Feature bands (e-book / brochure / contact) — media + content      *
 * ------------------------------------------------------------------ */
.na-stiahnutie__band {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	align-items: center;
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-block: var(--space-5);
}

@media (min-width: 768px) {
	.na-stiahnutie__band--ebook {
		grid-template-columns: 240px 1fr;
	}
}

.na-stiahnutie__band-media {
	display: flex;
	justify-content: center;
}

.na-stiahnutie__band-cover {
	display: block;
	max-width: 100%;
	width: auto;
	max-height: 320px;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.na-stiahnutie__band-title {
	font-size: var(--fs-h2);
	margin-block: 0 var(--space-3);
}

.na-stiahnutie__band-text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin-block: 0 var(--space-4);
}

/* E-book: soft accent band, visually distinct from the plain cards. */
.na-stiahnutie__band--ebook {
	background: var(--bg-section-alt);
	border: 1px solid var(--border);
}

/* Brochure: quieter paper band. */
.na-stiahnutie__band--brozura {
	background: var(--privilio-paper, var(--bg-section-alt));
	border: 1px solid var(--border);
}

.na-stiahnutie__band--brozura .na-stiahnutie__band-text a {
	color: var(--link);
}

/* Contact CTA: dark full-width box, inverse text, white button. */
.na-stiahnutie__band--contact {
	background: var(--bg-dark);
	color: var(--text-inverse);
	text-align: center;
	padding-block: var(--space-6);
}

.na-stiahnutie__band--contact .na-stiahnutie__band-title {
	color: var(--text-inverse);
	max-width: 40ch;
	margin-inline: auto;
}

.na-stiahnutie__contact-btn {
	background: var(--text-inverse, #fff);
	color: var(--privilio-black);
	border-color: var(--text-inverse, #fff);
}

.na-stiahnutie__contact-btn:hover,
.na-stiahnutie__contact-btn:focus-visible {
	background: var(--accent-yellow, #fcc552);
	border-color: var(--accent-yellow, #fcc552);
	color: var(--privilio-black);
}

/* ==== templates/_rezervacia.v1.css ==== */
/**
 * /rezervacia/ — Bookio widget embed page (page-rezervacia.php).
 *
 * The widget iframe auto-resizes via Bookio's widget.bookio.js
 * (initBookioWidget onload); min-height only covers the pre-init flash so
 * the page doesn't collapse while the script boots.
 *
 * W3TC cache-bust rule: NEVER edit this file in place — rename to the next
 * .vN and update the app.css @import.
 */

.rezervacia-page__embed {
	margin: var(--space-6, 2rem) 0 var(--space-4, 1rem);
}

.rezervacia-page__embed iframe {
	display: block;
	width: 100%;
	min-height: 640px;
	border: 0;
}

.rezervacia-page__phone-hint {
	margin-bottom: var(--space-6, 2rem);
	font-size: 0.9375rem;
	color: var(--text-secondary, #55606a);
}

/* ==== templates/_sluzba-galeria.v2.css ==== */
/**
 * Service photo gallery (F5) — v2: moved INTO the article flow, directly
 * under the two-column body/sidebar layout (Tomáš review 2026-07-13: the
 * Figma p07 after-FAQ slot was designed against stub bodies and reads
 * disconnected now that services carry full texts). v1 → v2 rename per the
 * W3TC cache-bust rule.
 *
 * Tiles keep the source photos' 4:3 (the 800×600 'privilio-card' crops) and
 * the hero photo's --radius-lg. Desktop ≥1024: 3-per-row grid inside the
 * article container. Mobile: horizontal scroll-snap reel of 260px tiles.
 */

.sluzba-galeria {
	margin-block: var(--space-5) 0;
}

.sluzba-galeria__grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--space-2);
}

.sluzba-galeria__item {
	flex: 0 0 260px;
	aspect-ratio: 4 / 3;
	margin: 0;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--bg-section-alt);
}

.sluzba-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.sluzba-galeria__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		overflow: visible;
		padding-block-end: 0;
	}

	.sluzba-galeria__item {
		flex: none;
		width: 100%;
	}
}

/* ==== components/_pattern.v2.css ==== */
/**
 * Brand pattern wiring (§I, styling-spec §1.7).
 *
 * Source: assets/img/pattern.svg — the Levosphere brand pattern (a tiling field
 * of the Privilio wordmark motif). The file is monochrome (#0f0f0f), so it is
 * consumed as a CSS *mask* over a brand-token background rather than as a
 * background-image: that lets every use recolour to a brand token instead of the
 * baked-in black. Never use the pattern as a body-text background (spec §1.7).
 *
 * Uses (all decorative, aria-hidden in markup):
 *   .pattern-underline           faint 4px strip under the site header
 *   .pattern-divider(--footer)    full-width 8–16px section-divider strip
 *   .hero__pattern-accent         low-opacity motif in the hero's top-right corner
 *   .faq__q::after (tint)         FAQ chevron accent recoloured to the brand token
 *
 * The mask crop (mask-position) of the thin strips is a visual-tuning value;
 * final offset can be nudged one line on staging without touching markup.
 */

:root {
}

/* ── Shared strip base ─────────────────────────────────────────────────── */
.pattern-underline,
.pattern-divider {
	display: block;
	width: 100%;
	background-color: var(--privilio-orange);
	-webkit-mask-image: url("../img/pattern.svg");
	mask-image: url("../img/pattern.svg");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Faint header underline — 4px, low opacity (spec §1.7 "faint, 4px below logo"). */
.pattern-underline {
	height: 4px;
	opacity: 0.35;
	-webkit-mask-size: auto 64px;
	mask-size: auto 64px;
}

/* Full-width section divider — 14px within the 8–16px spec range. */
.pattern-divider {
	height: 14px;
	-webkit-mask-size: auto 96px;
	mask-size: auto 96px;
}

/* .pattern-divider--footer sits flush at the footer's top edge; the footer's
   own 86px inner top-padding provides the separation below it (no extra margin). */

/* ── Hero corner accent ────────────────────────────────────────────────── */
/* Low-opacity motif field in the hero's top-right corner (spec §4.1 / §1.7).
   .hero is position:relative; overflow:hidden, so this is clipped to the hero. */
.hero__pattern-accent {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(160px, 24vw, 320px);
	aspect-ratio: 1109.8 / 816.8;   /* pattern tile ratio */
	z-index: 0;
	pointer-events: none;
	opacity: 0.12;
	background-color: var(--privilio-orange);
	-webkit-mask-image: url("../img/pattern.svg");
	mask-image: url("../img/pattern.svg");
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: 150px auto;
	mask-size: 150px auto;
	-webkit-mask-position: right top;
	mask-position: right top;
}

@media (max-width: 767.98px) {
	/* Smaller + moved to the top-left on mobile (photo stacks above text). */
	.hero__pattern-accent {
		width: clamp(120px, 40vw, 200px);
		right: auto;
		left: 0;
		-webkit-mask-position: left top;
		mask-position: left top;
	}
}

/* ── FAQ chevron ───────────────────────────────────────────────────────── */
/* Decision #5 (Tomáš 2026-07-10): hi-fi Figma wins over styling-spec §1.7 —
   the chevron stays BLACK, matching _faq.css / _faq-section.v2.css. The rule
   is kept (redundant color) so switching back to the orange accent, should
   Eva prefer it on client review, stays a one-line change here. */
.faq__q::after,
.faq__item summary::after {
	border-right-color: var(--privilio-black);
	border-bottom-color: var(--privilio-black);
}

/* ==== _ultrawide.v2.css ==== */
/**
 * Ultrawide adaptation (Eva/Tomáš 2026-07-13): above 1920px the site renders
 * as its 1440px design canvas, centered on the monitor.
 *
 * WHY A BODY CAP AND NOT PER-SECTION FIXES: the layout geometry is
 * percentage-of-canvas throughout (hero children sit at Figma-bbox
 * percentages of a 1440 ref width; the poradca-banner squiggle spans
 * `calc(100% + 110px)` of its band). On viewports wider than the design
 * canvas those percentages explode (a 3440px squiggle is ~1050px tall and
 * towers over the preceding section). Capping the canvas restores every
 * decoration to its designed size in one move.
 *
 * NB: page-type URLs are ALREADY capped at all widths by an accidental
 * selector collision — `.page` in templates/_page.css targets the article
 * but also matches body_class's `page` on <body>. That is
 * why archives (no `.page` body class) and pages rendered differently on
 * ultrawide. `body.page` below out-specifies it so both page types share the
 * same 1440 canvas above 1920px. Do not "fix" the collision without a full
 * re-eyeball of the hero at uncapped widths.
 */

@media (min-width: 1921px) {
	body,
	body.page {
		max-width: 1440px;
		margin-inline: auto;
	}

	/* The `.page` collision also pads <body>, leaving page-type URLs 96px
	   narrower than archives on the shared canvas. The article carries the
	   same .page padding itself, so the body copy can go. */
	body.page {
		padding: 0;
	}
}

/* ==== _review-fixes.v4.css ==== */
/**
 * Fixes from the 2026-07-13 sitewide mobile (390px) review, plus the
 * all-width polish bugs that audit surfaced. New file (W3TC rename rule);
 * imported after _ultrawide so ties resolve here.
 */

/* ── All widths ─────────────────────────────────────────────────────────── */

/* o-nás / pre-firmy text cards inherit the base link underline across the
   whole card body (they reuse .sluzba-archive__card as a text-only variant).
   Kill it; keep underline as a hover affordance on the title. */
.sluzba-archive__card {
	text-decoration: none;
}

.sluzba-archive__card:hover .sluzba-archive__card-title {
	text-decoration: underline;
}

/* Facebook-community card on /kurzy/: the secondary (black-outline) button
   was black-on-black inside the dark card = invisible CTA. Invert it there. */
.kurz-platforma__community .button-cta--secondary {
	color: var(--text-inverse);
	border-color: var(--text-inverse);
}

.kurz-platforma__community .button-cta--secondary:hover,
.kurz-platforma__community .button-cta--secondary:focus-visible {
	background: var(--text-inverse);
	border-color: var(--text-inverse);
	color: var(--privilio-black);
}

/* Article TOC (backlog CLOSED 2026-07-16): the SSR generator shipped
   (inc/clanok/bootstrap.php + single-clanok.php), so the 2026-07-13 hide
   rule is gone. List styling mirrors .clanok__series; the box itself is
   styled in templates/_clanok.v2.css. */
.clanok__toc ol {
	list-style: decimal inside;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--fs-small);
}

.clanok__toc a {
	color: var(--text-primary);
	text-decoration: none;
}

.clanok__toc a:hover,
.clanok__toc a:focus-visible {
	color: var(--link);
	text-decoration: underline;
}

/* Anchored H2 jumps must not land under the sticky header. */
.clanok__body h2[id] {
	scroll-margin-top: 7rem;
}

/* Author box: the portrait must stay a fixed circle; flexing squeezed it
   into a faceless capsule on narrow screens. */
.clanok__author-box {
	align-items: flex-start;
}

.clanok__author-img {
	flex: 0 0 5rem;
}

/* Big CTA headings wrap with orphaned words on narrow screens. */
.tim-cta__title {
	text-wrap: balance;
}

/* Pattern strips: fractional repeat-x tiling left visible seams mid-strip.
   `round` fits an integer number of tiles at every width. */
.pattern-underline,
.pattern-divider {
	-webkit-mask-repeat: round;
	mask-repeat: round;
}

/* ── Mobile + tablet (<1024px) ──────────────────────────────────────────── */
@media (max-width: 1023.98px) {
	/* The `.page` article rule also matches body_class's `page` on <body>
	   (see _ultrawide.v2.css) — on phones it painted a white frame around
	   the brand's full-bleed bands on every page-type URL (pre-firmy,
	   o-nás, rezervácia, kontakt). The hero's %-of-canvas geometry only
	   applies ≥1024px, so lifting the body cap below that is safe. */
	body.page {
		max-width: none;
		margin: 0;
		padding: 0;
	}
}

/* ── Phones (<768px) ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	/* Hard <br> tuned for the desktop hero line balance produced a stub
	   line ("...dospelých, deti,") on 390px. */
	.hero__sub br {
		display: none;
	}

	/* Reviews scroller: the peeking next card is raw white-on-white sliced
	   text at the clip edge. Fade the trailing 48px so it reads as
	   "continues", not "broken". */
	.reviews__list {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	}

	/* Tím / O nás hero photo: keep faces in frame in the short mobile crop. */
	.page-hero-photo__img {
		object-position: 50% 22%;
	}

	/* Share row: label takes its own line so the two pills stay together. */
	.clanok__share-label {
		flex-basis: 100%;
	}
}

/* Text-only cards (o-nás hub, pre-firmy, sluzby kategória-huby) reserved a
   140px min-height meant for the media variant, leaving a ~60px void between
   title and foot. Grid stretch still equalizes row heights, so compact is
   safe (decision 2026-07-13: fix; centered archive heroes + the archive
   pre-CTA gap were reviewed and kept as-is). v4 (2026-07-17): `--overlay`
   photo tiles excluded — they NEED their 240px (_skupinova-hub.v2.css) so
   the photo has canvas; this file imports last and was zeroing it. */
.sluzba-archive__card:not(.sluzba-archive__card--media):not(.sluzba-archive__card--overlay) {
	min-height: 0;
}