/* ============================================================================
 * Suunta.ai Landing v2 — How it works  (V2 — typography-led minimalist)
 * ----------------------------------------------------------------------------
 * LIGHT canvas. 3 step (Capture / Cascade / Run weekly) + duration sub-text.
 *
 * V2 polish (sama linja kuin Loop V2 + Problem V2):
 *   Aiempi V1 oli 3 isoa korttia jokaisessa clock-icon + Step 01 eyebrow
 *   + h3 + p + 3 angle-right features. V2 = typography-led:
 *     - 3 saraketta vaakatasossa (desktop), stack mobile
 *     - Numbered "01-03" emerald-700 + duration "~30 min" muted oikealla
 *     - h3 medium + p secondary
 *     - Features pelkkä unicode ✓ ilman angle-right ikoneita
 *     - Hairline vertical divider sarakkeen välissä
 *     - EI kortteja, EI clock-icon, EI bg/border-frame:ä
 * ============================================================================ */

.v2-how__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.v2-how__head h2 { margin-top: var(--space-4); }
.v2-how__head .lead { margin-top: var(--space-6); }

/* ─── 3-col horizontal pillar (V6 — käyttäjäpäätös) ──────────────────
 * Käyttäjäpalaute: "siirretään nämä vaiheet how-osiossa riviin eikä
 * niin että ne ovat allekkain". Vaihdetaan vertical timeline takaisin
 * horizontal 3-col -rakenteeseen.
 *
 * Erotuvuus Problem 3-col -osiosta säilyy:
 *   - How: ISO 40-52px display-numero + uppercase time-meta + features-✓
 *   - Problem: pieni muted slate numero + pull-quote-symptom, EI features
 */
section#how-it-works {
  padding-block: var(--space-16);
}
@media (min-width: 1024px) {
  section#how-it-works {
    padding-block: var(--space-20);
  }
}

.v2-how__head {
  margin-bottom: var(--space-12);
}

.v2-how__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
}

.v2-how__pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
  padding-block: var(--space-6);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.v2-how__pillar:first-child {
  border-top: 0;
  padding-top: var(--space-4);
}

@media (min-width: 768px) {
  .v2-how__pillars {
    grid-template-columns: repeat(3, 1fr);
    /* Subgrid: jokainen pillari jakaa parent-grid:n rivit
       (meta | title | desc | features). Korjaa markkinoinnin palauteen
       2026-05-26: "numerot ja osiot epälinjassa" — kaikkien sarakkeiden
       rivit ovat baseline-tasalla. */
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
  }

  .v2-how__pillar {
    padding-block: var(--space-2);
    padding-inline: var(--space-6);
    border-top: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: var(--space-3);
  }

  .v2-how__pillar:first-child {
    /* Sama padding-top kuin muilla pillareilla (var(--space-2)) — mobiilin
       first-child padding-top (var(--space-4)) on spesifisempi ja jäisi
       muuten voimaan desktopilla → 01-pilarin numero 8px muita alempana
       (subgrid ei kompensoi pillarin omaa padding-topia). */
    padding-top: var(--space-2);
    padding-left: 0;
    border-left: 0;
  }

  .v2-how__pillar:last-child {
    padding-right: 0;
  }
}

/* ─── Meta-rivi: ISO display-numero + time-meta ──────────────────── */
.v2-how__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.v2-how__num {
  font-size: clamp(40px, 4.4vw, 52px);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(15, 23, 42, 0.18);
  transition: color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-how__pillar:hover .v2-how__num {
  color: rgba(15, 23, 42, 0.32);
}

.v2-how__pillar:hover .v2-how__num {
  color: rgba(15, 23, 42, 0.32);
}

.v2-how__time {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ─── Pillar title ─────────────────────────────────────────────────── */
.v2-how__pillar-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}

@media (min-width: 1024px) {
  .v2-how__pillar-title {
    font-size: var(--text-xl);
  }
}

/* ─── Pillar description ───────────────────────────────────────────── */
.v2-how__pillar-desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  margin: 0;
}

@media (min-width: 1024px) {
  .v2-how__pillar-desc {
    font-size: 15px;
  }
}

/* ─── Features list — pelkkä unicode ✓ + teksti ───────────────────── */
.v2-how__features {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v2-how__features li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.65);
  letter-spacing: -0.005em;
}

/* Tikit muted slate (oli emerald) — pelkkä semanttinen indicator,
   ei aksentti. Yhdenmukainen Audiences-listan kanssa. */
.v2-how__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(15, 23, 42, 0.36);
  font-size: 12px;
  font-weight: var(--weight-medium);
}

.v2-how__pillar:hover {
  transform: translateY(-2px);
}

/* ─── Mobile tarkennukset ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .v2-how__pillar {
    padding-block: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-how__pillar,
  .v2-how__num {
    transition: none;
  }
  .v2-how__pillar:hover {
    transform: none;
  }
}