/* ==========================================================================
   KOBIL — FAQs page, Section: faq
   Figma D-FAQ 5882:51676 (1440 frame) / M-FAQ 5882:51603 (393 frame).

   A full-bleed white block that starts directly under the nav pill and runs
   into the footer — no card, no radius, no gap (the page is registered
   `flush`, so `.page` contributes no padding and this section owns its own
   80px inset, exactly like the Figma frame).

   Everything is on the fluid scale: --wN is N px on the 1440 frame, --mN is
   N px on the 393 frame. Below 768 every --wN is remapped onto the phone ramp
   (see the generated css/fluid.css), so the ≤768 block only restates the
   numbers the mobile frame actually changes.

   The design has no raster art: the two hairline-and-type states plus the
   18px plus/minus glyphs in assets/faqs/ are the whole visual inventory. The
   divider `line` node exports as `stroke="#E2E7F2"`, i.e. --navy-40, so it is
   a border here rather than an <img>.
   ========================================================================== */

.sec-faqs-faq {
  display: flex;
  flex-direction: column;
  gap: var(--w60);
  padding: var(--w80);
  background: var(--white);
}

/* ---- Page heading (Figma: Desktop H3 new — Instrument Serif 56/1.3) ---- */

.sec-faqs-faq__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.sec-faqs-faq__container {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
}

/* ---- Category tabs (Figma 6277:52390) ----------------------------------
   Ten pills at 14px semibold overrun the 1280px content width, and the frame
   simply clips them (`overflow-clip` on the parent). Clipping would make the
   last tabs unreachable, so the row scrolls instead — same treatment the
   phone breakpoints of .sec-capabilities__grid and .sec-in-action__grid use.
   `overflow: auto hidden` because `overflow-x: auto` alone resolves
   overflow-y to auto too and adds a stray vertical scrollbar. */

.sec-faqs-faq__tabs {
  display: flex;
  align-items: center;
  gap: var(--w8);
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sec-faqs-faq__tabs::-webkit-scrollbar {
  display: none;
}

.sec-faqs-faq__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: var(--w40);
  padding: 0 var(--w16);
  border: 1px solid var(--navy-60);
  border-radius: var(--w40);
  background: none;
  font-family: var(--font-ui);
  font-size: var(--w14);
  font-weight: 600;
  line-height: var(--w18);
  color: var(--navy-70);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.sec-faqs-faq__tab:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.sec-faqs-faq__tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Selected tab: filled navy pill, white label (Figma I6277:52391) */
.sec-faqs-faq__tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ---- Question list ------------------------------------------------------ */

.sec-faqs-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 1px hairlines above every row plus one under the last (Figma `line` nodes) */
.sec-faqs-faq__item {
  border-top: 1px solid var(--navy-40);
}

.sec-faqs-faq__item:last-child {
  border-bottom: 1px solid var(--navy-40);
}

.sec-faqs-faq__q {
  margin: 0;
}

/* Row: 72px tall in the frame = 71px here + the 1px hairline above it.
   Question is Body L 18/26 Regular #11244A, 20px inner padding. */
.sec-faqs-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w20);
  width: 100%;
  min-height: var(--w71);
  padding: var(--w11) var(--w20);
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    padding var(--dur) var(--ease),
    min-height var(--dur) var(--ease);
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .sec-faqs-faq__trigger[aria-expanded="false"]:hover {
    color: var(--blue-dark);
    font-weight: 600;
    line-height: var(--w24);
  }
}

.sec-faqs-faq__trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: var(--w8);
}

/* Open row: the frames only draw the collapsed state, so the expanded one
   follows the shared faq row component (3110:37844) as the sibling sections
   render it — question goes SemiBold 18/24 and the padding reflows to
   20/20/14 above the answer. */
.sec-faqs-faq__item.is-open .sec-faqs-faq__trigger {
  min-height: 0;
  padding: var(--w20) var(--w20) var(--w14);
  font-weight: 600;
  line-height: var(--w24);
  color: var(--navy);
}

.sec-faqs-faq__q-text {
  flex: 1;
  min-width: 0;
}

/* ---- Plus/minus glyph (18px, crossfades on open) ----------------------- */

.sec-faqs-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: var(--w18);
  height: var(--w18);
}

.sec-faqs-faq__icon::before,
.sec-faqs-faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("/assets/faqs/icon-plus.svg") center / contain no-repeat;
  mask: url("/assets/faqs/icon-plus.svg") center / contain no-repeat;
  transition: opacity var(--dur) var(--ease), transform 0.3s var(--ease);
}

.sec-faqs-faq__icon::after {
  opacity: 0;
  -webkit-mask-image: url("/assets/faqs/icon-minus.svg");
  mask-image: url("/assets/faqs/icon-minus.svg");
}

.sec-faqs-faq__icon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    transform 0.3s var(--ease);
}

.sec-faqs-faq__item.is-open .sec-faqs-faq__icon::before {
  opacity: 0;
  transform: rotate(90deg);
}

.sec-faqs-faq__item.is-open .sec-faqs-faq__icon::after {
  opacity: 1;
}

.sec-faqs-faq__icon-minus {
  opacity: 0;
}

.sec-faqs-faq__item.is-open .sec-faqs-faq__icon-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.sec-faqs-faq__item.is-open .sec-faqs-faq__icon-minus {
  opacity: 1;
}

/* ---- Answer (expand/collapse via grid-template-rows) ------------------- */

.sec-faqs-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.sec-faqs-faq__item.is-open .sec-faqs-faq__answer {
  grid-template-rows: 1fr;
}

.sec-faqs-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.sec-faqs-faq__answer-text {
  margin: 0 0 var(--w20);
  padding: 0 var(--w80) 0 var(--w20);
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* Bulleted answers — see the same rule in css/superapp/_shared/faq.css, which
   the Digital Workplace SuperApp page uses; this tab panel carries the same
   answers and needs the same treatment. */
.sec-faqs-faq__answer-list {
  margin: 0 0 var(--w20);
  padding: 0 var(--w80) 0 var(--w40);
  list-style: disc;
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

.sec-faqs-faq__answer-list > li + li {
  margin-top: var(--w6);
}

@media (prefers-reduced-motion: reduce) {
  .sec-faqs-faq__tab,
  .sec-faqs-faq__trigger,
  .sec-faqs-faq__icon::before,
  .sec-faqs-faq__icon::after,
  .sec-faqs-faq__icon img,
  .sec-faqs-faq__answer {
    transition: none;
  }
}

/* ==========================================================================
   Phone layout — Figma M-FAQ (5882:51603)
   ==========================================================================
   One breakpoint: the 393 frame scales proportionally across the whole ≤768
   range. Shared numbers (the 18px glyph, the hairlines) are not restated —
   the --wN remap already lands them on the phone value. */

@media (max-width: 768px) {
  .sec-faqs-faq {
    gap: var(--m40);
    padding: var(--m40) var(--m16);
    border-radius: var(--m6);
  }

  /* Mobile H1 new — Instrument Serif 34/1.2 */
  .sec-faqs-faq__title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  .sec-faqs-faq__container {
    gap: var(--m24);
  }

  /* The row bleeds to both screen edges so the scroll reads as continuous
     and the clipped last pill matches the frame. */
  .sec-faqs-faq__tabs {
    gap: var(--m8);
    margin: 0 calc(-1 * var(--m16));
    padding: 0 var(--m16);
  }

  .sec-faqs-faq__tab {
    height: var(--m40);
    padding: 0 var(--m16);
    border-radius: var(--m40);
    font-size: var(--m14);
    line-height: var(--m18);
  }

  /* Phone rows have no fixed height — 16px block padding and the question
     wrapping over as many lines as it needs (Figma 5882:51619). */
  .sec-faqs-faq__trigger {
    min-height: 0;
    gap: var(--m12);
    padding: var(--m16) var(--m8);
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .sec-faqs-faq__item.is-open .sec-faqs-faq__trigger {
    padding: var(--m16) var(--m8) var(--m12);
    line-height: var(--m22);
  }

  .sec-faqs-faq__answer-text {
    margin: 0 0 var(--m16);
    padding: 0 var(--m8);
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-faqs-faq__answer-list {
    margin: 0 0 var(--m16);
    padding: 0 var(--m8) 0 var(--m26);
    font-size: var(--m14);
    line-height: var(--m20);
  }
}