/* ===== REVIEWS PAGE — /reviews/ (template: page-reviews.php) =====
   HERO/intro → WhatsApp screenshots grid (3/2/1) → testimonials slider (shared).
   Testimonials block uses testimonials.css (loaded alongside via lzk_css_for_view).
*/

/* The site header is position:fixed — 180px on desktop, 72px on mobile — so the page
   has to open below it or the breadcrumb and the H1 sit behind the logo. Same clearance
   the press and videos pages use. */
.rvw {
  padding-top: calc(100vw * 150 / 1920);
  padding-bottom: clamp(40px, 5vw, 80px);
}

/* ---------- Hero / intro ---------- */
.rvw-hero {
  width: calc(100vw * 1302 / 1920);
  max-width: 1302px;
  margin: 0 auto;
  padding: clamp(16px, 2.6vw, 40px) 0 clamp(16px, 2vw, 32px);
  text-align: right;
}
.rvw-hero__crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: #4a5769;
  margin-bottom: clamp(10px, 1.2vw, 20px);
}
.rvw-hero__crumb a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.rvw-hero__crumb-home { width: 18px; height: 18px; }
.rvw-hero__crumb .sep { color: #97a1ae; }
.rvw-hero__crumb b { color: #071c37; font-weight: 700; }

.rvw-hero__title {
  font-family: var(--font-oswald, "Oswald"), var(--font-heebo, "Heebo"), sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 56px);
  line-height: 1.15;
  color: #071c37;
  margin: 0 0 clamp(10px, 1.2vw, 20px);
}
.rvw-hero__intro {
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.6;
  color: #263349;
  max-width: 900px;
}
.rvw-hero__intro p { margin: 0 0 12px; }
.rvw-hero__intro p:last-child { margin-bottom: 0; }

/* ---------- WhatsApp screenshots grid ---------- */
.rvw-grid { padding: clamp(20px, 2.4vw, 40px) 0 clamp(40px, 4vw, 72px); }
.rvw-grid__wrap {
  /* narrower than the 1302 content column on purpose: across the full column the
     three screenshots render ~418px wide, far larger than they are ever read at.
     1060 - 2x24 gap = three ~337px cards. */
  width: min(calc(100vw * 1302 / 1920), 1060px);
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rvw-grid__cell {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f7;
  box-shadow: 0 2px 12px rgba(7,28,55,0.08);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rvw-grid__cell:hover,
.rvw-grid__cell:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(7,28,55,0.14);
  outline: none;
}
.rvw-grid__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1024px) {
  .rvw { padding-top: 72px; }   /* mobile header height */
  .rvw-hero,
  .rvw-grid__wrap { width: auto; padding-left: 24px; padding-right: 24px; }
  .rvw-grid__wrap { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; }
}
@media (max-width: 600px) {
  .rvw-hero,
  .rvw-grid__wrap { padding-left: 16px; padding-right: 16px; }
  .rvw-grid__wrap { grid-template-columns: 1fr; gap: 14px; }
  .rvw-grid__cell { max-width: 420px; margin: 0 auto; }
}

/* ---------- Lightbox ----------
   The gallery opens in the theme's existing media modal (#media-modal in footer.php,
   delegated handler in assets/js/interactions.js) — the same popup the certificates
   and the judgments already use, with the theme's own chevron SVGs. Its styles live
   in interactions.css; there is deliberately no second lightbox implementation here. */