/* ════════════════════════════════════════════════════════════
   KanApka — main.css
   Phase 1: Foundation (tokens, reset, typography, layout, btn, chip)
   ════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────
   1. Mont font (per-weight family hack to avoid browser
      weight-substitution that thins certain weights).
   ─────────────────────────────────────────────────────────── */
@font-face { font-family: 'Mont'; src: url('./fonts/Mont-Regular.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('./fonts/Mont-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('./fonts/Mont-Bold.woff2')     format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('./fonts/Mont-Heavy.woff2')    format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('./fonts/Mont-Black.woff2')    format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }


/* ───────────────────────────────────────────────────────────
   2. Tokens — synced with KanApka Design System
   (KanApka Design System/colors_and_type.css). Names kept as
   --c-* / --fs-* / --sp-* for legacy usage; values match DS
   --kn-* primitives verbatim from Figma.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Brand neutrals (DS: kn-neutral-000…800) */
  --c-cream:        #fafaec;   /* neutral-000 — page bg */
  --c-cream-2:      #f5f0df;   /* neutral-050 */
  --c-border:       #e5e0d1;   /* neutral-100 */
  --c-border-2:     #d0ccc1;   /* neutral-200 */
  --c-disabled-fg:  #8e8e8e;   /* neutral-300 */
  --c-muted-text:   #777272;   /* neutral-400 */
  --c-body-text:    #332625;   /* neutral-600 */
  --c-title-2:      #241d1d;   /* neutral-700 */
  --c-title:        #141425;   /* neutral-800 */
  --c-white:        #ffffff;
  --c-black:        #141425;   /* DS: kn-black === neutral-800 (NOT pure #000) */
  --c-link:         #3b77f9;

  /* Orange (primary CTA) */
  --c-orange-100:   #fee9dc;
  --c-orange-200:   #ffd4b9;
  --c-orange-300:   #fda670;
  --c-orange-400:   #f67140;
  --c-orange-500:   #ea5823;
  --c-orange-600:   #c9491b;

  /* Yellow */
  --c-yellow-100:   #fef2dc;
  --c-yellow-200:   #fbe7c1;
  --c-yellow-300:   #f8d595;
  --c-yellow-400:   #fbc35d;
  --c-yellow-500:   #f9b334;
  --c-yellow-600:   #de981a;

  /* Green */
  --c-green-100:    #edf8e8;
  --c-green-200:    #cef5ce;
  --c-green-300:    #b1f0c9;
  --c-green-400:    #5ecaa5;
  --c-green-500:    #46ae8a;
  --c-green-600:    #269770;

  /* Blue */
  --c-blue-100:     #e5eef3;
  --c-blue-200:     #bcdef2;
  --c-blue-300:     #95d3f5;
  --c-blue-400:     #60c9eb;
  --c-blue-500:     #36beea;
  --c-blue-600:     #1ba8d5;

  /* Typography (Mont — see DS) */
  --font-mont: 'Mont', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* DS spec: exact px sizes/line-heights from Figma. clamp()s scale down on
     small viewports per existing fluid-typography pattern, but max value
     equals the spec exactly. */
  --fs-h1:      clamp(36px, 5vw, 56px);   /* title-1 */
  --fs-h2:      clamp(28px, 4vw, 48px);   /* title-2 */
  --fs-h3:      clamp(24px, 3vw, 32px);   /* title-3 */
  --fs-h4:      clamp(20px, 2.4vw, 28px); /* title-4 */
  --fs-h5:      clamp(18px, 2vw, 24px);   /* title-5 */
  --fs-body-l:  20px;                     /* body-1 */
  --fs-body:    16px;                     /* body-2 */
  --fs-body-s:  14px;                     /* body-3 */
  --fs-caption: 12px;                     /* caption */

  /* Exact line-heights per DS spec (px, not ratio) */
  --lh-h1:        76px;
  --lh-h2:        56px;
  --lh-h3:        44px;
  --lh-h4:        36px;
  --lh-h5:        31px;
  --lh-body-l:    28px;
  --lh-body:      22.4px;
  --lh-body-s:    21px;
  --lh-caption:   18px;
  --ls-h1:        0.02em;          /* DS: only title-1 has letter-spacing */

  /* Legacy ratio-based line-height tokens — kept for fluid usage in body copy */
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.4;              /* aligned to DS body-2 (22.4/16 = 1.4) */

  /* Weights (DS: regular / semibold / bold / heavy) */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  /* Spacing scale (4px base — DS kn-space-*) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-section: var(--section-gap);

  /* Layout (DS: content-max 1320, frame 1440, gutter 60/16) */
  --container-max:  1320px;
  --container-pad:  clamp(16px, 4vw, 60px);
  /* Single source of truth for vertical gap between sections (DS).
     Mobile: 48px · Tablet: ~64px · Desktop: 80px. Sections never set
     their OWN padding-block — spacing is built from this token via
     `.parent > *:not(:first-child) { padding-top: --section-gap }`. */
  --section-gap:    clamp(48px, 6vw, 80px);

  /* Radii (DS: kn-radius-*) */
  --r-xs:   4px;     /* radius-sm */
  --r-sm:   8px;     /* radius-md */
  --r-md:   16px;    /* radius-lg — default card */
  --r-xl:   24px;    /* radius-xl — default pill button */
  --r-2xl:  36px;    /* radius-2xl — hero banner */
  --r-pill: 9999px;

  /* Shadows (DS: M3 elevation for floating arrows) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md:
    0px 1px 2px rgba(0, 0, 0, 0.30),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --shadow-lg:
    0px 4px 6px rgba(0, 0, 0, 0.10),
    0px 10px 24px rgba(20, 20, 37, 0.08);

  /* Motion (DS) */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}


/* ───────────────────────────────────────────────────────────
   3. Reset
   ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prevent any decorative element / wide section from creating horizontal
     scroll on small viewports. `clip` (vs `hidden`) doesn't break sticky. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-mont);
  /* Body copy is Mont Regular 400 by default. Headings (.h-*) opt into
     heavier weights (700/800), chips/labels into 600, and a `.t-bold`
     utility is available where copy needs emphasis. */
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }


/* ───────────────────────────────────────────────────────────
   4. Typography utilities
   ─────────────────────────────────────────────────────────── */
/* Heading utilities — DS title-1..5 with ratio line-heights.
   Font-sizes are fluid clamp(); line-heights use unit-less ratios so they
   scale with the font, not break at small viewports.
   Ratios match max-size DS values (76/56=1.357, 56/48=1.167, 44/32=1.375,
   36/28=1.286, 31/24=1.292) but rounded slightly tighter to read well. */
.h-display { font-weight: var(--fw-heavy); font-size: var(--fs-h1); line-height: 1.18; letter-spacing: var(--ls-h1); color: var(--c-title); }
.h-section { font-weight: var(--fw-heavy); font-size: var(--fs-h2); line-height: 1.17; color: var(--c-title); }
.h-block   { font-weight: var(--fw-heavy); font-size: var(--fs-h3); line-height: 1.25; color: var(--c-title); }
.h-card    { font-weight: var(--fw-heavy); font-size: var(--fs-h4); line-height: 1.28; color: var(--c-title); }
.h-mini    { font-weight: var(--fw-bold);  font-size: var(--fs-h5); line-height: 1.3;  color: var(--c-title); }

/* Body utilities — px line-heights are safe here since font-sizes are fixed (no clamp). */
.t-lead    { font-size: var(--fs-body-l);  line-height: var(--lh-body-l);  color: var(--c-body-text); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body);    color: var(--c-body-text); }
.t-small   { font-size: var(--fs-body-s);  line-height: var(--lh-body-s);  color: var(--c-body-text); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-muted-text); font-weight: var(--fw-semibold); }

.t-muted  { color: var(--c-muted-text); }
.t-orange { color: var(--c-orange-500); }


/* ───────────────────────────────────────────────────────────
   5. Layout primitives
   ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* <main class="parent"> — block layout, no flex-gap.
   Default: every section after the first gets `padding-top: --section-gap`
   so spacing is built with paddings (not flex gap). Individual sections
   override with their own padding-top when they want a tighter or looser
   gap (or 0 to flush with the section above). */
.parent { display: block; }
.parent > *:not(:first-child) { padding-top: var(--section-gap); }

/* Sections that should flush with the previous one (no top padding from default rule). */
.parent > .facts:not(:first-child),
.parent > .clients:not(:first-child) {
  padding-top: clamp(16px, 2vw, 24px);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ───────────────────────────────────────────────────────────
   6. Buttons
   ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 24px;
  border-radius: var(--r-xl);  /* DS: kn-radius-xl 24px (default pill button) */
  font-family: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
}
/* Використовуємо окрему `translate` property (не transform) щоб hover-підйом
   не конфліктував з entry-анімаціями типу kn-cta-pop, які займають `transform`.
   `translate` і `transform` — незалежні CSS-властивості, можуть стекатись.
   Сама transition додається тут окремо, щоб не редагувати базовий .btn блок. */
.btn { transition: background-color var(--dur-base) var(--ease),
                   color var(--dur-base) var(--ease),
                   border-color var(--dur-base) var(--ease),
                   transform var(--dur-fast) var(--ease),
                   translate var(--dur-fast) var(--ease),
                   box-shadow var(--dur-fast) var(--ease); }
/* Hover-lift лише на пристроях з мишкою (на тачі не залипає). */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { translate: 0 -2px; box-shadow: 0 6px 14px rgba(20, 20, 40, .08); }
}
/* Невидима смужка під кнопкою тримає курсор у :hover поки кнопка піднімається
   на -2px. Без неї на нижньому краї hover вмикався/вимикався = мерехтіння. */
.btn { position: relative; }
.btn::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; }
.btn:active { translate: 0 1px; box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { translate: 0 0; }
}

.btn--sm { padding: 10px 18px; font-size: var(--fs-body-s); }
.btn--lg { padding: 16px 28px; font-size: 18px; }

.btn--primary {
  background: var(--c-orange-500);
  color: var(--c-cream);
  border-color: var(--c-orange-500);
}
.btn--primary:hover { background: var(--c-orange-400); border-color: var(--c-orange-400); }
.btn--primary:focus-visible { outline: 3px solid var(--c-orange-200); outline-offset: 2px; }

.btn--ghost {
  background: transparent;
  color: var(--c-orange-500);
  border-color: var(--c-orange-500);
}
/* Fill-on-hover pattern (як test-card cta): outlined → solid saturated */
.btn--ghost:hover { background: var(--c-orange-500); color: var(--c-white); border-color: var(--c-orange-500); }

/* Peach-filled CTA — light orange-100 fill, orange-500 border + text.
   Matches Figma: rect fill=#FEE9DC stroke=#EA5823 rx=23. */
.btn--peach {
  background: var(--c-orange-100);
  color: var(--c-orange-500);   /* Figma spec: text = orange-500 (#EA5823), not -600 */
  border-color: var(--c-orange-500);
}
/* Fill-on-hover: peach-light → solid orange (як test-card cta) */
.btn--peach:hover { background: var(--c-orange-500); color: var(--c-white); border-color: var(--c-orange-500); }
.btn--peach:focus-visible { outline: 3px solid var(--c-orange-200); outline-offset: 2px; }

.btn--ghost-light {
  background: transparent;
  color: var(--c-cream);
  border-color: var(--c-cream);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.12); }

.btn--yellow {
  background: var(--c-yellow-500);
  color: var(--c-title);
  border-color: var(--c-yellow-500);
}
.btn--yellow:hover { background: var(--c-yellow-400); border-color: var(--c-yellow-400); }

.btn--blue {
  background: var(--c-blue-500);
  color: var(--c-title);
  border-color: var(--c-blue-500);
}
.btn--blue:hover { background: var(--c-blue-400); border-color: var(--c-blue-400); }

.btn--dark {
  background: var(--c-title);
  color: var(--c-cream);
  border-color: var(--c-title);
}
.btn--dark:hover { background: #1f1f3a; border-color: #1f1f3a; }

.btn__icon { width: 18px; height: 18px; flex: 0 0 auto; transition: filter .15s; }
/* On btn--peach/btn--ghost hover the bg becomes orange-500; the SVG icon is
   stroked with #EA5823 (same orange) so it disappears. Force-whiten it. */
.btn--peach:hover .btn__icon,
.btn--ghost:hover .btn__icon,
.btn--peach:focus-visible .btn__icon,
.btn--ghost:focus-visible .btn__icon { filter: brightness(0) invert(1); }
.btn--lg .btn__icon { width: 20px; height: 20px; }


/* ───────────────────────────────────────────────────────────
   7. Chips
   ─────────────────────────────────────────────────────────── */
/* Chip — per DS/Figma: 14px text, weight 600, lh 21px, +0.01em letter-spacing,
   asymmetric padding 6/12/4/12, radius 16px, dark text on tinted bg. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 12px 4px;
  border-radius: var(--r-md);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-s);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  color: var(--c-title);
}
.chip__icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Tinted variants — fill + stroke per Figma; text color inherited (dark). */
.chip--orange { background: var(--c-orange-100); border-color: var(--c-orange-500); }
.chip--green  { background: var(--c-green-100);  border-color: var(--c-green-500); }
.chip--yellow { background: var(--c-yellow-100); border-color: var(--c-yellow-500); }
.chip--blue   { background: var(--c-blue-100);   border-color: var(--c-blue-500); }
.chip--blue-solid { background: var(--c-blue-500); color: var(--c-white); border-color: var(--c-blue-500); }


/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-cream);
  /* Лінію між шапкою і сторінкою прибрано (per правки клієнта). */
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 72px;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header__logo { height: 32px; width: auto; }
.site-header__nav {
  display: none;
  align-items: center;
  gap: var(--sp-6);
  flex: 1 1 auto;
  margin-inline-start: var(--sp-7);
}
.site-header__nav a {
  font-weight: 600;
  font-size: var(--fs-body);
  /* Inactive items use muted color per Figma. Active gets full title color
     + orange underline (see .is-active rules below and .nav-mega.is-active). */
  color: var(--c-muted-text);
  padding: 8px 0;
  position: relative;
  transition: color .15s;
}
.site-header__nav a:hover { color: var(--c-orange-500); }

/* Active-state underline. Each top-level nav item has its own brand color
   per Figma — Навчання=orange, Тести=yellow, Блог=green, Про нас=blue.
   For the mega-menu group the underline is on the whole row, so the bar
   spans both link and chevron. */
.site-header__nav a.is-active {
  color: var(--c-body-text);
  border-bottom: 2px solid var(--nav-color, var(--c-orange-500));
}
.nav-mega.is-active .nav-mega__row {
  border-bottom: 2px solid var(--nav-color, var(--c-orange-500));
}
.nav-mega.is-active .nav-mega__link { color: var(--c-body-text); }
.nav-mega.is-active .nav-mega__chevron-btn { color: var(--c-body-text); }
.nav-color-orange { --nav-color: var(--c-orange-500); }
.nav-color-yellow { --nav-color: var(--c-yellow-500, #F9B334); }
.nav-color-green  { --nav-color: var(--c-green-500,  #46AE8A); }
.nav-color-blue   { --nav-color: var(--c-blue-500,   #36BEEA); }
.site-header__cta { display: none; }

/* ──── Mega menu (Навчання) ────
   Split row: link (navigates to /courses/) + chevron button (toggles panel).
   Hover on the whole .nav-mega still opens the panel; the chevron
   button toggles open state via JS for keyboard / touch users. */
.nav-mega { position: relative; display: inline-flex; }
.nav-mega__row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.nav-mega__link {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--c-muted-text);
  font-family: inherit;
  transition: color 200ms ease;
}
.nav-mega__link:hover { color: var(--c-orange-500); }
.nav-mega__chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-muted-text);
  transition: color 200ms ease;
}
.nav-mega__chevron-btn:hover { color: var(--c-orange-500); }
.nav-mega__chevron { transition: transform 200ms ease; }
.nav-mega[data-open="true"] .nav-mega__chevron,
.nav-mega:hover .nav-mega__chevron { transform: rotate(180deg); }

/* Outer panel positions absolutely flush with trigger (top: 100%) and uses
   padding-top to create the visual gap. This keeps the cursor inside the
   hover area when moving from trigger → panel — no "dead zone". */
.nav-mega__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 360px;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 60;
}
/* Visual card. Soft shadow, hairline border, generous radius.
   Internal padding insets the item rows from all sides of the card so
   nothing touches the rounded edges. Items have their own border-radius
   so the hover background still reads as a clean rectangle within the card. */
.nav-mega__panel-inner {
  background: var(--c-cream);
  border: 1px solid rgba(20, 20, 37, .06);
  border-radius: 14px;
  box-shadow: 0 16px 48px -12px rgba(20, 20, 37, .14);
  padding: 8px;
}
.nav-mega:hover .nav-mega__panel,
.nav-mega:focus-within .nav-mega__panel,
.nav-mega[data-open="true"] .nav-mega__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Restrained item: one transition (background only). Arrow always visible
   but quiet. No padding-shifts, no accent bars, no multi-axis transforms. */
/* Bumped to (0,2,0) so it beats `.site-header__nav a` (0,1,1) — without
   the parent class qualifier the broad nav-link padding wins via specificity. */
.nav-mega .nav-mega__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 200ms ease;
}
.nav-mega__item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.nav-mega__item-arrow {
  flex-shrink: 0;
  color: var(--c-muted-text);
  opacity: .5;
  transition: opacity 200ms ease, color 200ms ease;
}
.nav-mega__item:hover { background: var(--c-cream-2); }
.nav-mega__item:hover .nav-mega__item-arrow {
  opacity: 1;
  color: var(--nav-color, var(--c-orange-500));
}
.nav-mega__item-title {
  font-weight: 600;
  color: var(--c-title);
  font-size: 16px;
  line-height: 1.4;
}
.nav-mega__item-desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-muted-text);
  font-weight: 400;
}

/* Підпункти в мобільному меню. Custom button + grid-row animation.
   Кнопка-перемикач НЕ в grid (щоб не сіпалась під час transition).
   Анімується тільки панель з підпунктами через grid-template-rows
   0fr ↔ 1fr (cross-browser трюк замість height auto). */
.mobile-menu__group {
  width: 100%;
  display: block;
}
.mobile-menu__group-toggle {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 18px 0;
  font: inherit;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-title);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: color .2s var(--ease);
}
.mobile-menu__group-toggle[aria-expanded="true"] { color: var(--c-orange-500); }

.mobile-menu__group-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.mobile-menu__group-toggle[aria-expanded="true"] .mobile-menu__group-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Панель з підпунктами — grid-row trick для анімації висоти.
   Цей блок окремий від кнопки, тому кнопка стоїть нерухомо
   а панель плавно виїжджає вниз. */
.mobile-menu__group-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.mobile-menu__group-toggle[aria-expanded="true"] + .mobile-menu__group-panel {
  grid-template-rows: 1fr;
}
.mobile-menu__group-panel > .mobile-menu__sublist {
  overflow: hidden;
  min-height: 0;
}
.mobile-menu__sublist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 8px 14px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--c-cream-2);
}
.mobile-menu__sublist a {
  display: block;
  padding: 12px 0;
  color: var(--c-muted-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  transition: color 200ms ease;
}
.mobile-menu__sublist a:hover { color: var(--c-orange-500); }

.site-header__burger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-cream);
}
.site-header__burger-bars,
.site-header__burger-bars::before,
.site-header__burger-bars::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-title);
  border-radius: 2px;
}
.site-header__burger-bars { position: relative; }
.site-header__burger-bars::before { position: absolute; left: 0; top: -6px; }
.site-header__burger-bars::after  { position: absolute; left: 0; top: 6px; }

@media (min-width: 1024px) {
  .site-header__inner { height: 80px; }
  .site-header__nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .site-header__burger { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE MENU (off-canvas)
   ═══════════════════════════════════════════════════════════ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--c-cream);
  /* Padding mirrors the header (.site-header__inner uses container padding
     horizontally + 72px height vertically) so the logo stays in place when
     the menu opens. Bottom padding leaves room for the sticky CTA. */
  padding: 0 var(--container-pad) calc(var(--sp-5) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  visibility: hidden;
  overflow-y: auto;
}
.mobile-menu[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
}

/* Top bar matches the live header so logo doesn't shift on open. */
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  flex-shrink: 0;
}
.mobile-menu__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-title);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.mobile-menu__close:hover {
  background: var(--c-cream-2);
  border-color: var(--c-border-2);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-5);
}
.mobile-menu__nav > * + * { border-top: 1px solid var(--c-cream-2); }
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  padding: 18px 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-title);
  transition: color 200ms ease;
}
.mobile-menu__nav a:active,
.mobile-menu__nav a:hover { color: var(--c-orange-500); }
.mobile-menu__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER
   Cream bg, dark content. Mobile: centered stacked.
   Desktop: horizontal row (logo · nav · socials · CTA).
   ═══════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────
   Site footer (per Figma)
   Desktop top row:  logo · nav col · "Договір + socials" col · CTA button
   Bottom row (full-width below): copyright/credit · privacy
   Mobile: stacked centered (logo, wrap nav, socials, CTA, then bottom row)
   ────────────────────────────────────────────── */
.site-footer {
  background: var(--c-cream);
  color: var(--c-title);
  padding-block: clamp(32px, 4vw, 48px);
  margin-top: var(--section-gap);
}

/* Mobile: stacked, centered */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  /* Top border above the whole footer body — matches Figma 1px #D0CCC1 */
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid #D0CCC1;
}

.site-footer__brand { display: inline-flex; align-items: center; }
.site-footer__logo { height: 32px; width: auto; }

/* Primary nav column. Mobile: wrap row. Desktop: vertical column. */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
}
.site-footer__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--c-muted-text);
  transition: color .15s;
}
.site-footer__nav-link:hover { color: var(--c-orange-500); }
.site-footer__nav-link svg { color: currentColor; }

/* Footer disclosure ("Навчання" group) — split into link + toggle.
   The link navigates to /courses/. The chevron button toggles the
   sub-list of pages without navigating. */
.site-footer__group { display: flex; flex-direction: column; gap: 8px; }
.site-footer__group-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-footer__group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-muted-text);
  transition: color 200ms ease;
}
.site-footer__group-toggle:hover { color: var(--c-orange-500); }
.site-footer__chevron { transition: transform 200ms ease; }
.site-footer__group[data-open="true"] .site-footer__chevron {
  transform: rotate(180deg);
}
.site-footer__sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--c-cream-2);
}
.site-footer__sublist[hidden] { display: none; }
.site-footer__sublist a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-muted-text);
  transition: color 200ms ease;
}
.site-footer__sublist a:hover { color: var(--c-orange-500); }

/* "Договір + socials" column */
.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.site-footer__socials {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--c-muted-text);
  transition: color .15s, transform .15s;
}
.site-footer__socials a img { width: 24px; height: 24px; opacity: .9; }
@media (hover: hover) and (pointer: fine) { .site-footer__socials a:hover { color: var(--c-orange-500); transform: translateY(-1px); } }
.site-footer__socials a:hover img { opacity: 1; }

/* CTA button (peach outlined) */
.site-footer__cta { gap: var(--sp-2); }
.site-footer__cta .btn__icon { width: 18px; height: 18px; }

/* Bottom row */
.site-footer__bottom {
  width: 100%;
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-s);
  color: var(--c-muted-text);
  text-align: center;
}
.site-footer__bottom a:hover { color: var(--c-orange-500); }

/* WebCraft credit — subtle underline. */
.site-footer__credit-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease);
}
.site-footer__credit-link:hover { color: var(--c-orange-500); }

/* Desktop — 4-col horizontal layout per Figma */
@media (min-width: 1024px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-6);
    justify-content: space-between;
  }
  .site-footer__nav {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--sp-4);
    /* Reserve enough width for the longest sub-page label so the column
       doesn't expand (and shove the other footer columns) when the
       "Навчання" sublist is opened. */
    min-width: 220px;
  }
  .site-footer__col {
    align-items: flex-start;
    gap: var(--sp-4);
    min-width: 200px;
  }
  .site-footer__cta { flex: 0 0 auto; align-self: flex-start; }
  .site-footer__bottom {
    flex-basis: 100%;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE 2 SECTIONS will be appended below as we build them
   (hero, about, courses, process, lessons, promo, teachers,
    reviews, newsletter, faq)
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   SECTION: HERO (carousel slider)
   Figma references:
   · Desktop (1320×461) — content LEFT, padding 105/120/105/80, radius 36px,
                          arrows visible, dots at bottom
   · Mobile  (360×461)  — content BOTTOM, padding 16px, no radius,
                          no overlay, no CTA icon, dots only (arrows hidden),
                          full-bleed (edge-to-edge)
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  /* Pull hero up against the header — kill any margin from .parent's gap. */
  margin-top: 0;
}

.hero__viewport {
  overflow: hidden;
  position: relative;
}

.hero__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .35s ease;
  will-change: transform;
}

.hero__slide {
  flex: 0 0 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 461px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Padding по боках 64px залишає місце під стрілки слайдера
     (44px кнопка + 8px відступ + ~12px gap). Без цього кнопки лягають
     поверх тексту і кліки конфліктують. */
  padding: var(--sp-4) 64px;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-self: stretch;
}

.hero__title {
  font-weight: 800;
  font-size: 28px;
  line-height: var(--lh-tight);
  /* Hero photos are dark (mountain placeholder + most real product photos),
     so title + subtitle stay cream regardless of viewport. A dark gradient
     on .hero__slide guarantees readability even on lighter photos. */
  color: var(--c-cream);
  margin: 0;
}
.hero__subtitle {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-cream);
  margin: 0;
}
/* Dark gradient overlay so text reads on any photo brightness. */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}
.hero__content { z-index: 2; }
.hero__cta {
  align-self: flex-start;
  margin-top: var(--sp-2);
}
.hero__cta-icon { display: none; }

/* ── Arrows (Figma: 52px circle, cream bg, 3px orange border) ── */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;   /* видимо і на mobile — слайдер з 3 слайдів потребує навігації */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream);
  border: 3px solid var(--c-orange-500);
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.hero__nav--prev { left: 8px; }
.hero__nav--next { right: 8px; }
@media (min-width: 768px) {
  .hero__nav { width: 52px; height: 52px; }
}
.hero__nav:hover { background: var(--c-white); transform: translateY(-50%) scale(1.12); }
.hero__nav:active { transform: translateY(-50%) scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .hero__nav:hover, .hero__nav:active { transform: translateY(-50%); }
}

.hero__nav-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--c-orange-500);
  mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
  -webkit-mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
}
/* The SVG file natively renders ">" — flip prev to make "<" */
.hero__nav--prev .hero__nav-icon { transform: rotate(180deg); }

/* ── Dots ──
   Mobile: BELOW the card (cream page bg, easy to see).
   Desktop: inside the card at bottom. */
.hero__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-block: var(--sp-3);
}
.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-border-2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
/* Активна точка тільки міняє колір (жовтий), без розтягування —
   щоб уникнути reflow і "смикання" сусідів. Як у .thematic__dot. */
.hero__dot.is-active { background: var(--c-yellow-500); }


/* Tablet (≥768px) — radius, arrows show, container padding */
@media (min-width: 768px) {
  .hero { padding-inline: var(--container-pad); padding-top: var(--sp-4); }
  .hero__viewport {
    max-width: var(--container-max);
    margin-inline: auto;
    border-radius: var(--r-md);
  }
  .hero__slide {
    padding: clamp(32px, 5vw, 64px);
    border-radius: var(--r-md);
  }
  .hero__title    { font-size: clamp(32px, 4.5vw, 44px); }
  .hero__subtitle { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
  .hero__content  { max-width: 540px; gap: var(--sp-4); }

  /* Стрілки тепер видимі за замовчуванням з mobile (display: inline-flex
     визначений вище). На desktop позиціонуємо по краях контейнера
     (наполовину виступають назовні слайду). */
  .hero__nav--prev { left: calc(var(--container-pad) - 26px); }
  .hero__nav--next { right: calc(var(--container-pad) - 26px); }
}

/* Desktop (≥1024px) — content LEFT, row layout, Figma exact paddings.
   Dots move INSIDE the card at bottom (overlay). */
@media (min-width: 1024px) {
  .hero { padding-top: var(--sp-5); position: relative; }
  .hero__dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2;
    padding-block: 0;
  }
  .hero__viewport,
  .hero__slide {
    border-radius: 36px;
  }
  .hero__slide {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 105px 120px 105px 80px;
    min-height: 461px;
  }
  .hero__content {
    align-self: center;
    max-width: 480px;
    gap: var(--sp-5);
  }
  .hero__title    { font-size: var(--fs-h1); }
  .hero__subtitle { font-size: var(--fs-body-l); }
  .hero__cta-icon { display: block; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: ABOUT
   Figma node 284:33756 — text card + video, then 4 stat cards.
   Mobile: everything stacked.  Tablet: stats 2x2.  Desktop: row + stats 4-col.
   ═══════════════════════════════════════════════════════════ */
.about__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
/* When .about has no stats grid below, top block needs its own bottom breathing
   room (mobile especially — otherwise it butts up against the next section). */
.about--no-stats .about__top { padding-bottom: 24px; }

.about__intro {
  background: var(--c-cream);
  border: 1px solid var(--c-title);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.about__title {
  margin-bottom: var(--sp-2);
}
.about__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
}
.about__lead strong {
  font-weight: 600;
  color: var(--c-title);
}
.about__text {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-body-text);
  margin: 0;
}

.about__video {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--c-border);
  isolation: isolate;
}
.about__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.about__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-orange-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform .15s, background-color .15s;
}
.about__play:hover { transform: translate(-50%, -50%) scale(1.05); background: var(--c-white); }
.about__play svg { margin-left: 3px; }   /* optical center for play triangle */

/* Stat grid */
.about__stats {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.stat {
  position: relative;
  border-radius: var(--r-md);
  padding: var(--sp-5);
  min-height: 249px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.stat__bubble {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  width: auto;
  max-width: none;
  /* default — overridden per-color below */
  top: -50%;
  right: -10%;
  height: 110%;
  object-fit: contain;
}

.stat__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.stat__num {
  font-weight: 800;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--c-title);
  
}
.stat__label {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-body-text);
  font-weight: 400;
}

.stat--blue   { background: var(--c-blue-100);   border: 1px solid var(--c-blue-500); }
.stat--orange { background: var(--c-orange-100); border: 1px solid var(--c-orange-500); }
.stat--yellow { background: var(--c-yellow-100); border: 1px solid var(--c-yellow-500); }
.stat--green  { background: var(--c-green-100);  border: 1px solid var(--c-green-500); }

/* Per-card bubble positioning (mirrors Figma decorative placement) */
.stat--blue   .stat__bubble { top: -55%; right: -25%; height: 130%; }
.stat--orange .stat__bubble { top: -60%; left: 15%; right: auto; height: 125%; }
.stat--yellow .stat__bubble { top: -55%; right: -15%; height: 135%; }
.stat--green  .stat__bubble { top: -65%; left: -25%; right: auto; height: 145%; }

/* "Сертифікат" card has no number — label takes h-card type, bold dark */
.stat--blue .stat__label {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  line-height: var(--lh-snug);
  color: var(--c-title);
}

/* Tablet — 2x2 stats, top still stacked */
@media (min-width: 768px) {
  .about__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

/* Desktop — top row 2-col (text + video), stats 4-col */
@media (min-width: 1024px) {
  .about__top {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-5);
  }
  .about__intro {
    flex: 0 0 345px;
    padding: var(--sp-5);
  }
  .about__video {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 563px;
  }
  .about__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--sp-5);
  }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: COURSES
   Figma node 284:33757 — section title + intro + 3 cards.
   Card: image (with chip overlay top-left) + body (title, desc, bullets, CTA).
   Mobile: single column.  Tablet: 2 columns.  Desktop: 3 columns.
   ═══════════════════════════════════════════════════════════ */
.courses__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.courses__title {
  letter-spacing: 0.06em;
  text-transform: none;
}
.courses__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  max-width: 920px;
  margin: 0;
}

.courses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

/* ── Slider markup (CPT group_course → "Наші курси") ──
   1 mobile / 2 tablet / 3 desktop cards per view. Per ТЗ "приховані
   кнопки гортання" — стрілки і дотс ховаються коли всі картки видимі. */
.courses__slider {
  position: relative;
  --courses-per-view: 1;
}
@media (min-width: 768px) {
  .courses__slider { --courses-per-view: 2; }
}
@media (min-width: 1024px) {
  .courses__slider { --courses-per-view: 3; }
}
.courses__viewport {
  /* overflow:clip + clip-margin дають тіні/лифту карток вилазити на 24px
     за край, не ріжучись. Розмітка й відступи НЕ змінюються (важливо:
     вирівнювання з іншими секціями лишається те саме). hidden — fallback
     для старих браузерів. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 24px;
}
.courses__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-5);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.courses__track > .course-card {
  flex: 0 0 calc((100% - (var(--courses-per-view) - 1) * var(--sp-5)) / var(--courses-per-view));
  min-width: 0;
}

/* Стрілки — той самий стиль як у thematic/lessons (cream circle з помаранчевою рамкою). */
.courses__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream);
  border: 2.5px solid var(--c-orange-500);
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20);
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.courses__nav:hover { background: var(--c-white); transform: translateY(-50%) scale(1.12); }
.courses__nav:active { transform: translateY(-50%) scale(.95); }
.courses__nav[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.courses__nav--prev { left: -8px; }
.courses__nav--next { right: -8px; }
.courses__nav-icon {
  display: block;
  width: 14px;
  height: 14px;
  border: solid var(--c-orange-500);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(-45deg);
}
.courses__nav--prev .courses__nav-icon { transform: rotate(135deg); }
@media (min-width: 768px) {
  .courses__nav { width: 52px; height: 52px; border-width: 3px; }
  .courses__nav-icon { width: 16px; height: 16px; border-width: 0 3px 3px 0; }
  .courses__nav--prev { left: -24px; }
  .courses__nav--next { right: -24px; }
}

/* Дотс — як у thematic (круглі, активний жовтий). */
.courses__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: var(--sp-4);
}
.courses__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-border-2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
.courses__dot.is-active { background: var(--c-yellow-500); }

/* ── Card ── */
.course-card {
  display: flex;
  flex-direction: column;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.course-card:hover {
  border-color: var(--c-orange-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.course-card__media {
  position: relative;
  /* Figma: 424x200 (~2.12). 16/9 was too tall and cropped sides via object-fit:cover. */
  aspect-ratio: 424 / 200;
  background: var(--c-border);
}
.course-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-card__chips {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  right: var(--sp-5);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.course-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}
.course-card__title {
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--c-title);
  margin: 0;
}
.course-card__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-muted-text);
  margin: 0;
}

.course-card__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.course-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-body-s);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
}
.course-card__bullet-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.course-card__cta {
  align-self: stretch;          /* full-width button as in Figma */
}

/* Per ТЗ 29.05: ціна на картці групового курсу. */
.course-card__price {
  margin-top: auto;
  font-weight: var(--fw-heavy);
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-title);
  padding-block: var(--sp-2);
}

/* Дві кнопки: "Придбати" (червона) + "Консультація" (outline).
   На мобілі — стовпцем, на desktop — поруч. */
.course-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-self: stretch;
}
.course-card__cta--buy   { /* успадковує .btn--primary — насичено-червоний */ }
.course-card__cta--consult { /* успадковує .btn--ghost — outline → fill-on-hover */ }

@media (min-width: 768px) {
  .course-card__actions { flex-direction: row; }
  .course-card__actions .course-card__cta { flex: 1; }
}

/* Tablet — 2 columns */
@media (min-width: 768px) {
  .courses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop — 3 columns */
@media (min-width: 1024px) {
  .courses__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .courses__head { gap: var(--sp-3); }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: PROCESS — "Як відбувається навчання"
   Figma node 284:33758. Orange card. Mobile: video → content stack.
   Desktop: content LEFT (551px), video RIGHT (639px), padding 64px.
   ═══════════════════════════════════════════════════════════ */
.process__card {
  position: relative;
  isolation: isolate;
  background: var(--c-orange-100);
  border: 1px solid var(--c-orange-500);
  border-radius: var(--r-md);
  overflow: hidden;
  padding: clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Decorative orange swoosh — desktop only */
.process__vector {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 480px;
  height: auto;
  z-index: 0;
  display: none;
  pointer-events: none;
  user-select: none;
}

.process__video {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-border);
  isolation: isolate;
  z-index: 1;
}
.process__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.process__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-orange-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform .15s, background-color .15s;
}
.process__play:hover { transform: translate(-50%, -50%) scale(1.05); background: var(--c-white); }
.process__play svg { margin-left: 3px; }

.process__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.process__title {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.18;
  color: var(--c-title);
  margin: 0;
}
.process__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
  max-width: 520px;
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
}
.process__step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.process__num {
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--c-orange-500);
  flex: 0 0 auto;
  min-width: 44px;
  letter-spacing: 0.02em;
}
.process__step-text {
  flex: 1;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-title);
  margin: 0;
  padding-top: 4px;
}

/* Tablet (≥768px) — keep stack but bigger paddings, larger numbers */
@media (min-width: 768px) {
  .process__card { padding: clamp(40px, 5vw, 64px); }
}

/* Desktop (≥1024px) — text LEFT, video RIGHT, decorative swoosh visible */
@media (min-width: 1024px) {
  .process__card {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(32px, 5vw, 64px);
  }
  .process__content {
    flex: 0 0 551px;
    max-width: 551px;
    order: 1;
  }
  .process__video {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 515px;
    order: 2;
  }
  .process__vector { display: block; }
  .process__num { min-width: 48px; }
  .process__step { align-items: center; }
  .process__step-text { padding-top: 0; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: LESSONS — "Індивідуальні заняття"
   Figma node 284:34128. 7 cards. Card has image+chips overlay,
   title, 3 bullets with icons, price + "Записатися" button row.
   Mobile: 1 col. Tablet: 2. Desktop: 3. Wide desktop: 4.
   ═══════════════════════════════════════════════════════════ */
.lessons__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.lessons__title { letter-spacing: 0.02em; }
.lessons__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  max-width: 920px;
  margin: 0;
}

/* ── Slider — step-by-1 with peek of next card ── */
.lessons__slider {
  position: relative;
  --cards-per-view: 1;
  --slide-gap: var(--sp-5);
  --peek: 0px;     /* mobile: no peek */
}
.lessons__viewport {
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 24px;
}
.lessons__track {
  display: flex;
  gap: var(--slide-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .35s ease;
  will-change: transform;
}

/* ── Lesson card ── */
.lesson-card {
  /* Card width = (slider_width - peek - (N-1) gaps) / N.
     N gaps would over-subtract by 1 gap (causing extra blank space at right
     when N=1). Formula corrected to (N-1) gaps. */
  flex: 0 0 calc(
    (100% - var(--peek) - var(--slide-gap) * (var(--cards-per-view) - 1))
    / var(--cards-per-view)
  );
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.lesson-card:hover {
  border-color: var(--c-orange-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.lesson-card__media {
  position: relative;
  /* Card images are natively 1060x500 (~53:25 ≈ 424:200), match that
     so object-fit:cover doesn't crop the sides. Same fix as course-card. */
  aspect-ratio: 424 / 200;
  background: var(--c-border);
}
.lesson-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-card__chips {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.lesson-card__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}
.lesson-card__title {
  font-weight: 800;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  color: var(--c-title);
  margin: 0;
}

.lesson-card__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.lesson-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-body-s);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
}
.lesson-card__bullet-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.lesson-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  flex-wrap: wrap;
}
.lesson-card__price {
  font-weight: 600;
  font-size: var(--fs-body-l);
  color: var(--c-title);
  line-height: 1.4;
  flex: 0 0 auto;
}
.lesson-card__cta {
  flex: 1 1 auto;
  background: var(--c-orange-100);
}

/* ── Slider arrows (mirror hero arrows: cream + orange border) ── */
.lessons__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;                         /* mobile: smaller, less intrusive */
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream);
  border: 2.5px solid var(--c-orange-500);
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.lessons__nav-icon { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .lessons__nav { width: 52px; height: 52px; border-width: 3px; }
  .lessons__nav-icon { width: 24px; height: 24px; }
}
.lessons__nav:hover { background: var(--c-white); transform: translateY(-50%) scale(1.12); }
.lessons__nav:active { transform: translateY(-50%) scale(.95); }
.lessons__nav[disabled],
.lessons__nav[aria-disabled="true"] { opacity: .35; cursor: not-allowed; pointer-events: none; }

.lessons__nav-icon {
  display: block;
  background-color: var(--c-orange-500);
  mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
  -webkit-mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
}
/* SVG points right natively → flip prev */
.lessons__nav--prev .lessons__nav-icon { transform: rotate(180deg); }

/* Arrow positioning.
   Mobile: -4px (centered ON slider edge — half on card, half on container-pad).
   Tablet+: prev half-out at slider left edge; next inset to inner right edge. */
.lessons__nav--prev { left: -4px; }
.lessons__nav--next { right: -4px; }
@media (min-width: 768px) {
  .lessons__nav--prev { left: -26px; }
  .lessons__nav--next { right: calc(var(--container-pad) - 26px); }
}

/* ── Dots ── */
.lessons__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--sp-5);
}
.lessons__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-border);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
.lessons__dot.is-active { background: var(--c-yellow-500); }

/* Cards per view + peek by breakpoint.
   Tablet+: extend slider to viewport right edge for natural peek. */
@media (min-width: 768px) {
  .lessons__slider {
    --cards-per-view: 2;
    --peek: var(--container-pad);   /* peek = container padding so it reaches right edge */
    margin-right: calc(-1 * var(--container-pad));
  }
  .lessons__nav { display: inline-flex; }
}
@media (min-width: 1024px) {
  .lessons__slider { --cards-per-view: 3; }
}
@media (min-width: 1280px) {
  .lessons__slider { --cards-per-view: 4; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: PROMO — "Вступаєте у ВНЗ до Польщі?"
   Figma node 284:34129. Yellow card. Image LEFT + content RIGHT on desktop.
   Mobile: stack — image, then content.
   ═══════════════════════════════════════════════════════════ */
.promo__card {
  position: relative;
  isolation: isolate;
  background: var(--c-yellow-100);
  border: 1px solid var(--c-orange-500);
  border-radius: var(--r-md);
  overflow: hidden;
  padding: clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

/* Decorative swoosh — desktop only */
.promo__vector {
  position: absolute;
  top: -120px;
  left: -80px;
  width: 480px;
  height: auto;
  z-index: 0;
  display: none;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

.promo__media {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-border);
  z-index: 1;
}
.promo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.promo__title {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: var(--lh-tight);
  color: var(--c-title);
  margin: 0;
}
.promo__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
}

.promo__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-2) 0;
}
.promo__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
}
.promo__bullet-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.promo__cta-primary,
.promo__cta-secondary {
  flex: 1 1 240px;
}

/* Tablet — wider card paddings */
@media (min-width: 768px) {
  .promo__card { padding: clamp(40px, 5vw, 64px); }
  .promo__cta-primary,
  .promo__cta-secondary { flex: 0 0 auto; }
  .promo__actions { justify-content: flex-start; }
}

/* Desktop — image LEFT (420px), content RIGHT (flex 1) */
@media (min-width: 1024px) {
  .promo__card {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(32px, 4vw, 48px);
  }
  .promo__media {
    flex: 0 0 420px;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 420px;
  }
  .promo__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .promo__vector { display: block; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: TEACHERS — "Наші викладачі"
   Centered head + grid: yellow intro card + 5 teacher cards.
   Mobile: 1 col.  Tablet: 2 cols.  Desktop: 3 cols (intro + 2 cards row 1,
   3 cards row 2).
   ═══════════════════════════════════════════════════════════ */
.teachers__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.teachers__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
  max-width: 640px;
}

/* ── Inner wrapper (becomes grid on desktop) ── */
.teachers__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ── Yellow intro card (standalone on mobile, grid cell on desktop) ── */
.teachers__intro {
  background: var(--c-yellow-100);
  border: 1px solid var(--c-yellow-500);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.teachers__intro-cta { margin-top: auto; }

/* ── Slider container ── */
.teachers__slider {
  position: relative;
  --cards-per-view: 1;
  --slide-gap: var(--sp-4);
  --peek: 32px;
}
.teachers__viewport { overflow: hidden; overflow: clip; overflow-clip-margin: 24px; }
.teachers__track {
  display: flex;
  gap: var(--slide-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .35s ease;
  will-change: transform;
}
.teachers__intro-title {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  color: var(--c-title);
  margin: 0;
  
}
.teachers__intro-text {
  font-size: var(--fs-body-s);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
}
.teachers__intro-cta {
  align-self: flex-start;
}
.teachers__intro-cta svg { display: block; }

/* ── Teacher card with dark overlay ── */
.teacher-card {
  flex: 0 0 calc(
    (100% - var(--peek) - var(--slide-gap) * (var(--cards-per-view) - 1))
    / var(--cards-per-view)
  );
  min-width: 0;
  position: relative;
  isolation: isolate;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;       /* mobile: portrait */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--c-cream-2);
  transition: box-shadow .15s;
}
@media (min-width: 768px) {
  .teacher-card { aspect-ratio: 4 / 3; }
}
/* Hover only on devices with a real pointer (not touch).
   No translateY to avoid being clipped by viewport overflow:hidden,
   and to prevent touch:hover state from fighting slider transform. */
@media (hover: hover) and (pointer: fine) {
  .teacher-card:hover {
    box-shadow: var(--shadow-md);
  }
}
.teacher-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.teacher-card__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4);
  color: var(--c-cream);
  background: linear-gradient(
    180deg,
    rgba(20, 20, 37, 0)    0%,
    rgba(20, 20, 37, 0.55) 40%,
    rgba(20, 20, 37, 0.85) 100%
  );
}
.teacher-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.teacher-card__name {
  font-weight: 800;
  font-size: var(--fs-body-l);
  line-height: 1.2;
  color: var(--c-cream);
  margin: 0;
}
.teacher-card__role,
.teacher-card__exp {
  font-size: var(--fs-body-s);
  line-height: 1.3;
  color: rgba(250, 250, 236, 0.85);
  margin: 0;
}
.teacher-card__action {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-yellow-500);
  color: var(--c-title);
  transition: background-color .15s, transform .15s;
}
.teacher-card__action:hover { background: var(--c-yellow-400); transform: scale(1.06); }

/* ── Slider arrows (mirror lessons arrows) ── */
.teachers__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream);
  border: 2.5px solid var(--c-orange-500);
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.teachers__nav:hover { background: var(--c-white); transform: translateY(-50%) scale(1.12); }
.teachers__nav:active { transform: translateY(-50%) scale(.95); }
.teachers__nav[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.teachers__nav-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--c-orange-500);
  mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
  -webkit-mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
}
.teachers__nav--prev .teachers__nav-icon { transform: rotate(180deg); }
.teachers__nav--prev { left: -4px; }
.teachers__nav--next { right: -4px; }

/* ── Dots ── */
.teachers__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--sp-5);
}
.teachers__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-border);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
.teachers__dot.is-active { background: var(--c-yellow-500); }

/* Tablet — 2 cards visible + bigger arrows */
@media (min-width: 768px) {
  .teachers__slider { --cards-per-view: 2; --peek: 40px; }
  .teachers__nav { width: 52px; height: 52px; border-width: 3px; }
  .teachers__nav-icon { width: 24px; height: 24px; }
  .teachers__nav--prev { left: -26px; }
  .teachers__nav--next { right: -26px; }
}

/* Desktop — flatten slider into grid via display: contents.
   .teachers__inner becomes a 3-col grid; .teachers__slider, .teachers__viewport,
   .teachers__track collapse so .teachers__intro + 5 .teacher-card become direct
   grid children laid out as 3 cols × 2 rows. */
@media (min-width: 1024px) {
  .teachers__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .teachers__slider,
  .teachers__viewport,
  .teachers__track {
    display: contents;
  }
  .teacher-card { flex: initial; }
  .teachers__intro { aspect-ratio: 4 / 3; }   /* match teacher-card on desktop */
  .teachers__nav,
  .teachers__dots { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: REVIEWS — "Що кажуть наші учні"
   Figma node 284:34131. Green card. Title + 2-col layout
   (3 reviews left + 2 reviews right + CTA right).
   No card bg on individual reviews — they sit on green directly.
   Mobile: single column stacked.
   ═══════════════════════════════════════════════════════════ */
.reviews__card {
  position: relative;
  isolation: isolate;
  background: var(--c-green-100);
  border: 1px solid var(--c-green-500);
  border-radius: var(--r-md);
  padding: clamp(24px, 4vw, 64px);
  overflow: hidden;
}

/* Decorative green swoosh — desktop only */
.reviews__vector {
  position: absolute;
  z-index: 0;
  top: 100px;
  right: -120px;
  width: 600px;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  display: none;
}

.reviews__head { position: relative; z-index: 1; margin-bottom: var(--sp-6); }
.reviews__title {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: var(--lh-tight);
  color: var(--c-title);
  margin: 0;
}

/* ── 2-col grid (mobile single, desktop split) ── */
.reviews__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
.reviews__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ── Review card (no border/bg — flat over green) ── */
.review-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.review-card--reverse {
  flex-direction: row-reverse;
  text-align: right;
}
.review-card__photo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--c-border);
}
@media (min-width: 768px) {
  .review-card__photo { width: 96px; height: 96px; }
}
.review-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.review-card--reverse .review-card__body { align-items: flex-end; }
.review-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.review-card--reverse .review-card__head { justify-content: flex-end; }
.review-card__name {
  font-weight: 800;
  font-size: var(--fs-body-l);
  line-height: 1.2;
  color: var(--c-title);
  margin: 0;
}
.review-card__course {
  font-size: var(--fs-caption);
  background: transparent;
}
.review-card__text {
  font-size: var(--fs-body-s);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
}

/* CTA button alignment */
.reviews__cta {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

/* Mobile: hide the right-column (reversed) reviews — show only left 3 + CTA */
@media (max-width: 767px) {
  .review-card--reverse { display: none; }
}

/* Tablet+ — 2-col grid */
@media (min-width: 768px) {
  .reviews__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(24px, 4vw, 64px);
  }
  .reviews__col--right .reviews__cta { align-self: flex-end; }
}

/* Desktop — show decorative swoosh */
@media (min-width: 1024px) {
  .reviews__vector { display: block; }
  .review-card__photo { width: 110px; height: 110px; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: NEWSLETTER — "Підписатися на розсилку"
   Figma: image LEFT (square ~370px) + content RIGHT (title, lead, form, CTA).
   No card bg — sits flat on page bg.
   ═══════════════════════════════════════════════════════════ */
.newsletter__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: stretch;
}

.newsletter__media {
  margin: 0;
  /* Mobile: full-bleed (like hero) — break out of container padding,
     no border-radius, extend to viewport edges. */
  margin-inline: calc(-1 * var(--container-pad));
  border-radius: 0;
  overflow: hidden;
  background: var(--c-blue-100);
  aspect-ratio: 1 / 1;
}
.newsletter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.newsletter__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.newsletter__title {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: var(--lh-tight);
  color: var(--c-title);
  margin: 0;
}
.newsletter__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.newsletter__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.newsletter__label {
  font-size: var(--fs-body-s);
  font-weight: 600;
  color: var(--c-title);
}
/* Input — DS spec: page-cream bg, neutral-200 stroke (visible on cream),
   radius-lg (16px), same as Figma form fields. */
.newsletter__input {
  width: 100%;
  padding: 14px 20px;
  background: var(--c-cream);
  border: 1px solid var(--c-border-2);   /* neutral-200 — actually visible on cream */
  border-radius: var(--r-md);             /* 16px per Figma */
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--c-body-text);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.newsletter__input::placeholder {
  color: var(--c-disabled-fg);   /* neutral-300, lighter than body */
  font-weight: var(--fw-semibold);
}
.newsletter__input:hover { border-color: var(--c-muted-text); }
.newsletter__input:focus {
  outline: none;
  border-color: var(--c-orange-500);
  box-shadow: 0 0 0 3px var(--c-orange-100);
}

.newsletter__cta {
  align-self: flex-start;
  margin-top: var(--sp-3);
}

@media (min-width: 768px) {
  .newsletter__inner {
    flex-direction: row;
    align-items: center;          /* картинка по центру навпроти форми — лід-блок виглядає збалансовано */
    gap: clamp(32px, 5vw, 64px);
  }
  .newsletter__media {
    flex: 0 0 320px;
    margin-inline: 0;            /* reset mobile full-bleed */
    border-radius: var(--r-md);  /* round corners back */
    max-width: none;
  }
  .newsletter__content {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (min-width: 1024px) {
  .newsletter__media { flex: 0 0 370px; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION: FAQ — "Поширені запитання"
   Button + panel accordion. Smooth open/close via CSS grid trick:
   panel grid-template-rows transitions 0fr ↔ 1fr (animatable in modern
   browsers). Inner element has overflow:hidden + min-height:0.
   ═══════════════════════════════════════════════════════════ */
.faq__head { margin-bottom: var(--sp-5); }
.faq__title {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: var(--lh-tight);
  color: var(--c-title);
  margin: 0;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq__item {
  background: var(--c-blue-100);
  border: 1px solid var(--c-blue-100);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .25s ease;
}
.faq__item.is-open {
  border-color: var(--c-blue-500);
}

/* ── Question button ── */
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-title);
  text-align: left;
  user-select: none;
}
.faq__num { flex: 0 0 auto; }
.faq__q-text { flex: 1; min-width: 0; }
.faq__chevron {
  flex: 0 0 auto;
  color: var(--c-title);
  transition: transform .25s ease;
}
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }

/* ── Animated panel (grid 1fr ↔ 0fr trick) ── */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
}
.faq__panel-inner {
  overflow: hidden;
  min-height: 0;       /* crucial — lets grid child shrink to 0 */
}
.faq__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  margin: 0;
  /* Top spacer fades with the panel — no harsh top edge when collapsed */
  border-top: 1px solid var(--c-blue-200);
  padding-top: var(--sp-4);
}

@media (min-width: 768px) {
  .faq__question { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-body-l); }
  .faq__answer { padding: var(--sp-4) var(--sp-6) var(--sp-5); }
}


/* ═══════════════════════════════════════════════════════════
   PAGE: COURSES
   ═══════════════════════════════════════════════════════════ */

/* ── Section: Courses Hero (carousel) ──
   Mobile: full-bleed image, content overlay at bottom, dots beneath card.
   Desktop: orange-100 card, content LEFT + illustration RIGHT, dots inside.
   ─────────────────────────────────────────────────────────────────── */
.courses-hero { position: relative; width: 100%; }

.courses-hero__viewport { overflow: hidden; }

.courses-hero__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .35s ease;
  will-change: transform;
}

.courses-hero__slide {
  flex: 0 0 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 461px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* текст знизу над фото — як home hero на mobile */
  /* Раніше було padding: var(--sp-4) 64px — 64px з боків залишали місце
     під стрілки слайдера. Стрілки прибрані (1 слайд на цих сторінках),
     тому повертаємо контенту весь простір. Tablet+ override далі. */
  padding: var(--sp-4);
}

/* Dark gradient overlay (mobile) — keeps white text readable on any photo */
.courses-hero__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Текст знизу (як home) — темнішаємо низ для читабельності білого тексту. */
  background: linear-gradient(
    180deg,
    rgba(20, 20, 37, 0.10)  0%,
    rgba(20, 20, 37, 0.35) 45%,
    rgba(20, 20, 37, 0.75) 100%
  );
  pointer-events: none;
}

.courses-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.courses-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.courses-hero__content {
  position: relative;
  z-index: 2;       /* above gradient overlay */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-self: stretch;
}

/* Mobile shows the short title; desktop shows the full one — toggle via media */
.courses-hero__title { margin: 0; font-weight: 800; line-height: var(--lh-tight);  }
.courses-hero__title--mobile  { display: block; font-size: 36px; color: var(--c-cream); }
.courses-hero__title--desktop { display: none;  font-size: clamp(40px, 5vw, 56px); color: var(--c-title); }

.courses-hero__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-cream);
  margin: 0;
}
.courses-hero__cta { align-self: flex-start; margin-top: var(--sp-2); }

/* Optional chips row (admission hero on mobile per Figma).
   Wraps to multiple lines on narrow viewports. */
.courses-hero__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --dark-bg modifier: hero whose photo background is dark on every viewport.
   Keeps title (mobile + desktop) and lead light, and keeps the dark gradient
   overlay visible across all breakpoints so text reads on the photo. */
.courses-hero--dark-bg .courses-hero__title,
.courses-hero--dark-bg .courses-hero__title--mobile,
.courses-hero--dark-bg .courses-hero__title--desktop { color: var(--c-cream); }
.courses-hero--dark-bg .courses-hero__lead { color: var(--c-cream); }
.courses-hero--dark-bg .courses-hero__slide::before { display: block; }

/* ── Arrows (cream + orange border, half-out) — hidden on mobile, shown on tablet+ ── */
/* Always visible on every viewport (per Figma mobile design includes arrows). */
.courses-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream);
  border: 3px solid var(--c-orange-500);
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.courses-hero__nav--prev { left: 8px; }
.courses-hero__nav--next { right: 8px; }
@media (min-width: 768px) {
  .courses-hero__nav { width: 52px; height: 52px; }
}
.courses-hero__nav:hover { background: var(--c-white); transform: translateY(-50%) scale(1.12); }
.courses-hero__nav:active { transform: translateY(-50%) scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .courses-hero__nav:hover, .courses-hero__nav:active { transform: translateY(-50%); }
}
/* Pure-CSS chevron — uses two borders rotated. No external SVG / mask
   means it always renders, regardless of asset path or browser mask mode. */
.courses-hero__nav-icon {
  display: block;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--c-orange-500);
  border-bottom: 3px solid var(--c-orange-500);
  background: transparent;
}
.courses-hero__nav--next .courses-hero__nav-icon {
  transform: rotate(-45deg);
  margin-right: 4px;
}
.courses-hero__nav--prev .courses-hero__nav-icon {
  transform: rotate(135deg);
  margin-left: 4px;
}

/* ── Dots ── */
.courses-hero__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-block: var(--sp-3);
}
.courses-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-border-2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
.courses-hero__dot.is-active { background: var(--c-yellow-500); }


/* Tablet (≥768px) — constrain to container, add radius, show arrows */
@media (min-width: 768px) {
  .courses-hero { padding-inline: var(--container-pad); padding-top: var(--sp-4); }
  .courses-hero__viewport {
    max-width: var(--container-max);
    margin-inline: auto;
    border-radius: var(--r-md);
  }
  .courses-hero__slide {
    border-radius: var(--r-md);
    padding: clamp(32px, 5vw, 64px);
  }
  .courses-hero__lead { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
  .courses-hero__content { max-width: 540px; gap: var(--sp-4); }

  .courses-hero__nav { display: inline-flex; }
  .courses-hero__nav--prev { left: calc(var(--container-pad) - 26px); }
  .courses-hero__nav--next { right: calc(var(--container-pad) - 26px); }
}

/* Desktop (≥1024px) — illustration as full-card background; content overlaid on LEFT */
@media (min-width: 1024px) {
  .courses-hero { padding-top: var(--sp-5); }
  .courses-hero__viewport { border-radius: var(--r-md); }

  .courses-hero__slide {
    border-radius: var(--r-md);
    /* Висота й відступи як на головній (.hero__slide): фіксована висота
       461px без aspect-ratio, padding 105/80 — щоб банери всіх сторінок
       були на одній висоті з home hero (per правки клієнта). */
    padding: 105px 120px 105px 80px;
    min-height: 461px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  /* Image becomes the full background of the slide (covers wave + characters) */
  .courses-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .courses-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Hide mobile dark gradient on desktop — illustration provides its own contrast on left */
  .courses-hero__slide::before { display: none; }

  .courses-hero__content {
    position: relative;
    z-index: 2;
    max-width: 460px;
    align-self: center;       /* текст по центру по вертикалі — як на головній */
    gap: var(--sp-4);
  }

  /* Switch title visibility */
  .courses-hero__title--mobile  { display: none; }
  .courses-hero__title--desktop { display: block; color: var(--c-title); }
  .courses-hero__lead { color: var(--c-body-text); font-size: var(--fs-body); }

  /* Dots inside card at bottom-center */
  .courses-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2;
    padding-block: 0;
  }
}


/* ── Section: Courses Organization — "Організація занять" ──
   3 colored cards (green / orange / blue) with decorative wave shape on top.
   Mobile: 1 col stacked. Tablet: 2 cols. Desktop: 3 cols. */
.organization__head {
  margin-bottom: var(--sp-6);
  text-align: center;
}
.organization__title {  }

.organization__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.org-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Anchor контенту зверху — щоб заголовки 3 карток були на одній лінії
     незалежно від кількості bullets. Раніше було flex-end → заголовки
     "плавали" на різній висоті, текст виглядав нерівномірно. */
  justify-content: flex-start;
  min-height: 320px;
  padding-top: clamp(80px, 12vw, 120px);
  border: 1px solid transparent;
}
/* Border uses saturated 500-shade per DS — same pattern as .stat on homepage.
   Light tints (-300) looked too faint against the cream page bg. */
.org-card--green  { background: var(--c-green-100);  border-color: var(--c-green-500); }
.org-card--orange { background: var(--c-orange-100); border-color: var(--c-orange-500); }
.org-card--blue   { background: var(--c-blue-100);   border-color: var(--c-blue-500); }

/* Decorative speech-bubble icon — identical size on all cards, half-cut at top.
   Positions: 0 = left edge, 1 = horizontal center, 2 = right edge.
   SVG analysis: bubble ≈ 225×220 in 425-wide card (≈53% width). */
.org-card__bubble {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 180px;
  top: -90px;             /* half of height — bottom half visible inside card */
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  object-position: center;
}
.org-card--pos-0 .org-card__bubble { left: 16px; transform: none; }
.org-card--pos-1 .org-card__bubble { left: 50%; transform: translateX(-50%); }
.org-card--pos-2 .org-card__bubble { right: 16px; left: auto; transform: none; }

.org-card__body {
  position: relative;
  z-index: 1;
  padding: 0 var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.org-card__title {
  font-weight: var(--fw-heavy);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  color: var(--c-title);
  margin: 0;
}
.org-card__text {
  font-size: var(--fs-body);          /* 16px — bumped from 14 to read better */
  font-weight: var(--fw-semibold);    /* 600 per DS — was thin 400 */
  line-height: var(--lh-body);        /* 22.4px (1.4 ratio) */
  color: var(--c-body-text);
  margin: 0;
}

@media (min-width: 768px) {
  .organization__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-card__bubble { width: 220px; height: 220px; top: -110px; }
  .org-card { padding-top: 140px; }
}
@media (min-width: 1024px) {
  .organization__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ── Section: Thematic Courses — "Тематичні курси" ──
   Spec from Figma: 3 cards, fixed 505px height, slider with arrow buttons
   absolute-positioned on left/right edges (overlapping cards), yellow dots. */
/* No own padding-block — top spacing comes from .parent global rule. */
.thematic { }
.thematic__head { margin-bottom: var(--sp-6); text-align: left; }
.thematic__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-title);
}
.thematic__lead {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 0.01em;
  color: var(--c-title);
  max-width: 901px;
}
@media (min-width: 768px) {
  .thematic__head { margin-bottom: var(--sp-7); }
  .thematic__title { margin-bottom: 12px; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.18; letter-spacing: 0.02em; }
  .thematic__lead { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; }
}

/* Slider — track is the only scrolling element; arrows sit over track edges */
.thematic__slider {
  position: relative;
}
.thematic__viewport { overflow: hidden; overflow: clip; overflow-clip-margin: 24px; }
.thematic__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  /* Кермується transform-ом (kanInfinite), не scroll. */
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.thematic__track::-webkit-scrollbar { display: none; }

.thematic-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 505px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .thematic-card { flex: 0 0 calc(50% - 12px); }
}
@media (min-width: 1024px) {
  .thematic-card { flex: 0 0 calc(33.333% - 16px); }
}

/* Override .course-card defaults inside thematic context */
.thematic-card.course-card { padding: 0; box-shadow: none; }
.thematic-card .course-card__media {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.thematic-card .course-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thematic-card .course-card__chips {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  z-index: 2;
}
/* Chip styles now live in global .chip — DS-aligned. */
.thematic-card .course-card__body {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}
.thematic-card .course-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-title);
}
.thematic-card .course-card__desc {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.01em;
  color: var(--c-body-text);
}
@media (min-width: 768px) {
  .thematic-card .course-card__desc {
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    letter-spacing: 0;
  }
}

/* Bullet list */
.thematic-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.thematic-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.01em;
  color: var(--c-body-text);
}
@media (min-width: 768px) {
  .thematic-card__bullets li {
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    letter-spacing: 0;
  }
}
.thematic-card__bullet-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* Footer: mobile = column with full-width orange-filled button;
   desktop = row with peach-outlined button */
.thematic-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.thematic-card__price {
  font-weight: 700;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--c-title);
  white-space: nowrap;
}
.thematic-card__cta {
  width: 100%;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.01em;
  /* Per ТЗ "узгоджено 29.05": на тематичних кнопка має бути насичено червоною
     у спокої (не peach). На mobile і desktop однаково — заповнена. */
  background: var(--c-orange-500);
  color: var(--c-white);
  border-color: var(--c-orange-500);
}
/* Hover — трохи темніший червоний (як у .btn--primary:hover). */
.thematic-card__cta:hover {
  background: var(--c-orange-600, #c44614);
  color: var(--c-white);
  border-color: var(--c-orange-600, #c44614);
}

@media (min-width: 768px) {
  .thematic-card__footer {
    flex-direction: row;
    align-items: center;
    gap: 19px;
  }
  .thematic-card__price { font-size: 20px; line-height: 28px; }
  .thematic-card__cta {
    width: auto;
    flex: 1;
    font-size: 16px;
    line-height: 22.4px;
    letter-spacing: 0;
    /* Desktop теж насичено червона (per ТЗ 29.05) — peach забрано. */
    background: var(--c-orange-500);
    color: var(--c-white);
    border-color: var(--c-orange-500);
  }
  /* Desktop hover — той самий темніший червоний. */
  .thematic-card__cta:hover {
    background: var(--c-orange-600, #c44614);
    color: var(--c-white);
    border-color: var(--c-orange-600, #c44614);
  }
}

/* Arrow nav — absolute, overlapping card edges, vertically centered.
   Mobile: 36px (matches teachers/lessons). Desktop: 52px per Figma. */
.thematic__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-cream);
  border: 2.5px solid var(--c-orange-500);
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.30);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.thematic__nav:hover { background: var(--c-white); transform: translateY(-50%) scale(1.12); }
.thematic__nav:active { transform: translateY(-50%) scale(0.95); }
.thematic__nav[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.thematic__nav--prev { left: -8px; }
.thematic__nav--next { right: -8px; }
@media (min-width: 768px) {
  .thematic__nav {
    width: 52px;
    height: 52px;
    border-radius: 30px;
    border-width: 3px;
  }
  .thematic__nav--prev { left: -26px; }
  .thematic__nav--next { right: -26px; }
}
.thematic__nav-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--c-orange-500);
  mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
  -webkit-mask: url('../images/Arrows-chevron-left.svg') no-repeat center / contain;
}
/* Source SVG points right, so PREV needs to flip */
.thematic__nav--prev .thematic__nav-icon { transform: rotate(180deg); }

/* Dots row — yellow active per Figma spec */
.thematic__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-top: var(--sp-5);
}
.thematic__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: var(--c-border);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.thematic__dot.is-active { background: var(--c-yellow-500); }
@media (min-width: 768px) {
  .thematic__dots { gap: 17px; }
  .thematic__dot { width: 12px; height: 12px; }
}


/* ── Section: Individual lessons — "Індивідуальні заняття" ──
   3-column grid of 9 items: 7 course-cards + 2 info-cards (yellow / blue).
   Reuses .thematic-card; adds .individual-card and .info-card variants. */
/* No own padding-block — top spacing from .parent global rule.
   Hero before is full-bleed; the parent rule provides 80px gap. */
.individual { }
.individual__head { margin-bottom: var(--sp-5); text-align: left; }
@media (min-width: 768px) {
  .individual__head { margin-bottom: var(--sp-7); }
}
.individual__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-title);
}
.individual__lead {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 0.01em;
  color: var(--c-title);
  max-width: 901px;
}
.individual__lead strong { color: var(--c-title); font-weight: 700; }
@media (min-width: 768px) {
  .individual__title { margin-bottom: 12px; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.18; letter-spacing: 0.02em; }
  .individual__lead  { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; }
}

.individual__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .individual__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .individual__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Individual card — same as thematic-card but no slider; keep title smaller */
.individual-card { min-height: 505px; }
.individual-card .course-card__title {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.25;
}

/* ── Info card variants (yellow + blue) ── */
.info-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  min-height: 505px;
}
.info-card--yellow { background: var(--c-yellow-100); }
.info-card--blue   { background: var(--c-blue-100); }

.info-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-card__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-title);
}
.info-card__text {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  color: var(--c-title);
}

/* Bonus list inside blue card */
.info-card__bonuses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-card__bonuses li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.info-card__bonuses strong {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-title);
}
.info-card__bonuses span {
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  color: var(--c-title);
}

/* Telegram CTA inside info card */
.info-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 24px;
  width: 100%;
}
.info-card__cta-icon {
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   Corporate page (/corporate/) — sections specific to it.
   ════════════════════════════════════════════════════════════ */

/* ── Section: Clients logo strip ── */
/* Full-width logo strip — edge to edge, single row distributing all items
   evenly. Items shrink to fit so 11 logos always sit on one line. */
.clients {
  padding-block: clamp(16px, 2vw, 24px);
  padding-inline: clamp(16px, 4vw, 60px);
  width: 100%;
}
.clients__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  /* Mobile: horizontal scroll showing ~4.5 items per screen. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.clients__list::-webkit-scrollbar { display: none; }
.clients__item {
  /* Mobile: fixed share so exactly 4.5 fit on a 360-wide viewport with gaps. */
  flex: 0 0 calc((100% - 4 * 8px) / 4.5);
  scroll-snap-align: start;
  min-width: 0;
  aspect-ratio: 113 / 41;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-cream-2);
}
@media (min-width: 768px) {
  .clients__list {
    overflow-x: visible;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 24px);
  }
  .clients__item {
    flex: 1 1 0;
    max-width: 113px;
    scroll-snap-align: none;
  }
}
.clients__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill the small box, crop to slim band */
  display: block;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.clients__item:hover img { filter: none; opacity: 1; }


/* ── Section: Why-choose-us / Benefits — image + features split ──
   Two variants: --image-left (image on left) or --image-right (image on right).
   Image has one rounded corner blown up to 442px to create the curved silhouette
   per Figma. */
/* No own padding-block — top spacing from .parent global rule. */
.why-choose { }
.why-choose__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  align-items: stretch;
}
@media (min-width: 768px) {
  .why-choose__inner {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;     /* content prilegate to top of parent — no auto-centering */
  }
}

/* Image media — curved silhouette (cup-shape) per Figma applied at all
   breakpoints. The 60% radius scales with the box so the same shape
   reads correctly on phone, tablet and desktop. */
.why-choose__media {
  margin: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: 500px;
  align-self: center;
  overflow: hidden;
  aspect-ratio: 500 / 640;
  border-radius: var(--r-md);    /* base 16px on all corners */
}
.why-choose--image-left  .why-choose__media { border-bottom-right-radius: 60%; }
.why-choose--image-right .why-choose__media { border-top-left-radius: 60%; }

.why-choose__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .why-choose__media {
    width: clamp(280px, 42vw, 500px);
    align-self: flex-start;
  }
}
@media (min-width: 1024px) {
  .why-choose__media { width: 500px; height: 640px; aspect-ratio: auto; }
  .why-choose--image-left  .why-choose__media { border-bottom-right-radius: 442px; }
  .why-choose--image-right .why-choose__media { border-top-left-radius: 442px; }
}

.why-choose__content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.why-choose__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.why-choose__eyebrow {
  margin: 0;
  color: var(--c-orange-500);
  font-size: 24px;
  font-weight: var(--fw-heavy);
  line-height: var(--lh-h5);
}
.why-choose__title {
  margin: 0;
  color: var(--c-title);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--fw-heavy);
  line-height: 1.17;            /* DS title-2: 56/48 */
}

/* Features grid: 1 col mobile, 2 cols on tablet+. */
.why-choose__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 768px) {
  .why-choose__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Single feature item — yellow circles indicator + title + body. */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.feature__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  margin-bottom: 8px;
}
.feature__dots span {
  width: 15px;
  height: 15px;
  background: var(--c-yellow-500);
  border-radius: 50%;
  display: block;
}
.feature__title {
  margin: 0;
  font-size: 24px;
  font-weight: var(--fw-heavy);
  line-height: var(--lh-h5);
  color: var(--c-title-2);     /* neutral-700 per Figma */
}
.feature__text {
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 21px;
  letter-spacing: 0.01em;
  color: var(--c-body-text);
}
@media (min-width: 768px) {
  .feature__text {
    font-size: var(--fs-body-l);   /* 20px */
    line-height: var(--lh-body-l); /* 28px */
    letter-spacing: 0;
  }
}


/* ── Section: Facts strip (10 / 97% / 15,000+) ── */
.facts { padding-block: clamp(16px, 2vw, 24px); }
.facts__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: 100%;
}
.facts__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.facts__number {
  font-size: 48px;
  font-weight: var(--fw-heavy);
  line-height: 56px;
  color: #161C2D;            /* Figma — slightly different from --c-title */
  flex-shrink: 0;
}
.facts__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: #161C2D;
  opacity: 0.7;
  max-width: 174px;
}
@media (min-width: 768px) {
  .facts__list {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 64px);
    /* ~80% of container width — stretched almost like hero, 20% less */
    max-width: min(80%, 1056px);
    padding-inline: 0;
  }
  .facts__item {
    flex: 1 1 0;
    justify-content: center;
    align-items: flex-start;
  }
}


/* ── Section: Admission "Структура навчального тижня" ──
   Reuses .organization / .org-card from /courses/ page;
   adds bullet list inside cards + yellow info-card footnote. */
.org-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.org-card__bullets li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--c-body-text);
}
.org-card__bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-body-text);
  font-weight: var(--fw-bold);
}

/* Footnote — full-width yellow info card under the 3 colored cards. */
.structure__footnote {
  margin-top: 24px;
  padding: var(--sp-5);
  background: var(--c-yellow-100);
  border: 1px solid var(--c-yellow-500);
  border-radius: var(--r-md);
  position: relative;
}
.structure__footnote-title {
  margin: 0 0 var(--sp-3);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: var(--fw-heavy);
  line-height: 1.25;
  color: var(--c-title);
}
.structure__footnote-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.structure__footnote-list li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--c-body-text);
}
.structure__footnote-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-body-text);
}
@media (min-width: 768px) {
  .structure__footnote { padding: var(--sp-6); }
  .structure__footnote-list li { font-size: var(--fs-body); }
}


/* ── Section: About Us "Наша історія" — image LEFT + yellow card RIGHT ──
   Per Figma (Про нас.svg): 456×420 image + 840×420 yellow card with text.
   Mobile: stacked. Tablet+: row. */
.story__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .story__inner {
    flex-direction: row;
    gap: var(--sp-5);
    align-items: stretch;
  }
}
.story__media {
  margin: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: 456px;
  aspect-ratio: 456 / 420;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-border);
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 1024px) {
  .story__media { width: 456px; height: 420px; aspect-ratio: auto; }
}
.story__card {
  flex: 1 1 0;
  background: var(--c-yellow-100);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .story__card { padding: var(--sp-6) var(--sp-7); }
}
/* Title sits ABOVE the image+card row, centered. */
.story__head { text-align: center; margin-bottom: var(--sp-6); }
.story__title { letter-spacing: -0.005em; }
.story__text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--c-body-text);
}
@media (min-width: 768px) {
  .story__text { font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
}


/* ── Section: About Us "Наші викладачі" — full faculty grid ──
   Reuses .teacher-card markup; just changes layout from slider to grid. */
.teachers-grid__head {
  text-align: center;
  margin-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.teachers-grid__title { letter-spacing: -0.005em; }
.teachers-grid__sub {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--c-body-text);
}
.teachers-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 540px) {
  .teachers-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .teachers-grid__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
/* Force aspect on every card (slider override no longer applies). */
.teacher-card--grid { aspect-ratio: 4 / 3; }


/* ── Section: About Us page hero — single H1 with adaptive position ──
   Mobile: H1 sits inside the cream card with the intro paragraphs.
   Desktop ≥1024: H1 spans the full row centered above intro+video.
   Implementation:
     • `.about-hero__intro-group` wraps H1 + intro paragraphs.
     • Mobile: it paints the cream card bg + border (one visual block).
     • Desktop: `display: contents` makes its children direct grid items
       so H1 spans both columns above intro/video. */
.about-hero { padding-top: var(--sp-7); }
.about-hero__title { margin: 0; letter-spacing: -0.005em; }

/* Mobile layout — column stack */
.about-hero__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.about-hero__intro-group {
  background: var(--c-cream);
  border: 1px solid var(--c-title);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.about-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* On mobile, intro has no own bg/border — group provides them */
  background: none;
  border: 0;
  padding: 0;
}

/* Desktop ≥1024: H1 above, 2-col row below.
   `.about-hero__intro-group` becomes display:contents so H1 and intro
   pop out as direct grid children of `.about-hero__layout`. */
@media (min-width: 1024px) {
  .about-hero__layout {
    display: grid;
    grid-template-columns: 344px 1fr;
    grid-template-areas:
      "title title"
      "intro video";
    column-gap: var(--sp-6);
    row-gap: var(--sp-7);
  }
  .about-hero__intro-group {
    display: contents;            /* group disappears from layout */
  }
  .about-hero__title {
    grid-area: title;
    text-align: center;
    margin: 0;
  }
  .about-hero__intro {
    grid-area: intro;
    /* Re-apply the cream card styling now that group's display:contents
       removed those properties from the visual chain. */
    background: var(--c-cream);
    border: 1px solid var(--c-title);
    border-radius: var(--r-md);
    padding: var(--sp-6);
  }
  .about-hero__video {
    grid-area: video;
  }
}
.about-hero__lead {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--c-body-text);
}
.about-hero__lead strong { color: var(--c-title); font-weight: var(--fw-bold); }
.about-hero__text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--c-body-text);
}

/* Video poster — mirrors homepage `.about__video` */
.about-hero__video {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--c-border);
  isolation: isolate;
  flex: 1 1 auto;
}
.about-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.about-hero__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-orange-500);
  border: 4px solid var(--c-orange-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .15s, background-color .15s;
}
.about-hero__play:hover { transform: translate(-50%, -50%) scale(1.08); }


/* ════════════════════════════════════════════════════════════
   Blog page (/blog/) — list with filters, search, pagination.
   ════════════════════════════════════════════════════════════ */
/* WordPress adds `blog` to <body> on the homepage when it shows posts.
   Scope to <section> so this padding can't bleed onto <body>. */
section.blog { padding-block: var(--sp-7); }

/* Header */
.blog__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.blog__title { letter-spacing: -0.005em; }
.blog__lead {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--c-title);
  max-width: 1030px;
}

/* Filter row — tabs LEFT + search RIGHT */
.blog__controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
@media (min-width: 1024px) {
  .blog__controls {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
  }
}

/* Category tabs */
.blog__tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (min-width: 1024px) {
  .blog__tabs { flex-wrap: nowrap; }
}
.blog-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--c-cream-2);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #696969;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.blog-tab:hover { background: var(--c-border); }
.blog-tab.is-active {
  background: var(--c-title);
  color: var(--c-cream);
}
.blog-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--c-orange-500);
  color: #fff;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* Search input */
.blog__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
}
.blog__search-input {
  width: 100%;
  height: 40px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--c-border-2);
  border-radius: 8px;
  background: var(--c-cream);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-body-text);
  transition: border-color var(--dur-base) var(--ease);
}
.blog__search-input::placeholder { color: var(--c-disabled-fg); }
.blog__search-input:focus { outline: none; border-color: var(--c-orange-500); }
.blog__search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c-body-text);
}

/* Articles grid */
.blog__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.blog__grid > li { display: flex; }
@media (min-width: 768px) {
  .blog__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}
@media (min-width: 1024px) {
  .blog__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

/* Article card */
.article-card {
  position: relative;
  background: var(--c-cream);
  border: 1px solid var(--c-cream-2);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.article-card:hover { border-color: var(--c-border); }
.article-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}
.article-card__media {
  margin: 0;
  height: 148px;
  overflow: hidden;
  flex-shrink: 0;
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card__open {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--c-white);
  border: 1px solid #D8D8D8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-title);
  pointer-events: none;
}
.article-card__body {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.article-card__title {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: var(--fw-heavy);
  line-height: 1.2;
  color: var(--c-title);
}
@media (min-width: 768px) {
  .article-card__title { font-size: 24px; }
}
@media (min-width: 1024px) {
  .article-card__title { font-size: 28px; }
}
.article-card__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-cream-2);
}
.article-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.article-card__likes,
.article-card__duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.article-card__likes svg { color: var(--c-yellow-600); }
.article-card__duration svg { color: var(--c-orange-500); }
.article-card__tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pagination */
.blog__pagination {
  margin-top: var(--sp-7);
  display: flex;
  justify-content: center;
}
.blog__pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  background: var(--c-white);
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  overflow: hidden;
}
.blog__pagination li {
  display: flex;
}
.blog__pagination li + li { border-left: 1px solid #E5E5E5; }
.page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  background: var(--c-cream);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-base) var(--ease);
}
.page-btn:hover { background: var(--c-cream-2); }
.page-btn.is-active {
  background: var(--c-orange-500);
  color: var(--c-white);
}
.page-btn--gap { cursor: default; pointer-events: none; padding: 0 8px; }
.page-btn--icon { color: var(--c-title); }

/* ============================================================
 * Single article page (/article/)
 * ============================================================ */

/* --- Hero --- */
.article-hero { padding-top: var(--sp-4); }
.article-hero__banner {
  position: relative;
  /* Sharp bottom corners per Figma — only top is rounded. */
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--c-cream-2);
  min-height: 240px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) { .article-hero__banner { min-height: 280px; padding: 24px; border-top-left-radius: 32px; border-top-right-radius: 32px; } }
@media (min-width: 1024px) { .article-hero__banner { min-height: 320px; padding: 32px; border-top-left-radius: 36px; border-top-right-radius: 36px; } }

/* Decorative SVG shapes from the design system (assets/images/*.svg).
   Positioned absolutely on their parent section. Section gets
   `position: relative; overflow: hidden` so decorations can hang off
   the right edge without creating horizontal scroll. */
.article-hero { position: relative; }
section.blog { position: relative; overflow: hidden; }

/* strock.svg — dashed cyan curl placed inside the hero banner at the
   bottom-right. Banner already has overflow:hidden. */
.article-hero__strock {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 120px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: .9;
}
@media (min-width: 768px) {
  .article-hero__strock { width: 180px; right: 24px; bottom: 24px; }
}
@media (min-width: 1024px) {
  .article-hero__strock { width: 227px; right: 40px; bottom: 32px; }
}

/* line.svg — large organic blue shape that sits just below the hero,
   bleeding off the right edge as a soft background accent. */
.article-hero__line {
  position: absolute;
  right: -200px;
  top: 80%;
  width: 380px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  display: none;
}
@media (min-width: 768px) {
  .article-hero__line { display: block; right: -240px; width: 520px; }
}
@media (min-width: 1024px) {
  .article-hero__line { right: -260px; top: 70%; width: 707px; }
}

/* hape1.svg — same organic shape on the blog page, sitting BEHIND the
   first row of article cards. z-index: 0 keeps it under .blog__grid. */
.blog__decor {
  position: absolute;
  right: -200px;
  top: 0;
  width: 380px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  display: none;
}
@media (min-width: 768px) {
  .blog__decor { display: block; right: -240px; width: 520px; top: 40px; }
}
@media (min-width: 1024px) {
  .blog__decor { right: -260px; width: 707px; top: 60px; }
}
/* Make sure header text + cards layer above the decoration. */
section.blog .container { position: relative; z-index: 1; }
.article-hero__banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.article-hero__chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article-hero__overlay {
  position: relative;
  z-index: 2;
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-cream);
}
.article-hero__crumbs a {
  color: var(--c-cream);
  text-decoration: none;
  opacity: .9;
}
.article-hero__crumbs a:hover { opacity: 1; }
.article-hero__crumb-sep { opacity: .8; }
@media (min-width: 1024px) {
  .article-hero__crumbs { font-size: 16px; }
}
.article-hero__title {
  margin: 0;
  color: var(--c-cream);
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.15;
  font-weight: var(--fw-heavy);
}

/* --- Intro --- */
.article-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1024px) {
  .article-intro__grid { grid-template-columns: 551px 1fr; gap: 24px; align-items: start; }
}
.article-intro__media {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: 272px;     /* раніше max-height був тільки на <img>, але figure-обгортка
                            могла розтягуватись; додаємо тут щоб гарантувати компактність */
}
.article-intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; max-height: 272px; }
.article-intro__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-body, #332625);
}
@media (min-width: 1024px) { .article-intro__text { font-size: 16px; line-height: 1.4; } }
.article-intro__text p { margin: 0; }

/* --- Video preview --- */
.article-video__frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--c-cream-2);
  background-size: cover;
  background-position: center;
  aspect-ratio: 16/9;
  min-height: 220px;
  padding: 16px;
  /* Critical: keep inside parent column on narrow viewports. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.article-video__overlay { min-width: 0; max-width: 100%; }
.article-video__title { overflow-wrap: anywhere; word-break: break-word; }
@media (min-width: 768px) { .article-video__frame { padding: 32px; min-height: 320px; max-height: 380px; aspect-ratio: 16/7; } }
@media (min-width: 1024px) {
  /* Раніше було aspect-ratio 1320/785 + min-height 520px — на контейнері 1435px
     виходила висота 850px, що перевищувало висоту вьюпорта. Зараз
     обмежуємо до 520px і використовуємо ширший aspect 16:7 (кінематографічний). */
  .article-video__frame {
    padding: 64px;
    aspect-ratio: 16/7;
    min-height: 0;
    max-height: 520px;
  }
}
.article-video__frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.article-video__overlay {
  position: relative;
  z-index: 2;
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-video__kicker {
  margin: 0;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--c-cream);
}
@media (min-width: 1024px) { .article-video__kicker { font-size: 20px; } }
.article-video__title {
  margin: 0;
  font-size: clamp(22px, 3.5vw, 48px);
  line-height: 1.15;
  font-weight: var(--fw-heavy);
  color: var(--c-cream);
}
.article-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-orange-500);
  color: var(--c-cream);
  border: 3px solid var(--c-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease);
}
.article-video__play:hover { transform: translate(-50%, -50%) scale(1.05); }
@media (min-width: 1024px) { .article-video__play { width: 84px; height: 84px; border-width: 5px; } }

/* --- Body 2-col --- */
.article-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  /* Per Figma "Відкрита стаття": main column wider than sidebar (~2:1).
     Зміна з 1fr 1fr на 1.8fr 1fr щоб контент займав ширину як у макеті. */
  .article-body__grid { grid-template-columns: 1.8fr 1fr; gap: 48px; align-items: start; }
}
.article-body__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-body, #332625);
  /* Grid/flex items default to min-width: auto which lets long URLs blow
     out the column. Force shrinkability so .link-card__url can wrap. */
  min-width: 0;
}
.article-body__side { min-width: 0; }
@media (min-width: 1024px) { .article-body__main { font-size: 16px; line-height: 1.4; } }
.article-body__main p { margin: 0; }
.article-body__main strong { font-weight: var(--fw-bold); color: var(--c-title); }
.article-body__h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 1024px) { .article-body__h2 { font-size: 28px; } }
.article-body__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.article-body__cta { display: flex; flex-direction: column; gap: 12px; }
.article-body__cta-h {
  margin: 0;
  font-size: 24px;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 1024px) { .article-body__cta-h { font-size: 28px; } }

/* Link card (blue background with rows) */
.link-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--c-blue-100);
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 1024px) { .link-card { padding: 16px; } }
.link-card__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
@media (min-width: 1024px) { .link-card__row { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; } }
.link-card__label {
  font-weight: var(--fw-bold);
  color: var(--c-body, #332625);
}
.link-card__url {
  color: #3B77F9;
  text-decoration: underline;
  /* Critical: long URLs must wrap inside their container on any width. */
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}

/* Phrase card (green dictionary table) */
.phrase-card {
  background: #EDF8E8;
  border: 1px solid #46AE8A;
  border-radius: 8px;
  padding: 24px;
}
.phrase-card__title {
  margin: 0 0 12px;
  text-align: center;
  font-size: 24px;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 1024px) { .phrase-card__title { font-size: 28px; } }
.phrase-card__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.phrase-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #5ECAA5;
}
.phrase-card__row:last-child { border-bottom: 0; }
.phrase-card__row dt {
  margin: 0;
  text-align: right;
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-body, #332625);
}
.phrase-card__row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-body, #332625);
}
@media (min-width: 1024px) {
  .phrase-card__row dt, .phrase-card__row dd { font-size: 16px; line-height: 1.4; }
}

/* Course card — inline variant only (article body sidebar). All rules here
   are scoped to .course-card--inline so they don't override the base
   .course-card on courses/homepage/thematic sections. */
.course-card--inline {
  position: relative;
  background: var(--c-cream);
  border: 1px solid #E5E0D1;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.course-card--inline .course-card__media { margin: 0; height: 200px; overflow: hidden; }
.course-card--inline .course-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card--inline .course-card__chips {
  position: absolute;
  top: 15px; left: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 30px);
}
.course-card--inline .course-card__body {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.course-card--inline .course-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 1024px) { .course-card--inline .course-card__title { font-size: 32px; } }

/* --- Related articles --- */
.article-related__title {
  margin: 0 0 16px;
}
.article-related__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.article-related__grid > li { display: flex; }
@media (min-width: 768px) { .article-related__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .article-related__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

/* --- Comments --- */
.comments-card {
  background: var(--c-yellow-100);
  border: 1px solid #FBC35D;
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) { .comments-card { padding: 64px; } }
.comments-card__title { margin: 0; }
.comments-card__h3 {
  margin: 0;
  font-size: 24px;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 1024px) { .comments-card__h3 { font-size: 32px; } }
.comments-card__divider {
  margin: 0;
  border: 0;
  border-top: 2px solid #FDA670;
}

.comment-form { display: flex; flex-direction: column; gap: 12px; }
.comment-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) { .comment-form__row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label {
  font-size: 16px;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
.field__input {
  background: var(--c-cream);
  border: 1px solid #D0CCC1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--c-title);
  width: 100%;
}
.field__input::placeholder { color: #8E8E8E; }
.field__input:focus { outline: 2px solid var(--c-orange-300, #FDA670); outline-offset: 1px; }
.field__input--textarea { min-height: 100px; resize: vertical; }
.comment-form .btn { align-self: flex-start; }

.comments-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.comment {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 1024px) { .comment { gap: 24px; align-items: center; } }
.comment__avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
}
@media (min-width: 1024px) { .comment__avatar { width: 100px; height: 100px; } }
.comment__body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.comment__name {
  margin: 0;
  font-size: 24px;
  font-weight: var(--fw-heavy);
  color: var(--c-body, #332625);
}
@media (min-width: 1024px) { .comment__name { font-size: 28px; } }
.comment__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #777272;
}
@media (min-width: 1024px) { .comment__text { font-size: 16px; line-height: 1.4; } }

/* ============================================================
   Tests page — listing, modals (taking + result)
   Goal: clean grid, segmented pager, accessible modal with
   three input types (radio / checkbox / text). Mobile-first.
   ============================================================ */

.tests { padding: 40px 0 56px; }
@media (min-width: 1024px) { .tests { padding: 64px 0 80px; } }

.tests__head { max-width: 800px; margin: 0 0 28px; }
.tests__title { margin: 0 0 12px; }
.tests__lead  { margin: 0; color: var(--c-muted-text); }

.tests__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
}
/* Mobile per Figma: search ABOVE tabs (column-reverse keeps DOM order
   with tabs first for tablists, while visually search lands on top). */
@media (max-width: 767px) {
  .tests__bar {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }
}

/* Tabs — rectangular 8px, dark active / cream-2 inactive, with count badge */
.tests__tabs {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tests__tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  height: 40px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--c-cream-2);
  color: #696969;
  font: inherit;
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
.tests__tab:hover { color: var(--c-title); }
.tests__tab.is-active {
  background: var(--c-title);
  color: var(--c-cream);
}
.tests__tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--c-orange-500);
  color: var(--c-white);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  letter-spacing: .01em;
}

/* Search — 8px input per DS */
.tests__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-cream);
  border-radius: 8px;
  outline: 1px solid var(--c-border-2);
  outline-offset: -1px;
  padding: 8px 9px;
  width: 100%;
  max-width: 420px;
  flex: 0 0 auto;
  min-height: 44px;
}
@media (min-width: 768px) {
  .tests__search { flex: 1 1 240px; }
}
.tests__search input {
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-title);
  width: 100%;
}
.tests__search input::placeholder { color: var(--c-disabled-fg); }
.tests__search img { flex: 0 0 auto; opacity: .85; }
.tests__search:focus-within { outline-color: var(--c-orange-300); }

/* Pager — segmented rectangle with vertical dividers */
.tests__pager-row { display: flex; }
.tests__pager-row--top    { justify-content: flex-end; margin: 0 0 24px; }
.tests__pager-row--bottom { justify-content: center;   margin: 32px 0 0; padding: 16px 60px; }
@media (max-width: 767px) {
  .tests__pager-row--top { display: none; }
  .tests__pager-row--bottom { padding: 16px 0 0; }
}

.tests-pager {
  display: inline-flex;
  align-items: stretch;
  background: var(--c-white);
  border-radius: 8px;
  outline: 1px solid var(--c-border);
  outline-offset: -1px;
  overflow: hidden;
}
.tests-pager__cell {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--c-cream);
  color: var(--c-title);
  min-width: 40px;
  padding: 8px 16px;
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--c-border);
  transition: background .15s ease, color .15s ease;
}
.tests-pager__cell:last-child { border-right: 0; }
.tests-pager__cell:hover { background: var(--c-cream-2); }
.tests-pager__cell.is-active {
  background: var(--c-orange-500);
  color: var(--c-white);
}
.tests-pager__cell--dots { cursor: default; }
.tests-pager__cell--dots:hover { background: var(--c-cream); }
.tests-pager__cell--icon { color: var(--c-title); }
.tests-pager__cell { text-decoration: none; }
.tests-pager__cell.is-disabled { opacity: .35; pointer-events: none; }

/* ── Single-post (blog article) typography ──
   Тіло поста використовує the_content() через Gutenberg. Базові стилі
   для контенту усередині 2-кол grid (.article-body__main--post). */
/* Раніше тут було `.single-post { padding: var(--sp-6) 0 }` — це чіпляло
   body.single-post (WordPress автоматично додає цей клас на single-post
   сторінки), створюючи відступ між header і hero. Прибрано. */

/* Typography для Gutenberg блоків у тілі статті. Розтягуємось на всю
   доступну ширину колонки grid (не центруємо вручну). */
.article-body__main--post {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.article-body__main--post > * + * { margin-top: 0; }
.article-body__main--post p { margin: 0; }
.article-body__main--post h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: var(--fw-heavy);
  line-height: 1.25;
  color: var(--c-title);
  margin: var(--sp-4) 0 0;
}
.article-body__main--post h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--c-title);
  margin: var(--sp-3) 0 0;
}
.article-body__main--post a {
  color: var(--c-orange-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body__main--post a:hover { color: var(--c-orange-400); }
.article-body__main--post ul, .article-body__main--post ol {
  margin: 0;
  padding-left: 1.4em;
}
.article-body__main--post li + li { margin-top: 8px; }
.article-body__main--post img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.article-body__main--post blockquote {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-cream);
  border-left: 4px solid var(--c-orange-500);
  border-radius: var(--r-md);
  font-style: italic;
}
.single-post__tags {
  margin: var(--sp-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.single-post__related { margin-top: var(--sp-7); padding-bottom: var(--sp-6); }

/* "Хочете закріпити знання?" CTA — yellow course-card в кінці статті
   (під Figma макет /article/, бачимо в правій колонці на desktop). */
.single-post__cta {
  max-width: 760px;
  margin: var(--sp-6) auto 0;
}
.single-post__cta-title {
  margin: 0 0 var(--sp-4);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: var(--fw-heavy);
  line-height: 1.25;
  color: var(--c-title);
}
.single-post__cta-card {
  background: var(--c-yellow-100);
  border: 1px solid var(--c-yellow-500);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.single-post__cta-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.single-post__cta-course {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--c-title);
}
.single-post__cta-btn { align-self: flex-start; }

/* Grid */
.tests__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px)  { .tests__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tests__grid { grid-template-columns: repeat(3, 1fr); } }

/* Test card — chips overlay on image, full-width outlined CTA */
.test-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-cream);
  border-radius: 16px;
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* CSS специфічність: .test-card перебивав браузерний [hidden] { display: none }
   через рівну специфічність. Явно вказуємо щоб пошук міг ховати картки. */
.test-card[hidden] { display: none !important; }
/* Hover у стилі .course-card (підсвічена рамка + тінь + лифт),
   але кольорова рамка береться з варіанту картки. */
.test-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--c-border-2); /* фолбек, якщо варіант не задано */
}
.test-card--green:hover  { border-color: var(--c-green-500); }
.test-card--orange:hover { border-color: var(--c-orange-500); }
.test-card--blue:hover   { border-color: var(--c-blue-500); }
.test-card__media {
  position: relative;
  align-self: stretch;
  height: 200px;
  background: var(--c-cream-2);
  overflow: hidden;
}
.test-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.test-card__chips {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.test-card__body {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.test-card__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.3;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 1024px) { .test-card__title { font-size: 32px; line-height: 44px; } }

.test-card__cta {
  appearance: none;
  margin-top: auto;
  align-self: stretch;
  width: 100%;
  padding: 12px 24px;
  border-radius: 24px;
  font: inherit;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease, color .15s ease;
}
.test-card--green .test-card__cta {
  background: var(--c-green-100);
  color: var(--c-green-500);
  border: 1px solid var(--c-green-500);
}
.test-card--green .test-card__cta:hover {
  background: var(--c-green-500);
  color: var(--c-white);
}
.test-card--orange .test-card__cta {
  background: var(--c-orange-100);
  color: var(--c-orange-500);
  border: 1px solid var(--c-orange-500);
}
.test-card--orange .test-card__cta:hover {
  background: var(--c-orange-500);
  color: var(--c-white);
}

/* ============================================================
   Test-taking modal — single scrollable list of questions
   Per Figma: cream dialog (#FAFAEC), title + chip row, question
   number in a 16px right-aligned column, options as a horizontal
   row of plain control + label pairs (no boxed background).
   ============================================================ */
/* Doubled class names raise specificity to (0,2,0) so this beats
   the global `.parent > *:not(:first-child) { padding-top: ... }`
   rule (specificity 0,1,1) which would otherwise add unwanted
   top padding to the modal overlay and break vertical centering. */
.test-modal.test-modal,
.result-modal.result-modal,
.quiz-modal.quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 768px) {
  .test-modal.test-modal,
  .result-modal.result-modal,
  .quiz-modal.quiz-modal { align-items: center; padding: 24px; }
}
.test-modal[hidden], .result-modal[hidden], .quiz-modal[hidden] { display: none; }

.test-modal__backdrop,
.result-modal__backdrop,
.quiz-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(118, 114, 114, .55);
  backdrop-filter: blur(2px);
}

.test-modal__dialog,
.result-modal__dialog,
.quiz-modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--c-cream);
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  /* Mobile sheet — висота за контентом до 90dvh (не 100vh: інакше верх із
     хрестиком вилазив над екран на телефоні і модалку не закрити). */
  height: auto;
  max-height: 90dvh;
  border-radius: 20px 20px 0 0;
  padding: 28px 16px 24px;
}

@media (min-width: 768px) {
  .test-modal__dialog,
  .result-modal__dialog,
  .quiz-modal__dialog {
    border-radius: 20px;
    height: auto;
    max-height: 92vh;
    padding: 48px;
  }
  .test-modal__dialog,
  .result-modal__dialog { max-width: 920px; }
}

.test-modal__close,
.result-modal__close,
.quiz-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  position: absolute;
  top: 18px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--c-title);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s ease;
}
@media (min-width: 768px) {
  .test-modal__close,
  .result-modal__close { top: 24px; right: 24px; width: 36px; height: 36px; }
}
.test-modal__close:hover,
.result-modal__close:hover { background: var(--c-cream-2); }

/* Head: title + chips, gap 16 per Figma both viewports */
.test-modal__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
}
.test-modal__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 768px) {
  .test-modal__title { font-size: 44px; line-height: 1.2; letter-spacing: .88px; }
}

.test-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Body: gap 32 between question blocks. Fills available space and
   allows scroll only if content truly overflows the dialog. Margin-
   top creates the head→body separation (20 mobile / 40 desktop). */
.test-modal__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
  /* flex 1 with min-height 0 so body scrolls only when dialog hits
     its 92vh cap; otherwise body sizes to content and dialog is
     content-sized per Figma. */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 24px;
}
@media (min-width: 768px) { .test-modal__body { margin-top: 56px; } }

/* Each question: column with header + options.
   Figma: 12px mobile / 20px desktop between question header and options.
   Body gap (32px) handles spacing BETWEEN question blocks. */
.test-q {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) { .test-q { gap: 20px; } }

.test-q__legend {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: 16px;
  line-height: 22.4px;
  font-weight: var(--fw-bold);
  color: var(--c-title);
  padding: 0;
}
@media (min-width: 768px) { .test-q__legend { font-size: 20px; line-height: 28px; } }

.test-q__num {
  width: 16px;
  text-align: right;
  flex: 0 0 auto;
  color: var(--c-title);
}

.test-q__text { font-weight: var(--fw-bold); }

/* Options row — gap 8 mobile, 36 desktop. flex-wrap kept as
   fallback; on desktop with 705px column 4 checkboxes fit in row. */
.test-q__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Desktop: 36px column gap, tighter 16px row gap when options wrap */
@media (min-width: 768px) { .test-q__options { gap: 16px 36px; } }

.test-q__option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border: 0;
}
.test-q__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Per Figma: 24×24 hit area, 16×16 visible control 4px inset.
   Use ::before for the outline shape and ::after for the radio dot
   so the wrapper itself can host SVG (checkbox tick) and focus ring. */
.test-q__radio,
.test-q__check {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.test-q__radio::before,
.test-q__check::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid var(--c-body-text);
  background: transparent;
  transition: border-color .15s ease, background .15s ease;
}
.test-q__radio::before { border-radius: 50%; }
.test-q__check::before { border-radius: 3px; }

/* Selected radio: 10×10 orange dot (inset 7px in 24×24). */
.test-q__option input:checked + .test-q__radio::before {
  border-color: var(--c-orange-500);
}
.test-q__option input:checked + .test-q__radio::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--c-orange-500);
  border-radius: 50%;
}

/* Checked checkbox: filled orange square + white tick. */
.test-q__option input:checked + .test-q__check::before {
  background: var(--c-orange-500);
  border-color: var(--c-orange-500);
}
.test-q__option input:checked + .test-q__check { color: var(--c-cream); }
.test-q__check svg { position: relative; z-index: 1; }

.test-q__option input:focus-visible + .test-q__radio::before,
.test-q__option input:focus-visible + .test-q__check::before {
  outline: 3px solid var(--c-orange-200);
  outline-offset: 2px;
}

.test-q__label {
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .01em;
  font-weight: var(--fw-semibold);
  color: var(--c-title);
}
@media (min-width: 768px) { .test-q__label { font-size: 16px; line-height: 22.4px; letter-spacing: 0; } }

.test-q__input {
  width: 100%;
  appearance: none;
  border: 0;
  outline: 1px solid var(--c-border-2);
  outline-offset: -1px;
  border-radius: 8px;
  padding: 8px 9px;
  font: inherit;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 22.4px;
  background: var(--c-cream);
  color: var(--c-title);
}
.test-q__input::placeholder { color: var(--c-disabled-fg); }
.test-q__input:focus { outline-color: var(--c-orange-300); outline-width: 1.5px; }

/* Footer:
   - mobile: column-reverse, both buttons full-width, gap 8.
     DOM order is "Вийти" then "Завершити тест" so reverse puts
     "Завершити тест" on TOP per Figma mobile.
   - desktop: row, justify-end, gap 16. */
.test-modal__foot {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .test-modal__foot {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
  }
}

.test-modal__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 24px;
  font: inherit;
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 21px;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease, color .15s ease;
  width: 100%;
}
@media (min-width: 768px) {
  .test-modal__btn { font-size: 16px; line-height: 22.4px; letter-spacing: 0; width: auto; }
}
.test-modal__btn--ghost {
  background: transparent;
  color: var(--c-orange-500);
}
.test-modal__btn--ghost:hover { background: var(--c-orange-100); }
.test-modal__btn--filled {
  background: var(--c-orange-500);
  color: var(--c-cream);
}
.test-modal__btn--filled:hover { background: var(--c-orange-400); }

/* ============================================================
   Result modal — same chrome as test modal, simpler body:
   row of 5 avatar squares + one centered congrats line.
   ============================================================ */
.result-modal__dialog { padding: 24px 20px; gap: 24px; }
@media (min-width: 768px) { .result-modal__dialog { padding: 48px; gap: 32px; } }

.result-modal__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.result-modal__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: var(--fw-heavy);
  color: var(--c-title);
}
@media (min-width: 768px) {
  .result-modal__title { font-size: 44px; line-height: 1.2; letter-spacing: .88px; }
}

.result-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-modal__avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  margin: auto 0 0;
}
.result-modal__msg + .result-modal__foot,
.result-modal__msg { margin-bottom: 0; }
.result-modal__avatars + .result-modal__msg { margin-top: 0; }
/* Result title block sticks to top; avatars stretch into middle;
   message sits just above footer which is glued to bottom. */
.result-modal__dialog .result-modal__head { flex: 0 0 auto; }
.result-modal__dialog .result-modal__msg  { flex: 0 0 auto; margin-bottom: auto; }
.result-modal__dialog .result-modal__foot { flex: 0 0 auto; }
.result-modal__avatar {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-cream-2);
  flex: 0 0 auto;
}
@media (min-width: 768px) { .result-modal__avatar { width: 80px; height: 80px; } }
.result-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-modal__msg {
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  color: var(--c-body-text);
}
@media (min-width: 768px) { .result-modal__msg { font-size: 18px; } }

.result-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 8px;
}

/* ============================================================
   Test-modal error-review state — appears after [data-test-finish]
   click. Right/wrong icons replace radio/checkbox visuals; input
   gains red ring; explanation line shows below; finish button hides.
   ============================================================ */
/* Correct option (the one that should have been picked) →
   filled green 16×16 inside 24×24, with white tick. */
.test-modal.is-submitted .test-q__option.is-correct .test-q__radio::before,
.test-modal.is-submitted .test-q__option.is-correct .test-q__check::before {
  border-color: var(--c-green-500);
  background: var(--c-green-500);
  border-radius: 3px;
}
.test-modal.is-submitted .test-q__option.is-correct .test-q__radio::after,
.test-modal.is-submitted .test-q__option.is-correct .test-q__check::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--c-cream);
  border-bottom: 1.5px solid var(--c-cream);
  transform: rotate(-45deg) translate(1px, -1px);
  background: transparent;
  inset: auto;
  border-radius: 0;
}
.test-modal.is-submitted .test-q__option.is-correct .test-q__check svg { display: none; }

/* Wrong option (user picked but it was incorrect) → red ✕ glyph,
   no border. */
.test-modal.is-submitted .test-q__option.is-wrong .test-q__radio::before,
.test-modal.is-submitted .test-q__option.is-wrong .test-q__check::before {
  border-color: transparent;
  background: transparent;
}
.test-modal.is-submitted .test-q__option.is-wrong .test-q__radio::after,
.test-modal.is-submitted .test-q__option.is-wrong .test-q__check::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--c-orange-500);
  line-height: 1;
  background: transparent;
  border-radius: 0;
}
.test-modal.is-submitted .test-q__option.is-wrong .test-q__check svg { display: none; }

.test-modal.is-submitted .test-q__input.is-wrong {
  outline-color: var(--c-orange-500);
  outline-width: 1.5px;
}

.test-q__explain {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  font-size: 14px;
  color: var(--c-muted-text);
}

.test-modal.is-submitted [data-test-finish] { display: none; }

/* Disable body scroll when modal open */
body.has-modal-open { overflow: hidden; }

/* ============================================================
   Form validation feedback — applies to newsletter/trial/lead/
   comment forms via .form-error inline messages and the
   .form-feedback / .kanapka-form__feedback status block.
   ============================================================ */
.form-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-orange-500);
  font-weight: var(--fw-semibold);
}

input.is-error,
textarea.is-error {
  outline: 1.5px solid var(--c-orange-500);
  outline-offset: -1.5px;
  border-color: var(--c-orange-500) !important;
}

.form-feedback,
.kanapka-form__feedback {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--fw-semibold);
}
.form-feedback:empty,
.kanapka-form__feedback:empty { display: none; }
.form-feedback.is-success,
.kanapka-form__feedback.is-success {
  color: var(--c-green-600);
}
.form-feedback.is-error,
.kanapka-form__feedback.is-error {
  color: var(--c-orange-500);
}

/* Honeypot — keep hidden even if inline style is stripped */
.kanapka-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Busy state on submit */
.is-busy button[type="submit"],
button[type="submit"]:disabled {
  opacity: .6;
  cursor: progress;
}

/* ───────────────────────────────────────────────────────────
   Quiz modal — попап-опитувальник для "Записатися" CTA.
   Reuses .test-modal/.result-modal backdrop+dialog structure
   (uniform modal pattern across the site).
   ─────────────────────────────────────────────────────────── */

.quiz-modal__head { margin-bottom: var(--sp-5); }
.quiz-modal__title {
  margin: 0 0 var(--sp-3);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--fw-heavy);
  line-height: 1.2;
  color: var(--c-title);
}
.quiz-modal__lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body-text);
}
.quiz-modal__subtitle {
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: var(--fw-bold);
  color: var(--c-title);
}

.quiz-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Кожне питання — fieldset */
.quiz-q {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quiz-q__legend {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-title);
  padding: 0;
  margin-bottom: 10px;
}
.quiz-q__num {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-orange-500);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--fw-bold);
}
.quiz-q__text { padding-top: 2px; }

.quiz-q__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 0;
}
.quiz-q__option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background-color .15s ease;
}
.quiz-q__option:hover { background: var(--c-cream-2); }
.quiz-q__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quiz-q__radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--c-border-2);
  display: inline-block;
  position: relative;
  transition: border-color .15s ease;
}
.quiz-q__option input:checked + .quiz-q__radio {
  border-color: var(--c-orange-500);
}
.quiz-q__option input:checked + .quiz-q__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--c-orange-500);
}
.quiz-q__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-body-text);
  line-height: 1.4;
}

/* Контакти */
.quiz-modal__contacts {
  border-top: 1px solid var(--c-border-2);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.quiz-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-modal__label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  color: var(--c-title);
}
.quiz-modal__input {
  width: 100%;
  padding: 12px 16px;
  background: var(--c-cream);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-body-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.quiz-modal__input:focus {
  outline: none;
  border-color: var(--c-orange-500);
  box-shadow: 0 0 0 3px var(--c-orange-100);
}
.quiz-modal__input.is-error {
  border-color: var(--c-orange-500);
  background: var(--c-orange-100);
}
/* Textarea для питання "Для чого вивчаєте?" — родич .quiz-modal__input. */
.quiz-modal__textarea {
  resize: vertical;
  min-height: 110px;
  padding: 16px 18px;
  font-family: inherit;
  line-height: 1.5;
}

.quiz-modal__feedback {
  font-size: var(--fs-body-s);
  color: var(--c-body-text);
  min-height: 18px;
}
.quiz-modal__feedback.is-error { color: #c0392b; }

.quiz-modal__submit { align-self: stretch; }

.quiz-modal__small {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-muted-text);
  text-align: center;
}

/* Stage 2 — success */
.quiz-modal__success-stage {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
}
.quiz-modal[data-quiz-stage="success"] .quiz-modal__form-stage { display: none; }
.quiz-modal[data-quiz-stage="success"] .quiz-modal__success-stage { display: flex; }
.quiz-modal__success-icon { color: var(--c-orange-500); }

/* Stage 3 — discount offer (тільки для context='individual*'). */
.quiz-modal__discount-stage {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
}
.quiz-modal[data-quiz-stage="discount"] .quiz-modal__form-stage { display: none; }
.quiz-modal[data-quiz-stage="discount"] .quiz-modal__discount-stage { display: flex; }
.quiz-modal__discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--c-orange-500);
  color: var(--c-white);
  font-weight: var(--fw-heavy);
  font-size: 28px;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-md);
}
.quiz-modal__discount-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-self: stretch;
}
@media (min-width: 640px) {
  .quiz-modal__discount-actions { flex-direction: row; justify-content: center; }
  .quiz-modal__discount-actions .btn { flex: 1; max-width: 240px; }
}

/* Tests page — "нічого не знайдено" повідомлення при порожньому пошуку. */
.tests__empty {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5);
  text-align: center;
  font-size: var(--fs-body);
  color: var(--c-body-text);
  background: var(--c-cream);
  border-radius: var(--r-md);
  border: 1px dashed var(--c-border-2);
}
.tests__empty[hidden] { display: none; }

/* ───────────────────────────────────────────────────────────
   Page-fade overlay — мінімалістичний preloader для м'якого
   переходу між сторінками. Рендериться в PHP на КОЖНІЙ сторінці
   з класом is-loading (за замовчуванням видимий). JS прибирає
   is-loading після DOMContentLoaded — оверлей плавно зникає.
   На клік по посиланню JS повертає is-loading — оверлей
   проявляється і браузер починає навігацію. Спінер не
   "замерзає" між сторінками бо елемент завжди в DOM.
   ─────────────────────────────────────────────────────────── */
.page-fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Default: невидимий і не блокує кліки */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility 0s linear .28s;
}
.page-fade.is-loading {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity .28s var(--ease);
}

/* Мінімалістичний спінер у центрі. Зʼявляється з затримкою 400мс —
   якщо сторінка завантажилась швидше, користувач взагалі не побачить
   спінера, лише плавний cream-fade. Це уникає "морgання" спінера
   при швидких переходах між сторінками. */
.page-fade__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--c-orange-100);
  border-top-color: var(--c-orange-500);
  opacity: 0;
  animation: kanapka-spin .8s linear infinite,
             kanapka-spinner-reveal .25s var(--ease) .4s forwards;
}
@keyframes kanapka-spin {
  to { transform: rotate(360deg); }
}
@keyframes kanapka-spinner-reveal {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-fade__spinner { animation: kanapka-spinner-reveal .25s var(--ease) .4s forwards; }
}

/* ── Buy-modal (оплата курсу через WayForPay) ──────────────── */
.buy-modal.buy-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 768px) {
  .buy-modal.buy-modal { align-items: center; padding: 24px; }
}
.buy-modal[hidden] { display: none; }
.buy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(118, 114, 114, .55);
  backdrop-filter: blur(2px);
}
.buy-modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--c-cream);
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  /* Mobile bottom-sheet: висота за контентом, не 100vh (інакше верх із
     хрестиком вилазив над екран і не закрити). dvh враховує адрес-бар. */
  height: auto;
  max-height: 90dvh;
  border-radius: 20px 20px 0 0;
  padding: 28px 16px 24px;
}
@media (min-width: 768px) {
  .buy-modal__dialog { border-radius: 20px; max-height: 92vh; max-height: 92dvh; padding: 40px; }
}
.buy-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  position: absolute;
  top: 16px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--c-title);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.buy-modal__close:hover { background: var(--c-cream-2); }
.buy-modal__head { margin-bottom: var(--sp-4); padding-right: 32px; }
.buy-modal__title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: var(--fw-heavy);
  line-height: 1.2;
  color: var(--c-title);
}
.buy-modal__course {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-orange-500);
}
.buy-modal__form { display: flex; flex-direction: column; gap: var(--sp-3); }
.buy-modal__field { display: flex; flex-direction: column; gap: 6px; }
.buy-modal__label { font-size: var(--fs-body-s); font-weight: var(--fw-semibold); color: var(--c-title); }
.buy-modal__input {
  width: 100%;
  padding: 12px 16px;
  background: var(--c-cream);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-body-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.buy-modal__input:focus {
  outline: none;
  border-color: var(--c-orange-500);
  box-shadow: 0 0 0 3px var(--c-orange-100);
}
.buy-modal__hint { font-size: 13px; color: var(--c-body-text); opacity: .7; }
.buy-modal__feedback { font-size: var(--fs-body-s); min-height: 1em; }
.buy-modal__feedback.is-error   { color: #c0392b; font-weight: var(--fw-semibold); }
.buy-modal__feedback.is-success { color: var(--c-green-500); font-weight: var(--fw-semibold); }
.buy-modal__submit { margin-top: var(--sp-2); }
.buy-modal__small { font-size: 13px; color: var(--c-body-text); opacity: .7; margin: var(--sp-2) 0 0; text-align: center; }

/* Тест: попередження про незаповнені питання + підсвітка питання */
.test-modal__warn {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--c-orange-100);
  color: var(--c-orange-600, #c44614);
  border-radius: var(--r-md);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.test-q--missing {
  outline: 2px solid var(--c-orange-500);
  outline-offset: 6px;
  border-radius: 8px;
  transition: outline-color .2s ease;
}

/* ── Quiz landing (рекламна сторінка-квіз) ─────────────────── */
/* Standalone-сторінка квіза: без хедера/футера, картка по центру екрана. */
.quiz-page { background: var(--c-cream); }
.quiz-page__main { min-height: 100vh; min-height: 100dvh; display: flex; }
.quizl {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 56px) var(--container-pad, 16px);
  background: var(--c-cream);
  /* мʼякий брендовий акцент на фоні (без зайвого шуму) */
  background-image:
    radial-gradient(60% 50% at 0% 0%, color-mix(in srgb, var(--c-yellow-500) 14%, transparent) 0, transparent 60%),
    radial-gradient(55% 45% at 100% 100%, color-mix(in srgb, var(--c-orange-500) 12%, transparent) 0, transparent 60%);
}
.quizl__card {
  width: 100%;
  max-width: 660px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 24px 60px -28px rgba(20, 20, 40, .25);
}
.quizl__brand { display: flex; justify-content: center; margin-bottom: var(--sp-4); }
.quizl__brand-logo { height: 38px; width: auto; display: block; }
.quizl__head { text-align: center; margin-bottom: var(--sp-5); }
.quizl__title { margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); font-weight: var(--fw-heavy); line-height: 1.2; color: var(--c-title); }
.quizl__intro { margin: 0 auto; max-width: 46ch; font-size: var(--fs-body); line-height: 1.5; color: var(--c-body-text); }

.quizl__progress { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--sp-5); }
.quizl__progress-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-border-2); transition: background-color .25s ease, transform .25s ease; }
.quizl__progress-dot.is-active { background: var(--c-yellow-500); transform: scale(1.15); }

.quizl__step { display: none; border: 0; margin: 0; padding: 0; }
.quizl__step.is-active { display: block; }

/* Мʼякий fade при переході між кроками/стейджами попапів (не різко). */
@keyframes kmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.quizl:not(.quizl--single) .quizl__step.is-active { animation: kmFade .28s ease both; }
.quiz-modal[data-quiz-stage="success"]  .quiz-modal__success-stage,
.quiz-modal[data-quiz-stage="discount"] .quiz-modal__discount-stage { animation: kmFade .28s ease both; }
@media (prefers-reduced-motion: reduce) {
  .quizl:not(.quizl--single) .quizl__step.is-active,
  .quiz-modal__success-stage, .quiz-modal__discount-stage { animation: none; }
}

/* Плавне відкриття/закриття quiz-modal (раніше зʼявлявся/зникав різко).
   Контейнер фейдиться, діалог виїжджає: знизу-вгору на моб. (bottom-sheet),
   легкий fade+scale на десктопі. JS додає .is-open наступним кадром. */
.quiz-modal, .buy-modal { opacity: 0; transition: opacity .25s ease; }
.quiz-modal.is-open, .buy-modal.is-open { opacity: 1; }
.quiz-modal__dialog, .buy-modal__dialog {
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.quiz-modal.is-open .quiz-modal__dialog,
.buy-modal.is-open .buy-modal__dialog { transform: none; }
@media (min-width: 768px) {
  .quiz-modal__dialog, .buy-modal__dialog { transform: translateY(14px) scale(.985); }
  .quiz-modal.is-open .quiz-modal__dialog,
  .buy-modal.is-open .buy-modal__dialog { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-modal, .quiz-modal__dialog, .buy-modal, .buy-modal__dialog { transition: none; }
}
/* Single-режим (get-free-lesson): усі питання + контакти одразу на одному екрані. */
.quizl--single .quizl__step { display: block; }
.quizl--single .quizl__step + .quizl__step { margin-top: var(--sp-6); }
.quizl__q { font-size: 19px; font-weight: var(--fw-heavy); line-height: 1.35; color: var(--c-title); margin-bottom: var(--sp-4); padding: 0; }
.quizl--single .quizl__q { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }

.quizl__options { display: flex; flex-direction: column; gap: var(--sp-3); }
.quizl__option { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--c-border-2); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.quizl__option:hover { border-color: var(--c-orange-500); background: var(--c-orange-100); }
.quizl__option input { position: absolute; opacity: 0; pointer-events: none; }
.quizl__option-box { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border-2); transition: border-color .15s, background .15s; }
.quizl__option input:checked ~ .quizl__option-box { border-color: var(--c-orange-500); background: radial-gradient(circle, var(--c-orange-500) 0 6px, transparent 7px); }
.quizl__option input:checked ~ .quizl__option-label { font-weight: var(--fw-bold); }
.quizl__option:has(input:checked) { border-color: var(--c-orange-500); background: var(--c-orange-100); }
.quizl__option-label { font-size: var(--fs-body); color: var(--c-title); }

/* Фото-варіанти (коти зі старого сайту): сітка карток фото зверху + підпис знизу.
   На mobile — 2 в ряд, на ширших екранах автозаповнення. */
.quizl__options--photo { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 560px) {
  .quizl__options--photo { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.quizl__option--photo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 16px; border-width: 2px; text-align: center; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) and (pointer: fine) { .quizl__option--photo:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(20,20,40,.3); } }
.quizl__option--photo .quizl__option-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.quizl__option--photo .quizl__option-box { display: none; }
.quizl__option--photo .quizl__option-label { padding: 12px 10px; font-weight: var(--fw-semibold); }
.quizl__option--photo:has(input:checked) { box-shadow: 0 0 0 2px var(--c-orange-500); }

.quizl__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.quizl__label { font-size: var(--fs-body-s); font-weight: var(--fw-semibold); color: var(--c-title); }
.quizl__input { width: 100%; padding: 12px 16px; background: var(--c-cream); border: 1px solid var(--c-border-2); border-radius: var(--r-md); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-body-text); transition: border-color .15s, box-shadow .15s; }
.quizl__input:focus { outline: none; border-color: var(--c-orange-500); box-shadow: 0 0 0 3px var(--c-orange-100); }

.quizl__feedback { font-size: var(--fs-body-s); min-height: 1em; margin-top: var(--sp-3); }
.quizl__feedback.is-error { color: #c0392b; font-weight: var(--fw-semibold); }

.quizl__nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.quizl__nav .btn { flex: 1; }
.quizl__back { flex: 0 0 auto !important; }
/* .btn задає display:inline-flex і перебиває браузерний [hidden]{display:none},
   тому JS-приховані кнопки (Назад/Далі/Отримати) інакше лишались видимі й
   вилазили за край екрана. Примусово ховаємо приховані. */
.quizl__nav .btn[hidden] { display: none !important; }

/* На екрані подяки ховаємо форму, заголовок і прогрес (лишається логотип + подяка). */
.quizl--done-shown .quizl__form,
.quizl--done-shown .quizl__head,
.quizl--done-shown .quizl__progress { display: none !important; }
.quizl__done { text-align: center; padding: var(--sp-4) 0; }
.quizl__done-icon { color: var(--c-green-500); margin-bottom: var(--sp-3); display: flex; justify-content: center; }
.quizl__done-title { margin: 0 0 10px; font-size: clamp(22px, 3vw, 28px); font-weight: var(--fw-heavy); line-height: 1.2; color: var(--c-title); }
.quizl__done-text { margin: 0 auto var(--sp-5); max-width: 44ch; font-size: var(--fs-body); line-height: 1.55; color: var(--c-body-text); }

/* Соцмережі на екрані подяки — кнопки в бренд-кольорах. */
.quizl__socials { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 520px) { .quizl__socials { grid-template-columns: repeat(4, 1fr); } }
.quizl__social {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 10px; border-radius: 16px; border: 1px solid var(--c-border-2);
  color: var(--c-title); text-decoration: none; font-weight: var(--fw-bold); font-size: var(--fs-body-s);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.quizl__social svg, .quizl__social img { display: block; }
@media (hover: hover) and (pointer: fine) { .quizl__social:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(20,20,40,.4); } }
.quizl__social--yt { color: #ff0033; }
.quizl__social--yt:hover { border-color: #ff0033; background: color-mix(in srgb, #ff0033 8%, transparent); }
.quizl__social--ig:hover { border-color: #c13584; background: color-mix(in srgb, #c13584 8%, transparent); }
.quizl__social--tg { color: #2aabee; }
.quizl__social--tg:hover { border-color: #2aabee; background: color-mix(in srgb, #2aabee 8%, transparent); }
.quizl__social--fb:hover { border-color: #1877f2; background: color-mix(in srgb, #1877f2 8%, transparent); }
.quizl__social--tt:hover { border-color: #111; background: color-mix(in srgb, #111 6%, transparent); }
.quizl__social span { color: var(--c-title); }