/* ============================================================================
   deck.css — deck-engine specifics layered on top of tokens.css + layout.css.
   Loading veil, the #deck mount, hero legibility scrim, multi-step stacking,
   and a few content primitives the reference slides rely on.
   ============================================================================ */

/* ---- Loading veil — MOOD-brand loader on the grey plane ------------------- */
/* The veil IS the grey plane (#EBEBEB) so the load reads as the page itself
   settling in; the dark MOOD mark breathes + a slim terracotta bar sweeps so it's
   clearly loading. On boot main.js slides the whole veil UP (the grey "rises up"
   to reveal the deck) instead of a flat fade. */
.loading-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.6vh, 1.75rem);
  background: var(--surface-canvas);
  color: var(--mood-ink);
  will-change: transform;
}
/* loader lockup: AI Marketplace ✕ jholec.com */
.loading-veil__lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  animation: veil-breath 1.8s var(--ease-inout) infinite;
}
.loading-veil__x {
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  font-weight: 300;
  color: var(--text-muted);
}
.loading-veil__jholec {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  letter-spacing: -0.02em;
  color: var(--mood-ink);
}
/* AI Marketplace wordmark in the loader — same cap-height as jholec.com */
.loading-veil__brand { font-size: clamp(0.95rem, 1.5vw, 1.2rem); }
/* Finshape logo in the loader (navy on the light veil). */
.loading-veil__logo { height: clamp(22px, 3.2vh, 32px); width: auto; display: block; }

/* slim indeterminate progress bar — coral segment sweeps across a hairline track */
.loading-veil__bar {
  position: relative;
  width: clamp(140px, 18vw, 188px);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--mood-ink-12);   /* navy-tinted track (DS) */
  overflow: hidden;
}
.loading-veil__bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 42%;
  border-radius: var(--radius-pill);
  background: var(--mood-terracotta);
  animation: veil-sweep 1.2s var(--ease-inout) infinite;
}
.loading-veil__label {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
@keyframes veil-breath { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes veil-sweep  { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
  .loading-veil__lockup { animation: none; opacity: 0.9; }
  .loading-veil__bar::after { animation-duration: 2.2s; }
}

/* ---- Deck mount — the layer slides render into ---------------------------- */
.deck-mount {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  pointer-events: none;     /* the active slide re-enables via .is-active */
}
/* stacked slides during a cross-fade both occupy the mount */
.deck-mount .slide { pointer-events: none; }
.deck-mount .slide.is-active { pointer-events: auto; }

/* DEAD CODE REMOVED (findings #11 / #16):
   '.stage--hero .slide__content' could NEVER match for two reasons:
   (1) stage3d.js sets class 'stage-hero' (single dash), not 'stage--hero' (BEM double dash).
   (2) Even with the correct class name, .slide__content is a descendant of #deck,
       NOT of .stage — the selector can never traverse the DOM tree to reach it.
   The intended radial-gradient legibility scrim on dark hero slides is therefore
   absent from day one. Since all slides use mode:'split' (not hero), and the title /
   close slides use .section--dark cards, we add the scrim directly on dark cards below. */

/* Legibility scrim for dark-card brand moments (01-title, 15-close): a subtle
   inner radial gradient at the card's bottom half softens the ink background. */
.slide.section--dark .slide__content {
  isolation: isolate;
}

/* ---- Meta / sub lines used on hero + closings ----------------------------- */
.slide__sub {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-secondary);
}
.slide__meta {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Multi-step slide: step blocks share a grid cell, fade between -------- */
.steps {
  position: relative;
  display: grid;
}
.steps > .step {
  grid-area: 1 / 1;          /* stack every step in the same cell */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---- Step counter chip (journey walkthrough) ------------------------------ */
.step-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.step-meter .cur { color: var(--accent-text); font-weight: var(--fw-semibold); }

/* ---- Card grid (ecosystem / lists of cards) ------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* In the narrow left panel auto-fit collapses to 1 tall column. Use the explicit
   2-up grid when two cards should sit side by side (jholec dense reflow §B.6). */
.card-grid--2 { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

/* ---- Stacked-list (ecosystem layers, research methods) -------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.stack__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: var(--border-hair) solid var(--rule);
}
.stack__row:last-child { border-bottom: var(--border-hair) solid var(--rule); }
.stack__key {
  flex: 0 0 auto;
  min-width: 8.5rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);   /* WCAG: small label → AA terracotta/peach */
}
.stack__val { font-size: var(--fs-body); color: var(--text-secondary); }

/* ---- BENTO grid — unequal tiles in one grid (Apple / jholec) --------------- */
/* STEP-2 (§A). 6-col base → easy 2/3/4/6 spans. Use on card/overview slides
   (01b primarily; lighter on 04/06/10/13/14). Put the whole .bento inside ONE
   .rise wrapper so the stagger stays ≤ a few children. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: var(--space-md);            /* 24px — víc dechu mezi buňkami (content-spacing 16.6.) */
  width: 100%;
}
.bento__cell {
  display: flex;
  flex-direction: column;
  /* Figma reference rhythm: explicit margins (icon→title large, title→body
     tight) read truer than a single flex gap, so the flex gap is 0. */
  gap: 0;
  grid-column: span 3;             /* default = half row (2-up) */
  /* generous jholec/Figma padding: 24px narrow → 32px wide */
  padding: clamp(var(--space-md), 1.1rem + 1vw, var(--space-lg));
  /* jholec card: light-gray fill, rounded 16px, NO border, NO shadow. */
  background: var(--surface-canvas-deep);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  min-height: 0;
}
/* Dense bento (5+ tiles) — tighter rhythm so the grid fits one slide, no scroll. */
.bento--dense { gap: var(--space-sm); }
.bento--dense .bento__cell { padding: var(--space-sm) var(--space-md); }
.bento--dense .bento__icon { margin-bottom: var(--space-xs); }
.bento--dense .bento__body { margin-top: var(--space-2xs); }

.bento__cell--2 { grid-column: span 2; }   /* third — small fact tile */
.bento__cell--3 { grid-column: span 3; }   /* half */
.bento__cell--4 { grid-column: span 4; }   /* two thirds — medium/accent */
.bento__cell--6 { grid-column: span 6; }   /* full width — hero tile */
.bento__cell--tall { grid-row: span 2; }

/* Icon LEADS the card in ink (Figma), not the coral accent — coral is reserved
   for the single accent tile. Large gap down to the title. */
.bento__icon  { color: var(--text); flex: 0 0 auto;
                margin-bottom: clamp(var(--space-sm), 0.5rem + 0.8vw, var(--space-md)); }
/* prominent bold title (the Figma "Ruční psaní" line) */
.bento__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold);
                color: var(--text); line-height: var(--lh-snug);
                letter-spacing: -0.01em; }
/* tight gap title→body */
.bento__body  { font-size: var(--fs-small); color: var(--text-muted);
                line-height: 1.5; margin-top: var(--space-xs); }
/* optional eyebrow above the title (small, uppercase) */
.bento__kicker{ font-size: var(--fs-nano); font-weight: var(--fw-semibold);
                letter-spacing: var(--ls-label); text-transform: uppercase;
                color: var(--text-muted); margin-bottom: var(--space-2xs); }
/* a card with no icon: kicker/title leads, so no stray icon margin applies */
.bento__cell > .bento__kicker:first-child,
.bento__cell > .bento__title:first-child { margin-top: 0; }

/* accent hero tile (1 per bento — carries the single brand accent) */
.bento__cell--accent {
  background: var(--accent-fill);
  border-color: transparent;
}
.bento__cell--accent .bento__title,
.bento__cell--accent .bento__body,
.bento__cell--accent .bento__kicker,
.bento__cell--accent .bento__icon { color: var(--accent-fill-on); }

/* (WHITE-THEME inverze REVERTNUTA 17.6. na přání — desktop zpět na bílou kartu se
   šedými prvky, originál. Mobil drží transparent panel + bílé karty viz layout.css.) */

/* DARK panel: tiles one step lighter than the panel (bg-sunken) */
.section--dark .bento__cell { background: var(--bg-sunken); border-color: var(--mood-cream-12); }
/* on a DARK panel the accent tile uses deep terracotta with cream text (AA) */
.section--dark .bento__cell--accent { background: var(--accent-fill); border-color: transparent; }

/* Narrow panel / mobile: collapse to 2 cols (legibility > matrix) */
@media (max-width: 900px), (orientation: portrait) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
  /* mobil: stáhnout cell padding + vnitřní gap zpět (desktop 24/16 by na úzkém
     viewportu způsobil truncation headerů typu „MANAGE CLO…") */
  .bento__cell { padding: var(--space-sm); gap: var(--space-xs); }
  .bento__cell,
  .bento__cell--2, .bento__cell--3 { grid-column: span 1; }
  .bento__cell--4, .bento__cell--6 { grid-column: span 2; }
  .bento__cell--tall { grid-row: auto; }
}

/* small inline label */
.kicker {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- TODO placeholder (stub slides) --------------------------------------- */
.todo {
  align-self: start;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-small);
  color: var(--text-muted);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
}

/* ---- Collab lockup (title slide): MOOD Yoga ✕ MUNI ✕ jholec.com ----------- */
.collab {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.collab__logo { width: auto; display: block; height: 22px; }
.collab__logo--muni { height: 14px; }          /* MUNI wordmark optically balanced */
.collab__x {
  font-size: var(--fs-micro);
  color: var(--mood-sand);
  opacity: 0.65;
}
.collab__site {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--mood-cream);
}