/* ==========================================================================
   Accordion
   Figma "accordion - close2" / "accordion - open2". One item open at a
   time (js/modules/accordion.js). State lives on the trigger's
   aria-expanded; without JavaScript the attribute is absent and every
   panel stays visible.
   ========================================================================== */

@layer components {
  .accordion {
    --accordion-padding: clamp(1.5rem, 1rem + 2.2222vw, 3rem); /* 24 → 48 (Figma, sides) */
    /* Top/bottom reduced on request (Figma: 48). */
    --accordion-padding-block: clamp(1rem, 0.6667rem + 1.4815vw, 2rem); /* 16 → 32 */
    --accordion-icon: 2rem; /* 32 */
    --accordion-gap: 1.5rem; /* 24 — text starts 56px in (icon + gap) */
    /* Hairline as requested (Figma: 1px). Renders as one device pixel on
       high-density screens; browsers round it up to 1px on standard ones. */
    --accordion-line: 0.5px;

    /* List frame around the items: fainter than the item lines (as
       requested). 0.5px is already one device pixel on high-density screens,
       so it reads thinner through a lower opacity rather than a smaller width. */
    border: var(--accordion-line) solid color-mix(in srgb, var(--color-border) 30%, transparent);
    border-radius: var(--radius-medium);
  }

  .accordion__item {
    padding: var(--accordion-padding-block) var(--accordion-padding);
    border-block-end: var(--accordion-line) solid var(--color-border);
    border-radius: var(--radius-medium);
    transition:
      background-color var(--transition-duration) ease,
      border-color var(--transition-duration) ease,
      padding var(--transition-duration) ease;
  }

  /* Open item: blue-green fill and, as in Figma (64 vs 48), a bottom
     padding a third larger than the closed one. */
  .accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
    padding-block-end: calc(var(--accordion-padding-block) * 4 / 3);
    border-block-end-color: color-mix(in srgb, var(--color-light-gray) 9%, transparent);
    background-color: var(--color-accent);
  }

  /* Icon · title / summary */
  .accordion__header {
    position: relative;
    display: grid;
    grid-template-columns: var(--accordion-icon) 1fr;
    align-items: center;
    column-gap: var(--accordion-gap);
  }

  .accordion__icon {
    display: grid;
    grid-row: 1 / span 2;
  }

  .accordion__icon img {
    grid-area: 1 / 1;
    transition: opacity var(--transition-duration) ease;
  }

  .accordion__icon-minus {
    opacity: 0;
  }

  .accordion__item:has(.accordion__trigger[aria-expanded="true"]) .accordion__icon-plus {
    opacity: 0;
  }

  .accordion__item:has(.accordion__trigger[aria-expanded="true"]) .accordion__icon-minus {
    opacity: 1;
  }

  .accordion__title {
    grid-column: 2;
  }

  /* The whole header row (icon, title, summary) is the click target. */
  .accordion__trigger {
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
  }

  .accordion__trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-medium);
  }

  .accordion__trigger:focus-visible {
    outline: none;
  }

  .accordion__trigger:focus-visible::after {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* Keep the focus ring visible on the blue-green fill. */
  .accordion__trigger[aria-expanded="true"]:focus-visible::after {
    outline-color: var(--color-bg);
  }

  .accordion__summary {
    grid-column: 2;
    margin-block-start: 1px; /* Figma: summary top 49 under a 48px title */
  }

  /* Panel: animates its height via grid rows; hidden from assistive tech
     and keyboard once collapsed. */
  .accordion__panel {
    display: grid;
    grid-template-rows: 1fr;
    padding-inline-start: calc(var(--accordion-icon) + var(--accordion-gap));
    transition:
      grid-template-rows var(--transition-duration) ease,
      visibility 0s;
  }

  .accordion__item:has(.accordion__trigger[aria-expanded="false"]) .accordion__panel {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows var(--transition-duration) ease,
      visibility 0s var(--transition-duration);
  }

  /* Width reproduces the Figma line breaks (792–804px at 18px; exact
     width to confirm), in em so it scales with the text. */
  .accordion__panel-inner {
    min-block-size: 0;
    max-inline-size: calc(800em / 18);
    overflow: hidden;
  }

  /* 24px under the summary: Figma open item 286 − padding 48 + 64 − border 1
     − header 74 − body 75. */
  .accordion__panel-inner > :first-child {
    margin-block-start: 1.5rem;
  }
}