/* faq.css — section 10 of 11 · 3001:703 (desktop 1440x569) / 3001:3978 (mobile 335x717)
   MOBILE-FIRST. Scoped rules only: .faq__* plus scoped overrides of the accordion template
   classes the scaffold already links globally (css/templates/accordion.css). No global selector,
   no :root, no .container, no template stylesheet copy, no custom JS.

   Every number is read off the JSON cache, not the brief prose. The five facts that make both
   columns close on Figma's own totals:
     1. 1px CENTER strokes ship as `padding - 1px` + `border: 1px`. Figma's centred stroke does
        not participate in layout, a CSS border does. Accordion rules: padding-bottom
        calc(pad - 1px) + 1px border -> desktop 15/14/1, mobile 10/9/1. Link underlines:
        padding-bottom 9 + 1px. With that the accordion column is 569 (desktop) / 514 (mobile) and
        the head groups are 342 / 163 EXACTLY. Adding the border on top of the full gap inflates
        every row by 1px and drifts the desktop column 7px.
     2. the desktop 142px column gap is the RESIDUE of `justify-content: space-between`, not a gap
        value: 730 - 588 = 142. The export's `gap: 263` on 3001:703 is inert under SPACE_BETWEEN
        (Figma ignores itemSpacing there) — 263 appears nowhere in this file.
     3. the 10px question -> body gap is `padding-top` on the answer's own child, never on
        `.accordion-answer` and never a `gap` on the item: padding survives `height: 0` and a gap
        applies while collapsed, either of which leaks 10px into all eight closed rows.
     4. per-row `gap` + hug/fill reproduces all 32 question-box widths with zero deltas: row 1
        gap 0 + hug (desktop 648, residue 32), row 2 gap 10 (670 / 305), rows 3-8 gap 30
        (650 / 285). A single uniform gap would manufacture four width deltas.
     5. per-row `align-items` is kept AS DRAWN — rows 1, 3, 4 are flex-start (Figma alignItems
        MIN), rows 2, 5, 6, 7, 8 are center. It mirrors 1:1 across both layers, so it is intent,
        not drift; normalising it shifts five toggles by 3px on desktop and up to 9px on mobile
        (mobile rows 5/8 place the toggle at y=9, rows 3/4 at y=0).

   Fixed px that are DELIBERATELY not clamped: every gap that Figma draws identically on both
   layers — link-to-link 10, question->body 10, row gaps 10/30, the 18x18 arrow. There is no ramp
   to invent when both drawn values agree.

   Section rhythm is PAGE-owned (base.css `section + section`): results -> faq is a drawn 120,
   exactly what the default clamp produces, so this file adds no margin of its own. The one
   exception is the neutralizer immediately below, which restates the page's own token. */

/* ⚠️ TEMPLATE-STYLESHEET COLLISION — a flow defect, not a build defect, and the reason this
   section touches `margin` at all.
   css/templates/accordion.css is linked page-wide by the scaffold and is off limits to a section.
   It still carries the template's own EXAMPLE section class — and that class is literally `.faq`:
       .faq { margin-top: 60px }
       @media (min-width: 1440px) { .faq { margin-top: 160px; display: flex; gap: 38px } }
   Our block class is also `.faq` (the canonical slug), so both rules land on this section.
   `display` / `gap` are harmless: this file declares both in every band and wins on document
   order (css/sections/faq.css is linked after css/templates/accordion.css). `margin-top` is not:
   the page owns section rhythm through `section + section { margin-block-start: var(--section-gap) }`
   at specificity 0-0-2, and `.faq` at 0-1-0 beats it — so left alone this section would ship a
   60px top gap instead of the drawn 50 (mobile) / 120 (desktop), and 160px above 1440.
   The neutralizer therefore restates THE PAGE OWNER'S OWN TOKEN — no faq number is introduced,
   nothing to drift — and `section + .faq` (0-1-1) mirrors the page rule's sibling condition
   exactly, so a first-in-page `.faq` still gets no top margin. */
section + .faq { margin-block-start: var(--section-gap); }

/* ============================================================================
   SCOPED TOKENS — on .faq, never :root (the page owns that file), and declared in ALL THREE
   BANDS. A scoped token missing from the 768-1023 block inherits the MOBILE formula, which keeps
   growing with --max-vw far past its band: that is exactly how ragazzi-pdp2 shipped a badge 2x
   too large across the pseudo-tablet band with 2 of 51 tokens missing.
   `--text-h2` is NOT redeclared here: the one page token this section bends is bent at PROPERTY
   level on .faq__title and set back to var(--text-h2) at 1024, so no desktop number is
   duplicated and the page token is not shadowed (slice 11 D-12).
============================================================================ */
.faq {
  /* head group -> accordion, mobile column only (3001:3978 gap 40) */
  --faq-stack-gap:    clamp(34px, calc(40px + (var(--max-vw) - 375px) * 0.015), 82px);
  /* FAQ h2 -> `Не нашёл свой вопрос?` — 3001:704 gap 60 / 3001:3980 gap 10 */
  --faq-head-gap:     clamp(9px,  calc(10px + (var(--max-vw) - 375px) * 0.015), 20px);
  /* `Не нашёл свой вопрос?` -> link list — 3001:706 gap 60 / 3001:3979 gap 30 */
  --faq-contact-gap:  clamp(26px, calc(30px + (var(--max-vw) - 375px) * 0.015), 61px);
  /* contact title 3001:707 = 54 / 3001:3982 = 28. Its own ramp: no page token carries this pair */
  --faq-contact-size: clamp(24px, calc(28px + (var(--max-vw) - 375px) * 0.015), 57px);
  /* toggle box — Frame 59/60: 30 desktop, 20 mobile */
  --faq-toggle:       clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px);
  /* accordion item padding — 15 desktop / 10 mobile (the -1px for the border is applied below) */
  --faq-item-pad:     clamp(9px,  calc(10px + (var(--max-vw) - 375px) * 0.015), 20px);
}

/* ============================================================================
   MOBILE BAND 0-767 — base, no @media. 3001:3978: one column, gap 40.
   163 (head) + 40 + 514 (accordion) = 717 ✔
============================================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--faq-stack-gap);
}

.faq__head {
  display: flex;
  flex-direction: column;
  gap: var(--faq-head-gap);
}

.faq__contact {
  display: flex;
  flex-direction: column;
  gap: var(--faq-contact-gap);
  width: 100%;
}

/* 10px on BOTH layers (3001:708 = 3001:3983 = gap 10) — fixed, nothing to clamp */
.faq__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 3001:3981 = 36px where the page's other nine mobile h2 are 28. Already decided at page level
   (brief-page 4.3b-3, Tier 1): single-node drift kept AS DRAWN, as a property-level override that
   the desktop block hands straight back to var(--text-h2). `.t-h2` on the element supplies
   family / weight / line-height / letter-spacing / colour per band, so only `font-size` is
   written here and it wins on document order (faq.css is linked after components.css).
   M-base 36 -> M-min round(36*320/375) = 31, M-max round(36*767/375) = 74. */
.faq__title {
  font-size: clamp(31px, calc(36px + (var(--max-vw) - 375px) * 0.015), 74px);
}

/* 3001:3982 / 3001:707 — Oswald 600, UPPER, and #232323 on BOTH layers: it does NOT take the
   desktop heading ink #252627 that the h2 beside it takes, so --c-ink is correct here and
   --c-heading would be a manufactured P1 on desktop.
   `white-space: nowrap` is DRAWN, not invented: the node is a hug box (286x25 mobile, 552x44
   desktop) holding one line, and 552 is also the width of the whole desktop contact block. */
.faq__contact-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--faq-contact-size);
  line-height: 0.88;                 /* real 88%: 25/28 = 0.893, 32/36 = 0.889 (per-node, FD-175) */
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
}

/* 3001:709 / 3001:3984 — the <a> IS the 36 (desktop) / 28 (mobile) box: row 26/18 + a 10px gap to
   `Line 17`, which is a 1px CENTER stroke -> padding-bottom 9 + border-bottom 1. */
.faq__link {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--c-ink);   /* #232323 — NOT the accordion rules' #000 (D-9) */
}

.faq__link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Both labels declare Figma lineHeight "100%" but their boxes are 26/20 = 1.30 and 18/14 = 1.286
   -> that is Figma AUTO, not a real 100%, so `line-height: normal` (FD-175). letter-spacing is a
   genuine 0% on these two nodes while the page --text-btn carries -3%, so the override is real.
   Both overrides are why this is not simply `.t-btn`. */
.faq__link-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-btn);
  /* `normal` is right on MOBILE — it lands on the drawn 28px link row exactly. It is 1px short on
     desktop, where Figma's AUTO leading for Onest 20px is 26 and Blink computes 25, so the two
     contact rows measured 35 against the drawn 36 and the head group 339.73 against 342. The page
     token already carries the measured desktop ratio (`--lh-btn: 1.3`, pinned in tokens.css after
     four sections hit the same 1px); this rule opted out of it by declaring `normal` outright.
     Taking the token back in the desktop band only — FIX-Audit P2, 2026-08-12. */
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* 3001:712 / 3001:718 / 3001:3987 / 3001:3993 — 18x18 on BOTH layers, so there is no ramp to
   invent; it centres in the 26px desktop row exactly as Figma draws it at y=4. The glyph is the
   shared sprite symbol (#i-arrow, 14-unit viewBox) scaled by this box, not a second inline copy.
   NOT `.icon` — that shared class pins 14x14. */
.faq__link-icon {
  flex: 0 0 auto;
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---- the accordion (3001:721 / 3001:3996) --------------------------------- */

/* NO `gap` on the container — ADAPT.md 3a. The 15/10 pitch is item padding, so the toggle stays
   centred against the VISIBLE item box instead of against a top-hugged trigger row. */
.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  padding-top: var(--faq-item-pad);
  padding-bottom: calc(var(--faq-item-pad) - 1px);
  border-bottom: 1px solid var(--c-hairline);   /* #000000 — Line 21-28 */
}

/* ⚠️ NEVER select the items with :first-child / :nth-child(N). accordion.js reads its icons from
   two <template data-accordion-icon> elements that sit as the FIRST children of
   .accordion-container, so `:first-child` matches NOTHING and `:nth-child(2)` matches the second
   <template>. Use the .faq__item--open modifier (item 1) and :nth-of-type(N) — <template> is a
   different element type, so nth-of-type counts the item <div>s correctly. */
.faq__item--open { padding-top: 0; }   /* item 1; the LAST item keeps its border (Line 28) */

.faq__row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;                 /* rows 2, 5, 6, 7, 8 — Figma alignItems CENTER */
  gap: 30px;                           /* rows 3-8; identical on both layers */
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__row--top { align-items: flex-start; }        /* rows 1, 3, 4 — Figma alignItems MIN */
.faq__item:nth-of-type(2) .faq__row { gap: 10px; } /* row 2 — 3001:731 / 3001:4006 */
.faq__item--open .faq__row { gap: 0; }             /* row 1 — hug + space-between residue 32 */

/* rows 2-8 are textAlign JUSTIFIED on both layers and it is visually live on every wrapped row.
   CSS leaves the last line left-aligned, which matches Figma — do NOT add text-align-last. */
.faq__q {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-h5);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-align: justify;
}

/* row 1 is the one drawn LEFT, and its question box HUGS (desktop 648 of 710) */
.faq__item--open .faq__q {
  flex: 0 1 auto;
  text-align: left;
}

/* The icon <span> is appended by accordion.js; in rotate mode it also writes an inline
   `transform: rotate(45deg)` on the open row, which turns the drawn X into the drawn +.
   Rotating the ring is invisible: it is a 27x27 rect with rx 13.5, a true circle. */
.faq__row .accordion-icon {
  flex: 0 0 auto;
  display: block;
  width: var(--faq-toggle);
  height: var(--faq-toggle);
  color: var(--c-ink);                 /* Frame 59/60 stroke = #232323 */
}
.faq__row .accordion-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The disclosure MECHANISM. It is written here on purpose: css/templates/accordion.css carries it
   on the template's own example CSS class (`.faq-answer`), and ADAPT.md requires each section to
   rename that class — so the linked stylesheet does NOT style `.faq__answer`. JS owns `height`;
   never add display:none, never change height from CSS. */
.faq__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* 10px on BOTH layers, on the answer's CHILD (see header note 3) */
.faq__answer > * {
  margin: 0;
  padding-top: 10px;
}

.faq__answer p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-alt);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: justify;
  color: var(--c-ink);
}

/* items 2-8 have no body node on EITHER layer — 7 flagged placeholders, never stripped rows */
.faq__placeholder {
  color: var(--c-ink-70);
  font-style: italic;
}

/* ============================================================================
   PSEUDO-TABLET 768-1023 — INTERPOLATED, nothing is drawn here, and MANDATORY: this band is
   where every real defect of the last two runs lived because no stage measures it.
   Still ONE column — brief-page 7.4: faq is text-beside-text, not a 50/50 image split, so the
   768 split rule does not apply and the column split starts at 1024.
   clamp(M-base, calc(M-base + (max-vw - 768px) * 0.025), D-base)
============================================================================ */
@media (min-width: 768px) {
  .faq {
    /* flat on purpose: the desktop band is a ROW and has no vertical counterpart to
       interpolate toward, so there is no D-base for this one token (slice 11 D-12) */
    --faq-stack-gap:    40px;
    --faq-head-gap:     clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 60px);
    --faq-contact-gap:  clamp(30px, calc(30px + (var(--max-vw) - 768px) * 0.025), 60px);
    --faq-contact-size: clamp(28px, calc(28px + (var(--max-vw) - 768px) * 0.025), 54px);
    --faq-toggle:       clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 30px);
    --faq-item-pad:     clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 15px);
  }

  /* the 36px mobile heading keeps its own ramp through the band, toward the page D-base 96 */
  .faq__title {
    font-size: clamp(36px, calc(36px + (var(--max-vw) - 768px) * 0.025), 96px);
  }
}

/* ============================================================================
   DESKTOP 1024+ — the drawn 2-up split. 3001:703 is layout horizontal / SPACE_BETWEEN /
   alignItems MIN: 588 (head) + 142 (residue) + 710 (accordion) = 1440 ✔
   Widths are PERCENTAGES OF THE CONTENT BOX (brief-page 1.1) so they survive the 1024 seam and
   the --max-vw cap without a second set of numbers: 588/1440 = 40.833%, 710/1440 = 49.306%.
============================================================================ */
@media (min-width: 1024px) {
  .faq {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;

    --faq-head-gap:     clamp(40px, calc(60px * (var(--max-vw) / var(--vw-base))), 76px);
    --faq-contact-gap:  clamp(40px, calc(60px * (var(--max-vw) / var(--vw-base))), 76px);
    --faq-contact-size: clamp(36px, calc(54px * (var(--max-vw) / var(--vw-base))), 68px);
    --faq-toggle:       clamp(20px, calc(30px * (var(--max-vw) / var(--vw-base))), 38px);
    --faq-item-pad:     clamp(10px, calc(15px * (var(--max-vw) / var(--vw-base))), 19px);
  }

  .faq__head { flex: 0 0 40.833%; }   /* 588 / 1440 */
  .faq__list { flex: 0 0 49.306%; }   /* 710 / 1440 — the 142px gap is the space-between residue */

  /* 3001:706 is 552 inside the 588 column: the block is drawn 36px narrower than the column
     (alignItems MIN), which is what puts both link underlines at 552 and not 588. */
  .faq__contact { width: 93.878%; }   /* 552 / 588 */

  /* hand the page token straight back — no desktop number is duplicated here */
  .faq__title { font-size: var(--text-h2); }

  /* Same idea for the contact links: take the page's own measured desktop ratio back instead of
     `normal`, which is 1px short here (25 vs the drawn 26). No number of this section's own. */
  .faq__link-label { line-height: var(--lh-btn); }

  /* 3001:707: the box is 44 for a 54px font because Figma trims it to CAP HEIGHT — 44/54 = 0.815
     is neither a real 100% nor Figma AUTO, and it is the ONLY one of the page's 16 Oswald
     lineHeight "100%" nodes whose box is not an exact multiple of its font size. Ships as
     line-height 1 + the text-box longhands; where the property is unsupported the box is 54
     (+10px), an accepted deviation rather than an invented negative margin. */
  .faq__contact-title { line-height: 1; }
  @supports (text-box-trim: trim-both) {
    .faq__contact-title {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
  }
}