/* components.css — sirka-courses · shared component norms
   PAGE-SCAFFOLD owns this file. It holds ONLY norms that more than one section needs, so
   eleven section stylesheets do not each re-derive them. Anything specific to one section
   belongs in css/sections/<slug>.css.

   Deliberately NOT here: section layout, card styles, accordion/slider internals (those come
   from css/templates/*), and any colour or size that only one section uses. */

/* ---------- shared inline-SVG symbols (sprite lives at the top of index.html) ----------
   Icons get an explicit box so a failed/empty <use> can never balloon to the UA's 300x150
   broken-image size. `color` drives the paint: every symbol paints currentColor. */
.icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: inherit;
  fill: currentColor;
}
.icon--arrow, .icon--arrow-line { width: 14px; height: 14px; }
.icon--arrow-line { fill: none; }          /* #i-arrow-line is a 2px STROKED glyph */
.icon--sirka { width: 16px; height: 27.92px; }

/* ---------- typography roles used by more than one section ----------
   Each maps 1:1 onto a brief 4.3 token row. A section that needs a different size declares
   its own scoped token; it must NOT redefine these. */
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-h2);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--c-heading);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--c-ink);
}

.t-btn {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-btn);
  line-height: var(--lh-btn);        /* normal — Figma AUTO leading, not 100% (FD-175) */
  letter-spacing: var(--ls-btn);
}

/* ---------- interactive norms ----------
   The page draws NO hover state anywhere (brief 4.4: no effects, no state variants beyond the
   En/Ru 30% pair). So hover is a restrained, non-layout-affecting opacity change only, and
   NOTHING here changes geometry — a hover that moves a box would break the gate's measurements
   and was never drawn. */
.is-clickable, a[href], button:not([disabled]) { transition: opacity 0.2s ease; }
@media (hover: hover) {
  a[href]:hover, button:not([disabled]):hover { opacity: 0.8; }
}
button[disabled], [aria-disabled="true"] { cursor: default; opacity: 1; }

/* Every control the design draws as a pill uses the same radius token; radius is otherwise 0
   everywhere on this page (brief 4.4a). */
.pill { border-radius: var(--r-pill); }

/* ---------- mobile menu panel — DRAWN at 1182:953 (375x667) ----------
   PAGE-LEVEL because js/nav.js owns its behaviour, but the MARKUP is emitted by the `hero`
   section (it owns the mobile bar 3001:3158). Every number below is off the node; see the
   markup comment in sections/hero.html for what this replaced and why.
   Contract the hero build must match:
     button.hero__burger[aria-controls="mobile-menu"][aria-expanded]
     #mobile-menu.mobile-menu[hidden] > .mobile-menu__bar   > .hero__brand, .mobile-menu__close
                                      > .mobile-menu__body  > .mobile-menu__cta,
                                        .mobile-menu__foot  > .mobile-menu__theme, .__lang */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 0;                        /* the bar and the body carry their own, as drawn */
  background: var(--c-ink-alt);      /* #252627 — the panel fill AND the mobile bar's own */
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }

/* 1182:954 — 375x64, padding [10,20], SPACE_BETWEEN. 10 + 44 + 10 = 64, so the drawn bar height
   is the 44px tap target plus its padding and needs no min-height of its own. */
.mobile-menu__bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 10px 20px;
}

/* .hero__burger carries the 44x44 box and the white ink; the GLYPH inside is a ✕, not the
   hamburger the node draws (user ruling 2026-08-13 — see page-decisions.md). 24px inside the
   44px box is the same inset the bar's own glyph has, so the button's hit area and position are
   untouched by the swap. #i-close is a 2px STROKED symbol: it needs fill:none + a stroke, or it
   paints as a filled blob. */
.mobile-menu__close { flex: 0 0 auto; }
.mobile-menu__close-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
}

/* 1182:963 — 335x533 at y=94. The 30px top padding IS the drawn 94 - 64 gap, and 40px is the
   clearance under the foot block (94 + 533 = 627 of 667). SPACE_BETWEEN is what pins the foot
   to the bottom on a tall phone instead of letting it float under the CTA. */
.mobile-menu__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding: 30px 20px 40px;
}

/* 1182:965 — the desktop bar CTA at its drawn mobile size. --text-body already resolves to 14px
   below 768, so only the two per-layer values are set: the label→arrow gap (5 here, 10 on the
   bar) and the AUTO-leading ratio 18/14 (the bar's is 20/16). */
.mobile-menu .mobile-menu__cta { gap: 5px; }
.mobile-menu__cta .hero__bar-cta-label { line-height: 1.2857; }

/* 1182:968 — 72x71.5 */
.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* 1182:969 — the desktop toggle (3001:294, 64x28) drawn at exactly 1.125x. The INSIDE-stroke
   arithmetic is the desktop one scaled with it: Figma padding 4.5 with a 1.125 INSIDE stroke
   becomes CSS padding 3.375 + a 1.125 border, because a CSS border ADDS to the padding box
   (brief-page.md 4.4a Trap 2). 1.125 + 3.375 + 31.5 + 31.5 + 3.375 + 1.125 = 72 exactly, and
   1.125 + 3.375 + 22.5 + 3.375 + 1.125 = 31.5.
   Every rule that re-sizes a borrowed .hero__* component is written at (0,2,0) via the panel
   class, NOT at (0,1,0): css/sections/hero.css is linked AFTER this file, so a bare
   `.mobile-menu__theme` ties with `.hero__theme` and loses. Measured — the toggle came back
   64x28 and the En/Ru pair 14px, i.e. the desktop values, with no error anywhere. */
.mobile-menu .mobile-menu__theme {
  width: 72px;
  height: 31.5px;
  padding: 3.375px;
  border-width: 1.125px;
}
.mobile-menu__theme .hero__theme-chip { width: 31.5px; height: 22.5px; }
.mobile-menu__theme .hero__theme-icon { width: 15.75px; height: 15.75px; }

/* 1182:978/979/980 — drawn 20px here, and 20px on the desktop bar too. --text-btn is a mobile
   ramp that resolves to 14px at 375, so the pair has to be pinned or it draws 30% small in the
   one band where this panel is the only place it appears. */
.mobile-menu .mobile-menu__lang { font-size: 20px; }

@media (min-width: 1024px) {
  /* The drawn desktop bar carries these controls inline, so the panel cannot exist here. */
  .mobile-menu { display: none !important; }
}

/* ---------- lead popup — DRAWN: desktop 1093:1900 (466x625) / mobile 1182:1131 (335x488) ----
   PAGE-LEVEL, like the menu panel: js/popup.js owns the behaviour, the `hero` partial emits the
   markup. Two drawn layers, so two bands — mobile-first, desktop from 1024. There is no
   pseudo-tablet block here on purpose: the dialog is a FIXED-width overlay, not a section that
   has to interpolate across a fluid content box, and both drawn widths are absolute.

   Contract:
     [data-popup-open="lead-popup"]            any trigger, anywhere on the page
     #lead-popup.popup[hidden] > .popup__box   the dialog
     [data-popup-close]                        any close affordance inside it */
.popup {
  position: fixed;
  inset: 0;
  z-index: 100;                      /* above the menu panel's 90 — a trigger lives inside it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;                     /* 1182:1130 padding [20,20,20,20] */
  /* #ffffffb2 + BACKGROUND_BLUR 11 on BOTH layers (1093:1899 / 1182:1130). A WHITE 70% wash, not
     the black scrim this pattern usually gets — written as drawn. b2 = 178/255 = 0.698. */
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.popup[hidden] { display: none; }
.popup.is-open { opacity: 1; }

/* 1182:1131 — fill #232323 (--c-ink, NOT the --c-ink-alt #252627 the menu panel uses; the two
   really are different inks on this page). alignItems CENTER is what puts the close button in the
   middle of the top edge: it is a 30x30 child of a centre-aligned column, not a corner overlay. */
.popup__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 335px;
  max-width: 100%;
  padding: 20px;
  background: var(--c-ink);
  color: #ffffff;
  /* Not drawn, and not decoration: the dialog is 488 tall in a 667 frame, so a 600px-tall phone
     in landscape would push the submit button off-screen with no way to reach it. */
  max-height: 100%;
  overflow-y: auto;
}

/* 1093:1901 / 1182:1132 `Frame 59` — the same component faq draws for a CLOSED row, so the glyph
   is that SVG verbatim: ring 27x27 rx13.5 stroke 3, plus the cross. */
.popup__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  color: #ffffff;
  cursor: pointer;
}
.popup__close-icon { display: block; width: 30px; height: 30px; }

/* 1093:1906 / 1182:1137 — vertical, gap 10 */
.popup__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.popup__kicker {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;                   /* 1182:1139 · desktop 26 */
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #ffffff;
}

/* 1093:1909 / 1182:1140 — a 30% white plate, padding [4,6], radius 0. `align-self` because the
   parent centres nothing else: the plate HUGS its text (158 / 122 wide), it is not a full row. */
.popup__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  background: var(--c-white-30);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;                   /* 1182:1141 · desktop 16 */
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #ffffff;
}

.popup__lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;                   /* 1182:1142 · desktop 16 */
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.6);   /* #ffffff99 = 153/255 */
}

/* 1182:1143 — the form is the second and third stacks (gap 25 mobile / the dialog's own 30 on
   desktop, where 1093:1912 and 1093:1925 are siblings of the head). One <form> wrapping both is
   the correct DOM for a form and matches the drawn spacing at both sizes. */
.popup__form {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
}

/* 1093:1912 gap 36 / 1182:1144 gap 15 */
.popup__fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

/* Each field is a label-as-placeholder over a 2px rule (1093:1916 `Line 17`, stroke #ffffff 2,
   width = the full content box). The <label> is visually hidden so the accessible name survives
   while the drawn text stays where Figma puts it — the placeholder. Trap 2 again: the rule is a
   zero-height Figma line ON the frame's bottom edge, so the CSS gap is (drawn gap - 2px border):
   mobile 11 - 2 = 9, desktop 16 - 2 = 14.
   The two layers disagree about what sits UNDER that rule, and the difference is real, not
   rounding. Desktop hugs: label 20 + gap 16 = 36 = the drawn frame exactly. Mobile draws a
   FIXED 34 with the rule at y=29, i.e. 5px of clear space below it — so the visible distance
   from one rule to the next label is 20, not the 15 the gap alone gives. Built as a min-height
   rather than a bigger gap, because the gap is the drawn number and the slack belongs to the
   field. Measured: without it the dialog came out 473.16 tall against the drawn 488 — exactly
   3 x 5px. */
.popup__field {
  width: 100%;
  min-height: 34px;
}

.popup__input {
  display: block;
  width: 100%;
  padding: 0 0 9px;
  background: none;
  border: 0;
  border-bottom: 2px solid #ffffff;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;                   /* 1182:1147 · desktop 16 */
  /* FD-175 again: the export says `100%` on every field label, and the DRAWN boxes are 18 at 14px
     and 20 at 16px — i.e. AUTO leading, 1.2857 / 1.25. Written as `1` first and measured: the
     field came out 37 instead of 36, because with a line-height under the font's own metric Blink
     does not shrink an <input> below its content area (Onest ~1.44em -> 21px + 14 + 2 = 37). The
     drawn ratio gives exactly 36. */
  line-height: 1.2857;               /* 18/14 · desktop 20/16 = 1.25 */
  letter-spacing: -0.03em;
  color: #ffffff;
}
.popup__input::placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; }
.popup__input:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

/* 1093:1925 gap 20 / 1182:1157 gap 10 */
.popup__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* 1093:1926 / 1182:1158 — white surface, #252627 label AND arrow ink, padding [15,35],
   SPACE_BETWEEN. 15 + 18 + 15 = 48 mobile · 15 + 26 + 15 = 56 desktop, which is Figma AUTO
   leading (18/14, 26/20) — `line-height: 1` would shorten both boxes by 4px and 6px. */
.popup__submit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 35px;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  color: var(--c-ink-alt);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;                   /* 1182:1159 · desktop 20 */
  line-height: 1.286;                /* 18/14 · desktop 26/20 = 1.3 */
  letter-spacing: -0.03em;
  cursor: pointer;
}
/* The label genuinely differs per layer — `Записаться` mobile (1182:1159) vs `Записаться на
   звонок` desktop (1093:1927). Both ship, CSS picks, same as hero's stat labels. */
.popup__submit-label--d { display: none; }

.popup__note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;                   /* 1182:1161 · desktop 14 */
  line-height: 1.2;
  letter-spacing: 0;                 /* drawn 0%, unlike everything above it */
  color: rgba(255, 255, 255, 0.6);
}

/* ---- DESKTOP 1024+ — the 1093:1900 layer -------------------------------------------------- */
@media (min-width: 1024px) {
  .popup__box {
    width: 466px;
    padding: 40px 30px;              /* -> content width 406 */
  }
  .popup__kicker { font-size: 26px; }
  .popup__badge  { font-size: 16px; }
  .popup__lead   { font-size: 16px; }
  .popup__form   { gap: 30px; }      /* on this layer the two stacks are the dialog's own gap */
  .popup__fields { gap: 36px; }
  .popup__field  { min-height: 36px; }   /* 20 + 16, and the desktop frame hugs exactly that */
  .popup__input  { padding-bottom: 14px; font-size: 16px; line-height: 1.25; }
  .popup__foot   { gap: 20px; }
  .popup__submit { font-size: 20px; line-height: 1.3; }
  .popup__submit-label--d { display: inline; }
  .popup__submit-label--m { display: none; }
  .popup__note   { font-size: 14px; }
}

/* ---------- tariff popup — DRAWN at 1093:932 (466x688) --------------------------------------
   The same dialog as #lead-popup with one extra block, so it reuses every .popup__* rule above
   and only adds what 1093:932 draws on top. Below 1024 there is NO drawn layer: the sizes are
   carried over from the lead popup's own mobile node (1182:1131) — same 335 box, same 20px
   padding, same 26->18 / 16->14 / 16->12 / 20->14 type steps. The one value not derived that way
   is the amount, which uses the page's own --text-price (32 mobile / 42 desktop, both drawn in
   the tariff card). */

/* 1093:937 — heading pair + price block, gap 24 (the dialog's own gap is 30) */
.popup__head--tariff { gap: 24px; }

/* 1093:938 — the kicker/lead pair keeps the 10px gap the lead popup's head has */
.popup__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* 1093:942 */
.popup__price {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* 1093:943 — alignItems MAX: the struck price and the badge sit on the amount's BASELINE box,
   not centred on it. flex-end is that. */
.popup__price-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

/* 1093:944 */
.popup__amount-group {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.popup__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-price);      /* 42 at 1520 = the drawn 1093:945; 32 at 375 */
  line-height: var(--lh-price);      /* 1.2 */
  letter-spacing: var(--ls-price);   /* per-layer, -6.25% mobile / -4.76% desktop */
  color: #ffffff;
  white-space: nowrap;
}

/* 1093:946 — a real 4px-padded box around the struck price (4 + 14 + 4 = 22), the same shape the
   tariff card uses. Not a margin: the padding is what lines its box up with the amount's bottom. */
.popup__was-wrap {
  display: flex;
  align-items: center;
  padding-block: 4px;
}
.popup__was {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;                   /* 1093:947 draws 16; mobile follows the lead popup's step */
  line-height: 0.88;                 /* drawn 88%, an unusually tight one — kept */
  letter-spacing: -0.04em;
  text-decoration: line-through;     /* Figma textDecoration: STRIKETHROUGH */
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* 1093:948 — same 30% white plate as .popup__badge, pushed flush right (x 288 + 118 = 406) */
.popup__save {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 6px;
  background: var(--c-white-30);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;                   /* 1093:949 draws 16 */
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* 1093:950 — a 1px #ffffff33 OUTLINE, not a fill. padding 8 all round; 8 + 19 + 8 = 35 at the
   drawn 16px. Trap 2 does not apply: the Figma stroke is CENTER on a frame with no fill, and the
   drawn height already counts it. */
.popup__price-note {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;                   /* 1093:951 draws 16 */
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #ffffff;
}
/* A tariff with no note (Partner draws none) must not leave an empty outlined box — js/popup.js
   hides a slot it could not fill. */
.popup__price-note[hidden] { display: none; }

@media (min-width: 1024px) {
  .popup__was          { font-size: 16px; }
  .popup__save         { font-size: 16px; }
  .popup__price-note   { font-size: 16px; }
}

/* 1203:949 — the Partner instance draws the SIRKA mark before the name (1203:983, 20x36, gap 10),
   which makes that row 36 tall instead of 31. The other two tariffs have no mark, and the row
   collapses back to the kicker's own line box. */
.popup__title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.popup__mark {
  flex: 0 0 auto;
  display: block;
  width: 14px;                       /* 20 at 1024+; below it follows the 26->18 kicker step */
  height: 25px;
}
.popup__mark[hidden] { display: none; }
.popup__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (min-width: 1024px) {
  .popup__mark { width: 20px; height: 36px; }
}