/* Data delivery cluster — new-design page styles (docs/DESIGN_SYSTEM.md).
   Serves BOTH the hub (/data-delivery) and the six use-case spokes
   (/data-delivery/<slug>): they are one design surface, so the shared bands,
   cards, hairline lists, FAQ and closing band are defined once here rather
   than duplicated per page (the single-edit-point guarantee). Spoke-only
   blocks are grouped at the bottom.
   Layout only: components from ds.css, values from theme.css tokens. */

/* Section bands: 80px rhythm with hairline separators; hero 124px top. */
.dd__band { padding-top: 80px; padding-bottom: 80px; border-bottom: 1px solid var(--border); }

.dd__hero { padding-top: 124px; }

.dd__band--last { border-bottom: 0; }

/* Section h2s run at the canvas's 48px step. */
/* Section heads use the 48px step, `.ds-display--md-plus` in ds.css, passed
   as size="md-plus" from the template. No override here. */

.dd__overline { font-size: 11px; letter-spacing: 0.14em; }

.dd__h1 { margin-top: 22px; max-width: 20ch; }

/* Full band width, like every other hero description on the site
   (`.dsx__hook`, `.ex__intro`, `.ct__intro`). It was the last one still
   capped — 66ch is 666px of a 1136px band, so this hero stopped ~470px
   short of the right edge while the card row beneath it ran the full
   width. */
.dd__intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body-foreground);
  margin: 26px 0 0;
  text-wrap: pretty;
}


/* ── Cards ── */

.dd__cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.dd__cards-3--tight .dd__card { padding: 26px; }

.dd__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  background: var(--background);
  height: 100%;
}

/* Destination brand tile. The three colors are official brand identities
   (Simple Icons), the documented exception to "no non-token colors" — a
   vendor mark in the wrong color is wrong, not off-palette. */
.dd__card-logo { margin-bottom: 18px; }

.dd__brand-s3 { color: #569A31; }
.dd__brand-snowflake { color: #29B5E8; }
.dd__brand-bigquery { color: #4285F4; }

.dd__card-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
}

.dd__card-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-foreground);
  margin: 10px 0 0;
}

.dd__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

/* No .dd__chip recipe here: the format chips use the DS `.ds-chip`, which had
   already drifted from this copy (6px/13px vs 5px/11px, 12px vs 11px type).
   Only the muted variant is page-specific. */
.dd__chip--muted { color: var(--muted-foreground); }

/* ── 02 Delivery model ── */

.dd__model {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: start;
  margin-top: 36px;
}

.dd__model-card {
  border: 1px solid var(--foreground);
  border-radius: var(--radius-xl);
  padding: 30px;
  background: var(--background);
}

.dd__model-title {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
}

.dd__model-blurb { margin-top: 14px; line-height: 1.7; text-wrap: pretty; }

.dd__model-best {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted-foreground);
  margin: 20px 0 0;
}

.dd__snapshots {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd__snapshot {
  background: var(--background);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.dd__snapshot--latest { color: var(--foreground); }

.dd__snapshot--latest .dd__snapshot-label { color: var(--body-foreground); }

.dd__snapshot--latest .dd__snapshot-tag { color: var(--accent); }

/* ── 03 Schedule ── */

.dd__cadence {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 28px;
  color: var(--foreground);
}

/* ── 04 Schema list ── */

.dd__schema {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 36px;
}

.dd__schema-row {
  background: var(--background);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
}

.dd__schema-key {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--accent);
}

.dd__schema-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--body-foreground);
}

/* ── 05 Use cases ── */

.dd__usecase { text-decoration: none; transition: border-color 0.15s ease; }

.dd__usecase:hover { border-color: var(--foreground); }

.dd__usecase-blurb { flex: 1; margin-bottom: 10px; }

.dd__usecase-more { font-size: 11px; }

/* ── 06 Why ── */

.dd__why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 36px;
}

.dd__why-cell { background: var(--background); padding: 28px; }

.dd__why-cell--filler { background: var(--muted); }

.dd__why-title { font-size: 18px; }

/* ── 07 FAQ ── */

/* ── FAQ ──
   `.dd__faq*` is GONE. The three clusters had three drifting accordions
   (different question size, padding, answer size and measure — and this
   one was additionally capped at 900px, so its rows stopped short of the
   section's right edge). One component now: `.ds-accordion` in ds.css,
   consumed via components/ui/accordion.html. */

/* ── Closing ink band ── */

.dd__closing { background: var(--primary); color: var(--primary-foreground); }

.dd__closing-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 32px;
  text-align: center;
}

.dd__closing-title {
  font-family: var(--font-sans);
  font-weight: 600;
  /* 56px is not a step on the DS display ladder; this heading is a
     page-local ink band, so it stays here rather than adding a
     seventh step for one use. Revisit if a second page wants 56. */
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--primary-foreground);
  margin: 0 auto;
  max-width: 26ch;
}

.dd__closing-sub {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--primary-foreground-muted);
  margin: 20px auto 0;
  max-width: 60ch;
  text-wrap: pretty;
}

.dd__closing-cta { margin-top: 32px; display: flex; justify-content: center; }

/* ═══ Spoke-only blocks (/data-delivery/<slug>) ═══════════════
   Everything above is shared with the hub. */

/* Breadcrumb above the spoke hero. */
.dd__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-bottom: 22px;
}

.dd__breadcrumb a { color: var(--muted-foreground); text-decoration: none; }

.dd__breadcrumb a:hover { color: var(--foreground); }

.dd__breadcrumb [aria-current] { color: var(--foreground); }

/* Editorial split (01 / 02 / 03) — the section label on the left, the prose
   or callout on the right. A full-width header over a readable-measure
   column left ~480px of dead space at 1280; this fills the band while
   keeping the prose at ~66ch. Proportions from the legacy page, which had
   this layout and read well on exactly this copy. */
/* ── Editorial split ─────────────────────────────────────────────
   `.dd__split` is GONE — it is `.ds-split` in ds.css. It was one of TWO
   pre-existing copies (the other was `.dsx__split`); this one already used
   `minmax(0, …)` correctly, and its gap and 960px collapse point were the
   ones that differed. The page-specific rules below stay here: they are
   composition, not the primitive. */

/* Kept, but knowingly a no-op today: ds.css declares no margin on
   `.ds-section-header`, so this changes nothing on any consumer. It survived
   a rename from `.dd__split` rather than being deleted, and renaming
   broadened it from this cluster to every `.ds-split` on the page. Left in
   place only because it states the intent (the grid gap is the gutter, not a
   heading margin) — delete it if ds.css ever gives the header a margin and
   this starts silently overriding it. */
.ds-split .ds-section-header { margin: 0; }

/* Long-form prose column. The grid column sets the measure. */
.dd__prose { margin-top: 0; }

.dd__prose p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-foreground);
  margin: 0 0 18px;
  text-wrap: pretty;
}

.dd__prose p:last-child { margin-bottom: 0; }

/* Callout (02 Why bulk delivery) — ink-bordered card with a blue check. */
.dd__callout {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 1px solid var(--foreground);
  border-radius: var(--radius-xl);
  padding: 28px 30px;
}

.dd__callout-check { width: 22px; height: 22px; color: var(--accent); }

.dd__callout p {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--foreground);
  margin: 0;
  text-wrap: pretty;
}

/* Numbered steps (03 How it works) — hairline cards, DS num badge. */
.dd__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.dd__step {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px;
  background: var(--background);
}

.dd__step .ds-num-badge { margin-bottom: 16px; }

/* Schema-list note (04 What's delivered). */
.dd__note {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 26px 0 0;
  max-width: 76ch;
}

.dd__note a { color: var(--accent); text-decoration: none; }

.dd__note a:hover { text-decoration: underline; }

.dd__note + .dd__schema { margin-top: 22px; }

/* Related links — two hairline-separated columns of blue arrow links. */
.dd__related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.dd__related li { border-bottom: 1px solid var(--border); }

.dd__related-link {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  font-size: 15px;
}

/* Second group ("Elsewhere on Canonical") — the rows keep the SAME rhythm as
   the first group; the break is carried by a label instead of extra padding,
   so it reads as grouping rather than a spacing glitch. */
.dd__related-label { margin: 34px 0 0; }

.dd__related-label + .dd__related { margin-top: 10px; }

/* ── Responsive ── */

/* Phone readability floor. Keyed at 768px to match ds.css — a page rule at
   640 would win at equal specificity (page stylesheets load AFTER ds.css) and
   silently reopen the 641-768 band that the DS floor closes.
   `.dd__chip` is deliberately absent: the format chips are `.ds-chip--sm`
   now, which the DS floor already covers. */
@media (max-width: 768px) {
  .dd__overline,
  .dd__usecase-more,
  .dd__model-best,
  .dd__breadcrumb { font-size: 12px; }
}

@media (max-width: 960px) {
  .dd__hero { padding-top: 108px; }
  /* The editorial split is NOT collapsed here any more: it is `.ds-split`,
     and it stacks at its own 1080px breakpoint in ds.css. Everything below
     is a page-local grid that happens to want the same 960px. */
  .dd__steps { grid-template-columns: minmax(0, 1fr); }
  .dd__related { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dd__cards-3 { grid-template-columns: minmax(0, 1fr); }
  .dd__model { grid-template-columns: minmax(0, 1fr); }
  .dd__why { grid-template-columns: minmax(0, 1fr); }
  .dd__why-cell--filler { display: none; }
  .dd__schema-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dd__callout { padding: 22px; gap: 12px; }
}

/* ── 44px tap targets for this page's OWN controls ───────────────────────
   ds.css's `any-pointer: coarse` block only reaches `.ds-*` selectors, so a
   page-local control matches nothing in it. The breadcrumb link is a real
   standalone navigation target (its `nav` holds nothing but links, so the
   WCAG 2.5.5 inline-text exemption does not apply) and sits at 18px. Same
   pointer key and reasoning as ds.css — read the long comment there before
   changing the query. */
@media (any-pointer: coarse) {
  .dd__breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
}