/**
 * @file
 * reveal-layouts.css — column layouts for reveal.js slides.
 *
 * Pairs with js/presentation-layouts.js, which wraps a slide's content in
 * `.layout-grid.layout-grid--{name}` > `.layout-col` * N once it finds a
 * `data-layout="{name}"` attribute (set via reveal.js's own
 * `<!-- .slide: data-layout="..." -->` markdown syntax) and one or more
 * column markers - authors write `::: column`, normalized server-side
 * (zaira_presentation.slide_directive_transformer) into `***`, which the
 * markdown plugin renders as a bare `<hr>`. Named layouts are documented
 * for content authors in content/presentations/layouts.md; each name
 * below must match a layout documented there. A slide with no
 * `data-layout`, or one with no column markers, is left as reveal.js's
 * plain single-column flow — no grid wrapper is added, so nothing here
 * applies to it.
 */

.reveal .layout-grid {
  display: grid;
  gap: 1.75em;
  margin-top: 0.4em;
  align-items: start;
  width: 100%;
}

.reveal .layout-col > *:first-child {
  margin-top: 0;
}
.reveal .layout-col > *:last-child {
  margin-bottom: 0;
}

/* Two equal columns — the most common split: point/counterpoint, before/
   after, description + example. */
.reveal .layout-grid--two-column {
  grid-template-columns: 1fr 1fr;
}

/* Three equal columns — short parallel items (three pillars, three phases). */
.reveal .layout-grid--three-column {
  grid-template-columns: 1fr 1fr 1fr;
}
.reveal .layout-grid--three-column .layout-col {
  font-size: 0.9em;
}

/* Narrow sidebar (labels, a stat, a nav list) beside a wider main column. */
.reveal .layout-grid--sidebar-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.reveal .layout-grid--sidebar-right {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
/* Vertical rule between columns, skipping the last — reads as a divider
   rather than a border around each box. Centered in the gap (offset by
   exactly half of the grid's own 1.75em gap), so it sits equidistant
   from both columns rather than flush against either one's edge — same
   rule for every layout, sidebars included, so the divider always means
   the same thing regardless of how the columns are proportioned. */
.reveal .layout-grid--two-column .layout-col:not(:last-child),
.reveal .layout-grid--three-column .layout-col:not(:last-child),
.reveal .layout-grid--sidebar-left .layout-col:not(:last-child),
.reveal .layout-grid--sidebar-right .layout-col:not(:last-child) {
  position: relative;
}
.reveal .layout-grid--two-column .layout-col:not(:last-child)::after,
.reveal .layout-grid--three-column .layout-col:not(:last-child)::after,
.reveal .layout-grid--sidebar-left .layout-col:not(:last-child)::after,
.reveal .layout-grid--sidebar-right .layout-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  right: -0.875em;
  width: 1px;
  background: var(--r-border, rgba(192, 154, 82, 0.25));
}

@media (max-width: 900px) {
  .reveal .layout-grid--two-column,
  .reveal .layout-grid--three-column,
  .reveal .layout-grid--sidebar-left,
  .reveal .layout-grid--sidebar-right {
    grid-template-columns: 1fr;
  }
  .reveal .layout-grid--two-column .layout-col:not(:last-child)::after,
  .reveal .layout-grid--three-column .layout-col:not(:last-child)::after,
  .reveal .layout-grid--sidebar-left .layout-col:not(:last-child)::after,
  .reveal .layout-grid--sidebar-right .layout-col:not(:last-child)::after {
    display: none;
  }
}