/* ==========================================================================
   Block: Accordion with image
   ========================================================================== */

.awx-am__header {
  margin-bottom: var(--awx-space-lg);
  max-width: var(--awx-measure);
}

.awx-am__grid {
  display: grid;
  gap: var(--awx-space-lg);
  align-items: start;
}

@media (min-width: 62rem) {
  /* Exact Figma measurements: section 1440x800, padding-left 112px, list
     column 488px, 120px gap, image 720px wide, full-bleed to the right
     edge (not inset inside the container like every other block's image).
     That last part is why this breaks out to 100vw the same way the other
     full-bleed blocks do, rather than living inside .awx-section__inner —
     the image needs to reach the actual right edge of the viewport, with
     no right-hand gutter at all, only a left one. Every px figure is
     expressed as a clamp() scaling from the 1440px reference rather than a
     bare px, so it scales down before this breakpoint's own floor instead
     of staying fixed regardless of viewport width. */
  .awx-am__grid {
    display: flex;
    align-items: center;
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: clamp(30rem, 55.6vw, 50rem);         /* 800px at 1440 */
    padding-left: clamp(2rem, 7.78vw, 7rem);     /* 112px at 1440 */
    /* No gap property: .awx-am__stage is absolutely positioned, so it is
       the only flex-flow child here, and gap has nothing to space. The
       120px gap between the list and the image falls out of the numbers
       above on its own at the 1440px reference (112 + 488 list width +
       120 gap + 720 image = 1440), and only drifts from exactly 120px at
       other viewport widths as an expected side effect of the list and
       the image scaling on two different clamp() curves. */
  }

  .awx-am__list {
    flex: none;
    width: clamp(18rem, 33.9vw, 30.5rem);        /* 488px at 1440 */
    min-width: 0;
  }

  .awx-am__stage {
    position: absolute;
    inset: 0 0 0 auto;
    width: 50%;                                   /* 720/1440 */
    height: 100%;
  }

  /* Mirrors the whole composition: image bleeds off the left edge instead,
     list gets the leading gap as right padding, and padding-left above no
     longer applies. */
  .awx-am--media-left .awx-am__grid {
    padding-left: 0;
    padding-right: clamp(2rem, 7.78vw, 7rem);
  }

  .awx-am--media-left .awx-am__list {
    order: 2;
  }

  .awx-am--media-left .awx-am__stage {
    inset: 0 auto 0 0;
  }
}

/* ---- List -------------------------------------------------------------- */

.awx-am__item {
  border-bottom: var(--awx-rule) solid var(--surface-rule);
}

/* Every title is the same 44px regardless of open/closed state — an
   inactive item is dimmed to 40% opacity, not shrunk and recoloured grey.
   488x57: the 57px row height is the 44px/100%-line-height text plus
   6.5px of padding top and bottom (6.5 * 2 + 44 = 57). */
.awx-am__trigger {
  display: block;
  width: 100%;
  padding-block: 6.5px;
  background: none;
  border: 0;
  color: var(--surface-heading);
  font-family: var(--awx-font-display);
  font-size: var(--awx-step-4); /* 44px */
  font-weight: 700;
  line-height: var(--awx-leading-tight); /* 100% */
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--awx-transition);
}

.awx-am__trigger:hover {
  opacity: 0.7;
}

.awx-am__item[data-open="true"] .awx-am__trigger {
  opacity: 1;
  cursor: default;
}

/* the short blue underline beneath the open item */
.awx-am__item[data-open="true"] .awx-am__trigger-label {
  position: relative;
}

.awx-am__item[data-open="true"] .awx-am__trigger-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35em;
  height: 3px;
  /* Was var(--awx-blue-600) directly — a brand-token violation flagged
     under the 1b audit. --surface-eyebrow already resolves to the same
     blue-600 for the default/accent surfaces this rule covers, so the
     visible result is unchanged, but it now correctly tracks the theme's
     own token instead of a hardcoded brand value. */
  background: var(--surface-eyebrow);
}

[data-surface="inverse"] .awx-am__item[data-open="true"] .awx-am__trigger-label::after,
[data-surface="image"] .awx-am__item[data-open="true"] .awx-am__trigger-label::after {
  background: var(--surface-accent);
}

/* ---- Panel ------------------------------------------------------------- */

/* grid-template-rows: 0fr -> 1fr on this wrapper, with the actual content
   in .awx-am__panel-inner (overflow: hidden so it never spills out at 0fr),
   is what animates open/closed — no [hidden] attribute and no JS height
   measurement. visibility is timed with a transition-delay: it switches to
   hidden only after the collapse finishes (closing), but back to visible
   immediately (opening) — that keeps the panel's link out of the tab order
   and off screen readers while visually collapsed, same as [hidden] used
   to guarantee, while still allowing the collapse itself to be animated.
   prefers-reduced-motion is handled globally already: tokens.css forces
   every transition-duration to 1ms under that preference, so this needs no
   reduced-motion rule of its own. */
.awx-am__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 300ms ease, visibility 0s linear 300ms;
}

.awx-am__item[data-open="true"] .awx-am__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 300ms ease, visibility 0s linear 0s;
}

.awx-am__panel-inner {
  overflow: hidden;
  min-height: 0;
  max-width: 46ch;
  padding-bottom: var(--awx-space-md);
}

.awx-am__panel-body {
  margin: 0 0 var(--awx-space-sm);
  color: var(--surface-muted);
  font-size: var(--awx-step--1);
}

/* ---- Stage ------------------------------------------------------------- */

/* No border at the desktop breakpoint any more — the image is full-bleed
   to the section's own edge there (see .awx-am__grid above), so a frame
   around it would look wrong; a placeholder with nothing behind it still
   needs the background fallback for legibility, hence that staying. The
   border comes back on mobile below, where the stage is an ordinary
   contained image again, same as every other block's placeholder frame. */
.awx-am__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-rule);
}

/* Two stacked slots cross-fade via opacity (main.js toggles .is-active)
   rather than one <img> having its src swapped in place, which flashes.
   Reduced motion is handled globally (see the panel comment above) — this
   needs no rule of its own either. */
.awx-am__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 350ms ease;
}

.awx-am__image.is-active {
  opacity: 1;
}

@media (max-width: 61.99rem) {
  .awx-am__stage {
    order: -1;
    aspect-ratio: 16 / 9;
    /* An ordinary contained image on mobile, not full-bleed — it needs the
       same frame every other block's placeholder image gets. */
    border: var(--awx-rule) solid var(--surface-rule);
  }
}