/* ============================================================================
 * Suunta.ai Landing v2 — Problem  (V2 — typography-led minimalist)
 * ----------------------------------------------------------------------------
 * DARK anchor. 3 ongelmaa (slides / scattered tools / late truth).
 *
 * V2 polish (sama linja kuin Loop V2 + Audiences V3):
 *   Aiempi V1 oli "container-in-container": 3 isoa korttia jokaisessa
 *   icon + 01-num + h3 + p + symptom. Pelkkä typography-led ratkaisu
 *   on rauhallisempi ja minimalistisempi:
 *     - 3 saraketta vaakatasossa (desktop), stack mobile
 *     - Numbered "01-03" emerald-400 + hairline-underline
 *     - h3 medium + p secondary
 *     - Symptom: italic kursivoitu emerald-tint sub-text alimpana
 *     - Hairline vertical divider sarakkeen välissä
 *     - EI kortteja, EI iconia, EI bg/border-frame:ä
 *
 * Conclusion-block säilyy (hairline-divider + iso visibility-statement).
 * ============================================================================ */

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

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

/* ─── 3-pillar typography list ───────────────────────────────────── */
.v2-problem__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
}

.v2-problem__pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Hover-lift: sama micro-interaction kuin Loop/Security/How V3 */
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

@media (min-width: 768px) {
  .v2-problem__pillars {
    grid-template-columns: repeat(3, 1fr);
  }

  .v2-problem__pillar {
    padding-block: 0;
    padding-inline: var(--space-6);
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .v2-problem__pillar:first-child {
    /* Nollaa mobiilin first-child padding-top (var(--space-4)) — se on
       spesifisempi kuin .v2-problem__pillar { padding-block: 0 } ja jäisi
       muuten voimaan desktopilla → 01-pilari 16px muita alempana. */
    padding-top: 0;
    padding-left: 0;
    border-left: 0;
  }

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

/* ─── Numbered prefix — ISO display-numero muted white (V3 polish)
 * Sama tyyli kuin Loop/Security/How V3:ssa: iso watermark-numero
 * tuo typografista painoa ilman aksenttiväriä. Yhtenäinen rytmi
 * koko sivulla. */
.v2-problem__num {
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  margin-bottom: var(--space-4);
  transition: color 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-problem__pillar:hover .v2-problem__num {
  color: rgba(255, 255, 255, 0.32);
}

/* ─── Pillar title ─────────────────────────────────────────────────── */
.v2-problem__pillar-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.3;
  margin: 0;
}

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

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

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

/* ─── Symptom — editorial pull-quote (V4 print-aikakauslehti -tyyli)
 * Aiempi pieni italic-muted quote oli OK mutta kovin "lista-tyyli".
 * V4 vaihdetaan **pull-quote**-tyyliin: iso ensimmäinen lainausmerkki
 * (open quote " 24px muted) + italic-teksti hieman isompana (14px) +
 * hairline-divider yläpuolella. Tämä on editorial-print -liike (Linear
 * "humanist tech", Stripe Sessions design lang).
 */
.v2-problem__symptom {
  position: relative;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.005em;
  margin: var(--space-2) 0 0;
  padding-top: var(--space-4);
  padding-left: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.v2-problem__symptom::before {
  content: '\201C';                              /* open curly quote */
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-size: 28px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.25);
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* ─── Conclusion-block — FOCAL POINT (osion ainoa emerald-aksentti) */
.v2-problem__conclusion {
  margin-top: var(--space-16);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

/* Subtle white-hairline divider — ei enää emerald-aksentti.
   Visuaalisesti rauhallisempi separator. */
.v2-problem__conclusion::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 auto var(--space-6);
}

.v2-problem__conclusion p {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.01em;
  margin: 0;
}

/* AINUT emerald-aksentti koko osiossa: "visibility problem" =
   focal point. Yksi aksentti per osio (Linear/Stripe-tyyli) eliminoi
   "saman-värisiä-kaikkialla" -tunteen ja tekee accentista merkityksellisen. */
.v2-problem__conclusion strong {
  color: var(--emerald-400);
  font-weight: var(--weight-medium);
}

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