/* ==========================================================================
   TPB written-review component
   --------------------------------------------------------------------------
   Styles for the markup rendered by /assets/js/reviews.js.

   Everything is scoped under .tpb-rv on purpose. Sixteen pages still carry
   hand-written .review / .rev blocks with their own page-level overrides, and a
   global rule here would fight them mid-migration. Scoping means a page can run
   the component and its own legacy section side by side.

   Four design styles, set with data-style on the container:

     bubble   tinted panel, reviewer underneath - what the funnel pages use
              today, so migrating one is a markup swap, not a redesign
     card     bordered card on a light or dark section, reviewer at the bottom
     quote    no container, large pull copy with a quote glyph - hero proof
     compact  avatar row with two lines of copy - a strip beside a form

   var() fallbacks are supplied throughout so the component also renders on a
   page that does not link assets/design-system.css.
   ========================================================================== */

.tpb-rv { --rv-ink: var(--lt-ink, #1a1a1a); --rv-muted: var(--lt-muted, #7a7a7a); --rv-line: var(--lt-line, #E3E9EF); --rv-card: var(--lt-bg-2, #fff); --rv-accent: var(--cyan-ink, #015AFF); --rv-star: #ffa41c; --rv-radius: 8px; --rv-clamp: 6; }

/* Hide anything the author left inside the container until the data lands, so a
   placeholder never flashes. Keyed off the attribute, not .tpb-rv: the class is
   added by the JS at render time, alongside the content it styles. */
[data-tpb-reviews]:not(.is-ready) > * { display: none; }

/* ----- arrangement -----
   Masonry via CSS columns: each review is as tall as its own text and the next
   one starts right under it, instead of a grid row leaving a gap beside a short
   review. This is what the source pages' widget did, and it is still the right
   call for copy of wildly uneven length. */
.tpb-rv[data-layout="masonry"] .rv-wall { columns: var(--rv-cols, 2) 320px; column-gap: 28px; }
.tpb-rv[data-layout="masonry"] .rv { break-inside: avoid; margin-bottom: 18px; }

.tpb-rv[data-layout="grid"] .rv-wall { display: grid; gap: 20px; grid-template-columns: repeat(var(--rv-cols, 3), minmax(0, 1fr)); }
@media (max-width: 1000px) { .tpb-rv[data-layout="grid"] .rv-wall { grid-template-columns: repeat(min(var(--rv-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 620px) { .tpb-rv[data-layout="grid"] .rv-wall { grid-template-columns: 1fr; } }

.tpb-rv[data-layout="rows"] .rv-wall { display: flex; flex-direction: column; gap: 26px; max-width: 780px; margin: 0 auto; }

/* One row that scrolls sideways, snapping card to card. The track is what
   scrolls, never the page: a slider that lets the body scroll horizontally is a
   layout bug on every phone. Cards are sized so the next one peeks in from the
   right, which is the only affordance a scroller needs. */
.tpb-rv[data-layout="slider"] .rv-wall { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scrollbar-width: thin; }
.tpb-rv[data-layout="slider"] .rv { flex: 0 0 min(var(--rv-slide, 340px), 82%); scroll-snap-align: start; }
/* Equal-height cards in the track, with the reviewer still pinned to the bottom
   of each - the slack sits above .rv-who (margin-top:auto), never inside the
   copy. Growing .rv-text itself is what scrambled a clamped review; the card
   style below carries the full note. */
@media (prefers-reduced-motion: reduce) { .tpb-rv[data-layout="slider"] .rv-wall { scroll-snap-type: none; } }

/* ----- the review itself ----- */
.tpb-rv .rv { display: flex; flex-direction: column; gap: 10px; }
.tpb-rv .rv-text { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--rv-ink); }
.tpb-rv .rv-text p { margin: 0; }
.tpb-rv .rv-text p + p { margin-top: 8px; }
.tpb-rv .rv-text b { font-weight: 700; }
.tpb-rv .rv-text u { text-decoration: underline; }

/* Long reviews are clamped to --rv-clamp lines; reviews.js adds the toggle only
   to the ones that actually overflow. */
.tpb-rv .rv-clamp { display: -webkit-box; -webkit-line-clamp: var(--rv-clamp, 6); -webkit-box-orient: vertical; overflow: hidden; }
.tpb-rv .rv.is-open .rv-clamp { display: block; -webkit-line-clamp: none; }

/* Padded out to a usable tap target on touch without changing how it looks: the
   negative margin absorbs the extra height so spacing is unchanged. */
.tpb-rv .rv-more { align-self: flex-start; background: none; border: 0; padding: 8px 10px 8px 0; margin: -2px 0 -6px; cursor: pointer; font: inherit; font-size: 13px; color: var(--rv-muted); }
.tpb-rv .rv-more:hover { text-decoration: underline; }

/* ----- stars ----- */
.tpb-rv .rv-stars { display: flex; gap: 2px; }
.tpb-rv .rv-stars svg { width: 15px; height: 15px; color: var(--rv-star); fill: currentColor; }

/* ----- the reviewer ----- */
.tpb-rv .rv-who { display: flex; align-items: center; gap: 10px; padding-left: 2px; }
.tpb-rv .rv-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tpb-rv .rv-meta { min-width: 0; }
.tpb-rv .rv-meta b { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--rv-ink); }
.tpb-rv .rv-meta span { font-size: 12px; font-weight: 400; color: var(--rv-muted); line-height: 1.3; }
/* Company and location are separate fields in the JSON and separate elements
   here, so a style can split them onto two lines. The default joins them on one
   line, which is how every page renders them today. The comma comes from the
   class the JS adds only when a location follows, so there is never a dangling
   separator on a reviewer with no location. */
.tpb-rv .rv-company, .tpb-rv .rv-loc { display: inline; }
.tpb-rv .rv-company.has-loc::after { content: ", "; }

/* ===== data-style="bubble" ================================================ */
.tpb-rv[data-style="bubble"] .rv-bubble { display: flex; flex-direction: column; gap: 8px; background: var(--rv-bubble-bg, #ebebeb); border-radius: var(--rv-radius); padding: 16px 18px; }
.tpb-rv[data-style="bubble"] .rv-who img { width: 34px; height: 34px; }

/* ===== data-style="card" ================================================== */
.tpb-rv[data-style="card"] .rv { background: var(--rv-card); border: 1px solid var(--rv-line); border-radius: var(--radius, 14px); box-shadow: var(--shadow-lt, 0 18px 40px -24px rgba(15, 40, 70, .28)); padding: 20px 22px; gap: 12px; }
.tpb-rv[data-style="card"] .rv-text { font-size: 15px; }
/* .rv-text must NOT flex-grow here. A grid row is as tall as its tallest card,
   so with `flex: 1` the clamped copy in every other card was stretched to that
   height while -webkit-line-clamp still showed only 6 lines - and a taller
   -webkit-box with several <p> children lays them out on top of each other.
   Expanding one review visibly scrambled the paragraphs of the one beside it,
   and it broke the toggle's own measurement too, because clientHeight was then
   the row height rather than the clamp. The reviewer is pinned by the
   margin-top:auto just below, which needs no growth from the copy. */
/* Reviewer pinned to the bottom so the names line up across a row of cards of
   different copy lengths. */
.tpb-rv[data-style="card"] .rv-who { margin-top: auto; padding-top: 4px; border-top: 1px solid var(--rv-line); }
.tpb-rv[data-style="card"] .rv.is-near { border-color: color-mix(in srgb, var(--rv-accent) 45%, var(--rv-line)); }

/* ===== data-style="quote" ================================================= */
.tpb-rv[data-style="quote"] .rv { position: relative; gap: 14px; padding-left: 54px; }
.tpb-rv[data-style="quote"] .rv::before { content: "\201C"; position: absolute; left: 0; top: -18px; font-family: Georgia, "Times New Roman", serif; font-size: 84px; line-height: 1; color: var(--rv-accent); opacity: .22; }
.tpb-rv[data-style="quote"] .rv-text { font-size: 19px; line-height: 1.55; font-weight: 500; }
.tpb-rv[data-style="quote"] .rv-meta b { font-size: 15px; }
.tpb-rv[data-style="quote"] .rv-meta span { font-size: 13px; }
.tpb-rv[data-style="quote"] .rv-who img { width: 48px; height: 48px; }
@media (max-width: 560px) {
  .tpb-rv[data-style="quote"] .rv { padding-left: 0; }
  .tpb-rv[data-style="quote"] .rv::before { position: static; display: block; font-size: 56px; height: 34px; }
}

/* ===== data-style="compact" ==============================================
   Reviewer first, then a couple of lines of copy: it reads as a list of people
   rather than a wall of testimony, which is what a strip beside a form wants. */
/* The clamp for this style is set by reviews.js (STYLE_CLAMP), not here, so the
   number the copy is cut at and the number data-length="short" is measured
   against cannot drift apart. */
.tpb-rv[data-style="compact"] .rv { gap: 8px; }
.tpb-rv[data-style="compact"] .rv-who { order: -1; }
.tpb-rv[data-style="compact"] .rv-stars { order: -2; }
.tpb-rv[data-style="compact"] .rv-stars svg { width: 13px; height: 13px; }
.tpb-rv[data-style="compact"] .rv-text { font-size: 14px; }
.tpb-rv[data-style="compact"] .rv-who img { width: 34px; height: 34px; }

/* ----- on a dark section -----
   Add class="on-dark" beside the container's own attributes. Only the colour
   variables move; nothing about the layout changes. */
.tpb-rv.on-dark { --rv-ink: #EAF2FA; --rv-muted: #9DB2C6; --rv-line: rgba(255, 255, 255, .16); --rv-card: rgba(255, 255, 255, .05); --rv-bubble-bg: rgba(255, 255, 255, .07); --rv-accent: #4D9BFF; }

/* ----- mobile body-copy floor -----
   The review text is the only thing here a visitor reads, so it goes to 18px on
   a phone. The star row, the "Read more" toggle, the reviewer's name and the
   company/location line stay put: they are chrome and fine print, and the wall
   is already one column at this width.

   Named per style rather than set on .rv-text for all of them, because this is a
   floor and not a size: the quote style is already 19px and must not be pulled
   DOWN to 18 by a rule that comes later in the file. */
@media (max-width: 820px) {
  .tpb-rv[data-style="bubble"] .rv-text,
  .tpb-rv[data-style="card"] .rv-text,
  .tpb-rv[data-style="compact"] .rv-text { font-size: 18px; }
  .tpb-rv[data-layout="masonry"] .rv-wall { columns: 1; }
}