/* ============================================
 * Testimonials — section module
 *
 * White-background section with a gradient-accent heading,
 * a large Halant blockquote, and an attribution row
 * (avatar + name + role on left, two round arrow nav
 * buttons on right).
 *
 * Mobile (default): stacks vertically, smaller type.
 * Desktop (≥1024px): scales heading and quote up,
 * attribution row spreads horizontally.
 *
 * Horizontal padding + max-width cap live in layout.css
 * via the `.tlm-section` (root) and `.tlm-container`
 * (__inner) classes added to the HTML. This file owns
 * only testimonials-unique layout.
 * ============================================ */

.tlm-testimonials {
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-cream);
  color: var(--color-text-on-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tlm-testimonials__inner {
  display: flex;
  flex-direction: column;
  /* Standards-aligned heading→body→attribution rhythm (32px).
     Was 60px; dropped to match the rest of the site. */
  gap: var(--space-lg);
}

/* ----- Heading ----- */

.tlm-testimonials__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* ----- Slides (one visible at a time; rest [hidden]) ----- */

.tlm-testimonials__viewport {
  display: block;
}

.tlm-testimonials__slide {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tlm-testimonials__slide[hidden] {
  display: none;
}

/* ----- Quote ----- */

.tlm-testimonials__quote {
  margin: 0;
  /* Cap line length for readability — Figma value, treated as a
     component-level cap (like the 520px body column elsewhere). */
  max-width: 982px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-testimonials__quote p {
  margin: 0;
  font-family: var(--font-serif);
  /* Mobile: 19px (~20% under the previous 24px) per Paul; tablet+ scales
     up in the media queries below. No 19px token, so the literal stands. */
  font-size: 1.1875rem;
  /* Halant 300 — lighter than the cascade's 400 regular for a softer
     quote. 300 is now loaded in functions.php; no weight token exists
     for light, so the literal is intentional here. */
  font-weight: 300;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* ----- Author ----- */

.tlm-testimonials__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tlm-testimonials__avatar {
  display: block;
  /* Mobile: 64px per Figma; tablet+ bumps to 80px. */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tlm-testimonials__author-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.tlm-testimonials__name {
  margin: 0;
  font-family: var(--font-serif);
  /* Mobile: 20px (--text-h5-mobile) per attribution standard.
     Desktop bumps to --text-2xl (24px). */
  font-size: var(--text-h5-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.tlm-testimonials__role {
  margin: 0;
  font-family: var(--font-sans);
  /* Mobile: 16/1.5 per body standard. Tablet+ bumps to 18/1.6. */
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
}

/* ----- Footer: counter (left) + nav controls (right) ----- */

.tlm-testimonials__footer {
  display: flex;
  align-items: center;
  /* Mobile: left-align so the arrows clear the fixed scroll-to-top
     button in the bottom-right. Tablet+ pushes them back to the right. */
  justify-content: flex-start;
  width: 100%;
}

@media (min-width: 768px) {
  .tlm-testimonials__footer {
    justify-content: flex-end;
  }
}

/* ----- Controls (round icon-only nav buttons) ----- */

.tlm-testimonials__controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tlm-testimonials__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background-color: var(--color-navy);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 200ms ease;
}

.tlm-testimonials__control:hover {
  background-color: var(--color-navy-hover, var(--color-navy));
  box-shadow: var(--shadow-button-hover);
}

.tlm-testimonials__control:focus-visible {
  outline: 2px solid var(--color-text-on-light);
  outline-offset: 2px;
}

.tlm-testimonials__control-icon {
  display: block;
}

.tlm-testimonials__control-icon--prev {
  transform: scaleX(-1);
}

/* ============================================
 * TABLET (≥768px)
 * ============================================ */

@media (min-width: 768px) {
  .tlm-testimonials__avatar {
    width: 80px;
    height: 80px;
  }

  /* The 20% mobile shrink is mobile-only; restore the 24px quote at
     tablet (desktop bumps to 32px below). */
  .tlm-testimonials__quote p {
    font-size: var(--text-2xl);
  }

  .tlm-testimonials__role {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }
}

/* ============================================
 * DESKTOP (≥1024px)
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-testimonials {
    /* Symmetric body-section rhythm: 120/120 desktop. */
    padding-block: var(--space-5xl);
  }

  .tlm-testimonials__inner {
    /* Figma uses 64px between rows at desktop; --space-2xl (60px)
       is closest. Bumps up from the mobile 32px. */
    gap: var(--space-2xl);
  }

  .tlm-testimonials__title {
    font-size: var(--text-h2);
  }

  .tlm-testimonials__quote p {
    font-size: var(--text-h4);
    line-height: var(--leading-snug);
  }

  .tlm-testimonials__name {
    font-size: var(--text-2xl);
  }
}