/* TC Coaching: written testimonial feed.
   A slow marquee of athlete cards that stops as soon as anyone tries to read
   one, plus the full-story dialog. Brand tokens come from styles.css. */

/* ---------- The rail ---------- */
/* Sits outside .wrap, as a direct child of the section, so it spans the page
   without a 100vw breakout. 100vw would ignore the scrollbar and give the whole
   site a horizontal wobble. */
/* A real scroll container rather than a CSS animation. That way a trackpad
   swipe, a touch flick and a keyboard tab all move it for free, with proper
   momentum on phones. The slow drift is driven from JS by nudging scrollLeft,
   so the two never fight each other. */
.tmar{
  position:relative;
  margin-top:44px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  /* stop a sideways flick from triggering the browser's back gesture */
  overscroll-behavior-x:contain;
  /* the drift sets scrollLeft every frame, so this must stay instant */
  scroll-behavior:auto;
  cursor:grab;
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;
  /* fade the cards out into the page rather than clipping them dead */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.tmar::-webkit-scrollbar{display:none}
.tmar.is-dragging{cursor:grabbing}
/* Kill text selection mid-drag, otherwise dragging highlights the quotes. */
.tmar.is-dragging,.tmar.is-dragging *{user-select:none;-webkit-user-select:none}

/* The rail sits outside .wrap, so the z-index rule that lifts .wrap above the
   hex overlay does not reach it. Lift it here, or the texture paints over the
   cards. */
.section--apply .tmar{z-index:2}

.tmar__track{
  display:flex;
  gap:20px;
  width:max-content;
  padding:6px 20px;
}

/* ---------- A card ---------- */
.tcard{
  flex:0 0 auto;
  width:min(340px,82vw);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:26px 26px 22px;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .2s ease,transform .2s ease;
}
.tmar:hover .tcard:hover{border-color:rgba(0,164,255,.45);transform:translateY(-2px)}
.tcard__who{display:flex;align-items:center;gap:14px}
.tcard__photo,.tcard__initials{
  width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  border:2px solid rgba(0,164,255,.5);object-fit:cover;background:var(--ink-2);
}
.tcard__initials{
  display:grid;place-items:center;
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.25rem;
  color:var(--blue);letter-spacing:1px;
}
.tcard__name{
  font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;
  font-weight:700;font-size:1.15rem;color:var(--white);line-height:1.15;
}
.tcard__role{margin-top:4px;font-size:.82rem;color:var(--muted-2);line-height:1.35}
.tcard__quote{
  margin:0;flex:1;
  font-size:1.02rem;line-height:1.55;color:var(--white);font-style:italic;
}
.tcard__quote::before{content:'\201C'}
.tcard__quote::after{content:'\201D'}
.tcard__more{align-self:flex-start}

/* ---------- Empty state ---------- */
.tmar__empty{
  margin:44px auto 0;max-width:520px;text-align:center;
  padding:30px 24px;border:1px dashed var(--line);border-radius:var(--r);
  color:var(--muted);font-size:1rem;
}

/* ---------- Full story dialog ---------- */
.tdlg{
  /* A modal <dialog> is centred by the browser's own margin:auto, which the
     global *{margin:0} reset wipes out. Without this it drops to inset:0 and
     opens pinned to the top left corner. */
  margin:auto;
  width:min(680px,calc(100vw - 32px));
  max-height:min(86vh,900px);
  padding:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink);color:var(--white);
  overflow:hidden;
}
.tdlg::backdrop{background:rgba(3,5,8,.78);backdrop-filter:blur(3px)}
.tdlg__in{overflow-y:auto;max-height:min(86vh,900px);padding:30px clamp(22px,4vw,38px) 34px;-webkit-overflow-scrolling:touch}
.tdlg__x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--white);
  font-size:1.3rem;line-height:1;cursor:pointer;
}
.tdlg__x:hover{background:rgba(255,255,255,.14);border-color:var(--blue)}
.tdlg__who{display:flex;align-items:center;gap:16px;padding-right:44px}
.tdlg__photo,.tdlg__initials{
  width:70px;height:70px;flex:0 0 70px;border-radius:50%;
  border:2px solid rgba(0,164,255,.5);object-fit:cover;background:var(--ink-2);
}
.tdlg__initials{display:grid;place-items:center;font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.5rem;color:var(--blue)}
.tdlg__name{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;font-weight:700;font-size:1.5rem;line-height:1.1}
.tdlg__role{margin-top:5px;font-size:.86rem;color:var(--muted-2)}
.tdlg__headline{
  margin:24px 0 0;padding-left:18px;border-left:3px solid var(--blue);
  font-size:clamp(1.08rem,2.4vw,1.28rem);line-height:1.5;color:var(--white);font-style:italic;
}
.tdlg__hl{margin:28px 0 0;display:grid;gap:20px}
.tdlg__hl>div{display:grid;gap:6px}
.tdlg__label{
  font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:2px;
  font-weight:600;font-size:.76rem;color:var(--blue);
}
.tdlg__text{margin:0;color:var(--muted);line-height:1.65;font-size:.98rem}
.tdlg__foot{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);text-align:center}

/* ---------- Anyone who has asked for less movement ---------- */
/* The rail is still a scroll container, so it stays fully usable by hand. The
   only thing that changes is that nothing moves on its own: the drift is
   switched off in js/testimonials-feed.js. Drop the edge fade too, since with
   no drift there is nothing to fade into and it only hides the end cards. */
@media (prefers-reduced-motion:reduce){
  .tmar{
    -webkit-mask-image:none;mask-image:none;
    padding-bottom:10px;
  }
  .tcard,.tmar:hover .tcard:hover{transition:none;transform:none}
}