/* =========================================
   Presentations — Slide Canvas Tokens & Utilities
   =========================================

   Presentations are a fixed 1920×1080 canvas — NOT responsive app UI.
   All tokens here use the --slide-* namespace. This file defers to
   color, typography, layout, and radii tokens from their own domains;
   it does not redefine them.

   Consumers:
     <link rel="stylesheet" href=".../colors.css">
     <link rel="stylesheet" href=".../typography.css">
     <link rel="stylesheet" href=".../layout.css">
     <link rel="stylesheet" href=".../presentations.css">

   See presentations-guide.md for the full specification.
*/

:root {
  /* ---- Canvas ---- */
  --slide-width: 1920px;
  --slide-height: 1080px;
  --slide-aspect: 16 / 9;

  /* ---- Safe area (maps to --space-* where possible) ---- */
  --slide-pad-x: var(--space-13);       /* 128px */
  --slide-pad-y: var(--space-12);       /* 96px  */
  --slide-pad-bleed: var(--space-10);   /* 64px  — section dividers only */

  /* ---- Vertical rhythm ---- */
  --slide-gutter: var(--space-9);       /* 48px  — column gap */
  --slide-gap-stack: var(--space-6);    /* 24px  — default */
  --slide-gap-tight: var(--space-3);    /* 12px  */
  --slide-gap-loose: var(--space-9);    /* 48px  */

  /* ---- Grid ratios ---- */
  --slide-split-ratio-even: 1fr 1fr;
  --slide-split-ratio-weighted: 3fr 2fr;   /* 60/40 */
  --slide-three-col: 1fr 1fr 1fr;
  --slide-chart-split: 7fr 5fr;            /* chart left (wider) / text right */
}

/* =========================================
   Slide Base
   ========================================= */

.slide {
  position: relative;
  width: var(--slide-width);
  height: var(--slide-height);
  padding: var(--slide-pad-y) var(--slide-pad-x);
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.slide--bleed {
  padding: var(--slide-pad-bleed);
}

/* Reset browser default margin on structural elements inside slides so
   column grids align flush to the safe-area padding. */
.slide figure,
.slide p,
.slide ul,
.slide ol {
  margin: 0;
}

/* =========================================
   Slide-scale Type
   -----------------------------------------
   Typography-guide.md tops out at 28px — too small for 1080p. These
   classes reuse the font families and weight discipline (400/500/600/700)
   but at slide-appropriate sizes. Use ONLY these classes inside a slide.
   ========================================= */

.slide-title {
  font-family: var(--font-sans);
  font-size: 96px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.slide-heading {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.slide-subhead {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--fg-secondary);
  margin: 0;
}

.slide-body {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--fg-primary);
  margin: 0;
}

.slide-caption {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--fg-secondary);
  margin: 0;
}

.slide-label {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin: 0;
}

.slide-meta {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--fg-tertiary);
  margin: 0;
}

/* Body prose helpers: keep lists tidy and on the grid */
.slide-body ul,
.slide-body ol {
  margin: 0;
  padding-left: 1.2em;
}

.slide-body li + li {
  margin-top: var(--slide-gap-tight);
}

/* =========================================
   Layout Utilities
   ========================================= */

.slide-stack {
  display: flex;
  flex-direction: column;
  gap: var(--slide-gap-stack);
  min-height: 0;
}

.slide-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--slide-gutter);
}

.slide-three-col {
  display: grid;
  grid-template-columns: var(--slide-three-col);
  gap: var(--slide-gap-stack);
  flex: 1;
  min-height: 0;
}

.slide-chart {
  display: grid;
  grid-template-columns: var(--slide-chart-split);
  gap: var(--slide-gutter);
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* =========================================
   Media
   ========================================= */

.slide-media {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-1);
}

.slide-media > img,
.slide-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chart variant: no border/radius so the chart reads edge-to-edge */
.slide-media--chart {
  border: none;
  border-radius: 0;
  background: transparent;
}

.slide-media--chart > img {
  object-fit: contain;
}

.slide-caption-block {
  color: var(--fg-tertiary);
}

/* =========================================
   Template Variants
   ========================================= */

/* ---- Cover ---- */
.slide--cover {
  justify-content: center;
}

.slide--cover .slide-meta {
  position: absolute;
  left: var(--slide-pad-x);
  bottom: var(--slide-pad-y);
}

/* ---- Section divider ---- */
.slide--section {
  justify-content: flex-end;
  background: var(--bg-surface-1);
}

.slide--section .slide-label {
  color: var(--accent-default);
}

/* ---- Content ---- */
.slide--content {
  gap: var(--slide-gap-stack);
}

/* ---- Split: the section itself is the two-column grid ---- */
.slide--split {
  display: grid;
  grid-template-columns: var(--slide-split-ratio-even);
  gap: var(--slide-gutter);
  align-items: stretch;
}

.slide--split.slide--split-weighted {
  grid-template-columns: var(--slide-split-ratio-weighted);
}

/* ---- Three-column and chart: section is flex-column (heading + inner grid) ---- */
.slide--three,
.slide--chart {
  gap: var(--slide-gap-stack);
}

.slide--three > .slide-heading,
.slide--chart > .slide-heading {
  flex: 0 0 auto;
}

/* =========================================
   No-JS Fallback
   -----------------------------------------
   When <deck-stage> cannot register as a custom element (JS disabled,
   restrictive preview sandboxes, macOS Quick Look, IDE file previewers),
   :not(:defined) matches the light-DOM element and these rules apply.
   Once the custom element upgrades, :defined starts matching and these
   rules stop — the shadow-DOM rendering takes over. Visually matches
   the shadow-DOM scrollable default so the deck looks the same on both
   sides of the upgrade.
   ========================================= */

deck-stage:not(:defined) {
  display: block;
  width: 100%;
  container-type: inline-size;
}

deck-stage:not(:defined) > .slide {
  display: flex;
  zoom: calc(100cqw / 1920);
  margin: 0 0 16px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}