/* quote — one centred pull-quote. The quote rides the h2 register, the
 * attribution the eyebrow's. */

.sk-quote {
  position: relative;
  isolation: isolate; /* Where the copy sits when the band stands taller than its content. */
  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;
}
/* align-content is inert on a single-line flex column, so the section's valign
 * arms cannot move this band; these restate the seat. */
.sk-section[data-valign="top"] .sk-quote:not([data-alignment]) {
  justify-content: flex-start;
}
.sk-section[data-valign="center"] .sk-quote:not([data-alignment]) {
  justify-content: center;
}
.sk-section[data-valign="bottom"] .sk-quote:not([data-alignment]) {
  justify-content: flex-end;
}
/* A transparent BORDER, not padding, so band spacing survives: `inset` and
 * getBoundingClientRect both step past a border. */
.sk-component[data-sk="quote"]:has(> .sk-quote-media) {
  margin-block-start: calc(-1 * var(--sk-chrome-clear, 0px));
  border-block-start: var(--sk-chrome-clear, 0px) solid transparent;
  --sk-chrome-paid: var(--sk-chrome-clear, 0px);
  --sk-chrome-ground: media;
}

/* The crop WINDOW (.sk-crop: the shared tier owns cover and true focal inside). */
.sk-quote-media {
  position: absolute;
  /* `inset` resolves against the PADDING box, so this stops inside the
   * transparent border. */
  inset: calc(-1 * var(--sk-chrome-paid, 0px)) 0 0;
  z-index: 0;
  /* Full-bleed backdrop stays square; card mode 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);
  text-align: center;
}
/* A card carries its own inset. */
.sk-quote-inner:not(.sk-card) {
  padding-block: calc(var(--sk-band-pad) * 0.4);
}
.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);
}

/* 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 wash sits between the photo and the text, always on when a photo is
 * present: a dimmed backdrop is what carries the contrast. */
.sk-quote:has(> .sk-quote-media)::before {
  content: "";
  position: absolute;
  /* Over the paid room, or stepping across the whole band. */
  inset: calc(-1 * var(--sk-chrome-paid, 0px)) 0 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))
  );
}
/* Fixed, tone-independent ink over a photo: contrast is carried by the floor,
 * never the image. */
.sk-quote:not([data-card="true"]):has(> .sk-quote-media) {
  --sk-ink: rgba(255, 255, 255, 0.97);
  --sk-ink-on-dark: 1;
  --sk-ink-muted: rgba(255, 255, 255, 0.75);
  --sk-selection-bg: var(--sk-selection-page-bg);
  --sk-selection-ink: var(--sk-selection-page-ink);
}