/* ============================================================
   Dodo Engineering — slide layout primitives
   Depends on: theme.css (CSS variables)
   ============================================================ */

/* ──── Slide canvas ───────────────────────────────────────────
   A .slide is always 16:9, anchored at 1280x720 logical pixels.
   The whole canvas scales down on smaller screens so layouts
   stay pixel-true to the original PowerPoint geometry.        */

.slide {
  position: relative;
  width: var(--slide-width);
  height: var(--slide-height);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  overflow: hidden;
  padding: var(--slide-pad-top) var(--slide-pad-right)
           var(--slide-pad-bottom) var(--slide-pad-left);
}

/* When a deck wraps slides in .slide-stage, the stage handles
   responsive scaling — slides themselves keep fixed dimensions. */
.slide-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg-subtle);
}

/* ──── Typography utility classes (match the deck) ─────────── */

.t-cover-xl    { font-family: var(--font-display-light); font-size: var(--size-cover-xl); font-weight: var(--weight-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.t-cover-l     { font-family: var(--font-display-light); font-size: var(--size-cover-l);  font-weight: var(--weight-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.t-cover       { font-family: var(--font-display-light); font-size: var(--size-cover-m);  font-weight: var(--weight-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.t-section     { font-family: var(--font-display);       font-size: var(--size-section);  font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.t-h1          { font-family: var(--font-display);       font-size: var(--size-h1);       font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.t-h2          { font-family: var(--font-display);       font-size: var(--size-h2);       font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.t-h3          { font-family: var(--font-display);       font-size: var(--size-h3);       font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.t-h4          { font-family: var(--font-display);       font-size: var(--size-h4);       font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.t-h5          { font-family: var(--font-display);       font-size: var(--size-h5);       font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.t-slide-title { font-family: var(--font-display);       font-size: var(--size-subtitle); font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.t-subtitle    { font-family: var(--font-body);          font-size: var(--size-subtitle); font-weight: var(--weight-light); line-height: var(--leading-normal); color: var(--color-text-secondary); }
.t-body        { font-family: var(--font-body);          font-size: var(--size-body);     font-weight: var(--weight-light); line-height: var(--leading-normal); }
.t-body-strong { font-family: var(--font-body-strong);   font-size: var(--size-body);     font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.t-caption     { font-family: var(--font-body);          font-size: var(--size-caption);  font-weight: var(--weight-light); line-height: var(--leading-normal); color: var(--color-text-muted); }
.t-mono        { font-family: var(--font-mono);          font-size: var(--size-body);     font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.t-mono-bold   { font-family: var(--font-mono-semibold); font-size: var(--size-subtitle); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

/* Slide title bar — always anchored top-left, full width, bold 14pt
   per the source deck's TITLE_AND_BODY layout. */
.slide__title {
  font-family: var(--font-display);
  font-size: var(--size-subtitle);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-6) 0;
  line-height: var(--leading-snug);
}

/* Page number — bottom-right, muted */
.slide__page-num {
  position: absolute;
  right: calc(var(--slide-pad-right) * 1.4);
  bottom: calc(var(--slide-pad-bottom) * 0.9);
  font-family: var(--font-body);
  font-size: var(--size-caption);
  color: var(--color-text-muted);
}

/* ──── Layout patterns lifted from the source deck ────────── */

/* Title-only (cover) slide */
.slide--cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide--cover .slide__big-title {
  font-family: var(--font-display-light);
  font-size: var(--size-cover-m);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 70%;
  margin: 0;
}
.slide--cover .slide__big-subtitle {
  font-family: var(--font-body);
  font-size: var(--size-subtitle);
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 0;
}

/* Section header — bold display text, centered or left-aligned */
.slide--section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide--section .slide__section-title {
  font-family: var(--font-display);
  font-size: var(--size-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  max-width: 85%;
  margin: 0;
}
.slide--section .slide__section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Title + body — the workhorse layout */
.slide--content .slide__body { max-width: 85%; }

/* Two-column body */
.slide--two-col .slide__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  height: calc(100% - 80px);
}
.slide--two-col .slide__col {
  font-size: var(--size-body);
  line-height: var(--leading-normal);
}

/* One-column with side title */
.slide--one-col .slide__grid {
  display: grid;
  grid-template-columns: 3.12fr 1fr 6.05fr;
  gap: var(--space-4);
  height: calc(100% - 40px);
}
.slide--one-col .slide__col-title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* ──── Reusable atoms ─────────────────────────────────────── */

/* Color chip used in the source deck's palette slide */
.chip {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  vertical-align: middle;
}
.chip--bordered { box-shadow: inset 0 0 0 var(--stroke-thin) var(--color-border-on-white); }

/* Tag / pill — small label with pastel fill */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-strong);
  font-size: var(--size-caption);
  font-weight: var(--weight-regular);
  background: var(--color-pastel-mint);
  color: var(--color-text-primary);
}
.tag--purple { background: var(--color-pastel-purple); }
.tag--peach  { background: var(--color-pastel-peach);  }
.tag--mint   { background: var(--color-pastel-mint);   }
.tag--yellow { background: var(--color-pastel-yellow); }
.tag--pink   { background: var(--color-pastel-pink);   }

/* Inline code */
code, .inline-code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--color-code-bg);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-code-text);
}

/* Code block */
pre.code-block {
  font-family: var(--font-mono);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  overflow: auto;
  margin: var(--space-3) 0;
}

/* Bulleted list — deck style (12pt, light) */
ul.list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--size-body);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
}
ul.list li::marker { color: var(--color-text-muted); }

/* Numbered list */
ol.list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
}

/* Link */
a, .link {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
a:hover, .link:hover { color: var(--color-link-hover); }

/* ──── Responsive scaling of the fixed-size slide ─────────── */
@media (max-width: 1320px) {
  .slide-stage .slide {
    transform: scale(calc(100vw / 1320));
    transform-origin: top center;
  }
}