/* ── ita_statement ──────────────────────────────────────────────────
   Reused from cinematic_statement, which paired a kicker-rail column
   against a body column (1fr/2fr grid). That rail has NO counterpart
   anywhere in the approved mockup — every kicker+h2+body block there
   (Play Has No Age Limit, Visibility, ...) is a single left-aligned
   column capped at 720px (mockup's .max-720), kicker sitting directly
   above the heading. The rail was ported over unquestioned from IDA's
   source block and never checked against the mockup; it read as body
   copy cramped into a narrow right-hand column. Fixed by dropping the
   grid entirely — a centered variant (ita-stmt--center) is layered on
   top for sections like "Visibility" that also center-align the text.
   Tokens only. */

/* No padding override — spacing to neighboring blocks now comes from
   an explicit ita_spacer block in the page, not block CSS. */
.block-ita_statement {
  background: transparent;
}
.block-ita_statement .cs-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-section-x);
}
/* The title is NOT capped to 720px here — only the body paragraph is,
   for reading comfort. Capping the whole .cs-body-wrap (title + body
   together) squeezed titles into a column narrower than the block
   itself, wrapping them earlier than the available width needed. The
   centered variant below still caps .cs-inner as a whole, which is
   fine there since that layout is deliberately a narrow centered
   column end to end (title included), matching the mockup's
   .max-720.mx-auto.center pattern. */
.block-ita_statement .cs-body { max-width: 720px; }
.block-ita_statement .cs-label {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 16px;
  font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); white-space: normal;
}
.block-ita_statement .cs-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(25px,3vw,38px); line-height: 1.08; color: var(--color-fg);
  margin: 0 0 18px;
}
.block-ita_statement .cs-body {
  font-size: clamp(16px,1.5vw,19px); line-height: 1.6; color: var(--color-fg-muted);
}
.block-ita_statement .cs-body p + p { margin-top: 14px; }
.block-ita_statement .cs-body em { font-style: normal; color: var(--color-accent); }
.block-ita_statement .cs-body strong { font-weight: 700; color: var(--color-fg); }
.block-ita_statement .cs-body a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 3px; }
.block-ita_statement .cs-body a:hover { color: var(--color-accent); }

/* Centered variant — same single column, just centered + narrower */
.block-ita_statement.ita-stmt--center .cs-inner { max-width: 720px; text-align: center; }
.block-ita_statement.ita-stmt--center .cs-label { justify-content: center; }

/* ── Adaptation for Via Crispi ───────────────────────────────────────
   ITA's private tokens and class vocabulary, carried locally. None of
   .shape / .sq / .ci / .h2 / .kicker / .lead / .link-cta /
   .section-head / .cta-row / .dot / .chip-grid / .cap-quote /
   .btn-dark / .sm-col is a shared primitive — they live in ITA's own
   stylesheet — so each block that uses them carries its own copy. */
.block-ita_statement {
  --color-accent-2: var(--color-accent);
  --color-accent-3: var(--color-accent-soft);
  --radius: 0;                      /* design system §8: square corners */
}
.block-ita_statement .shape {
  display: inline-block; width: 7px; height: 7px;
  background: var(--color-accent); margin-right: 10px;
  vertical-align: middle; flex: 0 0 auto;
}
.block-ita_statement .shape.ci { border-radius: 50%; }
.block-ita_statement .shape.tri {
  width: 0; height: 0; background: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid var(--color-accent);
}
.block-ita_statement .kicker, .block-ita_statement .section-head .kicker {
  display: flex; align-items: center;
  font-family: var(--font-eyebrow);
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-muted);
  margin-bottom: 20px;
}
.block-ita_statement .h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.015em;
  color: var(--color-fg); margin-bottom: 20px; text-wrap: balance;
}
.block-ita_statement .lead {
  font-size: 17px; line-height: 1.65;
  color: var(--color-fg-muted); max-width: 68ch;
}
.block-ita_statement .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.block-ita_statement .cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.block-ita_statement .btn-dark {
  background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg);
}
.block-ita_statement .btn-dark:hover {
  background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-bg);
}
.block-ita_statement .link-cta {
  font-family: var(--font-eyebrow);
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: var(--color-accent-soft);
  border-bottom: 1px solid var(--color-border); padding-bottom: 4px;
  transition: border-color .3s cubic-bezier(.2,.6,.2,1);
}
.block-ita_statement .link-cta:hover { border-bottom-color: var(--color-accent-soft); }