/* _cardpage.css ─────────────────────────────────────────────────────────────
   Shared chrome for every Gravicity media page. Edit ONCE here and every
   consumer page updates. Pages opt in via:

     <link rel="stylesheet" href="<depth>_cardpage.css">

   Page-specific styles (front-*, back-*, card-* design classes) stay inline.

   What this file owns:
     - :root tokens (palette, card dimensions)
     - body chrome (background, font, padding — coordinated with _nav.js)
     - page heading (h1.title, .sub, .crumbs, .philosophy)
     - design-slot layout (gallery-style listings with slot-label, slot-name)
     - card-pair / pair containers + face tagging
     - the .card surface itself (aspect-ratio, shadow, container-type)
     - print-specs meta footer

   What this file does NOT own:
     - Per-design front / back styling (lives in each card's HTML)
     - Page-specific layout overrides (live in each page's <style>)
     - Anything in _nav.js (nav, mode toggle, page-width contract)
   ────────────────────────────────────────────────────────────────────────── */

/*
  Theme palette + ink/paper tokens are owned by _nav.js (body.theme-* classes
  drive --paper, --ink, --ink-mute, --hair, --card-shadow). Don't set those
  here — they'd hardcode dark theme even when user picks light.

  Card print-scale dimensions (--card-w, --card-h) are page-owned: horizontal
  pages get the defaults below; vertical pages override.
*/
:root {
  --card-w: 660px;
  --card-h: 378px;
}

* { box-sizing: border-box; }

body {
  /* Background + color come from theme classes in _nav.js. */
  font-family: 'Red Hat Display', sans-serif;
  margin: 0;
  padding: 0 0 60px;
  /* horizontal + top padding governed by _nav.js — do NOT set here */
}

/* ── Page heading block ──────────────────────────────────────────────────── */

h1, h1.title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.005em;
  margin: 36px 0 8px;
  color: var(--page-fg);
}

.sub {
  font-size: 13px;
  color: var(--page-fg-mute);
  margin: 0 0 36px;
  line-height: 1.6;
}
.sub a { color: var(--page-accent); text-decoration: none; }

code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--page-fg-mute); opacity: 1;
}

/* Breadcrumb pattern (per-card pages) */
.crumbs {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--page-fg-faint);
  margin: 36px 0 8px;
}
.crumbs a { color: var(--page-fg-mute); text-decoration: none; }
.crumbs .ver { color: var(--page-accent); margin-left: 8px; }

.philosophy {
  font-size: 14px;
  color: var(--page-fg-mute);
  line-height: 1.55;
  margin: 0 0 36px;
  max-width: 680px;
}

/* ── Design slot (gallery row — used by business-cards.html) ─────────────── */

.design-slot {
  margin-bottom: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 8%, transparent);
}
.design-slot:last-child { border-bottom: 0; }

.slot-meta {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 32px;
  margin-bottom: 28px;
}
.slot-meta .left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slot-label {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--page-fg-faint);
}
.slot-label .ver {
  color: var(--page-accent);
  margin-left: 8px;
}

.slot-name {
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--page-fg);
  letter-spacing: -0.005em;
}

.slot-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--page-fg-mute);
  margin: 0;
}

/* ── Pair container (front + back side-by-side or stacked) ───────────────── */

.card-pair, .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.card-side, .face {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.face-tag {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--page-fg-faint);
  margin-bottom: 4px;
}

/* ── The card surface ──────────────────────────────────────────────────── */

.card {
  width: 100%;
  aspect-ratio: 3.5 / 2;
  container-type: inline-size;
  background: var(--paper);
  color: var(--ink);
  /* box-shadow is theme-dependent — set by body.theme-* in _nav.js */
  position: relative;
  overflow: hidden;
  font-family: 'Red Hat Display', sans-serif;
}
/* Vertical aspect for cards explicitly marked .card.vertical OR for pages
   that set --card-h to a portrait value. */
.card.vertical { aspect-ratio: 2 / 3.5; }

/* ── Print-specs meta footer ─────────────────────────────────────────────── */

.meta {
  font-size: 11px;
  color: var(--page-fg-faint);
  font-family: ui-monospace, monospace;
  margin: 60px 0 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--page-fg) 10%, transparent);
  line-height: 1.7;
}

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

@media (max-width: 1100px) {
  .card-pair, .pair { grid-template-columns: 1fr; gap: 16px; }
  .slot-meta { grid-template-columns: 1fr; }
}