/* DUK — frame `DUK` (347:12809), canvas 1728x1475. Offsets are frame-absolute values from
   design/figma-cache/frames/duk.json, rebased on the section start (the header bottom, y72);
   the footer sits at 1115, so the section is 1043px tall at minimum.
   Text tops are ink tops (Figma cap-trims), so each block's CSS top is the ink top minus the
   half-leading of its own line. */

.faq { position: relative; min-height: 1043px; padding-bottom: 121px; }

/* ---- Hero band: Rectangle 9 (image) + Rectangle 10 (#2c2420 @50%) @0,72 — 1728x400 ---- */
.faq__hero { position: relative; height: 400px; overflow: hidden; }
.faq__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq__hero::after {
  content: ""; position: absolute; inset: 0; background: var(--ink); opacity: 0.5;
}
.faq__eyebrow {                                       /* 366:4601 @696,210 — 16/20.8 ls3.2 */
  position: absolute; left: 0; right: 0; top: 133.1px; margin: 0; text-align: center;
  text-transform: uppercase; color: var(--cream);
  font-weight: 400; font-size: 16px; line-height: 20.832px; letter-spacing: 3.2px; z-index: 1;
}
.faq__title {                                         /* 366:4599 @340,261 — 80/72 display */
  position: absolute; left: 0; right: 0; top: 189px; margin: 0; text-align: center;
  white-space: nowrap;
  color: var(--cream); font-family: var(--font-display);
  font-weight: 500; font-size: 80px; line-height: 72px; letter-spacing: -0.16px; z-index: 1;
}

.faq__crumbs {                                        /* Group 5360 @295,488 — 12/15.6 */
  margin: 16px 0 0 295px; height: 16px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.faq__crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.faq__crumbs a:hover { color: var(--accent); }
.faq__crumbs [aria-current] { color: var(--muted); font-weight: 400; }
.faq__crumbs img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

/* ---- Section strip: Group 5704 @294,544 — 16/20.8 UPPER ls1.6. Anchors to the six
       sections; they wrap inside the 1140 container (the comp drew three, gap 64). ---- */
.faq__cats {
  margin: 35.1px 0 0 294px; padding: 0; list-style: none; max-width: 1140px;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 40px;
}
.faq__cat {
  /* The comp's active-tab ink: an anchor is never an "inactive tab", and --muted fails AA. */
  position: relative; display: block; text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 16px; line-height: 20.832px; letter-spacing: 1.6px;
  transition: color var(--t-tint) var(--ease-out);
}
.faq__cat:hover, .faq__cat:focus-visible { color: var(--ink); }

/* ---- Body: Group 5523 (accordion, 752) @294,603 beside Group 5705 (card, 267) @1167 ---- */
.faq__grid {
  margin: 33.3px 0 0 294px; display: grid; grid-template-columns: 752px 267px;
  column-gap: 121px; align-items: start;
}
/* Each section under its own h2; an anchor jump clears the sticky header. */
.faq__section { scroll-margin-top: 104px; }
.faq__section + .faq__section { margin-top: 72px; }
.faq__heading {                                       /* 367:4745 @294,603 — 32/41.7 ls3.2 */
  margin: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}

.faq__list { margin: 0; padding: 0; list-style: none; }
.faq__list > li { padding: 27.18px 0 25.42px; border-bottom: 1px solid var(--shell); }
/* comment 51 — Group 5516 367:4746: rule → question cap 32, question cap → rule 32 (a closed
   row is 77), question cap → answer cap 38, the answer's last line → rule 25.44 (Vector 48 @795).
   18/23.4 and 16/24 line boxes sit 4.32 / 5.44 above their caps. */
.faq__list > li:first-child { padding-top: 25.82px; }  /* question cap 665 under the heading */
.faq__list > li:has(> .faq__item.is-open:not(.is-closing)) { padding-bottom: 24.94px; }
.faq__list > li { transition: padding-bottom var(--t-move) var(--ease-out); }   /* R2-24: rides the slide */
.faq__list > li:last-child { border-bottom: 0; padding-bottom: 0; }

.faq__h { margin: 0; font: inherit; }
.faq__q {                                             /* 367:4751 @294,665 — 18/23.4 */
  width: 100%; padding: 0; border: 0; background: none; text-align: left;
  font-family: inherit; letter-spacing: inherit;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  cursor: pointer; list-style: none; color: var(--accent);
  font-weight: 300; font-size: 18px; line-height: 23.4px;
  transition: color var(--t-tint) var(--ease-out);
}
.faq__q:hover, .faq__q:focus-visible { color: var(--ink); }
.faq__chev {                                          /* Vector 43 — 14x7, right edge of 752 */
  flex: none; width: 14px; height: 7px; margin-top: 7.32px;   /* cap + 3 */
  transition: transform var(--t-move) var(--ease-out);
}
.faq__item.is-open:not(.is-closing) .faq__chev { transform: rotate(180deg); }

.faq__a {                                             /* 367:4752 @294,703 — 16/24, 750 wide */
  margin-top: 13.48px; width: 750px; color: var(--ink);
  font-weight: 300; font-size: 16px; line-height: 24px;
}
/* R2-24: motion.js slides the answer open and shut between its measured height and 0 (gap
   included); at rest the height is auto, so these only ever run during a slide. */
.faq__a {
  transition: height var(--t-move) var(--ease-out), margin-top var(--t-move) var(--ease-out),
    opacity var(--t-tint) var(--ease-out);
}
.faq__item.is-sliding > .faq__a { overflow: hidden; }
/* Folded only once motion.js runs: with JS off every answer stays open. */
.js .faq__item:not(.is-open) > .faq__a { display: none; }
.faq__a > :first-child { margin-top: 0; }
.faq__a p { margin: 0 0 16px; }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a ul, .faq__a ol { margin: 0 0 16px; padding-left: 20px; }
.faq__a a { color: var(--accent); text-decoration: underline; }
.faq__empty { margin: 24.9px 0 0; color: var(--muted); }

/* ---- „Neradote atsakymo?“ card: Group 5705 @1167,603 — 267x242 ---- */
.faq__help {
  /* min-height, not height: the comp's copy is two lines, an admin-edited (or wrapped-at-1920)
     third ran the text into the CTA. The card grows instead. */
  position: relative; margin-top: 9.8px; width: 267px; min-height: 242px; box-sizing: border-box;
  padding: 23px; background: var(--cream); border: 1px solid var(--sand);
  border-radius: var(--r-badge);
}
.faq__help-title {                                    /* 435:5599 @1191,635 — 24/31.2 ls2.4 */
  margin: 0.65px 0 0; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
}
.faq__help-text {                                     /* 435:5605 @1191,707 — 14/22, 2 lines */
  margin: 10.75px 0 0; color: var(--ink);
  font-weight: 300; font-size: 14px; line-height: 22px; letter-spacing: -0.05px;
  /* V19: the comp's 2nd line fills 218.4 of the 219 box — 0.6px of slack, so every zoomed
     width wrapped „padėti” onto a third line. 20px of the card’s 23px padding is lent to
     the line (at a 0.47 zoom the run renders ~7% wider); the comp’s break stays. */
  margin-right: -20px;
}
.faq__help-cta {                                      /* Frame 2 @1191,763 — 219x50 pill */
  /* In FLOW, 18.2px under the two-line text's line box (it ends at 744.8, the pill at 763)
     — same place on the comp, pushed down by a longer string. */
  margin-top: 18.2px;
  display: flex; align-items: center; justify-content: center; height: 50px; border-radius: var(--r-pill); background: var(--ink); color: var(--cream);
  text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 20.832px;
  transition: background var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.faq__help-cta:hover, .faq__help-cta:focus-visible { background: var(--ink-hover); transform: translateY(var(--lift)); }

/* ---- Mobile: no comp for this frame — a declared reflow (design/DEVIATIONS.md).
       One column inside 16px gutters; the category strip scrolls sideways. ---- */
@media (max-width: 767px) {
  .faq { min-height: 0; padding-bottom: 48px; }
  .faq__hero { height: 260px; }
  .faq__eyebrow { top: 100px; font-size: 12px; letter-spacing: 2.4px; padding: 0 16px; }
  .faq__title {
    left: 0; right: 0; top: 132px; width: auto; padding: 0 16px;
    /* The 1728 one-liner is 507px wide at 40px and was clipped mid-word; no 360 frame draws
       this hero, so it takes the 360 comps' own display size for a long line (32/48 —
       `Pažink save artimiau.` 254:1762) and wraps: two lines in LT and EN (DEVIATIONS.md). */
    font-size: 32px; line-height: 48px; white-space: normal;
  }
  .faq__crumbs { margin: 16px; }
  /* Six sections do not fit one row: one anchor per line, each a 40px tap row. */
  .faq__cats { margin: 4px 16px 0; flex-direction: column; gap: 0; }
  .faq__cat { padding: 9.6px 0; }
  .faq__q { padding: 8.5px 0; margin: -8.5px 0; }    /* 23px rows -> 40px hits, ink unmoved */
  .faq__grid { margin: 22px 16px 0; grid-template-columns: 1fr; row-gap: 32px; }
  .faq__section + .faq__section { margin-top: 48px; }
  .faq__heading { font-size: 24px; line-height: 32px; letter-spacing: 2.4px; }
  .faq__a { width: auto; }
  /* The CTA is in flow now (see .faq__help-cta), so the 88px that reserved room for the
     absolute pill is gone and its own 49.4px margin does the spacing. */
  .faq__help { position: relative; margin-top: 0; width: auto; min-height: 0; padding-bottom: 23px; }
}