/* ============================================================================
 * Suunta.ai Landing v2 — Comparison  (V3 — emerald only on Suunta)
 * ----------------------------------------------------------------------------
 * LIGHT. 5-row, 6-col vertailutaulukko. Filosofian polish:
 *
 *   EMERALD on BRAND-color. Käytetään VAIN Suunta-sarakkeessa.
 *   Kilpailijoiden tagit ovat NEUTRAL-GRAY (informative labels) → eivät
 *   kilpaile visuaalisesti Suunta-✓:n kanssa. Tämä luo selkeän visual
 *   hierarchy:n: "this is the answer (emerald)" vs "these are informative
 *   labels (gray)".
 *
 * V3 polish (käyttäjäpalaute "minimalistinen premium"):
 *   - Tag-chip neutraali gray (oli emerald-tinted) → emerald varattu Suunta:lle
 *   - Em-dash isompi optinen weight (matchaa tag-cell)
 *   - Cell-padding kasvatettu → rivien välit hengittää
 *   - Sub-desc paremmin luettava (font-size + alpha)
 *   - Suunta-tintti hieman vahvempi (0.08 → 0.10)
 *   - Hairline-rivit kevyemmät (subtler visual seam)
 *
 * Ops styleguide:
 *   - Pelkkä hairline-rajaukset, ei zebra-rows
 *   - Suunta-sarake: kevyt emerald-tinted highlight column
 *   - Mobile: horizontal scroll
 * ============================================================================ */

/* Rinnakkais-lockup: paatos-figuuri VASEN + teksti oikea (2026-06-04). */
.v2-cmp__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
  text-align: left;
}

.v2-cmp__head-text {
  max-width: 620px;
}

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

@media (max-width: 768px) {
  .v2-cmp__head {
    flex-direction: column;
    text-align: center;
    gap: var(--space-5);
  }
}

/* ─── paatos-glyph — pieni section-opener (2026-06-04) ────────────────
 * Vaihtoehdot rivissä + yksi nostettu valittu, emerald-valintarengas alla
 * = "vertailun jälkeen valinta on selvä". Emerald varattu valintarenkaaseen
 * (sama logiikka kuin taulukon Suunta-sarake = the answer). */
.v2-cmp__glyph {
  width: 100%;
  max-width: 150px;
  flex-shrink: 0;
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .v2-cmp__glyph {
    max-width: 120px;
  }
}

.v2-cmp__glyph svg path:not([class]) {
  stroke: var(--emerald-500);
  stroke-opacity: 0.95;
  fill: var(--emerald-500);
  fill-opacity: 0.1;
}

.v2-cmp__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--space-6) * -1);
  padding-inline: var(--space-6);
  /* Markkinoinnin palaute 2026-05-26: "mobiilioptimointi etusivun taulukko".
     Lisätään scroll-hint fade-edge oikealla puolella + 'Scroll →' -merkki
     yläpuolella, jotta käyttäjä huomaa että taulukko on horisontaalisesti
     scrollattava. */
  position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
  scroll-snap-type: x proximity;
}

.v2-cmp__scroll-hint {
  display: none;
  text-align: right;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary, rgba(15, 23, 42, 0.45));
  margin: 0 var(--space-6) var(--space-2) 0;
}

@media (max-width: 1023px) {
  .v2-cmp__scroll-hint {
    display: block;
  }
  .v2-cmp__scroll-hint::after {
    content: '  →';
    color: var(--emerald-500);
  }
}

@media (min-width: 1024px) {
  .v2-cmp__scroll {
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.v2-cmp__table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  border: 0;
  font-variant-numeric: tabular-nums;
}

/* Cell base — kasvatettu padding-block jotta rivit hengittävät */
.v2-cmp__table th,
.v2-cmp__table td {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
  font-size: var(--text-sm);
  transition: background var(--transition-hover);
}

/* Feature-sarake left-aligned + kapeampi horizontal padding */
.v2-cmp__table .v2-cmp__feat,
.v2-cmp__table thead th:first-child {
  text-align: left;
}

/* Row-hover subtle highlight koko riville (ei vaikuta Suunta-sarakkeeseen) */
.v2-cmp__table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.v2-cmp__table tbody tr:hover td.v2-cmp__suunta {
  background: rgba(16, 185, 129, 0.13);
}

/* ─── Sarakeotsikot ───────────────────────────────────────────────── *
 * Kilpailijat: muted gray. SUUNTA: emerald-700 bold (vahva).
 * Vahva visuaalinen hierarchy → silmä kiinnittyy Suunta:n.
 */
.v2-cmp__table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-5);
  vertical-align: middle;
}

/* "Feature"-header piilotettu — vasen sarake alkaa heti */
.v2-cmp__table thead th:first-child {
  font-size: 0;
  padding: 0;
}

/* SUUNTA-header */
.v2-cmp__table thead .v2-cmp__suunta {
  color: var(--emerald-700, #047857);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ─── Feature-sarake ─────────────────────────────────────────────── */
.v2-cmp__feat {
  font-weight: 500;
  color: var(--text-primary);
  min-width: 260px;
  letter-spacing: -0.005em;
  padding-right: var(--space-6);
  line-height: 1.4;
}

/* Sub-text — paremmin luettava (V2 polish) */
.v2-cmp__feat-desc {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* ─── Suunta-column highlight ─────────────────────────────────────── *
 * Emerald-tinted bg + rounded corners (top thead + bottom last-row) →
 * antaa "highlighted column" -tunteen ilman raskasta ympärille-borderia.
 * Tinted bg vahvempi V3:ssa (0.08 → 0.10) jotta sarake erottuu selvemmin.
 */
.v2-cmp__suunta {
  background: rgba(16, 185, 129, 0.10);
}

.v2-cmp__table thead .v2-cmp__suunta {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.v2-cmp__table tbody tr:last-child .v2-cmp__suunta {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-color: transparent;
}

/* ─── Status indicators ─────────────────────────────────────────────── */

/* YES — emerald check, Suunta-sarakkeen pää-symboli.
   Vahvempi color + bigger size kuin V2. */
.v2-cmp__yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--emerald-600, #059669);
  font-size: 16px;
  font-weight: 700;
}

/* NO — em-dash, isompi optinen weight että matchaa tag-chip-rivin */
.v2-cmp__no {
  display: inline-block;
  color: rgba(255, 255, 255, 0.35); /* polish: dash hieman näkyvämmäksi */
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* PARTIAL TAG — NEUTRAL GRAY (V3 polish).
   Emerald varattu Suunta-sarakkeelle. Kilpailija-tagit ovat informative
   labels neutraalilla värimaailmalla → ei kilpaile visual painossa.
   Hairline border + soft gray bg + dark muted text. */
.v2-cmp__partial {
  display: inline-block;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.35;
  text-align: center;
  max-width: 100%;
}

/* ─── Mobile tarkennukset ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .v2-cmp__table th,
  .v2-cmp__table td {
    padding: var(--space-4) var(--space-3);
  }
  .v2-cmp__feat {
    min-width: 200px;
  }
  .v2-cmp__feat-desc {
    font-size: 12px;
  }
  .v2-cmp__partial {
    font-size: 11px;
    padding: 4px 9px;
  }
  .v2-cmp__no {
    font-size: 18px;
  }
}