/* Just Mercy · content
   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 Stat tile — Figma "Molecules / Stat tile"
   ========================================================================= */

.jm-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;                 /* 6 */
  padding: 1.5rem;               /* 24 */
}

.jm-stat-tile--stone { background-color: var(--stone-500); }
.jm-stat-tile--plain { background-color: transparent; padding: 0; }

.jm-stat-tile__number {
  font: 800 var(--text-stat)/1.05 var(--font-sans);   /* Stat/Number */
  color: var(--purple-500);
  font-variant-numeric: tabular-nums;
}

.jm-stat-tile__label {
  font: 400 var(--text-caption)/1.2 var(--font-sans); /* Caption 14 */
  color: var(--purple-400);
}


/* =========================================================================
   JM Pull quote — Figma "Molecules / Pull quote"
   ========================================================================= */

.jm-pull-quote {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                        /* 12 */
  margin: 0;
  padding: 2rem 0;                     /* 32 */
  border-top: 1px solid var(--purple-100);
  border-bottom: 1px solid var(--purple-100);
}

/* Bricks' frontend.min.css styles bare <blockquote> with a left rule and an
   indent. The Figma pull quote has rules top and bottom and no left bar, so those
   defaults are reset here rather than the element avoiding <blockquote> — the
   semantics are worth keeping. */
.jm-pull-quote__quote {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 41.25rem;                 /* 660 */
  font: 600 var(--text-heading-l)/1.2 var(--font-sans);
  color: var(--purple-500);
}
.jm-pull-quote__quote p { margin: 0 0 0.5em; }
.jm-pull-quote__quote p:last-child { margin-bottom: 0; }

.jm-pull-quote__attribution {
  display: flex;
  align-items: center;
  gap: 0.75rem;                        /* 12 */
}

.jm-pull-quote__rule {
  flex: 0 0 auto;
  width: 1.75rem;                      /* 28 */
  height: 2px;
  background-color: var(--gold-500);
}

.jm-pull-quote__source {
  font: 500 var(--text-micro)/1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-400);
}


/* =========================================================================
   JM Callout — Figma "Molecules / Callout"
   ========================================================================= */

.jm-callout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                        /* 12 */
  padding: 2rem 2.5rem;                /* 32 / 40 */
  background-color: var(--purple-50);
}

/* ---- The Facts: the signs grid with its callout as a fourth column ------
   Phil, 2026-09-03. The six signs keep their own 3-across grid; the purple
   callout stands beside them as a fourth column the full height of both rows.

   The callout is a SIBLING of the track, not a seventh cell in it, and that is
   the whole point: below 48rem the track becomes a horizontal swipe carousel
   (swipe.css) whose children are 290px slides, so a cell there would put a
   paragraph and a link inside the card carousel and add a seventh dot. As a
   sibling it simply drops below the dots at full width instead.

   The fourth column only appears at 62rem (992px), which is exactly where the
   track itself goes back to three columns — measured on the live page, not
   assumed. Between 48 and 62rem the track is two columns and the callout sits
   under it; below 48rem the track is the carousel. Media-query rem is always
   the initial 16px, so the site's fluid root does not move this line. */

.jm-facts-signs {
  display: flex;
  flex-direction: column;
  /* Trap 2: Bricks blocks lay their children out at flex-start, which would
     shrink the callout to its longest line. */
  align-items: stretch;
  gap: 2rem;                           /* 32 — swipe.js re-measures the dots' own 26 */
}

/* Stacked, the callout keeps a readable measure instead of running the width
   of a 991px viewport. */
@media (max-width: 61.99rem) {
  .jm-facts-signs > .jm-callout { max-width: 45rem; }
}

@media (min-width: 62rem) {
  .jm-facts-signs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;                       /* 24 — the same step the track uses, so
                                          all four columns and both gutters line up */
    align-items: stretch;
  }
  /* Three of the four columns, holding the track's own 3-across grid. */
  .jm-facts-signs__track { grid-column: span 3; }

  /* In this column the callout is a peer of the fact cells, so it takes their
     24px padding rather than the component's roomier 32/40: at 302px wide the
     40px sides left a 222px measure, which read as a narrow ragged strip. */
  .jm-facts-signs .jm-callout { padding: 1.5rem; }

  /* jm-link-arrow is a flex row, so once the label wraps — and at this width it
     does — the arrow parks beside the FIRST line, stranded at the right edge
     with the words two lines below it. Inline flow puts it after the last word.
     Scoped here on purpose: the component is right as it is everywhere it has
     room, and changing it site-wide would mean re-checking every page using it. */
  .jm-facts-signs .jm-callout .jm-link-arrow { display: inline; }
  .jm-facts-signs .jm-callout .jm-link-arrow__arrow {
    display: inline-block;
    margin-left: 0.375rem;
  }
}

.jm-callout__kicker {
  margin: 0;
  font: 500 var(--text-caption-m)/1.2 var(--font-sans);
  letter-spacing: 0.025em;             /* Figma: 0.375px at 15px */
  text-transform: uppercase;
  color: var(--purple-500);
}

.jm-callout__body { color: var(--purple-700); font: 400 var(--text-body)/1.4 var(--font-sans); }
.jm-callout__body p { margin: 0 0 0.75em; }
.jm-callout__body p:last-child { margin-bottom: 0; }


/* =========================================================================
   JM Fact cell — Figma "Molecules / Fact cell"
   ========================================================================= */

.jm-fact-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                         /* 8 */
  padding: 1.5rem;                     /* 24 */
}
/* Stone/300, not Stone/100. Figma's Molecules/Fact cell (499:931) emits
   `bg-[var(--stone/300,#f8f7f3)]`; Stone/100 is a step whiter and on The Facts'
   #E4E1D8 band the cells read flat and washed out. */
.jm-fact-cell--stone { background-color: var(--stone-300); }
.jm-fact-cell--plain { background-color: transparent; padding: 0; }

.jm-fact-cell__title {
  margin: 0;
  font: 600 var(--text-body)/1.2 var(--font-sans);
  color: var(--purple-500);
}
.jm-fact-cell__body { font: 400 var(--text-body-s)/1.2 var(--font-sans); color: var(--purple-400); }

/* The About page's "Value card" variant (81:79-81:92): a heavier title and body
   copy a size up, a step darker and more loosely set than the Fact cell. */
.jm-fact-cell--lead .jm-fact-cell__title { font-weight: 700; }
.jm-fact-cell--lead .jm-fact-cell__body {
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--purple-500);
}
.jm-fact-cell__body p { margin: 0 0 0.5em; }
.jm-fact-cell__body p:last-child { margin-bottom: 0; }


/* =========================================================================
   JM Stat chip — Figma "Molecules / Stat chip"
   ========================================================================= */

.jm-stat-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;                       /* 2 */
  padding: 1rem 1.5rem;                /* 16 / 24 */
  background-color: var(--gold-500);
  color: var(--purple-700);
}

.jm-stat-chip__number {
  font: 600 var(--text-heading-xl)/1.2 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.jm-stat-chip__label {
  max-width: 18.75rem;                 /* 300 */
  font: 400 var(--text-label-s)/1.3 var(--font-sans);
}


/* =========================================================================
   JM Contact details — Figma "Molecules / Contact details"
   ========================================================================= */

.jm-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;                           /* 16 */
}

.jm-contact__block { display: flex; flex-direction: column; gap: 0.25rem; }  /* 4 */

.jm-contact__label {
  margin: 0;
  font: 500 var(--text-overline)/1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-400);
}

.jm-contact__value {
  margin: 0;
  font: 400 var(--text-body)/1.4 var(--font-sans);
  color: var(--purple-700);
}

.jm-contact__link { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.jm-contact__link:hover { color: var(--purple-500); }
.jm-contact__link:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; }

/* ---- Value list at mobile (About board 615:5166) ----
   The desktop's three-column hairlined grid of value cells becomes a plain
   divider list: label over description, a full-width hairline between rows,
   no per-cell borders. The class rides the values container in
   build-page-about.php; the doubled scope beats the per-instance #brxe
   border rules. */
@media (max-width: 47.99rem) {
  #brx-content .jm-value-list .jm-fact-cell {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--purple-500) 14%, transparent);
    padding: 1.125rem 0;                 /* 18, the drawn row padding */
    background: transparent;
  }
  #brx-content .jm-value-list .jm-value-col:first-child .jm-fact-cell:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* ---- Value masonry (Figma 81:77; Phil, 2026-08-31) ----
   The board draws THREE INDEPENDENT STACKS — Justice/Restoration,
   Compassion/Humility, Partnership — each at its own content height, so the
   hairline rules land at staggered depths: the brick feel. The earlier
   row-aligned grid (and the Partnership span-2 patch it needed) squared the
   rows up and lost exactly that. Below Bricks' tablet_portrait the columns
   dissolve (display: contents) and the cells join the container's own
   responsive grid, then the divider list above. */
.jm-value-col {
  display: flex;
  flex-direction: column;
}
@media (max-width: 991px) {
  .jm-value-col { display: contents; }
}

/* ---- Policies page (build-page-policies.php) ----
   Flex pair: the nav wrapper stretches with the content column, and the nav
   itself sticks inside it, clear of the stuck header. On narrow screens the
   nav becomes a plain row of links above the content. */
.jm-policy-nav-wrap { flex: 0 0 14rem; }
.jm-policy-nav {
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.jm-policy-nav a {
  font: 500 var(--text-body)/1.3 var(--font-sans);
  color: var(--purple-500);
  text-decoration: none;
}
.jm-policy-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.jm-policy-nav a:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; }

@media (max-width: 47.99rem) {
  .jm-policy-nav-wrap { flex: none; }
  .jm-policy-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
  }
}

/* Body links inside the policy prose pick up the site's link voice. */
#brx-content .jm-policy-section a {
  color: var(--purple-500);
  text-underline-offset: 0.2em;
}

/* Inline contact links in the how-to-report boxes (and reusable anywhere a
   paragraph carries a tel:/mailto:/web link). */
.jm-report-link {
  color: var(--purple-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jm-report-link:hover { color: var(--purple-700); }

/* No ugly breaks (Phil, 2026-08-31): a phone number never splits between its
   groups, and a long email or URL drops to its OWN line first (inline-block
   wraps as a unit) — splitting internally only when even a full line cannot
   hold it. */
.jm-report-link[href^="tel:"] { white-space: nowrap; }
.jm-report-link[href^="mailto:"],
.jm-report-link[href^="http"] {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}