/* Just Mercy · accordion
   Split out of the single components.css so concurrent work on different
   areas cannot collide in one file, and so a page can eventually load only
   the CSS its elements need. Tokens come from tokens.css; no literal brand
   hex belongs in here (the page-quality gate's D2 criterion enforces it). */

/* =========================================================================
   JM Accordion — Figma "Organisms / Accordion group" (517:1733),
   "Molecules / Accordion / Item" (517:1679), "/ Entry" (517:1615),
   "/ Panel" (517:1623), "/ Key row" (517:1618)

   Measured off those nodes, converted to rem at the 1440 anchor.
     group      column, gap 8
     item       1px Purple/500 rule under, column gap 16,
                padding-block 20, and 20 top / 24 bottom when open
     title row  justify-between, title 24 SemiBold Purple/500, caret 16
     summary    18 Medium Purple/400 — visible OPEN AND CLOSED
     entries    column gap 14 · entry gap 2, label 16 Bold, body 16/1.4
     panel      2px dashed Purple/500, 16 top / 20 bottom / 20 sides, gap 12,
                heading 18 SemiBold at line-height 1
     key row    12px Purple/500 square, gap 12
   ========================================================================= */

.jm-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                         /* 8 */
}

/* Three across (542:1961 / 542:1969 / 542:1977): three equal columns at a 48
   gap, which is 394.664 each inside the 1280 measure.

   The items are direct grid children on purpose — `align-items: stretch` is what
   puts all three bottom rules on ONE baseline no matter how much copy each
   carries. Driving this from Bricks' `_gridTemplateColumns` does not work on a
   custom element: Bricks emitted `display: grid` and silently dropped the track
   list, so the three stacked in a single 948px column. */
.jm-accordion--columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 3rem;                           /* 48 */
}

@media (max-width: 61.99rem) {
  .jm-accordion--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  .jm-accordion--columns { grid-template-columns: minmax(0, 1fr); }
}

/* A column has to behave like one, so the item's rule sits at the bottom of the
   tallest column rather than directly under its own last line. */
.jm-accordion--columns > .jm-accordion__item {
  display: flex;
  flex-direction: column;
}

.jm-accordion__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;                           /* 16 */
  padding-block: 1.25rem;              /* 20 */
  border-bottom: 1px solid var(--purple-500);
}
.jm-accordion__item.is-open { padding-block: 1.25rem 1.5rem; }   /* 20 / 24 */

.jm-accordion__heading { margin: 0; }

.jm-accordion__toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--purple-500);
  text-align: left;
  cursor: pointer;
}
.jm-accordion__toggle:focus-visible {
  outline: 3px solid var(--purple-500);
  outline-offset: 4px;
}

.jm-accordion__title {
  font: 600 var(--text-body-lead)/1.2 var(--font-sans);   /* 24 SemiBold */
  color: var(--purple-500);
}

.jm-accordion__caret {
  flex: 0 0 auto;
  width: 1rem;                         /* 16 */
  height: 1rem;
  color: var(--purple-500);
  transition: transform var(--motion-fast) var(--motion-ease-out);
}

.jm-accordion__item.is-open .jm-accordion__caret { transform: rotate(180deg); }

.jm-accordion__summary {
  margin: 0;
  font: 500 var(--text-body-m)/1.3 var(--font-sans);      /* 18 Medium */
  color: var(--purple-400);
  text-wrap: pretty;
}

/* accordion.js marks the summary clickable (it forwards to the toggle), so
   the class only exists when the behaviour does. */
.jm-accordion__summary.is-clickable { cursor: pointer; }

.jm-accordion__panel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;                       /* 14 — the Figma entries gap */
}
.jm-accordion__panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .jm-accordion__caret { transition: none; }
}

/* ---- Entry ---- */

.jm-entry {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;                       /* 2 */
}
.jm-entry__label {
  margin: 0;
  font: 700 var(--text-body)/1.3 var(--font-sans);        /* 16 Bold */
  color: var(--purple-500);
}
.jm-entry__body {
  margin: 0;
  font: 400 var(--text-body)/1.4 var(--font-sans);        /* 16 Regular */
  color: var(--purple-400);
  text-wrap: pretty;
}

/* ---- Key panel ---- */

.jm-key-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                        /* 12 */
  padding: 1rem 1.25rem 1.25rem;       /* 16 top, 20 sides, 20 bottom */
  border: 2px dashed var(--purple-500);
}

.jm-key-panel__heading {
  margin: 0;
  font: 600 var(--text-body-m)/1 var(--font-sans);        /* 18 SemiBold, leading-none */
  color: var(--purple-500);
}

/* ---- Key row ---- */

.jm-key-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;                        /* 12 */
}

.jm-key-row__key {
  flex: 0 0 auto;
  width: 0.75rem;                      /* 12 */
  height: 0.75rem;
  margin-top: 0.25rem;                 /* optical align to the label's cap height */
  /* A ring, not a filled square — the favicon's mark at key size (Phil,
     2026-08-31). Stroke weight matches the favicon's proportions. */
  border: 2px solid var(--purple-500);
  border-radius: 50%;
}

.jm-key-row__text {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 0.125rem;                       /* 2 */
}
.jm-key-row__label {
  font: 700 var(--text-body)/1.3 var(--font-sans);
  color: var(--purple-500);
}
.jm-key-row__body {
  font: 400 var(--text-body)/1.4 var(--font-sans);
  color: var(--purple-400);
  text-wrap: pretty;
}

/* =========================================================================
   jm-collapse — cards that become closed accordion rows below 48rem.
   Donate's funding cards (mobile board 624:3368): title and amount are the
   button, the qualifier stays visible in the closed row, body and link hide.
   collapse.js builds the toggle below the breakpoint only.
   ========================================================================= */

.jm-collapse__toggle { display: none; }

/* A closed panel must actually close: Bricks writes each block's display as an
   unlayered #brxe id rule, which beats the UA's [hidden] rule — the panels sat
   there "hidden" and fully visible. Same specificity war as the readmore
   clamp; same answer. */
#brx-content .jm-collapse__panel[hidden] { display: none; }

@media (max-width: 47.99rem) {
  /* The purple card dissolves into a plain row on the section ground. */
  #brx-content .jm-collapse {
    background: transparent;
    padding: 1.25rem 0;                  /* 20, the spec's row padding */
  }
  #brx-content .jm-collapse + .jm-collapse {
    border-top: 1px solid color-mix(in srgb, var(--purple-500) 14%, transparent);
  }
  /* The rows' rhythm belongs to the rows, not the desktop grid gap. */
  #brx-content :has(> .jm-collapse) { grid-gap: 0; gap: 0; }

  .jm-collapse__toggle:not([hidden]) {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    column-gap: 0.75rem;                 /* 12 — the drawn text-to-caret gap */
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .jm-collapse__toggle:focus-visible {
    outline: 3px solid var(--purple-500);
    outline-offset: 2px;
  }

  /* The caret is drawn, not the brand arrow: it points down and rotates
     (same reasoning as the readmore caret). */
  .jm-collapse__caret {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.125rem) rotate(45deg);
    transition: transform var(--motion-base) var(--motion-ease);
  }
  .jm-collapse.is-open .jm-collapse__caret {
    transform: translateY(0.0625rem) rotate(225deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jm-collapse__caret { transition: none; }  /* opens instantly, per the spec */
}

/* A Bricks block lays children out at align-items: flex-start, so an
   auto-width accordion shrinks to its widest VISIBLE line — and jumps wider
   the moment a panel opens (The Facts, 2026-08-31: 528px closed, 592px
   open). An accordion always fills its column; in grids (Partnerships) the
   cell already stretches and this is a no-op. */
#brx-content .jm-accordion,
#brx-content .jm-accordion__item {
  width: 100%;
}

/* ---- Small variant (Phil, 2026-08-31) ----
   Compact rows for lists like The Facts' reporting channels: title drops
   24 -> 18, summary 18 -> 16, with the rhythm tightened to match. Everything
   else (caret, rule, behaviour) is the same component. */

.jm-accordion--small .jm-accordion__item {
  gap: 0.625rem;                       /* 10 */
  padding-block: 1rem;                 /* 16 */
}
.jm-accordion--small .jm-accordion__item.is-open { padding-block: 1rem 1.25rem; }

.jm-accordion--small .jm-accordion__title {
  font: 600 var(--text-body-m)/1.2 var(--font-sans);      /* 18 SemiBold */
}

.jm-accordion--small .jm-accordion__summary {
  font: 500 var(--text-body)/1.4 var(--font-sans);        /* 16 Medium */
}

/* Two across (Phil, 2026-08-31): the three-across grid on narrower tracks,
   for compact pairs like The Facts' reporting channels. Rows keep the stack's
   8px rhythm — the items' own padding and rules carry the vertical beat. */
.jm-accordion--columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
  row-gap: 0.5rem;
}

@media (max-width: 47.99rem) {
  /* Restated: the base --columns collapse above loses to --columns-2 on
     source order at equal specificity. */
  .jm-accordion--columns-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Panel surface (Phil, 2026-08-31) ----
   Each item is a filled Purple/50 panel instead of a rule-under row: the
   Partnerships "Our work & impact" trio. Same behaviour, same type. */
.jm-accordion--panel .jm-accordion__item {
  background: var(--purple-50);
  border-bottom: 0;
  padding: 1.5rem;                     /* 24 all round; the rule's rhythm
                                          becomes the panel's inset */
}
.jm-accordion--panel .jm-accordion__item.is-open { padding-block: 1.5rem; }

/* Panels top-align in column layouts: --columns' stretch existed to land the
   bottom RULES on one baseline, and a filled panel has no rule — stretching
   just inflates the closed neighbours to match the open one (Phil,
   2026-08-31: "why do all the purple boxes expand?").

   align-self on the ITEMS, not align-items on the grid: Bricks emits its own
   alignment on the grid element at a priority the class rule cannot beat
   (computed stayed normal = stretch), and item-level self-alignment wins
   over any container value. */
.jm-accordion--panel.jm-accordion--columns > .jm-accordion__item {
  align-self: start;
}