/* ============================================================
   CORE ENGINE -- engine-base.css   (brand-AGNOSTIC)
   Extracted from anthros-design-system-V1/_runtime/anthros-base.css
   via CORE/tooling/scripts/build-anthros-seam.sh (Phase 1 seam spike).

   Contains ONLY rules that consume token NAMES generically and never
   define a token value or reference a brand-specific class:
     ? Reset ? image-placeholder model ? .section-inner
     ? .text-outlined utilities ? .lyt-* grid primitives
     ? responsive grid-collapse mechanism
   The named semantic tokens this file consumes are the ENGINE?INSTANCE
   contract -- see CORE/engine/TOKEN-CONTRACT.md. Every instance must
   supply values for them (Anthros does so in instances/anthros/brand-base.css).
   ============================================================ */


/* ===== 3. Reset ===== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-semantic-surface-canvas-light);
  color: var(--color-semantic-text-on-light-default);
  font: var(--type-semantic-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* Form inputs -- system default */
input, select, textarea { border-radius: var(--radius-input); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0 0 var(--space-4); color: var(--color-semantic-text-on-light-emphasis); font-weight: inherit; }
/* Anthros section headlines are uppercase by convention. This rule covers
   any agent-generated body section that doesn't set text-transform itself.
   Scoped to <main> so LOCKED chrome (footer headings, etc.) is unaffected.
   Override per-class to text-transform: none when sentence case is intentional
   (e.g. long-form article subheads, card body titles). */
main h2, main h3 { text-transform: uppercase; }

/* Anthros body sections share a canonical vertical rhythm: padding-block
   of --space-10 (128px) top and bottom. This rule applies to every <section>
   inside <main> so the agent doesn't need to remember it per-section. The
   LOCKED hero and bottom CTA sit OUTSIDE <main> and are unaffected.
   Override per-class only when a section genuinely needs different vertical
   breathing room (e.g. compressed sub-sections inside a larger layout). */
main > section { padding-block: var(--space-semantic-section-y-dominant); }
ul, ol { padding: 0; margin: 0; list-style: none; }
a { color: inherit; }

/* ===== 4. Image placeholder (MASTER_PROMPT S6.5) ===== */

.image-placeholder {
  background: var(--asset-placeholder-tile) repeat;  /* instance-supplied -- LAW 5 (no brand asset path in engine) */
  background-size: 320px auto;
  display: flex;
  align-items: end;
  justify-content: start;
  position: relative;
  width: 100%;
  min-height: 240px;
}
.image-placeholder[data-aspect-ratio="16:9"] { aspect-ratio: 16 / 9; }
.image-placeholder[data-aspect-ratio="3:2"]  { aspect-ratio: 3 / 2; }
.image-placeholder[data-aspect-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.image-placeholder[data-aspect-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.image-placeholder[data-aspect-ratio="9:16"] { aspect-ratio: 9 / 16; }
/* Slot metadata lives in the data-* attributes on the element itself --
   gate 14 audit reads them from the DOM (DevTools / preview_snapshot).
   Keep the visual placeholder clean: just the placeholder.png tile,
   no overlay label. */

/* Full-bleed variant used inside section backgrounds */
.image-placeholder--full-bleed {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

/* ===== 4b. Layout utility -- section-inner wrapper =====
   Every body section's content lives inside <div class="section-inner">.
   The outer <section> is always full-bleed (no max-width, no margin).
   This div is the single source of truth for the 1400px content frame.
   Usage: <section class="[component]"><div class="section-inner">...</div></section>
*/
.section-inner {
  max-width: var(--layout-content-max-width); /* 1400px */
  margin-inline: auto;
  width: 100%;
}

/* ============================================================
   8. Global text utilities
   ============================================================ */

/* Outlined headline -- hollow text with stroke.
   NEVER use currentColor for the stroke: `color: transparent` makes
   currentColor resolve to transparent and the outline disappears.
   Use the explicit semantic token for the surface context. */
.text-outlined {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-semantic-text-primary);
}
.text-outlined--on-dark {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-semantic-text-on-dark-primary);
}

/* ============================================================
   9. Layout utilities -- responsive grid primitives (.lyt-*)

   CANONICAL BREAKPOINTS -- single source of truth for the system.
   CSS custom properties cannot be used inside @media at-rules, so these
   are documented here as constants. All component @media rules MUST use
   these exact values -- never invent new breakpoints.

     Lap   : 900px -- structural collapse. Multi-column grids -> 1 column.
     Mobile: 600px -- fine mobile adjustments. 4-col -> 1-col, tight spacing.

   USAGE
   Add .lyt-* to any element that needs a responsive multi-column layout:

     <div class="lyt-2col">               1fr 1fr  -- symmetric split
     <div class="lyt-2col-wide-left">     55fr 45fr -- content left, media right
     <div class="lyt-2col-wide-right">    45fr 55fr -- media left, content right
     <div class="lyt-3col">               repeat(3, 1fr)
     <div class="lyt-4col">               repeat(4, 1fr) -> 2-col at 900 -> 1-col at 600
     <div class="lyt-grid-auto">          auto-fill, min var(--lyt-min, 280px) per col

   GAP OVERRIDE
   Each utility ships with a sensible default gap from the spacing scale.
   Override per-section with a direct gap declaration in the section CSS,
   or via the --lyt-gap custom property:

     .my-section .lyt-2col { --lyt-gap: var(--space-9); }   /* 96px */
     .my-section .lyt-2col { gap: var(--space-7); }         /* 48px -- direct override */

   FREEFORM RULE (MASTER_PROMPT S4a)
   Any section with a multi-column layout MUST either:
     (a) use a .lyt-* utility, which provides the built-in collapse, OR
     (b) declare its own @media (max-width: 900px) { grid-template-columns: 1fr }
   Never ship a multi-column grid without a mobile collapse strategy.
   Custom ratios (e.g. 60fr 40fr, 30% 1fr) may use option (b) -- they are
   not required to use .lyt-* utilities.
   ============================================================ */

/* 2-column variants */
.lyt-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lyt-gap, var(--space-8)); /* default 64px */
}
.lyt-2col-wide-left {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--lyt-gap, var(--space-8));
}
.lyt-2col-wide-right {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: var(--lyt-gap, var(--space-8));
}

/* 3-column */
.lyt-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lyt-gap, var(--space-6)); /* default 32px */
}

/* 4-column -- intermediate step at 900px (2-col), full collapse at 600px (1-col) */
.lyt-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lyt-gap, var(--space-5)); /* default 24px */
}

/* Auto-fill card grid -- min column width controlled by --lyt-min */
.lyt-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lyt-min, 280px), 1fr));
  gap: var(--lyt-gap, var(--space-5));
}

/* ============================================================
   10. Responsive spacing overrides

   Single source of truth for mobile spacing across the entire system.
   Two mechanisms:

   A) :root token overrides -- affects every section that uses semantic
      spacing tokens. No section CSS needs to be touched individually.
      Note: main > section { padding-block: var(--space-semantic-section-y-dominant) }
      is the global default -- this override reduces it automatically on mobile.

   B) Direct padding-inline overrides -- for catalog component classes that
      hardcode var(--space-10) (128px) as horizontal section gutter.
      On a 375px viewport, 128px x 2 = 256px eaten by padding, leaving
      only 119px of content width. These rules correct that.

   Lap (900px): structural reduction. Sections breathe less, gutters tighten.
   Mobile (600px): fine reduction. Minimum readable breathing room.
   ============================================================ */

/* ?? A. Semantic token overrides at 900px ?? */
/* --- Lap collapse (900px) -- all multi-column -> 1 column --- */
@media (max-width: 900px) {
  .lyt-2col,
  .lyt-2col-wide-left,
  .lyt-2col-wide-right,
  .lyt-3col {
    grid-template-columns: 1fr;
  }
  .lyt-4col {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Mobile collapse (600px) -- 4-col finishes its collapse --- */
@media (max-width: 600px) {
  .lyt-4col {
    grid-template-columns: 1fr;
  }
}