/* Trust section under every quiz page (Shaun, 17 Sep 2026).
   Order: Google reviews, testimonial videos, highlight videos, project photos.
   One component, config-driven from the ops trust feed; the page only sets the
   domain and its colours. Light minimalist base (white ground, Inter or the
   page's own body font, one accent) with an accent band for the reviews so the
   section reads as proof rather than a strip.

   Theme from the host page by setting these on the .ts element:
     --ts-accent   brand accent (reviews band, play buttons, links)
     --ts-gold     stars and card rule
     --ts-ink      body text
     --ts-bg       section ground (default white)
     --ts-tint     soft tint behind the video rows
     --ts-band     reviews band background (default: the accent)
     --ts-band-ink text on the band (default white)
   Neutral class names only (ts-*): ad blockers hide anything ad-named. */

.ts { --ts-accent: #0B3D6B; --ts-gold: #DDA62A; --ts-ink: #0f1115; --ts-grey: #6b7280; --ts-bg: #ffffff; --ts-tint: #f3f5f8; --ts-band: var(--ts-accent); --ts-band-ink: #ffffff; --ts-radius: 14px;
  width: 100%; background: var(--ts-bg); color: var(--ts-ink); font-family: inherit; -webkit-font-smoothing: antialiased; overflow: hidden; }
.ts[hidden] { display: none; }
.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }
.ts button { font-family: inherit; }

.ts-block { padding-block: 44px 40px; }
.ts-head { max-width: 640px; margin: 0 auto 24px; padding-inline: 20px; text-align: center; }
.ts-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-accent); background: #fff; border: 1px solid rgba(15,17,21,0.1); border-radius: 999px; padding: 6px 13px; }
.ts-chip svg { width: 15px; height: 15px; flex: none; }
.ts-head h2 { font-size: 27px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 10px; color: var(--ts-ink); }
.ts-head p { font-size: 15px; line-height: 1.55; color: var(--ts-grey); margin: 0; }
.ts-head .ts-hint { font-size: 13.5px; margin-top: 6px; }

/* ---- Reviews: accent band, big rating, whole reviews on white cards ---- */
.ts-reviews { background: var(--ts-band); color: var(--ts-band-ink); padding-block: 52px 48px; }
.ts-reviews .ts-head h2 { color: var(--ts-band-ink); }
.ts-reviews .ts-head p { color: var(--ts-band-ink); opacity: .82; }
.ts-reviews .ts-chip { border-color: transparent; }
.ts-score { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 8px; }
.ts-score b { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ts-band-ink); }
.ts-score .ts-stars { display: block; color: var(--ts-gold); font-size: 24px; letter-spacing: 2px; line-height: 1.1; text-align: left; }
.ts-score small { display: block; font-size: 13.5px; color: var(--ts-band-ink); opacity: .82; text-align: left; margin-top: 3px; }
.ts-link { display: inline-block; color: var(--ts-band-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; border-bottom: 2px solid var(--ts-gold); padding-bottom: 1px; }

.ts-rows { display: grid; gap: 16px; }
.ts-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.ts-track { display: flex; align-items: flex-start; gap: 16px; width: max-content; padding: 6px 8px 10px; animation: ts-left var(--dur, 140s) linear infinite; will-change: transform; }
.ts-row.ts-rtl .ts-track { animation-name: ts-right; }
.ts-row:hover .ts-track, .ts-row.ts-held .ts-track { animation-play-state: paused; }
@keyframes ts-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ts-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Swipe row (fewer than 10 reviews): finger scroll, snap per card, no animation. */
.ts-swipe { display: flex; align-items: stretch; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 6px 20px 14px; scrollbar-width: none; }
.ts-swipe::-webkit-scrollbar { display: none; }
.ts-swipe .ts-card { scroll-snap-align: start; width: min(320px, calc(100vw - 56px)); }
.ts-swipe::after { content: ""; flex: none; width: 6px; }

.ts-card { flex: none; width: 320px; display: flex; flex-direction: column; background: #fff; color: var(--ts-ink); border-radius: var(--ts-radius); padding: 16px 18px 18px; border-top: 3px solid var(--ts-gold); box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 10px 28px rgba(0,0,0,0.22); }
.ts-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ts-av { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--ts-accent); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.ts-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-who { min-width: 0; }
.ts-name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-card .ts-stars { display: block; color: var(--ts-gold); font-size: 14px; letter-spacing: 1.5px; line-height: 1.3; }
.ts-g { margin-left: auto; width: 20px; height: 20px; flex: none; }
.ts-text { font-size: 14.5px; line-height: 1.6; color: #2b3038; margin: 0; }

/* ---- Video rows: 9:16 tiles you swipe through, one tap to play ---- */
.ts-videos { background: var(--ts-tint); }
.ts-videos + .ts-videos { padding-top: 0; }
.ts-vrow { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 20px 16px; scrollbar-width: none; }
.ts-vrow::-webkit-scrollbar { display: none; }
.ts-vrow::after { content: ""; flex: none; width: 8px; }
.ts-vrow.ts-center { justify-content: center; }
.ts-tile { flex: none; scroll-snap-align: start; width: 190px; aspect-ratio: 9 / 16; position: relative; border: none; border-radius: var(--ts-radius); overflow: hidden; padding: 0; cursor: pointer; background: #111 center/cover no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 10px 26px rgba(0,0,0,0.18); transition: transform .25s ease, box-shadow .25s ease; }
.ts-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65)); pointer-events: none; }
.ts-tile::after { content: ""; position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f1115' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow: 0 6px 18px rgba(0,0,0,0.3); transition: transform .2s ease; }
.ts-tile:hover::after { transform: scale(1.06); }
.ts-tile:active { transform: scale(.985); }
.ts-tile .ts-lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px 12px; color: #fff; text-align: left; z-index: 1; pointer-events: none; }
.ts-tile .ts-lbl b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.ts-tile .ts-lbl span { display: block; font-size: 11.5px; opacity: .85; margin-top: 3px; }

/* ---- Photos: justified grid, every photo at its real shape ---- */
.ts-photos { max-width: 1240px; margin: 0 auto; padding-inline: 18px; }
.ts-grid { --row-h: 112px; display: flex; flex-wrap: wrap; gap: 6px; }
.ts-grid::after { content: ""; flex-grow: 1000; }
.ts-ptile { --r: 1.333; position: relative; flex: var(--r) 1 calc(var(--r) * var(--row-h)); aspect-ratio: var(--r); min-width: 0; padding: 0; border: none; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--ts-tint) center/cover no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,0.08); transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease; }
.ts-ptile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .45s ease; }
.ts-ptile img.ts-in { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ts-ptile:hover { transform: scale(1.55); z-index: 6; box-shadow: 0 28px 70px rgba(0,0,0,0.38), 0 0 0 3px #fff; }
}
.ts-ptile:active { transform: scale(.98); }
.ts-more { display: block; margin: 16px auto 0; background: none; border: 1px solid rgba(15,17,21,0.18); color: var(--ts-ink); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ---- Closing button (optional, back to the quiz) ---- */
.ts-again { max-width: 380px; margin: 0 auto; padding: 8px 20px 44px; text-align: center; }
.ts-again button { display: block; width: 100%; border: none; cursor: pointer; background: var(--ts-accent); color: #fff; font-weight: 700; font-size: 17px; padding: 17px 20px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.16); }
.ts-again p { font-size: 13px; color: var(--ts-grey); margin: 10px 0 0; }

/* ---- Overlay: player or lightbox ---- */
.ts-modal { position: fixed; inset: 0; z-index: 50; background: rgba(15,17,21,0.92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ts-modal[hidden] { display: none; }
.ts-modal-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.95); color: #0f1115; font-size: 22px; line-height: 38px; cursor: pointer; z-index: 2; }
.ts-modal-body { width: 100%; max-width: 420px; max-height: 88dvh; display: grid; place-items: center; }
.ts-modal-body mux-player { width: 100%; max-height: 88dvh; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; --media-object-fit: contain; }
.ts-modal-body mux-player.ts-sq { aspect-ratio: 1 / 1; }
.ts-modal-body mux-player.ts-wide { aspect-ratio: 16 / 9; max-width: 92vw; }
.ts-modal-body img { max-width: 100%; max-height: 88dvh; border-radius: 14px; display: block; }
.ts-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: #0f1115; font-size: 22px; cursor: pointer; z-index: 2; }
.ts-modal-nav[hidden] { display: none; }
.ts-modal-nav.ts-prev { left: 10px; } .ts-modal-nav.ts-next { right: 10px; }
.ts-modal-cap { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); text-align: center; color: #e5e7eb; font-size: 13px; padding: 0 60px; }

@media (min-width: 760px) {
  .ts-head h2 { font-size: 32px; }
  .ts-grid { --row-h: 190px; gap: 10px; }
  .ts-ptile { border-radius: 12px; }
  .ts-tile { width: 230px; }
  .ts-vrow { padding-inline: 28px; gap: 16px; }
}
@media (min-width: 1100px) {
  .ts-grid { --row-h: 230px; }
}
@media (max-width: 480px) {
  .ts-reviews { padding-block: 36px 32px; }
  .ts-block { padding-block: 36px 30px; }
  .ts-score b { font-size: 48px; }
  .ts-card { width: 300px; padding: 14px 16px 16px; }
  .ts-text { font-size: 13.5px; line-height: 1.55; }
  .ts-rows { gap: 12px; }
  .ts-track { gap: 12px; }
  .ts-photos { padding-inline: 12px; }
  .ts-grid { --row-h: 104px; gap: 5px; }
  .ts-ptile { border-radius: 8px; }
  .ts-tile { width: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; }
  .ts-track { animation: none; }
  .ts-track [aria-hidden="true"] { display: none; }
  .ts-card { scroll-snap-align: start; }
  .ts-ptile, .ts-tile { transition: none; }
  .ts-ptile:hover { transform: none; }
}