/* slides-layout.css — Layout vocabulary for slides-builder (spec 03).
 *
 * Maps data-* attributes on layout containers to the corresponding flex/grid CSS.
 * Shipped offline alongside reveal.js (spec 12 — zero external URLs).
 *
 * ATTRIBUTE CONTRACT (spec 03 §"The data-* contract"):
 *
 *   Container attributes on elements with data-lay:
 *     data-lay      stack | row | grid | layers
 *     data-align    cross-axis:  start | center | end | stretch
 *     data-justify  main-axis:   start | center | end | between | around
 *
 *   Numeric / computed attributes (handled by slides-layout-init.js companion):
 *     data-gap   logical px → gap
 *     data-pad   logical px → padding
 *     data-cols  integer or template → grid-template-columns
 *     data-rows  integer or template → grid-template-rows
 *
 *   Child attributes (handled by slides-layout-init.js):
 *     data-grow  flex-grow factor
 *     data-basis flex-basis (logical px or %)
 *     data-span  grid-column / grid-row span
 *
 *   Free-element attributes (data-free on the element):
 *     data-x data-y data-w data-h data-rot  (logical units, set by init.js)
 *
 * WHY TWO FILES:
 *   CSS attr() only supports string values in the `content` property in all
 *   browsers. Numeric attributes (gap, pad, coords) require a companion script
 *   (slides-layout-init.js) to write them as inline styles. Enum attributes are
 *   handled here via attribute selectors — no script needed.
 */

/* ── Slide canvas: full 1920x1080 containing block at origin (spec 05) ─────── */
/* With reveal configured center:false + margin:0 (Phase 15), each slide section
 * is the full logical canvas anchored at the top-left. Reveal already gives
 * `.reveal .slides > section` position:absolute + width:100%; we pin it to the
 * origin and force full height so it is a positioned containing block spanning
 * the whole 1920x1080 space. Absolutely-positioned [data-free] children then
 * resolve against true canvas coords: data-x=0,data-y=0 → canvas top-left, and
 * coordinates are an identity match with the editor's free-transform overlay.
 * The structured primitives below are unaffected (they are normal-flow children
 * of the section); reveal's own section transition/stack rules still apply. */
.reveal .slides > section {
  top: 0;
  left: 0;
  height: 100%;
  box-sizing: border-box;
}

/* A single top-level structured container fills the canvas so its data-justify /
 * data-align take effect over the full height (e.g. data-justify="center" gives
 * the vertical centering reveal's center:true used to provide — now expressed in
 * the layout vocabulary, not reveal config). */
.reveal .slides > section > [data-lay] {
  min-height: 100%;
}

/* ── Containers: the four structured primitives ───────────────────────────── */

/* Stack — vertical flex column. Default for slide body, title-over-body. */
[data-lay="stack"] {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Row — horizontal flex row. Use for two-column text|image layouts. */
[data-lay="row"] {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

/* Grid — CSS grid. Use for card walls, logo/image grids. */
[data-lay="grid"] {
  display: grid;
  box-sizing: border-box;
}

/* Layers — z-stack. All direct children overlay each other in the same cell.
   Equivalent to reveal.js r-stack; use for background + overlaid text and
   auto-animate / fragment layer sequences. */
[data-lay="layers"] {
  display: grid;
  grid-template-areas: "layer";
  box-sizing: border-box;
}
[data-lay="layers"] > * {
  /* Every direct child occupies the same named grid area, stacking in z-order. */
  grid-area: layer;
}

/* ── Cross-axis alignment (data-align, stack + row) ──────────────────────── */
/* "center horizontally" → data-align="center" (alignment-as-intent, spec 03). */

[data-lay][data-align="start"]   { align-items: flex-start; }
[data-lay][data-align="center"]  { align-items: center; }
[data-lay][data-align="end"]     { align-items: flex-end; }
[data-lay][data-align="stretch"] { align-items: stretch; }

/* ── Main-axis justification (data-justify, stack + row) ─────────────────── */
/* "space between" → data-justify="between" (alignment-as-intent, spec 03). */

[data-lay][data-justify="start"]   { justify-content: flex-start; }
[data-lay][data-justify="center"]  { justify-content: center; }
[data-lay][data-justify="end"]     { justify-content: flex-end; }
[data-lay][data-justify="between"] { justify-content: space-between; }
[data-lay][data-justify="around"]  { justify-content: space-around; }

/* ── Free element — absolute-positioning escape hatch ────────────────────── */
/* Position and size (data-x/y/w/h/rot in logical coords) are applied by
   slides-layout-init.js because CSS attr() cannot set numeric property values
   portably. Only the base rule is needed here. */

[data-free] {
  position: absolute;
  /* Box-sizing so data-w/data-h are inclusive of padding/border. */
  box-sizing: border-box;
}