/* ============================================================================
 * Suunta.ai Landing v2 — Trust band
 * ----------------------------------------------------------------------------
 * LIGHT canvas. 3 statia + auto-rotating asiakaslogo-marquee.
 *
 * Ops styleguide:
 *   - Numerot: tabular-nums, 500 medium, text-3xl
 *   - Stat-separator: 1px hairline pysty, EI accent-väri
 *   - Logot: opacity 0.55, hover 1.0, grayscale (yhtenäinen rivi)
 *   - Marquee: 40s loop vasemmalle, pause hoverilla, fade reunoille
 *     mask-image:lla. prefers-reduced-motion → ei animaatiota.
 * ============================================================================ */

.v2-trust {
  /* Rauhallinen, tiivis section — pienempi padding kuin standard */
  padding-block: var(--space-12);
}

@media (min-width: 768px) {
  .v2-trust { padding-block: var(--space-16); }
}

.v2-trust__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6) var(--space-12);
  margin-bottom: var(--space-12);
}

.v2-trust__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.v2-trust__stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.v2-trust__stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Stat-separator: 1px hairline pysty desktopilla */
@media (min-width: 768px) {
  .v2-trust__stat + .v2-trust__stat {
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--space-12);
  }
}

/* ─── Logo row ─────────────────────────────────────────────────────────── */
.v2-trust__caption {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary); /* polish: muted (1.85) oli liian himmeä — secondary = AA 12px:lle */
  margin-bottom: var(--space-8);
}

/* Legacy fallback — staattinen logorivi (jos jossain käytetään edelleen). */
.v2-trust__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}

/* ─── Marquee-karuselli ────────────────────────────────────────────────
 * Wrapper: overflow:hidden + fade-edges (mask-image: linear-gradient).
 * Track: flex-row jossa logot duplikoitu kahdesti. animation translateX
 * 0 → -50% = täsmälleen yksi looppi (toinen puoli täyttää nivelen).
 * Pause hoverilla → käyttäjä voi pysähtyä lukemaan.
 */
.v2-trust__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade reunoille — logot häipyvät jouhevasti pois näkyvistä.
     Mobiililla pienempi fade (32px) jotta enemmän logoja näkyy
     kapeammassa container-leveydessä; desktopilla 80px premium-tunne. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
}

@media (min-width: 768px) {
  .v2-trust__marquee {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 80px,
      #000 calc(100% - 80px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 80px,
      #000 calc(100% - 80px),
      transparent 100%
    );
  }
}

.v2-trust__marquee-track {
  display: flex;
  align-items: center;
  /* gap mobiililla tiukempi (space-8 = 32px) jotta useampi logo mahtuu
     näkyviin samanaikaisesti; desktopilla space-12 = 48px premium-rytmi */
  gap: var(--space-8);
  /* width: max-content jotta flex ei kuristu kontainer-leveyteen */
  width: max-content;
  /* Hidas, rauhallinen loop. Linear jotta tempo pysyy tasaisena. */
  animation: v2-trust-marquee 40s linear infinite;
  will-change: transform;
}

@media (min-width: 768px) {
  .v2-trust__marquee-track {
    gap: var(--space-12);
  }
}

.v2-trust__marquee:hover .v2-trust__marquee-track {
  animation-play-state: paused;
}

@keyframes v2-trust-marquee {
  from { transform: translateX(0); }
  /* Liikutaan tasan puolet matkaa — koska logot ovat duplikoitu,
     -50%:n kohdalla DOM näyttää identtiseltä alkuperäiseen tilanteeseen
     → looppi nivelletön. */
  to   { transform: translateX(-50%); }
}

/* Reduced-motion: ei animaatiota, mutta säilytetään duplikoitu track
   horizontal scroll:n varalta. Piilotetaan duplikaatit (aria-hidden). */
@media (prefers-reduced-motion: reduce) {
  .v2-trust__marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .v2-trust__marquee-track [aria-hidden='true'] {
    display: none;
  }
}

/* Logo-lane: KIINTEÄ kokoinen frame jokaiselle logolle — visuaalinen
   rytmi marquee:ssa pysyy tasaisena riippumatta logon omasta AR:sta.
   Pelkkä min-width johti epätasaisiin gap:eihin (vaakasuuntaiset logot
   levenivät, neliölogot olivat lane:n vasemmalla reunalla). */
.v2-trust__logo-wrap,
.v2-trust__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Mobiililla kapeampi lane (110px) jotta useampi logo mahtuu näkyviin
     375px-näytöllä; desktopilla 160px premium-tunne (media-query alla) */
  width: 110px;
  height: 48px;
}

.v2-trust__logo-link {
  text-decoration: none;
  color: inherit;
}

.v2-trust__logo {
  display: block;
  /* max-height + max-width 100% + contain → kaikki logot skaalautuvat
     mahtumaan KAIKKI samanlaiseen 140×32-frame:en. Vaakasuuntaiset
     (Redan) rajoittuvat leveyden mukaan, neliölogot (Y4, Slush)
     korkeuden mukaan — visuaalinen koko tasaantuu. */
  max-height: 32px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.55;
  /* UNIVERSAALI MONO-SILUETTI (Stripe/Linear-pattern): brightness(0) muuttaa
     JOKAISEN logon (valkoinen, värillinen, tumma) tummaksi siluetiksi →
     kaikki CMS:ään ladattavat logot toimivat light-taustalla automaattisesti,
     ilman käsin ylläpidettäviä invert-flageja. Edellytys: logolla on
     läpinäkyvä tausta (valkotaustainen PNG muuttuisi mustaksi laatikoksi). */
  filter: brightness(0);
  transition:
    opacity var(--transition-hover, 240ms ease),
    filter var(--transition-hover, 240ms ease),
    transform var(--transition-hover, 240ms ease);
}

/* Dark-taustainen logo-strip (esim. Landing Builder LogoStrip theme=dark):
   sama siluetti vaaleana → tummatkin logot erottuvat. */
.v2-trust[data-theme='dark'] .v2-trust__logo,
section[data-theme='dark'] .v2-trust__logo {
  filter: brightness(0) invert(1);
}

/* Legacy-modifier: brightness(0) kattaa valkoiset logot → flag on harmiton
   no-op. Säilytetään selektori ettei vanha markup riko mitään. */
.v2-trust__logo--invert {
  filter: brightness(0);
}
.v2-trust[data-theme='dark'] .v2-trust__logo--invert,
section[data-theme='dark'] .v2-trust__logo--invert {
  filter: brightness(0) invert(1);
}

/* Optical sizing — per-logo override AR:n mukaan:
   - --square (AR ~1, esim. Elega, Y4, Apukuski, Gnistan): suurempi
     max-height jotta neliölogo ei jää pieneksi laajaan lane:en
   - --wide   (AR >4, esim. Pudasjärvi): pienempi max-height jotta
     erittäin laaja logo ei dominoi vertikaaliriviä
   Default (AR 2-4, esim. Redan, Sherbrooke, Finnester, Slush) toimii
   ilman overridea. */
.v2-trust__logo--square {
  max-height: 36px; /* lane 48px → 36px square mahtuu mukavasti */
}
.v2-trust__logo--wide {
  max-height: 22px;
}

@media (min-width: 768px) {
  .v2-trust__logo { max-height: 36px; }
  .v2-trust__logo--square { max-height: 44px; }
  .v2-trust__logo--wide   { max-height: 28px; }
  .v2-trust__logo-wrap,
  .v2-trust__logo-link {
    width: 160px;
    height: 56px;
  }
}

/* Hover: korosta nostamalla VAIN opacity — siluetti (brightness-filter) säilyy,
   joten valkoinen logo ei koskaan "palaa" näkymättömäksi hoverissa. */
.v2-trust__logo:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* Fallback-teksti jos logo-asseti puuttuu Payloadista */
.v2-trust__logo-text {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  opacity: 0.65;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: opacity var(--transition-hover, 240ms ease), color var(--transition-hover, 240ms ease);
}

.v2-trust__logo-wrap:hover .v2-trust__logo-text,
.v2-trust__logo-link:hover .v2-trust__logo-text {
  opacity: 1;
  color: var(--text-primary);
}