/* ---------- Our commitment (Vision & commitment) ---------- */
/* Client-directed: left/right split (vision quote left, three commitment boxes
   right), replacing the earlier centered treatment. No longer reuses the shared
   .commitment-inner/.commitment-center from global.css (those stay put for About's
   split variant, untouched) since this composition is now its own thing. */
.commitment {
  /* More generous than the shared --section-pad-block, per docs/section-layouts.md
     #7's explicit "generous vertical padding" call for this section specifically. */
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--ink-deep);
  color: var(--bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Soft depth layer - the same radial-glow technique already used on the footer's
   image showcase (css/sections/footer.css .footer-showcase-scrim / the earlier
   .footer-cta::before), reused rather than inventing a second visual language, so
   the terracotta "spark" reads consistently across the dark sections that use it. */
.commitment::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -25%;
  left: 15%;
  width: 50rem;
  height: 50rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--terracotta) 16%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* astamangala/section (commitment preset) renders its InnerBlocks children
   (one commitment-intro + N commitment-box) as flat siblings, not nested in
   a separate .commitment-boxes wrapper — a block can only have one
   InnerBlocks area. commitment-left spans every row via `grid-row: 1 / -1`,
   so CSS grid auto-placement fills column 1 with it and skips to column 2
   for each box in turn — the standard "spanning item + auto-flow siblings"
   technique, and it stays correct at any box count. */
.commitment-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.25rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.commitment-left { position: relative; grid-column: 1; grid-row: 1 / -1; }
.commitment .eyebrow {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--small);
  color: color-mix(in srgb, var(--bg) 70%, transparent);
  margin: 0 0 0.85rem;
}

/* Larger, more considered quote treatment than the shared base size (About's split
   variant is untouched, still using global.css's own .commitment-quote rule). */
.commitment-left .commitment-quote {
  position: relative;
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem);
  line-height: 1.25;
  max-width: 34ch;
  margin: 0 0 1.5rem;
  color: var(--bg);
}
/* Real typographic opening-quote glyph, not a straight ASCII quote in the copy -
   the mark itself now signals "this is the vision statement," so the surrounding
   text drops its own quote punctuation (see commitment.html). */
.commitment-left .commitment-quote::before {
  content: '\201C';
  position: absolute;
  top: -0.5em;
  left: -0.15em;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3.5rem + 5vw, 7.5rem);
  line-height: 1;
  color: color-mix(in srgb, var(--terracotta) 45%, transparent);
  pointer-events: none;
  z-index: -1;
}

.commitment-divider {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--terracotta);
  border-radius: 1px;
  margin: 0 0 1.5rem;
}

.commitment-lead {
  max-width: 46ch;
  margin: 0;
  color: color-mix(in srgb, var(--bg) 82%, transparent);
  line-height: 1.75;
}

/* Three commitment boxes - group the real 9-item core-values list
   (docs/content-source.md) into the same 3 themes the commitment paragraph already
   named (trusted relationships, consistent quality, client-first dedication). */
.commitment-box {
  border: 1px solid color-mix(in srgb, var(--bg) 16%, transparent);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.commitment-box:hover {
  border-color: color-mix(in srgb, var(--terracotta) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 4%, transparent);
}
.commitment-box-icon {
  display: block;
  font-size: 1.5rem;
  color: var(--terracotta);
  margin-bottom: 0.75rem;
}
.commitment-box h3 { color: var(--bg); font-size: var(--h3); margin: 0 0 0.4em; }
.commitment-box p {
  color: color-mix(in srgb, var(--bg) 78%, transparent);
  margin: 0;
  font-size: var(--body);
  max-width: none;
}

@media (max-width: 860px) {
  .commitment-split { grid-template-columns: 1fr; }
}

/* ---------- Staged reveal: vision (left), then the three commitment boxes ----------
   Mirrors the section's own structure (aspiration, then the practice broken into
   three parts) rather than motion for its own sake. Content is visible by default;
   script.js only adds `.is-pre-reveal` when JS runs AND the user hasn't asked for
   reduced motion, so nothing here depends on JS to be readable. */
.commitment [data-reveal] {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.commitment .is-pre-reveal { opacity: 0; transform: translateY(18px); }
.commitment .is-pre-reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Adjacent-sibling selectors rather than :nth-of-type — commitment-intro and
   commitment-box are now flat siblings (both render as <div>, see
   .commitment-split above), so :nth-of-type's same-tag counting would
   include commitment-intro and mis-number every box by one. */
.commitment-box + .commitment-box { transition-delay: 0.12s; }
.commitment-box + .commitment-box + .commitment-box { transition-delay: 0.24s; }