/* quote — one centered pull-quote in a deep band. Flush; the quote
 * rides the h2 register, the attribution the eyebrow's — voice from the
 * dials throughout. An optional decorative backgroundImage sits behind the
 * text (see the card-surface and photo-legibility blocks below). */

.sk-quote {
  position: relative;
  isolation: isolate; /* keep media/wash/content z-order local to this band */
  /* The ALIGNMENT axis's ride — where the copy sits when the band stands
   * taller than its content. The band stretches from INSIDE (the viewport
   * height below) or from OUTSIDE (a frame-row pane matching a taller
   * neighbour — base.css HEIGHT MATCH), so the flex column rides the root
   * unconditionally: at natural depth there is no spare height and the
   * justification is moot. Centered is the resting stance (the quote IS
   * "centered in a deep band"); the enum stamps data-alignment. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sk-quote[data-alignment="top"] {
  justify-content: flex-start;
}
.sk-quote[data-alignment="bottom"] {
  justify-content: flex-end;
}
/* The HEIGHT axis — `auto` rests on the quote's own depth (no rule needed),
 * `viewport` makes the band a SHARE of the viewport: the `viewportHeight`
 * prop stamps --sk-quote-h inline on the section root (a bare vh count
 * resting at 60 — photo/map's viewport-share register verbatim; svh, not
 * vh — stable under the mobile URL bar). min-height, not height: a long
 * quote on a short screen still fits, the band just grows. The copy sits
 * per the alignment axis above. */
.sk-quote[data-height="viewport"] {
  min-height: calc(var(--sk-quote-h, 60) * 1svh);
}
/* The media BOX (.sk-media — base.css owns cover + true-focal inside). */
.sk-quote-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Boundary rule: full-bleed backdrop, unbounded, stays square. (Card
   * mode's own surface, .sk-quote-inner, rounds via the card radius.) */
  --sk-media-radius: 0;
}
.sk-quote-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kit-space-3);
  /* The inline gutter rides base.css's BAND GUTTER home. */
  padding-block: calc(var(--sk-band-pad) * 0.4);
  text-align: center;
}
.sk-quote-text {
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}
.sk-quote-cite {
  font-style: normal;
  color: var(--sk-ink-muted);
}
.sk-quote-actions {
  margin-top: var(--kit-space-3);
}

/* ── The card surface — same treatment as features-grid's `card` prop:
 * wraps the quote, cite, and cta in one bounded, centered card riding the
 * kit's own card tokens (so it stays legible on any tone with zero extra
 * code — --sk-card/--sk-ink are already tone-remapped at the section root). */
/* The panel skeleton lives in base.css's CARD SURFACE home; only the
 * card's measure is the quote's own. */
.sk-quote[data-card="true"] .sk-quote-inner {
  max-width: 40rem;
  margin-inline: auto;
}

/* ── The background photo's legibility — the wash sits between the photo
 * and the text, always on when a photo is present (even inside a card: a
 * dimmed backdrop behind an opaque card is a fine moodier surround, and
 * touches nothing inside it). Tonality-owned, same var photo's filter
 * already reuses; the gradient below is the floor for a photo with no
 * tonality set. The <img> only exists in the DOM at all when
 * backgroundImage was set ({.exists} in the template), so its mere
 * presence is proof enough — no [src=""] check needed. */
.sk-quote:has(> .sk-quote-media)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(
    --sk-image-wash,
    linear-gradient(to bottom, rgba(14, 12, 10, 0.35), rgba(14, 12, 10, 0.55))
  );
}
/* The legibility FLOOR — fixed, tone-independent ink over a photo (mirrors
 * the lockup overlay's documented technique: contrast is carried by the
 * floor, never the image or the section's tone). Skipped when `card` is on
 * — the card already carries its own tone-correct ink over its own opaque
 * surface, so this must not fight it. */
.sk-quote:not([data-card="true"]):has(> .sk-quote-media) {
  --sk-ink: rgba(255, 255, 255, 0.97);
  --sk-ink-muted: rgba(255, 255, 255, 0.75);
}