/* ESPYCRUX design system — layout-v1.css
 *
 * The layer v1.css deliberately does not have. v1.css declares tokens and
 * touches no markup; this file restructures the page — but only through the
 * espy-* skeleton vocabulary a property opts into (see SKELETON.md). It still
 * selects nothing of the property's own.
 *
 * Load AFTER v1.css and after the property's own stylesheet, so layout wins
 * over the property's defaults while colour still comes from the tokens.
 *
 * Every rule is scoped to [data-design="…"]. With no design applied this file
 * is inert, and with the eight unimplemented designs it is also inert — those
 * fall back to the property's own layout, which is today's behaviour.
 *
 * Colour, font-family and radius are NOT set here. They belong to v1.css;
 * setting them in two files is how the two drift apart.
 */

/* ===========================================================================
   TERMINAL — a console. Fixed status bar and footer bar clamp the viewport, a
   narrow 1180px measure, hairline-separated panels, and a grid whose gaps show
   the border colour through rather than sitting on background.
   =========================================================================== */

[data-design="terminal"] {
  --l-bar: 34px;
  --l-footbar: 40px;
  --l-wrap: 1180px;
  --l-pad: clamp(16px, 4vw, 44px);
  --l-sect: clamp(56px, 9vw, 110px);
}

/* The chrome bars are drawn, not marked up — no property should have to add
   elements to receive a design's furniture. */
[data-design="terminal"] body::before,
[data-design="terminal"] body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: var(--l-bar);
  z-index: 70;
  background: hsl(var(--espy-bg) / .94);
  pointer-events: none;
}
[data-design="terminal"] body::before { top: 0; border-bottom: 1px solid hsl(var(--espy-border)); }
[data-design="terminal"] body::after  { bottom: 0; height: var(--l-footbar); border-top: 1px solid hsl(var(--espy-border)); }
[data-design="terminal"] body { padding-top: var(--l-bar); padding-bottom: var(--l-footbar); }

[data-design="terminal"] .espy-page {
  max-width: var(--l-wrap);
  margin-inline: auto;
  padding-inline: var(--l-pad);
}
[data-design="terminal"] .espy-section { padding-block: var(--l-sect); }
[data-design="terminal"] .espy-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(28px, 5vw, 48px);
}
/* the rule that runs off to the right of a section title */
[data-design="terminal"] .espy-section__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: hsl(var(--espy-border));
}
[data-design="terminal"] .espy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: hsl(var(--espy-border));
  border: 1px solid hsl(var(--espy-border));
}
/* 1px gaps over a border-coloured background: the cells are separated by the
   grid itself, so cards need no borders of their own. */
[data-design="terminal"] .espy-card {
  background: hsl(var(--espy-card));
  border: 0;
  box-shadow: none;
}
[data-design="terminal"] .espy-hero {
  border: 1px solid hsl(var(--espy-border));
  background: hsl(var(--espy-card));
}
[data-design="terminal"] .espy-rail { border-right: 1px solid hsl(var(--espy-border)); }

/* ===========================================================================
   EDITORIAL — a broadsheet. Wide 1480px measure on a twelve-column grid, the
   lead column deliberately off-centre, features divided by rules instead of
   boxed, and far more vertical air than anything else in the set.
   =========================================================================== */

[data-design="editorial"] {
  --l-wrap: 1480px;
  --l-edge: clamp(1.15rem, 5.2vw, 5.25rem);
  --l-gutter: clamp(1.05rem, 2.1vw, 2.4rem);
  --l-sect: clamp(2.6rem, 6vw, 6rem);
  --l-runhead: 30px;
}

[data-design="editorial"] body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--l-runhead);
  z-index: 60;
  background: hsl(var(--espy-bg));
  border-bottom: 1px solid hsl(var(--espy-border));
  pointer-events: none;
}
[data-design="editorial"] body { padding-top: var(--l-runhead); }

[data-design="editorial"] .espy-page {
  max-width: var(--l-wrap);
  margin-inline: auto;
  padding-inline: var(--l-edge);
}
[data-design="editorial"] .espy-section {
  padding-block: var(--l-sect);
  border-bottom: 1px solid hsl(var(--espy-border));
}
[data-design="editorial"] .espy-section__head {
  display: block;
  margin-bottom: clamp(1.8rem, 3.4vw, 3rem);
}
/* Twelve columns, and cards that span four of them — an editorial measure
   rather than an even card wall. */
[data-design="editorial"] .espy-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--l-gutter);
  row-gap: var(--l-sect);
  background: none;
  border: 0;
}
[data-design="editorial"] .espy-card {
  grid-column: span 4;
  background: none;
  border: 0;
  border-top: 1px solid hsl(var(--espy-border));
  padding-top: 1rem;
  box-shadow: none;
}
/* The lead item takes the wide column, the way a paper leads a page. */
[data-design="editorial"] .espy-card:first-child { grid-column: span 7; }
[data-design="editorial"] .espy-card__media { aspect-ratio: 16 / 9; }
[data-design="editorial"] .espy-hero {
  border: 0;
  border-bottom: 1px solid hsl(var(--espy-border));
  background: none;
}
[data-design="editorial"] .espy-aside { border-left: 1px solid hsl(var(--espy-border)); padding-left: var(--l-gutter); }
[data-design="editorial"] .espy-rail { border-right: 1px solid hsl(var(--espy-border)); }

@media (max-width: 900px) {
  [data-design="editorial"] .espy-card,
  [data-design="editorial"] .espy-card:first-child { grid-column: span 12; }
  [data-design="editorial"] .espy-aside { border-left: 0; padding-left: 0; }
}