/* Accordion — V0.1 What We Solve: image at x=50 (radius 20), chevron at x≈450,
   title 28 (Body/XL) and body (Body/MD) at x=550, 50px above/below, hairlines between.
   Nick #4: the image is Why Co.Si's floating one, 280×310, top-aligned with the page
   heading's intro (--acc-lift, accordion.js). */
.block--accordion {
  --acc-img: 280px;   /* Why Co.Si float-media */
  --acc-img-h: 310px;
  --acc-indent: 100px; /* V0.1: title starts 100px into the text column */
  --acc-pad: var(--space-48); /* V0.1: 50 */
  --acc-gap: var(--space-32); /* title → body */
  --acc-dur: 550ms;
}

/* One image column, sticky beside the list; frames cross-fade. */
.block--accordion .accordion__aside {
  align-self: start; position: sticky; top: max(calc(var(--nav-height) + var(--space-24)), calc(50vh - var(--acc-img-h) / 2));
  margin-top: calc(var(--acc-lift, 0px) * -1);
}
.block--accordion .accordion__stage { position: relative; width: var(--acc-img); max-width: 100%; aspect-ratio: 28 / 31; }
.block--accordion .accordion__frame {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.04);
  transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out);
}
.block--accordion .accordion__frame.is-active { opacity: 1; transform: none; z-index: 1; }
.block--accordion .accordion__frame .media { width: 100%; height: 100%; }

/* List */
.block--accordion :is(.accordion__list, .accordion__aside) { grid-row: 1; }
.block--accordion .accordion__eyebrow { display: none; } /* phones only, below */
.block--accordion .accordion__item { border-top: 1px solid var(--border-strong); padding-bottom: calc(var(--acc-pad) - var(--acc-gap)); }
.block--accordion .accordion__item:first-child { border-top: 0; }
.block--accordion .accordion__item:first-child .accordion__trigger { padding-top: 0; }

.block--accordion .accordion__trigger {
  display: grid; grid-template-columns: var(--acc-indent) 1fr; align-items: start;
  width: 100%; padding: var(--acc-pad) 0 var(--acc-gap); text-align: left;
}
.block--accordion .accordion__heading { font-weight: 400; }
.block--accordion .accordion__title { max-width: 21em; transition: color var(--dur-base) var(--ease-out); }
/* Hovering the list quiets the other titles. */
@media (hover: hover) {
  :where([data-input="mouse"], .no-js) .block--accordion .accordion__list:hover .accordion__item:not(:hover) .accordion__title { color: var(--ink-subtle); }
}
.block--accordion .accordion__chevron {
  width: 22px; height: 12px; margin: 11px 0 0 2px;
  color: var(--ink-subtle);
  transform: rotate(180deg);
  transition: transform var(--acc-dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.block--accordion .accordion__item.is-open .accordion__chevron { transform: none; }
:where([data-input="mouse"], .no-js) .block--accordion .accordion__trigger:hover .accordion__chevron,
.block--accordion .accordion__trigger:focus-visible .accordion__chevron { color: var(--ink-primary); }
.block--accordion .accordion__trigger:focus-visible { outline-offset: -2px; }

/* Panel: height animates via grid rows 0fr → 1fr; hidden from focus/AT while closed. */
.block--accordion .accordion__panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--acc-dur) var(--ease-in-out), visibility 0s linear var(--acc-dur);
}
.block--accordion .accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--acc-dur) var(--ease-in-out), visibility 0s;
}
.block--accordion .accordion__inner { min-height: 0; overflow: hidden; padding-left: var(--acc-indent); }
.block--accordion .accordion__body {
  max-width: 580px; /* V0.1 */
  padding-bottom: var(--acc-gap);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.block--accordion .accordion__item.is-open .accordion__body {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-out) 150ms, transform 500ms var(--ease-out) 150ms;
}
.block--accordion .accordion__media-inline { display: none; }

/* The More/Less pill sits under the item, level with the title; no JS means everything is open, so no pill. */
/* Nick 10-22: 10px more room under the pill, on top of the item's own padding. */
.block--accordion .accordion__more { padding-left: var(--acc-indent); padding-bottom: 10px; }
.no-js .block--accordion .accordion__more { display: none; }

/* An open item above the one just tapped shuts at once (accordion.js). */
.block--accordion .accordion__item.is-instant, .block--accordion .accordion__item.is-instant * { transition: none !important; }

/* Without JS every item is open. */
.no-js .block--accordion .accordion__panel { grid-template-rows: 1fr; visibility: visible; }
.no-js .block--accordion .accordion__body { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .block--accordion { --acc-indent: 44px; }
  .block--accordion .accordion__aside { display: none; }
  .block--accordion .accordion__media-inline { display: block; width: 100%; max-width: 420px; aspect-ratio: 1; margin: var(--space-4) 0 var(--space-24); opacity: 0; transition: opacity 500ms var(--ease-out); }
  /* The image dissolves in and out, as the desktop frame does, rather than being wiped by the height. */
  .block--accordion .accordion__item.is-open .accordion__media-inline { opacity: 1; transition-delay: 150ms; }
  .no-js .block--accordion .accordion__media-inline { opacity: 1; }
}

@media (max-width: 767px) {
  .block--accordion { --acc-indent: 36px; --acc-pad: var(--space-24); --acc-gap: var(--space-16); }
  .block--accordion .accordion__chevron { width: 16px; height: 9px; margin-top: 6px; }
  .block--accordion .accordion__title br { display: none; }
  /* Phones: the image column is the viewfinder (base.css), stuck to the top of the screen
     above the list; the open item's picture dissolves in there, so the inline images are
     tablet-only (mobile experience, 2026-09-30). The desktop rules above outrank the
     primitive's top and the stage's position and size, so those are restated. */
  .block--accordion .accordion { row-gap: var(--acc-pad); }
  .block--accordion .accordion__aside { display: block; grid-row: 1; top: 0; margin-top: 0; }
  .block--accordion .accordion__aside:not(:has(.accordion__frame)) { display: none; } /* no pictures: no empty window */
  /* The label over the list (Nick 09-30): the eyebrow pill between the window and the first
     item, air on both sides (the grid's 24 gap plus its own padding). */
  .block--accordion .accordion__eyebrow { display: block; grid-row: 2; margin: 0; padding-block: var(--space-16) var(--space-8); }
  .block--accordion .accordion__list { grid-row: auto; } /* the row under the label, or the first when there's no window */
  .block--accordion .accordion__stage { position: absolute; width: auto; aspect-ratio: auto; }
  .block--accordion .accordion__media-inline { display: none; }
}