/* quote-strip.css: homepage quote strip (inc/quote-strip/render.php).
 *
 * Handle gerbs-quote-strip, dependency gerbs-tokens, enqueued only on a request that renders the
 * band (front page, flag on or a valid preview, at least one live quote). Prefix .gquote.
 *
 * The heading is an h2, so under 980px gerbs-skin.css sets it to 34px !important, as it does every
 * homepage section heading beside it (Shop by category, Top Sellers, the story band). That is left
 * alone on purpose, so the band's heading matches its neighbours; at 24px on desktop it matches Top
 * Sellers. The words sit straight in the blockquote, with no <p>, so the skin's
 * `body #main-content p { color: #000 }` (1-0-2) and Divi's p padding never reach them.
 *
 * Every inner rule is scoped under .gquote on purpose: the band renders inside a Divi Code module,
 * where Divi's element rules (.et-l--body ul, p and h2, specificity 0-1-1) outrank a single class.
 * Measured on slot1 2026-10-06: unscoped, the list took Divi's 1em left padding and 23px bottom
 * padding (so the first quote sat 7px off its snap point) and the phone heading grew to Divi's size.
 *
 * The band is appended to [gerbs_home_merch]'s output, so it sits inside that Divi Code module,
 * directly after .gmerch-sellers-band. That band's bottom deckle wave hangs 80px BELOW it
 * (home-merch.css, .gmerch-sellers-divider--bottom, z-index above us), so this band's top padding
 * clears the wave, and the story band's offset that existed only to clear the same wave is reset
 * below while this band is present.
 *
 * Tokens only. No box-shadow and no left accent keyline (plan PR C). Container-query responsive:
 * the band is its own inline-size container, so it answers to the width Divi gives it, not the
 * viewport.
 *   wide (>= 700px)  quote at --fs-24 with the buttons either side of it
 *   narrow           quote at --fs-20, buttons centred beneath it (< 700px)
 *   very narrow      quote at --fs-18 (< 380px)
 *
 * Wrapping (CLAUDE.md, "Headings must wrap cleanly"): the heading takes text-wrap: balance from the
 * shared selector list in gerbs-tokens.css; the quote takes text-wrap: pretty here, with its measure
 * in ch. Nothing here is nowrap.
 */

.gquote {
  container-type: inline-size;
  max-width: 1280px;
  margin: 0 auto;
  padding: 104px 24px var(--space-8);
  color: var(--gerbs-ink);
  font-family: var(--ff-body);
}
.gquote *,
.gquote *::before,
.gquote *::after { box-sizing: border-box; }

.gquote .gquote__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.gquote .gquote__title {
  margin: 0 0 var(--space-6);
  padding: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--gerbs-ink);
}

/* ── The stage: buttons either side of the list ───────────────────────────── */

.gquote .gquote__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.gquote .gquote__list {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.gquote .gquote__list:focus { outline: none; }
.gquote .gquote__list:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
/* Once the script has revealed the buttons, they replace the scrollbar. */
.gquote--js .gquote__list { scrollbar-width: none; }
.gquote--js .gquote__list::-webkit-scrollbar { display: none; }

.gquote .gquote__item {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--space-2) var(--space-2);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.gquote .gquote__fig {
  margin: 0;
  max-width: 100%;
}

.gquote .gquote__words {
  margin: 0 auto;
  padding: 0;
  border: 0;
  max-width: 34ch; /* resolves against the quote's own font, set here rather than on the p */
  quotes: none;
  font-family: var(--ff-display);
  font-size: var(--fs-24);
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--gerbs-ink);
  text-wrap: pretty;
}

.gquote .gquote__cap {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
}

.gquote .gquote__stars {
  display: inline-flex;
  gap: 2px;
  line-height: 0;
}
.gquote .grev-star {
  width: 18px;
  height: 18px;
  fill: var(--gerbs-ink-20);
  flex: 0 0 auto;
}
.gquote .grev-star--on { fill: var(--gerbs-gold); }

.gquote .gquote__name {
  font-weight: var(--fw-semibold);
  color: var(--gerbs-ink);
}

.gquote .gquote__shop {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch floor */
  padding: 0 var(--space-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--gerbs-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gquote .gquote__shop:hover { color: var(--gerbs-blue-hover); }
.gquote .gquote__shop:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Previous / next ──────────────────────────────────────────────────────── */

.gquote .gquote__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gerbs-ink-20);
  border-radius: var(--radius-pill);
  background: var(--gerbs-white);
  color: var(--gerbs-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
/* Author display rules beat the UA's [hidden]; restate it so the buttons stay hidden until the
   script has wired them. */
.gquote .gquote__btn[hidden] { display: none; }
.gquote .gquote__btn:hover {
  border-color: var(--gerbs-blue);
  color: var(--gerbs-blue);
}
.gquote .gquote__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
.gquote .gquote__btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  border-color: var(--gerbs-ink-20);
  color: var(--gerbs-ink);
}

/* ── Container breakpoints ────────────────────────────────────────────────── */

@container (max-width: 699px) {
  .gquote .gquote__title { margin-bottom: var(--space-5); }
  .gquote .gquote__stage { flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-4); }
  .gquote .gquote__list { order: 0; flex-basis: 100%; }
  .gquote .gquote__btn { order: 1; }
  .gquote .gquote__words { font-size: var(--fs-20); }
}

@container (max-width: 379px) {
  .gquote .gquote__words { font-size: var(--fs-18); }
}

/* ── The story band below ─────────────────────────────────────────────────────
   home-merch.css pads .gerbs-story-band (102 / 72 / 48px) only to clear the Top Sellers wave. With
   this band in between, the wave lands in this band's top padding instead, so that offset would be
   dead space. Present only while the band renders, because this file is enqueued only then. */
body:has(.gquote) .et_pb_section.gerbs-story-band { padding-top: var(--space-12); }

@media (max-width: 980px) {
  .gquote { padding: 96px 16px var(--space-6); }
  body:has(.gquote) .et_pb_section.gerbs-story-band { padding-top: var(--space-6); }
}

@media (max-width: 620px) {
  .gquote { padding-top: 88px; }
  body:has(.gquote) .et_pb_section.gerbs-story-band { padding-top: var(--space-4); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .gquote .gquote__list { scroll-behavior: auto; }
  .gquote .gquote__btn { transition: none; }
}