/* =====================================================================
   REDIAL — Testimonial video rails
   Homepage glimpse (portrait reels) + /testimonial/ (landscape + portrait)
   Brand: red #E61E31 / black #040303 / off-white #F4F4F4. px values only.
   Enqueued on front page + testimonial page (functions.php).
   v1.0 — 2026-05-30
   ===================================================================== */

.rd-testimonials { overflow: hidden; }
/* Premium dark backdrop with a soft brand-red glow behind the reels, so the
   section stands apart from the stack of flat-black sections around it.
   section.* specificity (0,1,1) overrides the .bg-dark utility class. */
section.rd-testimonials {
  position: relative;
  padding-top: 120px;
  padding-bottom: 92px;
  background:
    radial-gradient(58% 78% at 50% 34%, rgba(230, 30, 49, .20) 0%, rgba(230, 30, 49, 0) 60%),
    linear-gradient(180deg, #040303 0%, #160809 48%, #040303 100%);
  border-top: 1px solid rgba(244, 244, 244, .08);
  border-bottom: 1px solid rgba(244, 244, 244, .08);
}
.rd-testimonials .container { max-width: 1440px; margin: 0 auto; position: relative; z-index: 1; }

.rd-testimonials__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.rd-testimonials__head h2 { color: #F4F4F4; margin: 0; }
.rd-testimonials__head h2 i { color: #E61E31; font-style: italic; }

.rd-testimonials__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.rd-testimonials__cta img { width: 16px; height: 16px; }

/* ---- Rail ---- */
.rd-rail { position: relative; margin-top: 28px; }
.rd-rail + .rd-rail { margin-top: 56px; }
.rd-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.rd-rail__label { color: #F4F4F4; font-size: 22px; letter-spacing: .2px; margin: 0; }
.rd-rail__nav { display: flex; gap: 10px; }
.rd-rail__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 244, 244, .35);
  background: transparent;
  color: #F4F4F4;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.rd-rail__arrow:hover { background: #E61E31; border-color: #E61E31; color: #fff; }
.rd-rail__arrow:disabled { opacity: .3; cursor: default; }
.rd-rail__arrow:focus-visible { outline: 2px solid #E61E31; outline-offset: 2px; }

.rd-rail__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: #E61E31 rgba(244, 244, 244, .12);
}
.rd-rail__track:focus-visible { outline: 2px solid #E61E31; outline-offset: 4px; border-radius: 8px; }
.rd-rail__track::-webkit-scrollbar { height: 8px; }
.rd-rail__track::-webkit-scrollbar-track { background: rgba(244, 244, 244, .12); border-radius: 8px; }
.rd-rail__track::-webkit-scrollbar-thumb { background: #E61E31; border-radius: 8px; }
.rd-rail__track.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }

/* ---- Card ---- */
.rd-vcard {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: #0c0c0c;
  border: 1px solid rgba(244, 244, 244, .08);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rd-vcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  border-color: rgba(230, 30, 49, .45);
}
.rd-vcard__media {
  position: relative;
  width: 100%;
  background: #040303;
  overflow: hidden;
}
.rd-vcard--portrait .rd-vcard__media { aspect-ratio: 9 / 16; }
.rd-vcard--landscape .rd-vcard__media { aspect-ratio: 16 / 9; }
.rd-vcard__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #040303;
}
.rd-vcard.is-playing .rd-vcard__video { object-fit: contain; }
.rd-vcard__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border: none; border-radius: 50%;
  background: #E61E31;
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding-left: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .2s ease, background-color .2s ease;
}
.rd-vcard__play:hover { background: #c4152a; transform: translate(-50%, -50%) scale(1.08); }
.rd-vcard__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rd-vcard.is-playing .rd-vcard__play { display: none; }

.rd-vcard__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; }

/* Tier 1 — RESULT callout (the proof, visually dominant) */
.rd-vcard__result {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(230, 30, 49, .12);
  border: 1px solid rgba(230, 30, 49, .38);
  border-radius: 12px;
  padding: 12px 14px;
}
.rd-vcard__result-icon { flex: 0 0 auto; width: 22px; height: 22px; color: #ff4d5e; margin-top: 1px; }
.rd-vcard__result-icon svg { width: 22px; height: 22px; display: block; }
.rd-vcard__result-text { display: flex; flex-direction: column; gap: 5px; }
.rd-vcard__result-text span { color: #fff; font-size: 15px; line-height: 1.35; font-weight: 600; }

/* Tier 2 — QUOTE (secondary, muted italic with a red accent rule) */
.rd-vcard__quote {
  margin: 0; padding-left: 14px;
  border-left: 2px solid rgba(230, 30, 49, .55);
  color: #F4F4F4; opacity: .72;
  font-size: 14px; line-height: 1.55; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Tier 3 — PERSON footer (attribution, tertiary) */
.rd-vcard__person {
  display: flex; align-items: center; gap: 12px;
  margin-top: 2px; padding-top: 14px;
  border-top: 1px solid rgba(244, 244, 244, .1);
}
.rd-vcard__person-meta { display: flex; flex-direction: column; min-width: 0; }
.rd-vcard__name { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; }
.rd-vcard__age { color: #F4F4F4; opacity: .55; font-size: 12px; letter-spacing: .3px; margin-top: 2px; }

/* ---- Desktop: 4 across, fills container (scrolls only when >4) ---- */
@media (min-width: 1024px) {
  .rd-rail--portrait .rd-vcard,
  .rd-rail--landscape .rd-vcard { width: calc((100% - 72px) / 4); }

  /* Dedicated /testimonial/ page: reels are larger — 3 full cards with the
     4th peeking, so each video (and playback) is bigger and the peek signals
     there's more to scroll. Applies to both rails. */
  .rd-testimonials--full .rd-rail--portrait .rd-vcard,
  .rd-testimonials--full .rd-rail--landscape .rd-vcard { width: calc((100% - 72px) / 3.3); }
}

/* ---- Homepage glimpse: full-width portrait reels (no quote, just result) ---- */
.rd-testimonials--home .rd-rail__track { scroll-snap-type: x proximity; }
.rd-testimonials--home .rd-rail .rd-vcard__quote { display: none; }

/* ---- Tablet ---- */
@media (max-width: 1023px) {
  .rd-rail--portrait .rd-vcard { width: 300px; }
  .rd-rail--landscape .rd-vcard { width: 380px; }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .rd-rail--portrait .rd-vcard { width: 76vw; }
  .rd-rail--landscape .rd-vcard { width: 86vw; }
  .rd-rail__label { font-size: 19px; }
  .rd-testimonials__head { margin-bottom: 24px; }
  .rd-vcard__body { padding: 16px 16px 18px; }
  section.rd-testimonials { padding-top: 96px; padding-bottom: 64px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rd-rail__track { scroll-behavior: auto; }
  .rd-vcard__play, .rd-rail__arrow { transition: none; }
}