/* quote-feature — one pulled quote over a photograph.
 *
 * NOT FROM THE HANDOFF. Built from the hero's own machinery: same scrim
 * tokens, same full-bleed image treatment, same white-on-photo contrast
 * budget. A quote over a photo and a heading over a photo should not look
 * like two different systems.
 */

.qfeature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(18rem, 14rem + 13.333vw, 26rem);
  padding-block: var(--section-pad-y);
  color: var(--color-text-inv);
}

.qfeature__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Same scrim as the hero, and STRONGER than the homepage's for the same
 * reason interior heroes are: this runs over whatever photograph a page
 * happens to have, not the two the mockup was tuned against. */
.qfeature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
      rgb(0 0 0 / 0.82) 0%,
      rgb(0 0 0 / 0.58) 60%,
      rgb(0 0 0 / 0.30) 100%);
}

/* A tint of the brand colour over the photo, so the band belongs to the
 * palette rather than being a generic dark image. */
.qfeature--accent::before   { background-image: linear-gradient(90deg, rgb(0 60 82 / 0.88) 0%, rgb(0 60 82 / 0.62) 60%, rgb(0 0 0 / 0.34) 100%); }
.qfeature--primary::before  { background-image: linear-gradient(90deg, rgb(88 0 33 / 0.88) 0%, rgb(88 0 33 / 0.62) 60%, rgb(0 0 0 / 0.34) 100%); }
.qfeature--charcoal::before { background-image: linear-gradient(90deg, rgb(20 20 19 / 0.88) 0%, rgb(20 20 19 / 0.62) 60%, rgb(0 0 0 / 0.34) 100%); }

/* No photograph: a flat brand band, not a gradient sitting on the page
 * ground. Same reasoning as .hero--noimage. */
.qfeature--noimage.qfeature--accent   { background: var(--color-accent); }
.qfeature--noimage.qfeature--primary  { background: var(--color-primary); }
.qfeature--noimage.qfeature--charcoal { background: var(--color-charcoal); }
.qfeature--noimage::before { content: none; }

.qfeature__figure {
  margin: 0;
  /* Rob 2026-08-22: was 46ch, which left a wide empty gutter to the right of
   * the quote. The band's own padding is the measure now. */
  max-width: 100%;
}

.qfeature__quote {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  /* --step-3. Reverted 2026-08-22 at Rob's request: the smaller size made the
   * band read as body copy rather than as a pulled quote. The height problem
   * it was meant to solve is fixed by the min-height floor below instead. */
  font-size: var(--step-3);
  font-weight: var(--fw-light);
  line-height: var(--leading-snug);
}
.qfeature__quote > * + * { margin-top: var(--space-2xs); }

/* Decorative mark, not a character in the markup — as text it would be
 * announced before every quote. */
.qfeature__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.42em;
  left: -0.06em;
  font-size: 3.4em;
  line-height: 1;
  color: currentColor;
  opacity: 0.22;
  pointer-events: none;
  z-index: -1;
}

.qfeature__attr {
  margin-top: var(--space-sm);
  font-size: var(--step-0);
  font-weight: var(--fw-bold);
  color: rgb(255 255 255 / 0.85);
}

@media (max-width: 768px) {
  .qfeature__figure { max-width: none; }
}

/* -- Narrow contexts -----------------------------------------------------
 * The band is used two ways: as a full-width page section, and inline in an
 * article where it inherits the 72ch reading measure (~725px). At that width
 * a 26rem min-height plus a 46ch figure made it very nearly square — 725x737
 * measured. Container queries let one block behave correctly in both.
 */
.qfeature { container-type: inline-size; }

@container (max-width: 820px) {
  .qfeature__figure { max-width: none; }
}

/* Fallback for engines without container queries: the band never needs to be
 * taller than its content plus padding, so let content drive and keep the
 * min-height only as a floor for the wide case. */
.qfeature { min-height: 0; padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); }
/* Let the content set the height. The floor exists only so a one-line quote
 * still reads as a band rather than a strip; it must never be what decides
 * the height of a normal two- or three-line quote. */
@media (min-width: 993px) {
  .qfeature { min-height: clamp(11rem, 9rem + 5vw, 15rem); }
}


/* -- Enclosure ----------------------------------------------------------
 * Rob 2026-08-22: rounded edges, matching the system's band treatment rather
 * than inventing one. feature-split, action-tiles and intro-duo all use the
 * same "tray and plate": an --enclosure-bg tray at --radius-shell holding a
 * plate at --radius-core, the difference between them being --tray-pad.
 *
 * The photograph and its scrim are inset by --tray-pad so they sit ON the
 * plate rather than filling the tray — otherwise the image would cover the
 * tray's own edge and the two radii would collapse into one.
 */
.qfeature {
  /*
   * WIDTH MATCHES THE PAGE CONTENT, not the viewport. `.container` is
   * max-width:(--container-max + 2*--gutter) with --gutter of side padding, so
   * its CONTENT box is --container-max wide and sits --gutter in from each
   * edge. Mirroring that arithmetic puts the band's edges exactly on the
   * content edges — measured 80 -> 1360 at a 1440 viewport, same as the card
   * grid above it. Previously the band ran 0 -> 1440.
   */
  max-width: var(--container-max);
  width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  margin-block: var(--space-md);
  padding: var(--tray-pad);
  background: var(--enclosure-bg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Inside an article the band's parent IS the container's content box, so
 * subtracting the gutter again would inset it twice. */
.container .qfeature,
.pblock__body .qfeature,
.mtext__body .qfeature {
  width: 100%;
}

/*
 * VERTICAL PADDING. `padding: var(--tray-pad)` above is the shorthand that
 * draws the tray, and it silently reset the padding-block the band had — the
 * quote ended up 8px from the plate edge. The breathing room belongs on the
 * inner container anyway, so it sits inside the plate rather than inflating
 * the tray.
 *
 * --section-pad-y is the design's own band rhythm: clamp(2.5rem … 4rem), the
 * 4rem ceiling the handoff caps vertical space at.
 */
.qfeature__inner {
  padding-block: var(--section-pad-y);
  /* .container's --gutter would be up to 80px, which is deep for a band this
   * size. Matches feature-split's panel padding instead. */
  padding-inline: clamp(1.5rem, 1rem + 1.667vw, 2.5rem);
  max-width: none;
}
.qfeature__bg,
.qfeature::before {
  inset: var(--tray-pad);
  border-radius: var(--radius-core);
  /*
   * THE BLEED, and why `width: auto` is NOT the fix.
   *
   * The base rule sets width/height:100%, which resolve against the PADDING
   * BOX. Combined with `inset: 8px` that made the image full width PLUS an
   * 8px offset — it hung 7px past the band (measured L9 T9 R-7 B-7).
   *
   * Releasing to `auto` was worse: an absolutely positioned REPLACED element
   * ignores the left/right pair when sizing and falls back to its intrinsic
   * dimensions, so a 1280x345 photo sat in a 1424px box leaving a 151px gap
   * on the right and overflowing 70px at the bottom.
   *
   * The tray has to be subtracted explicitly.
   */
  width: calc(100% - var(--tray-pad) * 2);
  height: calc(100% - var(--tray-pad) * 2);
}
/* The flat-colour variants have no image to round, so the plate is drawn by
 * an inset shadow on the band itself. */
.qfeature--noimage {
  border-radius: var(--radius-shell);
}

@media (max-width: 992px) {
  .qfeature { margin-inline: 1rem; border-radius: var(--radius-core); }
  .qfeature__bg,
  .qfeature::before {
    border-radius: calc(var(--radius-core) - var(--tray-pad));
    width: calc(100% - var(--tray-pad) * 2);
    height: calc(100% - var(--tray-pad) * 2);
  }
}