/* ============================================================
   BLOCKS — what a built page looks like.

   Loaded by the public page and by the builder's canvas, so what an
   editor arranges in the console is what a reader gets. Every value
   comes from foundation.css; nothing here invents a colour or a step.
   ============================================================ */

/* The rhythm between blocks. Declared on both wrappers — the builder's
   canvas and the published page — so a page is spaced the same in the
   place it is made and the place it is read. */
.bk-canvas, .bk-canvas-live, .bk-column, .bk-section-inner { --bk-gap: var(--s-8); }
.bk + .bk { margin-top: var(--bk-gap, var(--s-8)); }
.bk-align-center { text-align: center; }

/* ── heading ──────────────────────────────────────────────── */
.bk-heading {
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
}
h2.bk-heading { font-size: clamp(26px, 2.6vw, 36px); }
h3.bk-heading { font-size: clamp(21px, 2vw, 26px); }
h4.bk-heading { font-size: 18px; letter-spacing: 0.01em; }
.bk-heading + .bk-text { margin-top: var(--s-4); }

/* ── text ─────────────────────────────────────────────────── */
.bk-text { color: var(--body); }
.bk-text > *:first-child { margin-top: 0; }
.bk-text > *:last-child  { margin-bottom: 0; }
.bk-text p { margin: 0 0 1em; }
.bk-text ul, .bk-text ol { margin: 0 0 1em; padding-left: 1.4em; }
.bk-text li { margin-bottom: .4em; }
.bk-text a { color: var(--green); text-decoration: underline; }
.bk-text-normal { font-size: 18px; line-height: 1.7; }
.bk-text-lede   { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--ink); }
.bk-text-small  { font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* ── image ────────────────────────────────────────────────── */
.bk-image { margin: 0; }
.bk-image-frame {
  overflow: hidden;
  border-radius: var(--r);
  background: var(--surface-2);
}
.bk-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-image figcaption, .bk-gallery figcaption, .bk-embed figcaption {
  font-size: 14.5px; color: var(--muted); margin-top: var(--s-3);
}
/* A wide or full-bleed picture steps outside the column of text it sits
   in. The width is capped against the viewport rather than set from it,
   so the breakout can never be wider than the room actually available —
   a 100vw block sits under the scrollbar and drags the whole page
   sideways. */
.bk-w-inline { max-width: 100%; }
.bk-w-wide, .bk-w-full { position: relative; left: 50%; transform: translateX(-50%); }
.bk-w-wide { width: min(1000px, calc(100vw - var(--gutter) * 3)); }
.bk-w-full { width: min(1320px, calc(100vw - var(--gutter) * 2)); }
.bk-w-full figcaption, .bk-w-wide figcaption { padding-inline: 2px; }

/* Inside a column there is no room to break out of. */
.bk-column .bk-w-wide, .bk-column .bk-w-full,
.bk-section .bk-w-wide, .bk-section .bk-w-full {
  position: static; left: auto; transform: none; width: 100%;
}

/* ── gallery ──────────────────────────────────────────────── */
.bk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc((100% - var(--s-5) * 3) / var(--bk-cols, 3))), 1fr));
  gap: var(--s-5);
}
.bk-gallery figure { margin: 0; }

/* ── columns ──────────────────────────────────────────────── */
.bk-columns {
  display: grid;
  gap: var(--s-10);
  align-items: start;
}
.bk-split-equal      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.bk-split-wide-left  { grid-template-columns: 1.6fr 1fr; }
.bk-split-wide-right { grid-template-columns: 1fr 1.6fr; }
@media (max-width: 760px) {
  .bk-split-wide-left, .bk-split-wide-right { grid-template-columns: 1fr; }
}
.bk-column > .bk:first-child { margin-top: 0; }

/* ── section ──────────────────────────────────────────────── */
.bk-section {
  border-radius: var(--r-lg);
  padding: var(--s-12) var(--s-10);
}
.bk-tone-plain { background: none; padding-inline: 0; }
.bk-tone-soft  { background: var(--bg-soft); }
.bk-tone-tint  { background: var(--tint); }
.bk-tone-dark  { background: var(--green-deep); }
.bk-tone-dark, .bk-tone-dark .bk-text { color: rgba(255,255,255,0.82); }
.bk-tone-dark .bk-heading, .bk-tone-dark .bk-stat-value { color: #fff; }
.bk-tone-dark .bk-text a { color: var(--sage); }
.bk-tone-dark .bk-stat-label { color: rgba(255,255,255,0.6); }
.bk-section-inner > .bk:first-child { margin-top: 0; }
@media (max-width: 600px) { .bk-section { padding: var(--s-8) var(--s-6); } }

/* ── button ───────────────────────────────────────────────── */
.bk-button.bk-align-center { display: flex; justify-content: center; }

/* ── quote ────────────────────────────────────────────────── */
.bk-quote { margin: 0; padding-left: var(--s-6); border-left: 3px solid var(--sage); }
.bk-quote blockquote {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bk-quote figcaption { margin-top: var(--s-4); font-size: 15px; color: var(--muted); }

/* ── figures ──────────────────────────────────────────────── */
.bk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--s-8);
}
.bk-stat-value {
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.bk-stat-label { margin-top: var(--s-3); font-size: 15px; color: var(--muted); max-width: 22ch; }

/* ── call to action ───────────────────────────────────────── */
.bk-cta {
  background: var(--clay-soft);
  border-radius: var(--r-lg);
  padding: var(--s-9) var(--s-10);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
}
.bk-cta h3 { margin: 0; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); }
.bk-cta p  { margin: var(--s-3) 0 0; color: var(--body); max-width: 46ch; }

/* ── divider ──────────────────────────────────────────────── */
.bk-divider { border: none; border-top: 1px solid var(--line-strong); }
.bk-space-tight  { margin-block: var(--s-5); }
.bk-space-normal { margin-block: var(--s-10); }
.bk-space-loose  { margin-block: var(--s-16); }

/* ── video ────────────────────────────────────────────────── */
.bk-embed { margin: 0; }
.bk-embed-frame {
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--r); overflow: hidden; background: var(--ink);
}
.bk-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }