/* ═══════════════════════════════════════════════════════════
   TUNEX TESTIMONIALS — SCROLLING COLUMNS
   Port of the "testimonials-columns-1" pattern to vanilla CSS.

   Only the demo file was supplied again, so the contract comes
   from it: three columns, each drifting upward on its own
   duration (15s / 19s / 17s), the middle column hidden below
   md and the third below lg, the whole rail capped at 740px
   and feathered top and bottom by a vertical mask.

   Two deliberate departures from the demo:
     · no randomuser.me portraits — those are photographs of
       strangers, and presenting them as Tunex's clients would
       be inventing people. Initials avatars instead, which is
       what the rest of the site already uses.
     · the section stays dark, so the page's light/dark rhythm
       around it is unchanged.
   ═══════════════════════════════════════════════════════════ */

.tc-section {
  background: var(--b);
  padding: 96px 56px 92px;
  overflow: hidden;
}

.tc-head {
  max-width: 540px;
  margin: 0 auto 44px;
  text-align: center;
}
.tc-badge {
  display: inline-block;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r);
}
.tc-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
}

/* ── THE RAIL ──────────────────────────────────────────── */

.tc-rail {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-height: 740px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 25%,
    #000 75%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 25%,
    #000 75%,
    transparent
  );
}

.tc-col {
  flex: 0 0 auto;
  width: 340px;
}

/* the demo shows one column on small screens, two at md, three at lg */
.tc-col--2 {
  display: none;
}
.tc-col--3 {
  display: none;
}
@media (min-width: 768px) {
  .tc-col--2 {
    display: block;
  }
}
@media (min-width: 1024px) {
  .tc-col--3 {
    display: block;
  }
}

/* content is duplicated in JS, so -50% loops seamlessly */
.tc-track {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: tc-up var(--dur, 15s) linear infinite;
}

@keyframes tc-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* a quote you cannot finish reading is worse than no quote */
.tc-rail:hover .tc-track,
.tc-rail:focus-within .tc-track {
  animation-play-state: paused;
}

/* ── CARD ──────────────────────────────────────────────── */

.tc-card {
  background: #101010;
  border: 1px solid #1f1f1f;
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  transition: border-color 0.3s var(--ease);
}
.tc-card:hover {
  border-color: rgba(196, 30, 58, 0.4);
}

.tc-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 12px;
}

.tc-quote {
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
}
.tc-quote strong {
  color: #fff;
  font-weight: 700;
}

.tc-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #1f1f1f;
}
.tc-av {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--r);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.tc-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.tc-role {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

/* ── RESPONSIVE / MOTION ───────────────────────────────── */

@media (max-width: 900px) {
  .tc-section {
    padding: 72px 24px 76px;
  }
  .tc-rail {
    max-height: 620px;
    gap: 16px;
  }
  .tc-col {
    width: 100%;
    max-width: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-track {
    animation: none;
  }
  /* nothing is scrolling, so the feathered edges would just hide content */
  .tc-rail {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tc-card[data-clone] {
    display: none;
  }
}

/* ── STATIC PAIR ───────────────────────────────────────────
   Used when there are only a couple of genuine quotes. The
   scrolling rail above needs a column's worth of cards to loop
   without visibly repeating itself; with two, repetition reads
   as padding out thin proof. A static pair reads as deliberate,
   and the cards keep the rail's styling untouched.
   Move back to .tc-rail once there are ~6 real quotes.
   ─────────────────────────────────────────────────────────── */

.tc-pair {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.tc-pair .tc-card { width: auto }

@media (max-width: 700px) {
  .tc-pair { max-width: 420px }
}