/**
 * @file
 * Accordion section styles.
 *
 * Values from Figma "2026 Landing Page Updates", node 408:7245.
 * Padding and max width match the hero so sections line up down the page.
 */

.ln-accordion {
  /**
   * 0, deliberately. This block has no box of its own, so the whitespace around
   * it in the design *is* the gap between sections — which css/layout.css now
   * supplies. An 80px padding here was measured from the standalone component
   * frame, where the surrounding page whitespace looked like part of the
   * component; on a real page it double-counted, and the gap came out at almost
   * twice what the full-page design shows.
   *
   * This is the padding *outside* the grey card, which is what duplicated the
   * layout gap. The card's own padding is --ln-accordion-card-padding and is
   * untouched: the design measures 85px above and 80px below the FAQ content
   * inside that box, so the designer does put ~80px inside a boxed section.
   *
   * Kept as a token rather than deleted so a one-off placement can still carry
   * its own padding.
   */
  --ln-accordion-padding-block: 0;
  --ln-accordion-padding-inline: clamp(1.25rem, 12.5vw, 240px);
  --ln-accordion-max-width: 1440px;
  --ln-accordion-gap: 64px;

  --ln-accordion-bg: #ffffff;
  --ln-accordion-fg: #1c1c1c;
  --ln-accordion-card-bg: #f4f4f3;
  --ln-accordion-card-radius: 32px;
  --ln-accordion-card-padding: 32px;
  --ln-accordion-item-gap: 32px;

  /* Figma sets each drawer to 763px inside the 1440px card. */
  --ln-accordion-measure: 763px;

  --ln-accordion-font: Outfit, sans-serif;
  --ln-accordion-heading-size: clamp(2rem, 3.5vw, 48px);

  box-sizing: border-box;
  padding-block: var(--ln-accordion-padding-block);
  padding-inline: var(--ln-accordion-padding-inline);
  background-color: var(--ln-accordion-bg);
  color: var(--ln-accordion-fg);
  font-family: var(--ln-accordion-font);
}

.ln-accordion *,
.ln-accordion *::before,
.ln-accordion *::after {
  box-sizing: inherit;
}

.ln-accordion__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ln-accordion-gap);
  max-width: var(--ln-accordion-max-width);
  margin-inline: auto;
}

/* Figma: Outfit Medium 48/1.3, centred. */
.ln-accordion__heading {
  margin: 0;
  font-size: var(--ln-accordion-heading-size);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.ln-accordion__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ln-accordion-item-gap);
  width: 100%;
  padding: var(--ln-accordion-card-padding);
  border-radius: var(--ln-accordion-card-radius);
  background-color: var(--ln-accordion-card-bg);
}

/**
 * Background variants.
 *
 * Only the card is affected — the section itself stays white either way. Adding
 * a colour means one block here plus an allowed value on
 * field_accordion_background and an enum value in accordion.component.yml.
 *
 * With no card drawn, the padding and radius have nothing to sit on, so they are
 * removed rather than left as arbitrary whitespace. The panel measure and the
 * 64px gap below the heading still apply, so vertical rhythm is unchanged.
 */
.ln-accordion--bg-none .ln-accordion__card {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

/**
 * Panels stack with a gap; each item draws its own bottom rule.
 *
 * This works because field--field-accordion-items.html.twig strips Drupal's field
 * wrappers, making every <details> a direct child here. Do not reintroduce
 * selectors like "> .field" — the active theme resolves field.html.twig to
 * stable's, which emits wrapper divs with no classes at all, so those selectors
 * match nothing and the gap silently disappears.
 */
.ln-accordion__panels {
  display: flex;
  flex-direction: column;
  gap: var(--ln-accordion-item-gap);
  width: 100%;
}

/* Stacked only: panels are narrower than the card, centred by the card's
   align-items. Children stretch to this width, so capping here is enough. */
.ln-accordion--stacked .ln-accordion__panels {
  max-width: var(--ln-accordion-measure);
}

/**
 * Split layout — heading in a left column, panels right, heading sticky.
 *
 * Measured from a 2x export of the FAQ comp: a 1440 card with 80px padding and a
 * ~27px radius, columns of 449 and 762 inside it with a 64px gap, heading 56px at
 * line-height 1.1, and #d3d3d3 rules between panels. The 449/762 fr pair
 * reproduces those widths exactly at 1440 and scales proportionally below it.
 */
.ln-accordion--split {
  --ln-accordion-split-gap: 64px;
  --ln-accordion-split-padding: 80px;
  --ln-accordion-split-radius: 28px;
  --ln-accordion-split-heading-size: clamp(2rem, 3.9vw, 56px);

  /* Inherited by the accordion-item components inside. The split comp uses a
     darker rule than the stacked one. */
  --ln-accordion-item-rule: #d3d3d3;

  /* Keep the heading clear of the sticky site header. Reads a global
     --ln-site-header-height if one is ever defined; see comparison-table.css. */
  --ln-accordion-sticky-top: calc(var(--ln-site-header-height, 60px) + 40px);
}

.ln-accordion--split .ln-accordion__card {
  display: grid;
  grid-template-columns: 449fr 762fr;
  gap: var(--ln-accordion-split-gap);

  /**
   * align-items is deliberately left at its default of stretch. Setting start
   * here would shrink the aside to the height of the heading, leaving sticky
   * nothing to travel through — the heading would simply not move.
   */
  align-items: stretch;
  padding: var(--ln-accordion-split-padding);
  border-radius: var(--ln-accordion-split-radius);
}

.ln-accordion--split .ln-accordion__heading {
  position: sticky;
  top: var(--ln-accordion-sticky-top);
  margin: 0;
  font-size: var(--ln-accordion-split-heading-size);
  line-height: 1.1;
  text-align: left;
}

/* One column below the breakpoint: side by side stops working long before the
   panels become unreadable, and a sticky heading on a phone wastes the viewport. */
@media (max-width: 60rem) {
  .ln-accordion--split {
    --ln-accordion-split-padding: 32px;
  }

  .ln-accordion--split .ln-accordion__card {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ln-accordion--split .ln-accordion__heading {
    position: static;
  }
}

@media (max-width: 48rem) {
  .ln-accordion {
    --ln-accordion-padding-block: 0;
    --ln-accordion-gap: 32px;
    --ln-accordion-card-padding: 20px;
    --ln-accordion-card-radius: 20px;
    --ln-accordion-item-gap: 24px;

    /* Outside the card: 16px, the page gutter, replacing a clamp that resolves
       to 12.5vw — 50px at 401px. */
    --ln-accordion-padding-inline: 16px;
  }

  /**
   * Inside the card: 16px on the sides only.
   *
   * padding-inline rather than the --ln-accordion-card-padding token, because
   * that token is a single value feeding a `padding` shorthand and would take the
   * block axis with it. 20px above and below is unchanged.
   *
   * Both selectors, and this is not belt-and-braces. The split variant sets
   * `.ln-accordion--split .ln-accordion__card { padding: var(--split-padding) }`
   * at (0,2,0), which outranks a bare `.ln-accordion__card` — so without the
   * second selector the FAQ would get 16px only if the page happens to use the
   * unsplit layout, and silently keep 32px if it ever switches. Equal specificity
   * with the variant's own rule, won on source order: this block is after both
   * the base rule and the 60rem block that sets the split padding.
   */
  .ln-accordion__card,
  .ln-accordion--split .ln-accordion__card {
    padding-inline: 16px;
  }

  /**
   * Heading centres.
   *
   * Only the split variant needs saying: the base rule already centres, and the
   * split one overrides it to left because at desktop widths that heading sits in
   * its own sticky side column, where centred text against a column of drawers
   * would read as a mistake. The 60rem block above collapses that column and makes
   * the heading static, so by this width it is a heading sitting above its content
   * — the stacked case, which is centred.
   *
   * (0,2,0), matching the rule it overrides, and after it in source order. And
   * split is the field's *default* value, so this is the path the FAQ actually
   * takes rather than an edge case.
   */
  .ln-accordion--split .ln-accordion__heading {
    text-align: center;
  }
}