/* ============================================================
   Testimonials — "recollection of time with people"
   ------------------------------------------------------------
   Three 384×384 cards in a fixed 1200px row (24px gaps), sourced
   from Figma (node 7304:116098). Each card is DEFAULT until hovered:

   DEFAULT  photo + a corner black gradient; name/role pinned bottom.
   HOVER    a stronger full gradient fades in; the name/role slides
            UP to the top (and dims to 50%) while the quote slides
            UP from below into the body. Quick + subtle.

   Carousel/auto-advance is a later phase — this is the static,
   pixel-perfect card + interaction only.
   ============================================================ */

.tcx {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The section is a flex column that already spaces children by ~67px (the
     Figma gap), so no extra top margin is needed here. */
}

/* ---- position dots (below the carousel) ---- */
.tcx-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}
.tcx-dot {
  width: 8px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(216, 216, 216);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.tcx-dot.is-active { width: 24px; background: #e8503a; }
.tcx-dot:focus-visible { outline: 2px solid #e8503a; outline-offset: 3px; }

/* The Framer section wraps this row in 264px side padding (sized for a 1728px
   frame), which squeezes the 1200px stage to ~912px at 1440. Neutralize that
   side padding on the section that holds the cards so the row is a true 1200px,
   centered — the heading is center-aligned so it's unaffected. Desktop only;
   the responsive/carousel pass comes later. */
@media (min-width: 1240px) {
  div:has(> .tcx) { padding-left: 0 !important; padding-right: 0 !important; }
}

/* viewport shows exactly three cards (384*3 + 24*2 = 1200); the track holds all
   of them and slides one card at a time (see testimonials-carousel.js). */
.tcx-viewport {
  width: 1200px;                 /* fixed 1200px stage */
  max-width: 100%;
  overflow: hidden;
}
.tcx-track {
  display: flex;
  gap: 24px;                     /* Figma: 24px between all cards */
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.tcx-card {
  position: relative;
  flex: 0 0 384px;
  width: 384px;
  height: 384px;
  overflow: hidden;
  background: #fff;
  isolation: isolate;           /* keep the ::before scrim scoped to this card */
}

/* ---- photo (fills the card, cropped) ---- */
.tcx-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ---- default scrim: dark in the bottom-left corner ---- */
.tcx-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(225deg, rgba(0, 0, 0, 0) 63.151%, rgb(0, 0, 0) 99.579%);
  pointer-events: none;
}

/* ---- hover scrim: stronger full gradient, fades in for legibility ---- */
.tcx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 98.859%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tcx-card:hover::before,
.tcx-card:focus-within::before { opacity: 1; }

/* ---- shared text styling ---- */
.tcx-quote,
.tcx-meta {
  position: absolute;
  left: 20px;
  width: 344px;
  color: #fff;
  font-family: "Figtree", "Figtree Placeholder", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 25px;
  margin: 0;
}

/* ---- name + role: pinned bottom by default, slides to the top on hover ---- */
.tcx-meta {
  top: 314.5px;                  /* Figma default: bottom of the card */
  z-index: 4;
  font-weight: 500;             /* Figtree Medium */
  transition: opacity 0.3s ease;
}
.tcx-meta p { margin: 0; width: 100%; }
/* On hover the name/role simply fades out in place — no upward slide — so the
   quote is the only moving piece (fewer moving parts, calmer hover). */
.tcx-card:hover .tcx-meta,
.tcx-card:focus-within .tcx-meta {
  opacity: 0;
}

/* ---- quote: hidden below by default, slides up into the body on hover ---- */
.tcx-quote {
  bottom: 24px;                  /* anchored to the bottom so any length fits */
  z-index: 3;
  font-weight: 400;             /* Figtree Regular */
  text-align: justify;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.32s ease;
  pointer-events: none;
}
.tcx-card:hover .tcx-quote,
.tcx-card:focus-within .tcx-quote {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced-motion: cross-fade instead of slide */
@media (prefers-reduced-motion: reduce) {
  .tcx-meta,
  .tcx-quote,
  .tcx-card::before { transition: opacity 0.2s ease; }
  .tcx-card:hover .tcx-quote,
  .tcx-card:focus-within .tcx-quote { transform: translateY(0); }
}