/* ── Statement block ──
   Typographic page header. Token-only.
   Optional bg_image (image OR animated GIF) turns the section into a
   full-bleed hero with a scrim; when empty the bg layer is invisible
   and the section keeps the cream/dark surface treatment. */
.block-statement {
  position: relative;        /* required so the absolute bg + scrim layer below works */
  overflow: hidden;
  padding: clamp(80px, 12vh, 140px) var(--space-section-x) clamp(64px, 10vh, 96px);
}
.block-statement .statement-content {
  position: relative;
  z-index: 2;                /* sit above the bg + scrim layers */
  max-width: 820px;
}

/* Empty bg div is inert when there's no image; the inline style attribute
   only gets emitted when an image is set, so the element is invisible
   otherwise. Click target still works in edit mode for upload. */
.block-statement .statement-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* In edit mode the editor applies `body.cms-edit.cms-authed div[data-field-image]
   { position: relative; }` so it can render a "Click to replace image" hover
   overlay via ::after. That makes sense for image fields where the <div> IS the
   visible image hot-spot — but the bg div on this block is meant to be a
   full-bleed background behind the text. We need it absolute either way, so
   we restore that with a higher-specificity selector when in edit mode. */
body.cms-edit.cms-authed .block-statement .statement-bg {
  position: absolute;
  inset: 0;
}

/* ── Image-backed hero variant ── kicks in when render emits the
   .has-bg class (only when bg_image is non-empty). */
.block-statement.has-bg {
  padding-top: clamp(120px, 20vh, 200px);
  padding-bottom: clamp(96px, 16vh, 160px);
  min-height: 70vh;
}
.block-statement.has-bg .statement-bg::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom right,
    rgba(26, 23, 20, 0.62) 0%,
    rgba(26, 23, 20, 0.38) 55%,
    rgba(26, 23, 20, 0.18) 100%);
}
.block-statement.has-bg .section-label    { color: var(--color-accent-5); }
.block-statement.has-bg .statement-title  { color: var(--color-on-dark); }
.block-statement.has-bg .statement-title em { color: var(--color-accent-4); }
.block-statement.has-bg .statement-body   { color: var(--color-accent-6); }
/* On a busy image, the outline CTA needs a high-contrast border. */
.block-statement.has-bg .btn-outline.on-light {
  color: var(--color-on-dark);
  border-color: rgba(249, 246, 243, 0.7);
}
.block-statement.has-bg .btn-outline.on-light:hover {
  background: transparent;
  color: var(--color-on-dark);
  border-color: rgba(249, 246, 243, 1);
}

.block-statement .section-label { margin-bottom: 28px; }

.block-statement .statement-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.06;
  color: var(--color-fg);
  margin-bottom: 32px;
}
.block-statement .statement-title em {
  color: var(--color-accent);
  font-style: italic;
}
.block-statement.section--dark .statement-title { color: var(--color-on-dark); }
.block-statement.section--dark .statement-title em { color: var(--color-accent-4); }

.block-statement .statement-body {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--color-fg-muted);
  max-width: 640px;
}
.block-statement.section--dark .statement-body { color: var(--color-accent-5); }

.block-statement .statement-ctas {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px;
}

@media (max-width: 900px) {
  .block-statement { padding: 80px 32px 60px; }
}
@media (max-width: 480px) {
  .block-statement { padding: 64px 20px 48px; }
  .block-statement .statement-ctas .btn-primary,
  .block-statement .statement-ctas .btn-outline { width: 100%; text-align: center; }
}

/* ── Edit-mode chrome ──
   Single "× Clear image" button at the bottom-right of the hero. Always
   rendered, but the :has() rule below auto-hides it when there's no
   background image set — appears immediately when one is uploaded. */
.block-statement .statement-edit-chrome {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 60;            /* above content (z 2) and bg (z 0); below the block toolbar (z 110) */
  pointer-events: auto;
}
body:not(.cms-edit) .block-statement .statement-edit-chrome { display: none; }

/* Show the clear button only when .statement-bg has an inline url() —
   covers both server-rendered images and freshly-uploaded ones. */
.block-statement:not(:has(.statement-bg[style*="url"])) .statement-edit-btn--clear {
  display: none;
}

.block-statement .statement-edit-btn {
  font-family: var(--font-eyebrow);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: rgba(26, 23, 20, 0.78);
  color: var(--color-on-dark);
  border: 1px solid rgba(249, 246, 243, 0.35);
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
.block-statement .statement-edit-btn:hover {
  background: rgba(26, 23, 20, 0.92);
  border-color: rgba(249, 246, 243, 0.6);
}