/* ==========================================================================
   Opus AV — Testimonials page styles  (full editorial rewrite)
   /testimonials/index.html
   Never hard-code hex values — always reference tokens from tokens.css.
   ========================================================================== */


/* ── Masthead watermark ─────────────────────────────────────────────────── */

.page-masthead::after {
  background-image: url('../../logos/opus-av-bars-mark.svg');
}


/* =========================================================================
   HERO QUOTE — cinematic, dark, full-width
   ========================================================================= */

.tmt-hero {
  position: relative;
  overflow: hidden;
  background: var(--opus-charcoal);
  padding-block: clamp(5rem, 10vw, 8rem);
  isolation: isolate;
}

/* Ambient dots inherit from components.css — reduce opacity on dark bg */
.tmt-hero .ambient {
  opacity: 0.35;
}

/* Decorative giant open-quote mark — purely visual */
.tmt-hero__mark {
  position: absolute;
  top: -0.18em;
  left: -0.04em;
  font-size: clamp(10rem, 22vw, 18rem);
  font-family: Georgia, "Times New Roman", serif;
  color: var(--opus-white);
  opacity: 0.04;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  z-index: -1;
}

.tmt-hero .container {
  position: relative;
  z-index: 1;
}

/* Quote text — large, light weight, max 820px wide */
.tmt-hero__quote {
  max-width: 820px;
  margin: 0;
}

.tmt-hero__quote p {
  font-size: clamp(1.55rem, 3vw, 2.65rem);
  font-weight: var(--fw-light);
  color: var(--opus-white);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-5);
}

/* Attribution row */
.tmt-hero__attr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.tmt-hero__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--opus-white);
}

.tmt-hero__sep {
  color: var(--opus-grey);
  font-size: var(--fs-small);
}

.tmt-hero__org {
  font-size: var(--fs-small);
  color: rgba(242, 242, 242, 0.6);
}

/* Sector pill on hero — uses global accent (orange) */
.tmt-hero__sector-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22em 0.7em;
  border-radius: 100px;
  background: var(--accent);
  color: var(--opus-white);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
}


/* =========================================================================
   STATS BAND — three large display numbers
   ========================================================================= */

.tmt-stats {
  background: var(--opus-white);
  padding-block: var(--space-7) var(--space-6);
  border-bottom: var(--hairline);
}

.tmt-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  text-align: center;
}

@media (max-width: 640px) {
  .tmt-stats__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: left;
  }
}

.tmt-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 640px) {
  .tmt-stats__item {
    align-items: flex-start;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
  }
}

.tmt-stats__num {
  display: block;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: var(--fw-light);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* "Many" — italic so it feels warm, not mechanical */
.tmt-stats__num--text {
  font-style: italic;
  letter-spacing: -0.01em;
}

.tmt-stats__plus {
  font-size: 0.5em;
  vertical-align: super;
  opacity: 0.65;
}

.tmt-stats__label {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-default);
  max-width: 16ch;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .tmt-stats__label {
    max-width: none;
    align-self: center;
  }
}


/* =========================================================================
   TESTIMONIALS SECTION — editorial mixed layout
   ========================================================================= */

.tmt-section {
  padding-block: var(--space-7) var(--space-8);
  background: var(--surface-soft);
  position: relative;
  overflow: hidden;
}

.tmt-section__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  color: var(--text-strong);
  margin-bottom: var(--space-6);
  line-height: 1.2;
}


/* ── Editorial grid ─────────────────────────────────────────────────────── */

.tmt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .tmt-grid {
    grid-template-columns: 1fr;
  }
}


/* ── Base testimonial card ──────────────────────────────────────────────── */

.tmt-card {
  position: relative;
  padding: var(--space-5);
  background: var(--opus-white);
  border-top: 3px solid var(--_sector-accent, var(--accent));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-opus),
              box-shadow var(--dur-base) var(--ease-opus);
}

.tmt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(31, 31, 31, 0.10);
}

/* Sector-specific top borders */
.tmt-card--religion  { --_sector-accent: #D4A155; }
.tmt-card--education { --_sector-accent: #ED7B22; }
.tmt-card--sensory   { --_sector-accent: #00A4B4; }
.tmt-card--industry  { --_sector-accent: #6E9CC2; }
.tmt-card--leisure   { --_sector-accent: #F0653D; }
.tmt-card--community { --_sector-accent: #8AA56C; }


/* ── Dark card variant ──────────────────────────────────────────────────── */

.tmt-card--dark {
  background: var(--opus-charcoal);
}

.tmt-card--dark .tmt-card__quote {
  color: rgba(242, 242, 242, 0.88);
}

.tmt-card--dark .tmt-card__name {
  color: var(--opus-white);
}

.tmt-card--dark .tmt-card__org {
  color: rgba(242, 242, 242, 0.5);
}


/* ── Wide card variant — spans full grid width ──────────────────────────── */

.tmt-card--wide {
  grid-column: span 2;
}

/* Wide card: two-column internal layout on large screens */
@media (min-width: 721px) {
  .tmt-card--wide {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    align-items: start;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
  }

  .tmt-card--wide .tmt-card__quote {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    align-self: center;
  }

  .tmt-card--wide .tmt-card__attr {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

/* Collapse to full-width on mobile */
@media (max-width: 720px) {
  .tmt-card--wide {
    grid-column: span 1;
  }
}


/* ── Card typography ────────────────────────────────────────────────────── */

.tmt-card__quote {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--text-default);
  line-height: 1.68;
  margin: 0;
  flex: 1;
}

.tmt-card__attr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem var(--space-2);
  margin-top: auto;
}

.tmt-card__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--text-strong);
}

.tmt-card__name:not(:empty) + .tmt-card__org::before {
  content: " — ";
  color: var(--opus-grey);
}

.tmt-card__org {
  font-size: 0.85rem;
  color: var(--opus-grey);
  line-height: 1.4;
}


/* ── Sector tag pills ───────────────────────────────────────────────────── */

.tmt-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22em 0.65em;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  margin-left: auto;
  white-space: nowrap;
}

.tmt-tag--religion  { background: rgba(212, 161,  85, 0.12); color: #D4A155; }
.tmt-tag--education { background: rgba(237, 123,  34, 0.12); color: #ED7B22; }
.tmt-tag--sensory   { background: rgba(  0, 164, 180, 0.12); color: #00A4B4; }
.tmt-tag--industry  { background: rgba(110, 156, 194, 0.12); color: #6E9CC2; }
.tmt-tag--leisure   { background: rgba(240, 101,  61, 0.12); color: #F0653D; }
.tmt-tag--community { background: rgba(138, 165, 108, 0.12); color: #8AA56C; }

/* Slightly brighter tag background on dark cards */
.tmt-card--dark .tmt-tag--religion  { background: rgba(212, 161,  85, 0.22); }
.tmt-card--dark .tmt-tag--education { background: rgba(237, 123,  34, 0.22); }
.tmt-card--dark .tmt-tag--sensory   { background: rgba(  0, 164, 180, 0.22); }
.tmt-card--dark .tmt-tag--industry  { background: rgba(110, 156, 194, 0.22); }
.tmt-card--dark .tmt-tag--leisure   { background: rgba(240, 101,  61, 0.22); }
.tmt-card--dark .tmt-tag--community { background: rgba(138, 165, 108, 0.22); }


/* =========================================================================
   CLOSING CTA BAND — dark, ambient
   ========================================================================= */

.tmt-cta {
  position: relative;
  overflow: hidden;
  background: var(--opus-charcoal);
  padding-block: var(--space-8);
  text-align: center;
  isolation: isolate;
}

.tmt-cta .ambient {
  opacity: 0.3;
}

.tmt-cta__inner {
  position: relative;
  z-index: 1;
}

.tmt-cta h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: var(--fw-light);
  color: var(--opus-white);
  max-width: 28ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  line-height: 1.2;
}