/**
 * @file
 * Accordion section styles. Padding and max width match the hero so sections
 * line up down the page.
 */

.ln-accordion {
  /* 0: this block has no box outside the grey card, so layout.css owns the gap
     between sections. Kept as a token so a one-off placement can pad itself. */
  --ln-accordion-padding-block: 0;
  --ln-accordion-padding-inline: var(--ln-container-gutter, 32px);
  --ln-accordion-max-width: var(--ln-container-max, 1440px);
  --ln-accordion-gap: 64px;

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

  --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);
  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;
}

/* Gutter and max-width on the same box, so the 1440 is the outer edge. */
.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;
  padding-inline: var(--ln-accordion-padding-inline);
}

.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 affect the card only. With no card drawn, its padding and
   radius go too; the panel measure and heading gap are 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.
 *
 * Every <details> is a direct child because the field template strips Drupal's
 * wrappers. Do not reintroduce "> .field" selectors — they match nothing here.
 */
.ln-accordion__panels {
  display: flex;
  flex-direction: column;
  gap: var(--ln-accordion-item-gap);
  width: 100%;
}

/* Stacked only: panels narrower than the card, centred by its align-items. */
.ln-accordion--stacked .ln-accordion__panels {
  max-width: var(--ln-accordion-measure);
}

/* Split layout — heading in a sticky left column, panels right. */
.ln-accordion--split {
  --ln-accordion-split-gap: 64px;
  --ln-accordion-split-padding: 80px;
  --ln-accordion-split-radius: 16px;
  --ln-accordion-split-heading-size: clamp(2rem, 3.9vw, 56px);

  /* Inherited by the accordion items inside; split uses a darker rule. */
  --ln-accordion-item-rule: #d3d3d3;

  /* Keeps the sticky heading clear of the site header. */
  --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);

  /* stretch, not start: start shrinks the aside to the heading's height and
     sticky then has nothing to travel through. */
  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; a sticky heading wastes a phone 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;
  }

  /**
   * Sides only, so the token's block padding is left alone.
   *
   * The split selector is required: the variant sets card padding at (0,2,0),
   * so this must match it and come later in source order. Split is the field's
   * default value.
   */
  .ln-accordion__card,
  .ln-accordion--split .ln-accordion__card {
    padding-inline: 16px;
  }

  /**
   * Heading centres, as in the stacked case — the 60rem block above has already
   * collapsed the side column.
   *
   * (0,2,0) matching the split rule it overrides, and after it in source order.
   * Split is the field's default value, so this is the path the FAQ takes.
   */
  .ln-accordion--split .ln-accordion__heading {
    text-align: center;
  }
}