/* ==========================================================================
   Explainer blocks — pure_cms.blocks_explainer

   One rule governs this file: nothing here paints a background. Every surface,
   border and muted tone is mixed from `currentColor`, so a block takes the
   colour of the section it is dropped into. Put the block in a `bg-dark`
   section with `foreground_colour: white` and it becomes a dark band; put it in
   a plain section and it is light. There is no second stylesheet for dark, and
   no way to end up with a dark card marooned in a white page.

   The only fixed colours are the categorical accents, because a hue that means
   "business" or "infrastructure" has to mean it in both. Accents mark things
   (a card's top edge, a step's badge, a stage's rule); they never colour text,
   because gold or sky text is unreadable on a light section and indigo text is
   unreadable on a dark one. Status colours that *are* text are mixed with
   currentColor, which darkens them on light sections and lightens them on dark.

   Layout follows the space the block is given, not the viewport: `.ex` is a
   size container, so a grid in a half-width split column reflows the same way
   it would on a phone.
   ========================================================================== */

.ex {
  --ex-surface: color-mix(in srgb, currentColor 4%, transparent);
  --ex-line: color-mix(in srgb, currentColor 16%, transparent);
  --ex-line-strong: color-mix(in srgb, currentColor 30%, transparent);
  --ex-muted: color-mix(in srgb, currentColor 76%, transparent);
  --ex-faint: color-mix(in srgb, currentColor 58%, transparent);
  --ex-radius: 14px;
  --ex-radius-sm: 9px;
  --ex-gap: 1.25rem;
  --ex-accent: currentColor;
  /* an accent pulled a little toward the text colour, so a mark stays visible
     on its own section: deep hues lift on dark, pale ones deepen on light */
  --ex-mark: color-mix(in srgb, var(--ex-accent) 82%, currentColor);
  container-type: inline-size;
  width: 100%;
}

/* categorical accents — constant across light and dark sections */
.ex-accent-indigo  { --ex-accent: #312b6d; }
.ex-accent-blue    { --ex-accent: #1d74b3; }
.ex-accent-sky     { --ex-accent: #82cae6; }
.ex-accent-magenta { --ex-accent: #cc1d63; }
.ex-accent-coral   { --ex-accent: #ec7d6a; }
.ex-accent-gold    { --ex-accent: #f9d68a; }
.ex-accent-green   { --ex-accent: #2bb673; }

/* a dark section needs the deeper accents lifted to stay legible */
.bg-dark .ex-accent-indigo,
.bg-black .ex-accent-indigo { --ex-accent: #8f88d6; }
.bg-dark .ex-accent-blue,
.bg-black .ex-accent-blue { --ex-accent: #5aa9e0; }
.bg-dark .ex-accent-magenta,
.bg-black .ex-accent-magenta { --ex-accent: #ef6ba0; }

/* A custom property's var() is resolved where it is declared, so the mark has
   to be re-derived on the element that sets the accent, not just on .ex. */
[class*="ex-accent-"] { --ex-mark: color-mix(in srgb, var(--ex-accent) 82%, currentColor); }

/* Headings take the section's ink, like everything else here. The theme's
   heading colour is the same as its body colour on a plain section, and on a
   coloured one it was the reason titles stayed dark on a dark band. */
.ex h3,
.ex h4 {
  color: inherit;
}
.ex p {
  line-height: 1.6;
}

.ex-head { margin-bottom: 1.25rem; }
.ex-eyebrow {
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ex-faint);
  margin-bottom: .6rem;
}
.ex-heading { font-weight: 800; letter-spacing: -.01em; margin-bottom: .35rem; }
.ex-intro { color: var(--ex-muted); max-width: 62ch; }
.ex-intro > :last-child { margin-bottom: 0; }
.ex-footnote { color: var(--ex-faint); font-size: .88rem; margin-top: 1rem; }
.ex-footnote > :last-child { margin-bottom: 0; }
.ex-card {
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  background: var(--ex-surface);
  padding: 1.25rem 1.35rem;
  height: 100%;
}
.ex-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .74rem;
  color: var(--ex-faint);
  display: block;
  margin-top: .5rem;
  word-break: break-word;
}

/* ── status chips ─────────────────────────────────────────────────────── */
.ex-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  border-radius: 999px;
  padding: .1em .65em;
  border: 1px solid var(--ex-line-strong);
  white-space: nowrap;
}
.ex-chip::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
}
/* `color: color-mix(…, currentColor)` reads the inherited colour, so the chip
   is a dark green on a light section and a bright one on a dark section. */
.ex-chip-live {
  color: color-mix(in srgb, #1f9d57 68%, currentColor);
  border-color: color-mix(in srgb, #1f9d57 45%, transparent);
}
.ex-chip-built {
  color: color-mix(in srgb, #d99a1e 62%, currentColor);
  border-color: color-mix(in srgb, #d99a1e 50%, transparent);
}
.ex-chip-built::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ex-chip-planned { color: var(--ex-faint); border-style: dashed; }
.ex-status-note { font-size: .78rem; color: var(--ex-faint); margin-top: .4rem; }

/* ── process steps ────────────────────────────────────────────────────── */
/* Columns follow the number of steps, so six steps are two rows of three and
   never a row of four with two left over. */
.ex-steps,
.ex-timeline {
  --ex-cols: 4;
  display: grid;
  gap: 1.75rem var(--ex-gap);
  grid-template-columns: repeat(var(--ex-cols), minmax(0, 1fr));
}
.ex-n1 { --ex-cols: 1; }
.ex-n2 { --ex-cols: 2; }
.ex-n3, .ex-n6, .ex-n9 { --ex-cols: 3; }
.ex-n5 { --ex-cols: 5; }
.ex-step { position: relative; }
.ex-step-n {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: var(--ex-radius-sm);
  border: 1.5px solid var(--ex-mark);
  background: color-mix(in srgb, var(--ex-accent) 14%, transparent);
  font-weight: 800; font-size: .85rem;
  margin-bottom: .75rem;
}
.ex-step-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-faint); }
.ex-step h4 { font-size: 1.05rem; font-weight: 800; margin: .2rem 0 .35rem; }
.ex-step p { color: var(--ex-muted); font-size: .92rem; margin: 0; }

/* ── timeline ─────────────────────────────────────────────────────────── */
.ex-stage { border-top: 3px solid var(--ex-mark); padding-top: .9rem; }
.ex-stage h4 { font-size: 1.1rem; font-weight: 800; margin: .2rem 0 .35rem; }
.ex-stage p { color: var(--ex-muted); font-size: .92rem; margin: 0; }

@container (max-width: 900px) {
  .ex-n4, .ex-n7, .ex-n8 { --ex-cols: 2; }
  .ex-n5 { --ex-cols: 3; }
}
@container (max-width: 640px) {
  .ex-steps, .ex-timeline { --ex-cols: 2; }
  .ex-n1 { --ex-cols: 1; }
}
/* One column: the step's badge sits beside its text instead of above it. */
@container (max-width: 480px) {
  .ex-steps, .ex-timeline { --ex-cols: 1; row-gap: 1.25rem; }
  .ex-steps-numbered .ex-step {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    column-gap: .9rem;
  }
  .ex-steps-numbered .ex-step > * { grid-column: 2; }
  .ex-steps-numbered .ex-step > .ex-step-n { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
}

/* ── comparison ───────────────────────────────────────────────────────── */
.ex-comparison { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.ex-before { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.ex-before-item {
  display: grid;
  place-items: center;
  text-align: center;
  font-size: .82rem; font-weight: 700;
  color: var(--ex-muted);
  padding: .7rem .5rem;
  border: 1.5px dashed var(--ex-line-strong);
  border-radius: var(--ex-radius-sm);
  background: repeating-linear-gradient(45deg, transparent, transparent 6px,
              color-mix(in srgb, currentColor 4%, transparent) 6px,
              color-mix(in srgb, currentColor 4%, transparent) 7px);
}
.ex-before + .ex-footnote { margin-top: .75rem; }
.ex-comparison-arrow { color: var(--ex-faint); font-size: 1.6rem; text-align: center; }
.ex-after {
  border: 2px solid var(--ex-mark);
  border-radius: var(--ex-radius);
  background: color-mix(in srgb, var(--ex-accent) 12%, transparent);
  padding: 1.35rem 1.5rem;
}
.ex-after b { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.15; margin-bottom: .3rem; }
.ex-after span { color: var(--ex-muted); font-size: .92rem; }
@container (max-width: 720px) {
  .ex-comparison { grid-template-columns: minmax(0, 1fr); }
  .ex-comparison-arrow { transform: rotate(90deg); }
}

/* ── can / cannot ─────────────────────────────────────────────────────── */
.ex-cancannot { display: grid; gap: var(--ex-gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@container (max-width: 560px) { .ex-cancannot { grid-template-columns: minmax(0, 1fr); } }
.ex-list { list-style: none; margin: 0; padding: 0; }
.ex-list li { display: flex; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--ex-line); color: var(--ex-muted); font-size: .93rem; line-height: 1.5; margin: 0; }
.ex-list li:first-child { border-top: 0; padding-top: 0; }
.ex-list li:last-child { padding-bottom: 0; }
.ex-list li::before { font-weight: 900; flex: none; }
.ex-can li::before { content: "\2713"; color: color-mix(in srgb, #1f9d57 75%, currentColor); }
.ex-cannot li::before { content: "\2715"; color: color-mix(in srgb, #cc1d63 75%, currentColor); }

/* ── numbered rules ───────────────────────────────────────────────────── */
.ex-rules { display: grid; gap: 0; }
.ex-rule { display: flex; gap: .9rem; padding: 1rem 0; border-top: 1px dashed var(--ex-line-strong); }
.ex-rule:first-child { border-top: 0; padding-top: 0; }
.ex-rule:last-child { padding-bottom: 0; }
/* Outlined, not filled: a fill of var(--ex-accent) resolving to currentColor
   would swallow the number. Matches the step badge. */
.ex-rule-n {
  width: 1.8rem; height: 1.8rem; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1.5px solid var(--ex-mark);
  background: color-mix(in srgb, var(--ex-accent) 14%, transparent);
  font-weight: 800; font-size: .8rem;
}
.ex-rule h4 { font-size: 1rem; font-weight: 800; margin: .15rem 0 .2rem; }
.ex-rule p { color: var(--ex-muted); font-size: .9rem; margin: 0; }

/* ── capability grid ──────────────────────────────────────────────────── */
/* `columns` is honoured as given, then steps down as the space narrows. */
.ex-grid {
  --ex-cols: 3;
  display: grid;
  gap: var(--ex-gap);
  grid-template-columns: repeat(var(--ex-cols), minmax(0, 1fr));
}
.ex-grid-1 { --ex-cols: 1; }
.ex-grid-2 { --ex-cols: 2; }
.ex-grid-4 { --ex-cols: 4; }
.ex-grid-5 { --ex-cols: 5; }
.ex-grid-6 { --ex-cols: 6; }
@container (max-width: 900px) {
  .ex-grid-4 { --ex-cols: 2; }
  .ex-grid-5, .ex-grid-6 { --ex-cols: 3; }
}
@container (max-width: 640px) {
  .ex-grid-3, .ex-grid-5, .ex-grid-6 { --ex-cols: 2; }
}
@container (max-width: 440px) {
  .ex-grid { --ex-cols: 1; }
}

/* An accent is the card's top edge. The inset shadow follows the corner radius,
   which a border-top on a rounded card doesn't. */
.ex-cap[class*="ex-accent-"] { box-shadow: inset 0 3px 0 var(--ex-mark); }
.ex-cap-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem .6rem;
  margin-bottom: .45rem;
}
.ex-cap-meta .ex-chip:only-child { margin-left: auto; }
/* Title and chip on one line. The capability grid moved its chip to the meta
   row so a long title gets the card's full width, but project blocks built on
   this stylesheet (purecreative's architecture maps) still lay out this way. */
.ex-cap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.ex-cap h4 { font-size: 1.05rem; font-weight: 800; line-height: 1.3; margin: 0 0 .35rem; }
.ex-cap .ex-cap-sub { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ex-faint); }
.ex-cap p { color: var(--ex-muted); font-size: .9rem; margin: 0; }