/* ==========================================================================
   PATIENT REVIEWS  /reviews/  (SYSTEM v3 light luxury)
   Editorial quote layouts, not cards. Colors derive from site.css tokens.
   ========================================================================== */

/* ---- shared review bits ---- */
.rev-src {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brass-deep);
}
.cinema .rev-src { color: var(--brass-light); }

/* ---- feature quote (Lane) ---- */
.rev-feature {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  max-width: 56rem;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem);
}
.rev-feature .quote__text { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.05rem); }

/* ---- offset 2-col quote grid ---- */
.revgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.25rem, 4.5vw, 4rem) clamp(3rem, 6vw, 6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 761px) {
  /* keep the two quotes on the same baseline (no stagger) */
  .revgrid > :nth-child(even) { padding-right: clamp(0rem, 2vw, 2rem); }
  .revgrid > :nth-child(odd) { padding-left: clamp(0rem, 2vw, 2rem); }
}
@media (max-width: 760px) {
  .revgrid { grid-template-columns: 1fr; }
}
.rev-more { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ---- faces band: two varied frames around centered copy ---- */
.faces {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 0.9fr;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}
.faces figure { margin: 0; }
/* both face frames are matched portraits, centered on the smile */
.faces__fig .frame img { object-position: 50% 28%; }
.faces__copy h2 { font-size: var(--fs-d3); margin-bottom: 0.75rem; }
.faces__copy p { color: var(--ink-soft); margin-bottom: 0.5rem; }
@media (max-width: 760px) {
  .faces { grid-template-columns: 1fr 1fr; }
  .faces__copy { grid-column: 1 / -1; order: -1; }
  .faces__fig--low { padding-top: 2.25rem; }
}

/* ---- cinema feature (Cassandra) ---- */
.cine-quote {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}
.cine-quote__text { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 300; }
.cine-quote__side p { margin-bottom: 1.75rem; max-width: 34ch; }
.cine-quote__side {
  border-left: 1px solid oklch(94% 0.006 90 / 0.18);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) {
  .cine-quote { grid-template-columns: 1fr; align-items: start; }
  .cine-quote__side { border-left: 0; padding-left: 0; }
}

/* ---- hero rating proof line ---- */
.rev-rating { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.1rem; flex-wrap: wrap; }
.rev-rating__stars { color: var(--brass); letter-spacing: 0.12em; font-size: 1.1rem; }
.rev-rating__text { font-weight: 600; color: var(--ink-soft); font-size: 0.95rem; }

/* ---- faces band as a dark beat ---- */
.cinema .faces__copy p { color: var(--milk-soft); }

/* ---- Cassandra cinema as gold-standard full-bleed patient-on-black ---- */
.rev-cine { position: relative; isolation: isolate; overflow: clip; }
.rev-cine__bg { position: absolute; inset: 0; z-index: 0; }
.rev-cine__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 28%; }
.rev-cine__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--cinema) 0%, oklch(18.5% 0.005 85 / 0.88) 42%, oklch(18.5% 0.005 85 / 0) 72%),
    linear-gradient(0deg, oklch(18.5% 0.005 85 / 0.55) 0%, transparent 42%);
}
.rev-cine > .wrap { position: relative; z-index: 2; }
.rev-cine .cine-quote { grid-template-columns: 1fr; max-width: clamp(28rem, 62%, 42rem); gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
.rev-cine .cine-quote__side p { color: var(--milk); }
@media (max-width: 860px) {
  .rev-cine__bg img { object-position: 72% 28%; }
  .rev-cine__bg::after { background: linear-gradient(180deg, var(--cinema) 10%, oklch(18.5% 0.005 85 / 0.72) 52%, oklch(18.5% 0.005 85 / 0.5) 100%); }
  .rev-cine .cine-quote { max-width: 100%; }
}

/* ---- peewee review moment ---- */
.peewee-rev__frame { aspect-ratio: 3 / 4; }
.peewee-rev__frame img { object-position: 50% 8%; }
.peewee-rev {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.peewee-rev__quote { align-self: center; }
.peewee-rev__photo { margin: 0; max-width: 26rem; justify-self: end; }
@media (max-width: 760px) {
  .peewee-rev { grid-template-columns: 1fr; }
  .peewee-rev__photo { justify-self: start; }
}

/* ==========================================================================
   VIDEO TESTIMONIALS (.vt) — dark beat, poster grid + click-to-play lightbox
   ========================================================================== */
.vt-intro { max-width: 56ch; margin-top: 0.85rem; }

/* shared media button (poster + play) */
.vt-trigger {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid oklch(73% 0.077 83 / 0.22);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--cinema-2);
  box-shadow: 0 30px 70px -34px oklch(0% 0 0 / 0.75);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.vt-trigger:hover { border-color: oklch(73% 0.077 83 / 0.5); transform: translateY(-3px); box-shadow: 0 40px 90px -34px oklch(0% 0 0 / 0.85); }
.vt-trigger:focus-visible { outline: 2px solid var(--brass-pale); outline-offset: 3px; }

.vt-poster {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
  filter: saturate(1.03);
}
.vt-trigger:hover .vt-poster, .vt-trigger:focus-visible .vt-poster { transform: scale(1.04); }

/* play button */
.vt-play {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px; border-radius: 50%;
  background: oklch(54.5% 0.080 75 / 0.92);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px -8px oklch(0% 0 0 / 0.6);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.vt-play::after {
  content: ""; width: 0; height: 0; margin-left: 6px;
  border-left: 26px solid var(--milk);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
.vt-trigger:hover .vt-play, .vt-trigger:focus-visible .vt-play {
  transform: scale(1.08); background: var(--brass);
  box-shadow: 0 16px 38px -8px oklch(0% 0 0 / 0.7), 0 0 0 12px oklch(66.5% 0.083 78 / 0.14);
}

/* duration chip */
.vt-dur {
  position: absolute; right: 0.8rem; bottom: 0.8rem;
  background: oklch(0% 0 0 / 0.6); color: var(--milk);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* featured */
.vt-feature { margin-top: 2.75rem; }
.vt-feature__media .vt-play { width: 104px; height: 104px; }
.vt-feature__media .vt-play::after { border-left-width: 32px; border-top-width: 20px; border-bottom-width: 20px; }
.vt-feature__cap { margin-top: 1.15rem; display: flex; flex-direction: column; gap: 0.3rem; }
.vt-feature__cap strong { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); color: var(--milk); }

/* two-up grid */
.vt-grid { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); }
.vt-card__media { border-radius: var(--r-sm); }
.vt-card__cap { margin-top: 0.9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.vt-card__cap strong { font-family: var(--font-d); font-weight: 600; font-size: 1.1rem; color: var(--milk); }

.vt-stars { color: var(--brass-light); letter-spacing: 0.1em; font-size: 0.95rem; }
.vt-sub { color: var(--milk-soft); font-size: 0.95rem; }

/* lightbox */
.vt-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: oklch(0% 0 0 / 0.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.vt-lightbox.is-open { opacity: 1; visibility: visible; }
.vt-lightbox__stage { width: min(1100px, 100%); }
.vt-lightbox__video {
  width: 100%; max-height: 84vh; display: block;
  border-radius: var(--r-md); background: #000;
  box-shadow: 0 50px 110px -30px oklch(0% 0 0 / 0.9);
  transform: scale(0.97);
  transition: transform 0.3s var(--ease);
}
.vt-lightbox.is-open .vt-lightbox__video { transform: scale(1); }
.vt-lightbox__close {
  position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / 0.25);
  background: oklch(0% 0 0 / 0.45); color: var(--milk);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.vt-lightbox__close:hover { background: var(--brass-deep); transform: rotate(90deg); }

@media (max-width: 720px) {
  .vt-grid { grid-template-columns: 1fr; }
  .vt-play { width: 64px; height: 64px; }
  .vt-play::after { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
  .vt-feature__media .vt-play { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-trigger, .vt-poster, .vt-play, .vt-lightbox, .vt-lightbox__video, .vt-lightbox__close { transition: none; }
  .vt-trigger:hover { transform: none; }
  .vt-trigger:hover .vt-poster, .vt-trigger:focus-visible .vt-poster { transform: none; }
}

/* ---- theme-dark: source labels need the light brass on dark sections ---- */
body.theme-dark .sect:not(.light-break) .rev-src { color: var(--brass-light); }

/* ---- marquee grid: header + subordinate reveal clip rail the feature screen.
   The mini player bottom-anchors to share the feature's bottom edge, so the
   column height is fully composed — no orphaned card, no dead zone. ---- */
.vt-composer {
  display: grid;
  grid-template-areas: "head feature" "mini feature";
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  row-gap: 2.75rem;
  align-items: start;
}
.vt-head { grid-area: head; }
.vt-composer .vt-feature { grid-area: feature; margin: 0; }
.vt-rail__mini { grid-area: mini; align-self: end; margin: 0; }
.vt-rail__mini .vt-play { width: 64px; height: 64px; }
.vt-rail__mini .vt-play::after { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
@media (max-width: 860px) {
  .vt-composer {
    grid-template-areas: "head" "feature" "mini";
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .vt-rail__mini { align-self: start; max-width: 30rem; }
}