/**
 * 08-layout.css
 * Layout patterns: container, docs layout, grid helpers
 * Part of: Agentic Semantic Web
 */

/* ── Container ─────────────────────────────────────────────────────── */

.container {
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── Body landmark container ────────────────────────────────────────── */

body > nav   { width: 100%; }
body > footer { width: 100%; }

/* Header: wider than article — room for hero titles, eyebrows, meta.   */
body > header {
  width: 100%;
  max-width: var(--width-lg);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Article and section: standard content width. Reading width lives on
   inner elements (p, li…) via max-inline-size — not on the container.  */
body > article,
body > section {
  width: 100%;
  max-width: var(--width-lg);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── Body baseline ──────────────────────────────────────────────────── */

body {
  background-color: var(--surface);
  color: var(--text);
  font-weight: var(--font-weight-4);
  line-height: var(--leading);
  font-variant-emoji: text; /* render emoji as monochrome glyphs, not OS pictographs */
  min-height: 100vh;
  /* font-family and font-size live in 00-reset.css — do not set here */
}

/* ── Hero ──────────────────────────────────────────────────────────── */
/* Landing page hero block. Usually <header data-layout="hero">. */
/* Base hero — 09-landing.css overrides for full landing pages */
[data-layout="hero"] {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}

/* ── Install snippet ────────────────────────────────────────────────── */
/* One-liner install code pill. <p data-layout="install"><code>...</code></p> */
[data-layout="install"] {
  display: inline-block;
  background: var(--surface-1);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: var(--space-4) 0;
}

/* ── Actions row ────────────────────────────────────────────────────── */
/* CTA button row. <nav data-layout="actions"> wraps primary + secondary links. */
nav[data-layout="actions"] {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-5);
  padding: 0;
}

nav[data-layout="actions"] a {
  text-decoration: none;
  color: var(--text-2);
}

nav[data-layout="actions"] a:hover {
  color: var(--text);
}

/* ── Docs layout ────────────────────────────────────────────────────── */

[data-layout="docs"] {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
  grid-template-rows: auto;
  gap: var(--space-6);
  max-width: var(--docs-max-width);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  align-items: start;
}

/* ── Sidebar + TOC shared sticky behaviour ──────────────────────────── */

[data-layout="docs"] > nav[data-nav="sidebar"],
[data-layout="docs"] > aside[data-toc] {
  position: sticky;
  max-height: calc(100vh - var(--nav-height) - var(--space-4) * 2);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ── Left sidebar ───────────────────────────────────────────────────── */

[data-layout="docs"] > nav[data-nav="sidebar"] {
  top: calc(var(--nav-height) + var(--space-4));
}

/* ── Main content ───────────────────────────────────────────────────── */

[data-layout="docs"] > article {
  min-width: 0;
}

/* ── Right TOC ──────────────────────────────────────────────────────── */

[data-layout="docs"] > aside[data-toc] {
  top: calc(var(--nav-height) + var(--space-8));
  padding-top: var(--space-8);
}


/* ── Prev/Next navigation ───────────────────────────────────────────── */

[data-role="prev-next"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
  gap: var(--space-4);
}

[data-role="prev-next"] a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--text-2);
  max-width: 45%;
  transition: color var(--ease);
}

[data-role="prev-next"] a:hover {
  color: var(--accent);
}

[data-role="prev-next"] a[rel="prev"] {
  align-items: flex-start;
}

[data-role="prev-next"] a[rel="next"] {
  align-items: flex-end;
  margin-left: auto;
}

[data-role="prev-next"] small {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-role="prev-next"] span {
  font-size: var(--text-sm);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (--docs-toc-hidden) {
  [data-layout="docs"] {
    grid-template-columns: var(--toc-width) 1fr;
  }
  [data-layout="docs"] > aside[data-toc] {
    display: none;
  }
}

@media (--md-n-below) {
  [data-layout="docs"] {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }
  [data-layout="docs"] > nav[data-nav="sidebar"] {
    display: none;
  }
}

/* Allow article as content column in docs layout — override body > article container sizing */
[data-layout="docs"] > article {
  max-width: none;
  min-width: 0;
}

/* ── Grid helpers ───────────────────────────────────────────────────── */

[data-layout="grid-2"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

[data-layout="grid-3"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

[data-layout="card-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
  gap: var(--grid-gap);
}

[data-layout="stats"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

[data-layout="stats"] > * {
  flex: 1;
  min-width: var(--size-px-11);
}

[data-layout="stats"] [data-stat="value"],
[data-layout="stats"] .value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-7);
  color: var(--accent);
  display: block;
}

[data-layout="stats"] [data-stat="label"],
[data-layout="stats"] .label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}

@media (--md-n-below) {
  [data-layout="grid-2"],
  [data-layout="grid-3"] {
    grid-template-columns: 1fr;
  }
}

/* ── Prose layout ───────────────────────────────────────────────────── */
/* Reading-optimised width. ~65 characters per line — Bringhurst/LaTeX  */
/* standard for comfortable prose. Use on <main> or any block element.  */

article[data-layout="prose"],
[data-layout="prose"] {
  max-width: var(--width-prose);
  margin-inline: auto;
}

/* ── Timeline layout ────────────────────────────────────────────────── */
/* Chronological spine: vertical accent line, node per event.           */
/* Usage: <ol data-layout="timeline"> <li> <time>…</time> <article>     */
/* Issue: agentic-semantic-web#54                                        */

[data-layout="timeline"] {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  position: relative;
}

/* Vertical spine */
[data-layout="timeline"]::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: var(--border-size-1);
  background: var(--border);
}

[data-layout="timeline"] > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-5);
  align-items: start;
  padding-left: calc(1.2rem + var(--space-3));
  margin-bottom: var(--space-6);
  position: relative;
}

[data-layout="timeline"] > li:last-child {
  margin-bottom: 0;
}

/* Node dot */
[data-layout="timeline"] > li::before {
  content: "";
  position: absolute;
  left: 0.275rem;
  top: 0.45rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--accent);
  border: var(--outline-width) solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Time element */
[data-layout="timeline"] > li > time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  padding-top: 0.1em;
  display: block;
  margin-bottom: var(--space-1);
}

/* Content */
[data-layout="timeline"] > li > article,
[data-layout="timeline"] > li > div {
  min-width: 0;
}

[data-layout="timeline"] > li > article > :first-child,
[data-layout="timeline"] > li > div > :first-child {
  margin-top: 0;
}

/* Alternate variant: alternating left/right */
[data-layout="timeline alternate"] > li:nth-child(even) {
  direction: rtl;
}

[data-layout="timeline alternate"] > li:nth-child(even) > * {
  direction: ltr;
}

/* ── Report layout ──────────────────────────────────────────────────── */
/* Print-first document layout. Clean on screen, correct on paper.      */
/* Light surface. Constrained width. Print stylesheet built in.         */
/* Issue: agentic-semantic-web#56                                        */

[data-layout="report"] {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading);
}

[data-layout="report"] > header,
[data-layout="report"] > article,
[data-layout="report"] > footer {
  max-width: var(--width-report);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

[data-layout="report"] > header {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: var(--outline-width) solid var(--border);
  margin-bottom: var(--space-6);
}

[data-layout="report"] > header h1 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-3);
  color: var(--text);
}

[data-layout="report"] > article {
  padding-bottom: var(--space-8);
}

[data-layout="report"] > footer {
  border-top: var(--border-width) solid var(--border);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* Print styles */
@media print {
  [data-layout="report"] {
    --surface: var(--print-surface);
    --text: var(--print-text);
    font-size: 11pt;
  }

  [data-layout="report"] > header {
    page-break-after: avoid;
  }

  [data-layout="report"] h2,
  [data-layout="report"] h3 {
    page-break-after: avoid;
  }

  [data-layout="report"] pre,
  [data-layout="report"] table,
  [data-layout="report"] figure {
    page-break-inside: avoid;
  }

  [data-layout="report"] a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--text-3);
  }

  [data-layout="report"] a[href^="#"]::after {
    content: "";
  }

  [data-layout="report"] nav,
  [data-layout="report"] [data-no-print] {
    display: none !important;
  }
}