/* =============================================================================
   TOURBIRTH — TESTAMENTS PAGE STYLES
   css/pages/testaments.css
   Page-specific styles for testaments.html.
   Sections: Hero · Intro · Testament Cards · Video Testaments

   The .testament-card component is fully defined in components.css.
   This file handles page-level layout and section-specific spacing only.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Testaments intro — narrow centered Montserrat 300 paragraph
--------------------------------------------------------------------------- */

.testaments-intro {
  max-width:      var(--content-width);
  margin-inline:  auto;
  text-align:     center;
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          var(--charcoal);
}

/* ---------------------------------------------------------------------------
   Testament cards grid — 3-column desktop, responsive collapse
--------------------------------------------------------------------------- */

.testaments-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-xl);
  margin-top:            var(--space-xl);
}

/* ===========================================================================
   CUSTOMER-REVIEW SLIDER — Pagedone-style (js/testaments-carousel.js)
   Two-column header, then one review card in view flanked by circular arrows,
   with dot navigation below. One review cross-fades to the next.
=========================================================================== */

/* — Two-column header — */
.trev-head {
  display:               grid;
  grid-template-columns: 1.1fr 1fr;
  gap:                   clamp(1.5rem, 5vw, 4rem);
  align-items:           end;
}
.trev-head__support {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-relaxed, 1.8);
  letter-spacing: 0.02em;
  color:          var(--color-text-secondary);
  max-width:      40ch;
}
html.theme-light .trev-head__support { color: var(--tl-ink-soft); }

/* — Slider shell — */
.trev {
  margin-top: var(--space-2xl, 4rem);
}
.trev__row {
  display:     flex;
  align-items: center;
  gap:         clamp(0.75rem, 2.5vw, 2.25rem);
}
/* The stage is the fixed white card frame; the track slides content inside it. */
.trev__stage {
  flex:          1 1 auto;
  min-width:     0;
  overflow:      hidden;        /* clip the off-screen slides */
  border:        1px solid rgba(198, 169, 107, 0.28);
  border-radius: 16px;
  background:    rgba(198, 169, 107, 0.04);
}
html.theme-light .trev__stage {
  background:   var(--tl-raise);
  border-color: rgba(11, 29, 42, 0.10);
  box-shadow:   0 24px 60px -34px rgba(11, 29, 42, 0.30);
}
.trev__track {
  display:     flex;
  align-items: stretch;         /* every slide takes the tallest slide's height */
  transition:  transform 600ms var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1));
  will-change:  transform;
}

/* — Review slide — */
.trev__card {
  flex:           0 0 100%;
  display:        flex;
  flex-direction: column;
  padding:        clamp(1.9rem, 4vw, 3.25rem);
}

.trev__quote { margin: 0; }
.trev__quote p {
  margin:      0;
  font-family: var(--font-body);
  font-size:   clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 400;
  font-style:  normal;          /* override the global italic blockquote style */
  line-height: 1.55;
  color:       var(--offwhite);
}
html.theme-light .trev__card .trev__quote p { color: var(--tl-ink); }

.trev__name {
  margin:      auto 0 0;         /* pin attribution to the bottom of the card */
  padding-top: var(--space-xl);
  font-family: var(--font-body);
  font-size:   1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color:       var(--offwhite);
}
html.theme-light .trev__card .trev__name { color: var(--tl-ink); }

.trev__role {
  margin:         0.35rem 0 0;
  font-family:    var(--font-body);
  font-size:      var(--fs-small);
  font-weight:    500;
  letter-spacing: 0.06em;
  color:          var(--gold);
}
html.theme-light .trev__role { color: var(--gold-deep); }

/* — Circular arrow controls — */
.trev__arrow {
  flex:            0 0 auto;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           46px;
  height:          46px;
  padding:         0;
  border:          none;
  border-radius:   50%;
  background:      var(--gold);
  color:           var(--obsidian);
  cursor:          pointer;
  transition:      background-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.trev__arrow:hover {
  transform:  scale(1.08);
  box-shadow: 0 10px 24px -10px rgba(198, 169, 107, 0.65);
}
.trev__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.trev__arrow svg { width: 20px; height: 20px; }

/* — Dot navigation — */
.trev__dots {
  display:         flex;
  justify-content: center;
  gap:             10px;
  margin-top:      var(--space-xl);
}
.trev__dot {
  width:         9px;
  height:        9px;
  padding:       0;
  border:        1px solid var(--gold);
  border-radius: 50%;
  background:    transparent;
  cursor:        pointer;
  transition:    background-color 300ms ease, transform 300ms ease;
}
.trev__dot.is-active { background: var(--gold); transform: scale(1.25); }
html.theme-light .trev__dot { border-color: var(--gold-deep); }
html.theme-light .trev__dot.is-active { background: var(--gold-deep); }

@media (max-width: 760px) {
  .trev-head { grid-template-columns: 1fr; align-items: start; }
  .trev__arrow { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .trev__track { transition: none; }
}

/* ---------------------------------------------------------------------------
   Video testaments — film cards below written testaments
--------------------------------------------------------------------------- */

.video-testaments-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--space-lg);
  margin-top:            var(--space-xl);
}

/* ---------------------------------------------------------------------------
   Responsive overrides
--------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .testaments-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-lg);
  }
}

@media (max-width: 768px) {
  .testaments-grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-lg);
  }

  .video-testaments-grid {
    grid-template-columns: 1fr;
  }
}