/* ============================================================
   Grove Design System — long-form DS showcase page
   Builds on portfolio.css tokens + pages.css frames.
   Display = var(--font-display) (Bebas), body = var(--font-body).
   ============================================================ */

/* Nav sits over a dark hero on this page — keep it light until it goes solid */
.ds-page .nav:not(.is-solid) { color: var(--on-dark); }

/* ---------- Full-bleed band helper ---------- */
.band {
  width: 100%;
}
.band--ink   { background: var(--hero-bg); color: var(--on-dark); }   /* #111110 */
.band--ink-2 { background: #1A1A18;        color: var(--on-dark); }   /* token block */
.band--alt   { background: var(--bg-alt);  color: var(--ink); }       /* #ECEAE4 */

/* ============================================================
   BLOCK 1 — Page hero (compact, dark)
   ============================================================ */
.ds-hero {
  padding-top: clamp(122px, 16vh, 168px);
  padding-bottom: clamp(56px, 9vh, 96px);
}
.ds-hero .back-link { color: var(--on-dark-muted); }
.ds-hero .back-link:hover { color: var(--on-dark); }
.ds-hero__label {
  color: var(--on-dark-muted);
  margin-bottom: 18px;
}
.ds-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  margin: 0;
  max-width: 16ch;
}
.ds-hero__sub {
  margin: 26px 0 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.ds-hero__desc {
  margin: 28px 0 0;
  max-width: 60ch;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: #C9C8C2;
}
.ds-hero__desc strong { color: var(--on-dark); font-weight: 600; }

/* ============================================================
   BLOCK 2 — Context strip (4 editorial stats)
   ============================================================ */
.ds-context__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(56px, 9vh, 92px);
}
.ds-stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 0.96;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  color: var(--ink);
}
.ds-stat__label {
  display: block;
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 22ch;
}
@media (max-width: 820px) {
  .ds-context__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}
@media (max-width: 480px) {
  .ds-context__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   Shared section rhythm for DS body blocks
   ============================================================ */
.ds-block { padding-block: clamp(72px, 11vh, 116px); }
.ds-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 18px;
}
.band--ink .ds-eyebrow,
.band--ink-2 .ds-eyebrow { color: #9FC7F2; }
.ds-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  margin: 0 0 28px;
  max-width: 18ch;
}
.ds-prose { max-width: 64ch; }
.ds-prose p {
  margin: 0 0 22px;
  font-size: 1.1875rem;
  line-height: 1.72;
}
.ds-prose p:last-child { margin-bottom: 0; }
.ds-prose strong { font-weight: 600; }
.ds-prose em { font-style: italic; color: var(--accent); }
.band--ink .ds-prose,
.band--ink-2 .ds-prose { color: #C9C8C2; }
.band--ink .ds-prose strong,
.band--ink-2 .ds-prose strong { color: var(--on-dark); }
.band--ink .ds-prose em,
.band--ink-2 .ds-prose em { color: #9FC7F2; }

/* ============================================================
   Image shot + placeholder system
   ============================================================ */
.ds-shot {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}
.ds-shot img { display: block; width: 100%; height: auto; }

/* before-state treatment — muted, "past" */
.ds-shot--past img { filter: grayscale(0.32) saturate(0.72) brightness(0.99); }

/* placeholder (shown until the real file lands in /images) */
.ds-ph { display: none; }
.ds-shot.is-empty { box-shadow: none; background: transparent; }
.ds-shot.is-empty img { display: none; }
.ds-shot.is-empty .ds-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  aspect-ratio: 16 / 10;
  padding: 24px;
  border: 1.5px dashed #C7C5BD;
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(0,0,0,0.018) 11px 12px
    ),
    #F7F6F2;
}
.band--ink .ds-shot.is-empty .ds-ph,
.band--ink-2 .ds-shot.is-empty .ds-ph {
  border-color: #3A3A36;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(255,255,255,0.02) 11px 12px
    ),
    #201F1D;
}
.ds-ph__tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.ds-ph__file {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.92rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
}
.band--ink .ds-ph__file,
.band--ink-2 .ds-ph__file {
  color: var(--on-dark);
  background: #2B2A27;
  border-color: #3A3A36;
}
.band--ink .ds-ph__tag,
.band--ink-2 .ds-ph__tag { color: var(--on-dark-muted); }
.ds-ph__hint { font-size: 0.78rem; color: var(--muted); }

/* shared caption (reuses cs-figcap feel but works on dark too) */
.ds-cap {
  margin: 18px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 64ch;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}
.ds-cap strong { color: var(--ink); font-weight: 600; }
.band--ink .ds-cap,
.band--ink-2 .ds-cap { color: var(--on-dark-muted); border-left-color: #3A3A36; }
.band--ink .ds-cap strong,
.band--ink-2 .ds-cap strong { color: var(--on-dark); }

/* ============================================================
   BLOCK 3 — What I walked into (two-column, text left / stacked imgs right)
   ============================================================ */
.ds-before__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.ds-before__media {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
}
.ds-before__media .ds-figure:nth-child(2) {
  margin-left: clamp(0px, 6vw, 56px);
}
@media (max-width: 860px) {
  .ds-before__grid { grid-template-columns: 1fr; gap: 40px; }
  .ds-before__media .ds-figure:nth-child(2) { margin-left: 0; }
}

/* ============================================================
   BLOCK 4 / 5 / 7 — text-first then full-width media
   ============================================================ */
.ds-figure { margin: 0; }
.ds-figure--lead { margin-top: clamp(40px, 6vh, 64px); }
.ds-figure--center {
  max-width: 920px;
  margin-inline: auto;
}

/* ============================================================
   BLOCK 6 — Component showcase (alternating rows)
   ============================================================ */
.ds-showhead { margin-bottom: clamp(40px, 6vh, 64px); }
.ds-showhead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  line-height: 1.0;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  margin: 10px 0 0;
}
.ds-showhead__sub {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
}

.ds-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.ds-row + .ds-row { margin-top: clamp(48px, 8vh, 88px); }
.ds-row__text { max-width: 46ch; }
.ds-row__num {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.ds-row__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.0;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  margin: 0 0 18px;
}
.ds-row__body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}
.ds-row__body strong { color: var(--ink); font-weight: 600; }
/* reverse: media moves right, text left */
.ds-row--rev .ds-row__media { order: 2; }
.ds-row--rev .ds-row__text  { order: 1; }
@media (max-width: 820px) {
  .ds-row { grid-template-columns: 1fr; gap: 24px; }
  .ds-row--rev .ds-row__media,
  .ds-row--rev .ds-row__text { order: 0; }
  .ds-row__text { order: -1 !important; }
}

/* ============================================================
   BLOCK 8 — Impact (centered, narrow)
   ============================================================ */
.ds-impact { max-width: 680px; margin-inline: auto; text-align: left; }
.ds-impact .ds-h2 { margin-bottom: 28px; }
.ds-impact p {
  margin: 0 0 22px;
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--ink);
}
.ds-impact p:last-child {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  color: var(--accent);
}

/* ============================================================
   BLOCK 9 — Prev / next page nav
   ============================================================ */
.ds-pagenav {
  border-top: 1px solid var(--border);
}
.ds-pagenav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.ds-pagenav__cell {
  background: var(--bg-alt);
  padding: clamp(32px, 5vw, 52px) clamp(20px, 4vw, 44px);
  transition: background 0.3s var(--ease);
}
a.ds-pagenav__cell:hover { background: #fff; }
.ds-pagenav__cell--next { text-align: right; }
.ds-pagenav__dir {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.ds-pagenav__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.0;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  margin: 0;
  transition: color 0.2s var(--ease);
}
a.ds-pagenav__cell:hover .ds-pagenav__name { color: var(--accent); }
.ds-pagenav__cell--disabled { opacity: 0.5; }
.ds-pagenav__cell--disabled .ds-pagenav__name { color: var(--muted); }
.ds-pagenav__center {
  text-align: center;
  padding: clamp(24px, 4vh, 36px) 0;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .ds-pagenav__grid { grid-template-columns: 1fr; }
  .ds-pagenav__cell--next { text-align: left; }
}