/* DBL Google Reviews — the attributed deck on /testimonials/ (171).
 * Paired with dbl-google-reviews.php.
 *
 * Scoped to .dblg throughout. NOT to .et_builder_inner_content: Divi reuses that class for the
 * theme-builder header and footer, so scoping there restyles the site footer on this page.
 * See feedback_et-builder-inner-content-wraps-header-footer.
 *
 * Prefix check: `.dblg` is the GLOSSARY namespace on /criminal-court-terminology/ (.dblg-head,
 * .dblg-list, .dblg-cta). That page does not load this file and this file only loads on 171, so
 * they never meet — but every class here is `.dblg-` INSIDE `.dblg`, which the glossary is not,
 * so even a future collision cannot cross. Do not drop the wrapper scope.
 * See feedback_css-prefix-collides-with-footer.
 *
 * Values are the site's own, from reference_dbl-standard-components: Outfit headings, Work Sans
 * body, 2px #bf4600 section rule capped at 700px, 13px/.18em eyebrow, #f6f6f6 card tint with a
 * 2px border and 6px radius. Nothing here invents a token.
 */

.dblg {
  --dblg-ink:    #131313;
  --dblg-orange: #bf4600;
  --dblg-body:   #2c2925;
  --dblg-deck:   #3d3733;
  --dblg-label:  #736b63;
  --dblg-muted:  #5a544e;   /* inactive quote — 6.2:1 on the tint */
  --dblg-hair:   #e3e3e3;   /* achromatic; a warm hairline reads pink */
  --dblg-tint:   #f6f6f6;
  --dblg-white:  #ffffff;

  /* Deck geometry, all measured rather than guessed.
   *
   * --gap must stay well under --cw or the cards read as a row of separate objects instead of a
   * deck fanned behind the centre one. The centre card covers ~30% of each neighbour, so
   * gap ≈ 0.7 × card width. --drop pushes every off-centre card down, which is what makes them
   * sit behind rather than beside.
   *
   * --ch is set by the tallest truncated quote plus the read-more link and the attribution row.
   * At 440px the 230-character quotes overflowed and clipped; the tallest needs ~253px and 500px
   * gives the quote ~294px, leaving about one spare line. Truncation counts characters, not
   * lines, so that spare line is what absorbs a review that wraps differently on the same budget.
   */
  --dblg-gap:  320px;
  --dblg-tilt: 4deg;
  --dblg-drop: 24px;
  --dblg-cw:   460px;
  --dblg-ch:   514px;

  /* Full-bleed on purpose: the cards running past the viewport edge is the device. The ledger
   * below stays at its own 940px. */
  margin: 72px 0 0;
  overflow: hidden;
  color: var(--dblg-body);
}

/* Homepage variant. The section it drops into already carries its own ruled "Client reviews"
 * heading and lede from Divi, and its own vertical rhythm, so the deck brings neither. */
/* The bottom margin is not decoration: the "More Testimonials" button is the next Divi row and
 * sits directly under the prev/next controls, close enough that the two read as one control
 * group. 34px separates them. */
.dblg--home { margin: 0 0 34px; }

/* Divi puts a font-size-proportional padding-bottom on every <p> site-wide, and a blanket p
 * reset that outranks single-class rules. Neutralised here once, at (0,2,1), rather than fought
 * per element. See feedback_divi5-css-override-traps. */
.dblg p { padding-bottom: 0; margin: 0; }

/* ------------------------------------------------------------------ intro --- */

.dblg-rule {
  max-width: 700px;          /* THE CAP — full width reads far too long */
  margin: 0 auto;
  padding: 0 24px;
  border-top: 2px solid var(--dblg-orange);
  padding-top: 24px;
  text-align: center;
}

.dblg .dblg-h2 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--dblg-ink);
  text-transform: none;      /* the site has no uppercase display type */
}

.dblg .dblg-lede {
  max-width: 620px;          /* 620 controls the rag, not the 700 column width */
  margin: 14px auto 22px;
  padding: 0 24px;
  font-size: 25px;           /* above the 23px body baseline, below the h2 */
  line-height: 1.5;
  color: var(--dblg-deck);
  text-align: center;
}

/* Evidence for the heading, not a separate idea — so it sits tight under the lede. */
.dblg .dblg-tally {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 48px;
  /* !important on the FAMILY ONLY. The theme ships a bare-tag
   * `body, p, li, … { font-family: var(--dbl-font-body) !important }`, which beats a class
   * selector on that one property — this is a <p>, so it rendered in Work Sans while every
   * other declaration here landed. Measured on the live page, not assumed.
   * See feedback_divi-p-rules-tie-and-lose. */
  font-family: "Outfit", sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dblg-label);
}
.dblg .dblg-score { font-size: 15px; letter-spacing: .06em; color: var(--dblg-ink); }
.dblg .dblg-sep   { color: var(--dblg-hair); }

.dblg-stars { display: inline-flex; gap: 3px; }
.dblg-stars svg { width: 15px; height: 15px; display: block; }
.dblg-stars path { fill: #c9c3bc; }
.dblg-tally .dblg-stars path,
.dblg-card.is-active .dblg-stars path { fill: var(--dblg-orange); }

/* --------------------------------------------------------------- carousel --- */

.dblg-stage {
  position: relative;
  height: calc(var(--dblg-ch) + 60px + (var(--dblg-drop) * 2));
  /* No overflow here — .dblg clips instead, so the off-axis cards bleed off the viewport
     without giving the page a horizontal scrollbar. */
}

.dblg-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dblg-cw);
  height: var(--dblg-ch);
  padding: 34px 36px 30px;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--dblg-tint);
  border: 2px solid var(--dblg-hair);
  border-radius: 6px;
  color: var(--dblg-muted);
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--o) * var(--dblg-gap)))
    translateY(calc(var(--oy) * var(--dblg-drop)))
    rotate(calc(var(--o) * var(--dblg-tilt)))
    scale(.94);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1),
              background .5s ease, border-color .5s ease,
              color .5s ease, box-shadow .5s ease, opacity .4s ease;
  will-change: transform;
}

/* Parked off-stage. The deck is rendered more than once so the index wrap always happens inside
 * this hidden band and no visible card ever teleports across the stage. Both this state and the
 * visible one are present in the served HTML, so the unused-CSS pass strips neither. */
.dblg-card[data-far="1"] { opacity: 0; pointer-events: none; }

/* Upright, unscaled and undropped at dead centre — the fixed slot the deck rotates through.
 * Ground contrast is the primary signal: white against the tinted neighbours. The black outline
 * and the shadow are what keep white on a white band reading as a lifted panel rather than a
 * gap, and black is already this page's active-state device on the "All" chip in the filter. */
.dblg-card.is-active {
  background: var(--dblg-white);
  border-color: var(--dblg-ink);
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--o) * var(--dblg-gap)))
    rotate(0deg)
    scale(1);
  box-shadow: 0 20px 50px rgba(19, 19, 19, .17);
}

.dblg .dblg-quote {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
  /* Same bare-tag !important trap as .dblg-tally: <blockquote> is in the theme's family reset,
   * so the size, weight, leading and colour all landed here and only the family flipped to
   * Work Sans. The family needs !important; nothing else in this block does. */
  font-family: "Outfit", sans-serif !important;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--dblg-muted);
  overflow: hidden;
  transition: color .5s ease;
}
.dblg-card.is-active .dblg-quote {
  font-size: 24px;
  font-weight: 700;
  color: var(--dblg-ink);
}

/* Centre card only: the neighbours are unreadable at that angle anyway, and a display:none link
 * is not focusable. This doubles as the attribution link Google requires — it is load-bearing,
 * not a nicety. Do not remove it to tidy the card. */
.dblg .dblg-more {
  flex: 0 0 auto;
  display: none;
  align-self: flex-start;
  margin: 4px 0 20px;
  font-family: "Outfit", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dblg-orange);
  text-decoration: none;
  border-bottom: 2px solid var(--dblg-orange);
  padding-bottom: 3px;
}
.dblg-card.is-active .dblg-more { display: inline-block; }
.dblg .dblg-more:focus-visible { outline: 3px solid var(--dblg-ink); outline-offset: 3px; }

.dblg-attrib {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  margin: 0;
  border-top: 1px solid var(--dblg-hair);
}
.dblg-card.is-active .dblg-attrib { border-top-color: #d9d3cc; }

/* Reviewer photo is a mandatory Places attribution field. */
.dblg .dblg-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #cdc7c0;
  background: var(--dblg-white);
  display: block;
  object-fit: cover;
}
.dblg .dblg-avatar--none { background: var(--dblg-tint); }

.dblg-meta { min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.dblg .dblg-who {
  font-family: "Work Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--dblg-ink);
  letter-spacing: 0;
}

.dblg .dblg-src {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dblg-label);
}

/* --------------------------------------------------------------- controls --- */

.dblg-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 24px 0;
}

.dblg .dblg-btn {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--dblg-white);
  border: 2px solid var(--dblg-hair);
  border-radius: 6px;
  color: var(--dblg-ink);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dblg .dblg-btn:hover { border-color: var(--dblg-orange); color: var(--dblg-orange); }
.dblg .dblg-btn:focus-visible { outline: 3px solid var(--dblg-orange); outline-offset: 3px; }
.dblg .dblg-btn svg { width: 20px; height: 20px; }
.dblg .dblg-btn path {
  stroke: currentColor; stroke-width: 2.2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

.dblg .dblg-count {
  display: grid;
  place-items: center;
  min-width: 72px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--dblg-label);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ breakpoints --- */

@media (max-width: 1100px) {
  .dblg { --dblg-gap: 290px; --dblg-cw: 420px; --dblg-ch: 496px; }
}

@media (max-width: 980px) {
  /* dbl-mobile-fixes.php ships a (0,3,1) net that left-aligns every <p> inside a text module at
   * this breakpoint. It does not match these elements, but the card is centred content in a
   * narrow column, so the alignment is pinned explicitly at (0,2,0) to be safe.
   * See the phone text-align net in dbl-css-traps. */
  .dblg .dblg-lede,
  .dblg .dblg-tally { text-align: center; }
}

@media (max-width: 820px) {
  /* Tilt is a desktop affordance. On a narrow viewport the neighbours are barely visible, so
   * rotation only reads as a rendering fault. */
  /* Taller than desktop despite the smaller type. A narrow card wraps the attribution row onto
   * more lines — measured at 126px on a 390px viewport against ~84px at 1440 — and that comes
   * straight out of the quote's share of a fixed-height card. Measured on the live page in
   * WebKit, where the longest quote was clipping by 37px. */
  .dblg {
    --dblg-gap: 300px; --dblg-tilt: 0deg; --dblg-drop: 14px;
    --dblg-cw: min(84vw, 400px); --dblg-ch: 530px;
  }
  .dblg .dblg-quote { font-size: 20px; }
  .dblg-card.is-active .dblg-quote { font-size: 22px; }
  .dblg .dblg-lede { font-size: 21px; }   /* 21px is the site's tablet body step */
}

@media (max-width: 520px) {
  .dblg {
    --dblg-cw: min(88vw, 360px);
    --dblg-gap: calc(min(88vw, 360px) + 20px);
    --dblg-drop: 0px;
    --dblg-ch: 570px;
  }
  .dblg .dblg-quote { font-size: 19px; }  /* 19px is the site's phone body step */
  .dblg-card.is-active .dblg-quote { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .dblg-card { transition: none; }
}