/* ==================================================================
   Testimonials — kwizzbit/testimonials (whole-file segment)
   Faithful slice of /HTML/testimonials.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.testimonials{
  --testimonials-section-bg: #F0E3D9;
  --testimonials-card-bg:    #FFFAF5;
}

.testimonials {
  background: var(--testimonials-section-bg);
  padding-block: 8.25rem 4.25rem;
  overflow-x: clip;
}
.testimonials__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
}

/* =============================================
   HEADER — above the grid on desktop
   ============================================= */
.testimonials__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(var(--wp--custom--motion--scroll-reveal-distance));
  transition:
    opacity var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing),
    transform var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing);
}
.testimonials__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .testimonials__header { opacity:1; transform:none; transition:none; }
}

/* ---- Headline ---- */
.testimonials__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 3.25rem;
  line-height: 3rem;
  letter-spacing: -0.10769em;
  color: var(--wp--preset--color--ink);
  max-width: 600px;
  position: relative;
}
.testimonials__title-accent {
  color: var(--wp--preset--color--coral);
}

/* Finger — zero-width anchor, absolute positioned */
.testimonials__title-last-line { display:inline; }
.testimonials__finger-anchor {
  position:relative;display:inline-block;
  width:0;height:0;overflow:visible;
}
.testimonials__finger {
  position:absolute;display:block;
  width:73px;height:73px;object-fit:contain;
  left:-6px;bottom:-22px;
  /* Float bob layered on top of the wiggle — matches sticker behaviour */
  animation: finger-float 4s ease-in-out infinite,
             finger-wiggle 3.5s cubic-bezier(0.65,0,0.35,1) infinite;
  transform-origin:bottom center;
  pointer-events:none;
  /* Sit above the card grid */
  z-index:10;
}
@keyframes finger-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.testimonials__title-cursor { animation:cursor-blink 1.1s step-end infinite; }

.testimonials__cta-wrap { flex-shrink:0;padding-bottom:0.25rem; }

/* =============================================
   CARD GRID — flex columns, stagger on 2+4
   Same pattern as features-full (COMPONENTS.md §10)
   ============================================= */
.testimonials__grid {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
}

/* Bottom fade — bleeds 20px past grid edges to cover card border lines */
.testimonials__grid::after {
  content:'';
  position:absolute;bottom:0;left:-20px;right:-20px;
  height:480px;
  background:linear-gradient(to bottom,transparent 0%,rgba(240,227,217,0.75) 35%,var(--testimonials-section-bg) 70%);
  pointer-events:none;
  z-index:1;
}

.testimonials__col {
  display:flex;flex-direction:column;gap:1rem;flex:1;
}

/* Col 2+4 stagger — 24px down. Resets at ≤1023px. */
.testimonials__col[data-col="2"],
.testimonials__col[data-col="4"] { margin-top:24px; }

/* Coral shadow on top-row cards only — prevents bleed through gradient */
.testimonials__col .testimonial-card:first-child {
  box-shadow: 0 20px 50px rgba(255,54,35,0.10);
}

/* =============================================
   CARDS
   ⚠ Split-transition: base opacity only.
   Hover lift added on .is-visible only.
   Do not consolidate — prevents hover delay.
   ============================================= */
.testimonial-card {
  width:100%;
  background:var(--testimonials-card-bg);
  border-radius:0;
  padding:1.5rem;
  /* Bottom row — always visible, no animation */
  opacity:1;
  transform:none;
}
/* Top row only — scroll reveal */
.testimonials__col .testimonial-card:first-child {
  opacity:0;
  transform:translateY(var(--wp--custom--motion--scroll-reveal-distance));
  transition:
    opacity var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing),
    transform var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing);
}
.testimonials__col .testimonial-card:first-child.is-visible { opacity:1;transform:translateY(0); }
@media (hover:hover) {
  .testimonials__col .testimonial-card:first-child.is-visible:hover {
    transform:translateY(-4px);
    transition:
      transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
  }
}
@media (prefers-reduced-motion:reduce) {
  .testimonials__col .testimonial-card:first-child {
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

.testimonial-card__quote {
  font-family:var(--wp--preset--font-family--body);font-weight:500;
  font-size:var(--wp--preset--font-size--base);line-height:1.5;
  color:var(--wp--preset--color--ink);margin-bottom:1.25rem;
}
.testimonial-card__attribution {
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
.testimonial-card__meta { display:flex;flex-direction:column;gap:0.125rem; }
.testimonial-card__handle {
  font-family:var(--wp--preset--font-family--body);font-weight:600;
  font-size:var(--wp--preset--font-size--sm);line-height:1.2;
  color:var(--wp--preset--color--ink);
}
.testimonial-card__role {
  font-family:var(--wp--preset--font-family--body);font-weight:500;
  font-size:var(--wp--preset--font-size--xs);line-height:1.3;
  color:var(--wp--preset--color--coral);
}
.testimonial-card__avatar {
  width:40px;height:40px;border-radius:50%;
  flex-shrink:0;object-fit:cover;overflow:hidden;display:block;
}

@media (max-width:640px) {
}
   ============================================= */
@media (max-width:1023px) {
  .testimonials { padding-block:5.75rem 1.25rem; }
  .testimonials__title { font-size:3.25rem;line-height:3rem; }
  .testimonials__header { flex-direction:column;align-items:flex-start;gap:1.5rem;margin-bottom:2.5rem; }
  .testimonials__cta-wrap { padding-bottom:0; }
  /* Reset col 2+4 stagger */
  .testimonials__col[data-col="2"],
  .testimonials__col[data-col="4"] { margin-top:0; }
  /* 3-column layout — col 4 hidden */
  .testimonials__grid { flex-wrap:nowrap; }
  .testimonials__col { flex:1; }
  .testimonials__col[data-col="4"] { display:none !important; }
}

/* =============================================
   MOBILE ≤640px
   ============================================= */
@media (max-width:640px) {
  .testimonials { padding-block:6.25rem 1.25rem; }
  .testimonials__title {
    font-size:clamp(1.875rem,10.13vw,2.375rem);
    line-height:0.8421;letter-spacing:-0.10763em;
    max-width:100%;
    text-align:center;
  }
  .testimonials__header {
    flex-direction:column;
    align-items:center;
    gap:1.25rem;
    margin-bottom:3rem;
  }
  .testimonials__cta-wrap { padding-bottom:0; }
  .btn--secondary { width:auto; }
  /* Finger 20% smaller on mobile */
  .testimonials__finger { width:58px;height:58px; }
  /* 2-column layout — cols 3+4 hidden */
  .testimonials__grid { flex-wrap:wrap; gap:0.625rem; }
  .testimonials__col {
    flex:0 0 calc(50% - 0.3125rem) !important;
    min-width:0;
  }
  .testimonials__col[data-col="3"],
  .testimonials__col[data-col="4"] { display:none; }
  .testimonials__col[data-col="2"] { margin-top:16px; }
  /* overflow:clip trims card borders at grid edge without killing shadows or creating scroll container */
  .testimonials__grid { overflow: clip; }
  /* Gradient — lighter */
  .testimonials__grid::after {
    height:320px;
    background:linear-gradient(to bottom,transparent 0%,rgba(240,227,217,0.5) 40%,var(--testimonials-section-bg) 80%);
  }
  /* Tighter cards */
  .testimonial-card { padding:1rem; }
  .testimonial-card__quote { font-size:0.75rem;line-height:1.4; }
  .testimonial-card__handle { font-size:0.6875rem; }
  .testimonial-card__role { font-size:0.625rem; }
  /* Avatar above handle, left aligned */
  .testimonial-card__attribution { flex-direction:column;align-items:flex-start;gap:0.5rem; }
  .testimonial-card__avatar { order:-1;width:32px;height:32px; }
}

/* ── Desktop: hide the header 'Get started' (Kev, 2026-07-18) ─────────
   On desktop (≥1024px) the fixed floating Get-started CTA (nav.css) is
   always visible top-right, so this header CTA read as the same button
   twice, side by side. Hidden ONLY at ≥1024px — below that the floating
   button doesn't exist (the burger takes over) and this CTA is the real
   conversion point, so it stays. The header is a space-between flex row
   [title | cta]; with the CTA gone the title simply holds its place at
   the left and the flex gap collapses (gap only renders between two
   items), so no leftover gutter — nothing else to tune. Applies on both
   the homepage and audience pages, matching where the float appears. */
@media (min-width: 1024px) {
  .testimonials__cta-wrap { display: none; }
}