/* ============================================================================
 * Suunta.ai Landing v2 — Surfaces tabbed showcase
 * ----------------------------------------------------------------------------
 * V2.3: Korvaa nykyisen 2x2-gridin. 1 iso light-frame + 5 tab-buttonia +
 * caption alla.
 *
 * Käyttäytyminen:
 *   - Default: Home-panel aktiivinen
 *   - Klikkaus tab → swap content (crossfade opacity)
 *   - Tabit vaihtuvat VAIN klikkaamalla (auto-rotate poistettu 2026-06-02,
 *     ks. index.astro:n script-kommentti) — ei pomppivaa layout-shiftiä
 *   - prefers-reduced-motion → ei transitiotia
 * ============================================================================ */

.v2-surfaces-showcase {
  max-width: 920px;                    /* oli 1080px — pienempi mock */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                  /* oli var(--space-8) — tiiviimpi */
}

/* ─── Tab-rivi ─────────────────────────────────────────────────────────── */
.v2-surfaces-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  margin-inline: auto;
}

.v2-surfaces-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding-inline: var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.v2-surfaces-tab i {
  font-size: 12px;
  opacity: 0.8;
}

.v2-surfaces-tab:hover {
  color: rgba(255, 255, 255, 0.95);
}

.v2-surfaces-tab.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 12px -4px rgba(0, 0, 0, 0.3);
}

.v2-surfaces-tab.is-active i {
  color: var(--emerald-400);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}

/* V2.4 polish: focus-visible ring keyboard-navigaatiolle */
.v2-surfaces-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

/* Light theme support (jos showcase joskus light-sectionissa) */
section[data-theme="light"] .v2-surfaces-tabs {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
}

section[data-theme="light"] .v2-surfaces-tab {
  color: var(--text-secondary);
}

section[data-theme="light"] .v2-surfaces-tab:hover {
  color: var(--text-primary);
}

section[data-theme="light"] .v2-surfaces-tab.is-active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

/* ─── Panel-stack ──────────────────────────────────────────────────────── *
 * V3 polish: aiempi `display: grid` -pattern pakotti kaikki paneelit samaan
 * grid-cellisen — korkeus määräytyi pisimmän paneelin mukaan → "iso rako"
 * lyhyemmillä paneeleilla (Chat, Home).
 *
 * Uusi pattern: position-based stack. Aktiivinen paneeli on normal-flow:ssa
 * (määrää korkeuden), piilotetut absolute-positioitu päälle. Showcase
 * mukautuu aktiivisen paneelin korkeuteen.
 */
.v2-surfaces-panels {
  position: relative;
  /* Markkinoinnin palaute 2026-05-26: "kuvat on erikokoisia".
     Pakotetaan stabiili vähimmäiskorkeus jotta tab-vaihdot eivät
     aiheuta layout-shiftiä (paneelit ovat HTML-mockejä, eivät kuvia,
     joten aspect-ratio ei sovi suoraan). Mahdollistaa auto-rotaation
     paluun ilman jumppaavaa layoutia. */
  min-height: clamp(520px, 60vh, 640px);
}

@media (min-width: 1024px) {
  .v2-surfaces-panels {
    min-height: 640px;
  }
}

/* Markkinoinnin palaute 2026-05-26: "kuvan alla oleva otsikko ja
   teksti tuntuu turhalta ylipäänsä tässä kohdassa". Piilotetaan
   caption-osio kokonaan — paneelin oma sisältö viestii featuren.
   Tämä sääntö tulee aikaisemmin, mutta alla on myöhempi
   .v2-surfaces-caption display:flex -sääntö → tarvitaan !important. */
.v2-surfaces-caption {
  display: none !important;
}

.v2-surfaces-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 320ms;
  pointer-events: none;
}

/* Aktiivinen paneeli — normal-flow → korkeus periytyy contentista */
.v2-surfaces-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
  pointer-events: auto;
}

/* ─── Caption — alle panelin (premium polish) ──────────────────────────
 * Aiempi caption oli "irrallinen" ja näytti bugiselta. Polish:
 *   - Lisätään ylä-margin jotta erotetaan mockista visuaalisesti
 *   - Eyebrow-label muotoiltu hairline-pill:iksi (kuten hero-proof)
 *   - Title isompi + paino 500 → tasapainossa mockin korkeuden kanssa
 *   - Desc pidempi line-height + max-width 540 jotta luettavaa
 *   - Reveal-animaatio kun panel aktivoituu
 * ──────────────────────────────────────────────────────────────────── */
.v2-surfaces-caption {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-top: var(--space-5);             /* oli var(--space-8) — tiiviimpi */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Eyebrow-pill — matchaa hero proof-pill stylellä, mutta per-surface accent */
.v2-surfaces-caption-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  transition: border-color var(--transition-hover), background var(--transition-hover);
}

.v2-surfaces-caption-label i {
  font-size: 0.875em;
  /* Filter sets per surface via JS (--caption-accent custom property) */
  color: var(--caption-accent, var(--emerald-400));
  filter: drop-shadow(0 0 4px var(--caption-accent, var(--emerald-400)));
}

/* Light theme caption-label */
section[data-theme="light"] .v2-surfaces-caption-label {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

.v2-surfaces-caption-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  margin: 0;
  max-width: 540px;
}

.v2-surfaces-caption-desc {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  margin: 0;
  max-width: 520px;
}

/* V3 polish (käyttäjäpäätös): ei per-panel accent-värejä, kaikki emerald. */
.v2-surfaces-panel { --caption-accent: #34d399; }

/* ─── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v2-surfaces-panel,
  .v2-surfaces-tab {
    transition: none !important;
  }
}

/* ─── Mobile tab-row scroll ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .v2-surfaces-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    border-radius: var(--radius-lg);
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .v2-surfaces-tabs::-webkit-scrollbar { display: none; }
  .v2-surfaces-tab {
    flex-shrink: 0;
    height: 32px;
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
  }
}