/* ----------------------------------------------------------------------
   Shared slide styles for both light (simple) and dark (moon) themes.
   ---------------------------------------------------------------------- */

/* ---------- Stop the moon theme from upper-casing headings ---------- */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6,
.reveal .title,
.reveal .subtitle {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---------- Image placeholder for AI-generated images ---------- */
.placeholder {
  border: 3px dashed currentColor;
  opacity: 0.55;
  padding: 1.2rem 1.4rem;
  margin: 0.6rem auto;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.55em;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.placeholder strong {
  display: block;
  font-family: sans-serif;
  font-size: 1.5em;
  letter-spacing: 0.18em;
  margin-bottom: 0.6em;
  opacity: 0.85;
}

.placeholder.tall   { min-height: 360px; }
.placeholder.medium { min-height: 240px; }
.placeholder.short  { min-height: 140px; }

/* ---------- Grid-based layouts ---------- */
.two-up,
.three-up,
.two-col,
.three-col {
  display: grid;
  gap: 1.2rem;
  align-items: start;
  margin: 0.4rem 0;
}

.two-up,
.two-col   { grid-template-columns: 1fr 1fr; }

.three-up,
.three-col { grid-template-columns: 1fr 1fr 1fr; }

/* Inner column wrapper for grid items (works around Pandoc not
   producing a div from `::: {}`). All column-children should have
   the .col class. */
.two-up > .col,
.three-up > .col,
.two-col > .col,
.three-col > .col {
  min-width: 0;       /* let flex/grid shrink */
  padding: 0;
}

.two-up > .col,
.three-up > .col {
  text-align: center;
}

.two-up img,
.three-up img,
.two-up .placeholder,
.three-up .placeholder {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Modifier: let a grid image fill (most of) the slide height instead of
   being capped at 380px. Slide is 800px tall; reserve ~150px for title
   and vertical margins. */
.two-up img.tall,
.three-up img.tall {
  max-height: 640px;
}

.three-col {
  font-size: 0.85em;
}

/* Modifier: vertical divider between the two columns of a .two-col */
.two-col.divided > .col:first-child {
  border-right: 2px solid rgba(127, 127, 127, 0.35);
  padding-right: 1.2rem;
}

/* ---------- Height-aligned image row: both images fill the same
   height; widths follow aspect ratio (so a portrait + landscape pair
   can share a slide without distorting either). ---------- */
.row-h {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
  height: 640px;
  margin: 0.4rem 0;
}

.row-h > p { margin: 0; height: 100%; }

.row-h img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- "Big-left + two-stacked-right" image layout
   Markup:
     ::: {.split-2x1}
       ::: {.col-big}  ![](big.png)  :::
       ::: {.col}      ![](top.png)  :::
       ::: {.col}      ![](bot.png)  :::
     :::
   ---------- */
.split-2x1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
  height: 500px;
  margin: 0.4rem 0;
}

.split-2x1 > .col-big {
  grid-row: 1 / span 2;
}

.split-2x1 > .col,
.split-2x1 > .col-big {
  min-height: 0;     /* allow grid item to shrink below content size */
  min-width: 0;
  overflow: hidden;
}

/* Pandoc wraps each ![](...) in a <p>; flatten it so height: 100% cascades. */
.split-2x1 > .col > p,
.split-2x1 > .col-big > p {
  margin: 0;
  height: 100%;
}

.split-2x1 img,
.split-2x1 .placeholder {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.three-col h3,
.two-col h3 {
  margin-top: 0;
  font-size: 1.1em;
}

/* ---------- Column-title pseudo-heading (replaces ### inside columns,
   which would otherwise be auto-wrapped in a <section> by Pandoc and
   pollute reveal.js's slide structure). ---------- */
.col-title {
  display: block;
  font-size: 1.15em;
  font-weight: 700;
  margin: 0 0 0.5em 0;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.three-col .col-title {
  font-size: 1.05em;
}

/* ---------- Pull-quote slide ---------- */
.pull-quote {
  font-style: italic;
  font-size: 1.3em;
  text-align: center;
  padding: 1.0rem 2rem;
  line-height: 1.4;
  max-width: 80%;
  margin: 1rem auto;
}

.pull-quote .attrib {
  font-style: normal;
  font-size: 0.55em;
  display: block;
  margin-top: 1em;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

/* ---------- Big single-line fact ---------- */
.bigfact {
  font-size: 1.4em;
  text-align: center;
  font-weight: 600;
  padding: 0.6rem 2rem;
  line-height: 1.35;
  max-width: 90%;
  margin: 0.6rem auto;
}

/* Chained: <div class="bigfact small"> — the whole thing is small */
.bigfact.small {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.9;
  padding: 0.3rem 1.5rem;
}

/* Descendant: <span class="small"> inside .bigfact — caption-like */
.bigfact .small,
.bigfact span.small {
  display: block;
  font-size: 0.55em;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 0.6em;
}

/* ---------- Caption text ---------- */
.caption {
  font-size: 0.7em;
  opacity: 0.8;
  text-align: center;
  font-style: italic;
  margin: 0.3rem auto 0.6rem;
  max-width: 85%;
}

/* ---------- Compact tables on slides ---------- */
.reveal table {
  font-size: 0.7em;
  margin: 0.4rem auto;
}

/* ---------- Tighter callouts on slides ---------- */
.reveal .callout {
  font-size: 0.85em;
  margin: 0.5rem 0;
}

.reveal .callout .callout-title {
  font-size: 1em;
}

/* ---------- Footnote-like attribution under a figure ---------- */
.attribution {
  font-size: 0.55em;
  opacity: 0.7;
  text-align: center;
  margin-top: 0.3em;
  font-style: italic;
}

/* ---------- Hint that a slide is "title-only" / spacious ---------- */
.title-only h2 {
  text-align: center;
  font-size: 2em;
  margin-top: 1.5rem;
}

/* ---------- Section-divider styling for # headings ---------- */
.reveal .slide-background.section-title,
.reveal section.section-title {
  text-align: center;
}

.reveal h1.section-number {
  font-size: 0.7em;
  opacity: 0.55;
  letter-spacing: 0.2em;
  margin-bottom: 0.5em;
  display: block;
}