/*
 * base.css — structural foundation for the estate Hugo theme.
 * STRUCTURE ONLY: layout, grid, spacing, component skeletons, responsive, print.
 * NO palette colors, NO font-family declarations — those live in per-skin files.
 *
 * Width law (plans/010 — owner-locked 2026-06-14):
 *   ONE content width: --content-max:1000px. All text blocks match this.
 *   Only images + full-bleed closing/dark blocks may break wider.
 *
 * 3 conflict resolutions (plans/007 §1.1):
 *   1. footer variants: .footer--article / .footer--landing modifier classes
 *   2. .content layout: .layout-grid / .layout-single body classes
 *   3. .closing is always full-bleed (i5 canonical; virgin contained is one-off override)
 *
 * Author: Leo (frontend) — 2026-06-14
 */

/* ── Width tokens (THE LAW — do not introduce hardcoded px widths) ─────────── */
:root {
  --content-max:  1000px;            /* THE one width — every text block matches this */
  --frame-max:    var(--content-max);
  --read-max:     var(--content-max); /* single blocks = full content width, NOT narrowed */
  --vision-max:   var(--content-max); /* lead/deck wide too */

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-s:   0.5rem;
  --space-m:   1rem;
  --space-l:   2rem;
  --space-xl:  4rem;
}

/* ── Reset / box-model ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base body ──────────────────────────────────────────────────────────────── */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── SITE HEADER ────────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 2px solid var(--black);
  padding: 1.5rem 5vw;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── SITE NAV ───────────────────────────────────────────────────────────────── */
.site-nav {
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 5vw;
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

/* Active nav link: structural indicator only (color via skin) */
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── HERO (homepage) ────────────────────────────────────────────────────────── */
/* Width law: was 1100px → now var(--frame-max) */
.hero {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 6rem 5vw 4rem;
  border-bottom: 1px solid var(--rule);
  width: 100%;
}

.hero-statement {
  max-width: var(--vision-max);
  margin-bottom: 2rem;
}

/* ── WORK SECTION (homepage) ────────────────────────────────────────────────── */
/* Width law: was 1100px → now var(--frame-max) */
.work-section {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 3.5rem 5vw;
  width: 100%;
  flex: 1;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 4rem;
}

.work-item {
  background: var(--white);
  padding: 2rem 2rem;
  text-decoration: none;
  display: block;
  transition: background 0.15s;
}

.work-item:hover {
  background: var(--light);
}

/* Full-row items in the work grid */
.work-item-dark {
  grid-column: 1 / -1;
}

.work-item-profile {
  grid-column: 1 / -1;
}

/* ── PUBLICATIONS ───────────────────────────────────────────────────────────── */
.pub-section {
  border-top: 1px solid var(--rule);
  margin-bottom: 3rem;
  padding-top: 2.5rem;
}

.pub-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 2rem;
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule);
}

.pub-entry:last-child {
  border-bottom: none;
}

.pub-desc {
  max-width: var(--read-max);
}

/* ── CONTACT ROW ────────────────────────────────────────────────────────────── */
.contact-row {
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* ── ARTICLE HEADER ─────────────────────────────────────────────────────────── */
.article-header {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 4.5rem 5vw 3rem;
  border-bottom: 1px solid var(--rule);
}

/* ── LEAD CLAIM (i5-style intro above Q&A) ──────────────────────────────────── */
.lead-claim {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 2.4rem 5vw 0.5rem;
}

/* ── BIO BLOCK ──────────────────────────────────────────────────────────────── */
.bio {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 1.8rem 5vw;
  border-bottom: 1px solid var(--rule);
}

.bio p {
  max-width: var(--read-max);
  margin: 0 auto;
}

/* ── INTRO ORIENTATION ──────────────────────────────────────────────────────── */
.intro-orientation {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 2.2rem 5vw 1.5rem;
}

.intro-orientation p {
  max-width: var(--read-max);
  margin-bottom: 1rem;
}

.intro-orientation p:last-child {
  margin-bottom: 0;
}

/* ── CONTENT GRID (two-column Q&A layout) ───────────────────────────────────── */
/* Conflict resolution #2: body.layout-grid uses the 2-column grid;
   body.layout-single uses block display (e.g. virgin.html assessment style) */
.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 3.5rem 5vw 5rem;
  align-items: start;
}

body.layout-grid .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
}

body.layout-single .content {
  display: block;
}

/* default (no body class) = grid, matching the majority of pages */
.content:not(body.layout-single .content) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
}

.full {
  grid-column: 1 / -1;
}

/* ── Q&A BLOCKS ─────────────────────────────────────────────────────────────── */
.qa {
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
}

.qa-left {
  padding-right: 2rem;
  border-right: 1px solid var(--rule);
}

.qa-right {
  padding-left: 2rem;
}

/* ── PULL QUOTE ─────────────────────────────────────────────────────────────── */
.pull {
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--rule);
  padding: 1.2rem 0;
  margin: 1.8rem 0 0;
}

/* ── SPEC BOX ───────────────────────────────────────────────────────────────── */
.spec-box {
  padding: 1.2rem 1.5rem;
  margin: 1.4rem 0;
}

/* ── IMAGE ──────────────────────────────────────────────────────────────────── */
.img-wrap {
  grid-column: 1 / -1;
  margin: 1rem 0;
}

.img-wrap img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  filter: saturate(0.65) brightness(0.95);
}

/* ── DARK BREAK (always full-bleed in grid) ─────────────────────────────────── */
.dark-break {
  grid-column: 1 / -1;
  padding: 2.8rem 5vw;
  text-align: left;
}

/* ── SIDEBAR (i5 contrast block) ────────────────────────────────────────────── */
.sidebar {
  grid-column: 1 / -1;
  padding: 1.6rem 1.8rem;
  margin: 1rem 0;
}

/* ── CLOSING — always full-bleed (Conflict resolution #3) ───────────────────── */
/* i5 canonical: full-bleed dark band. virgin's max-width containment is NOT a theme variant. */
.closing {
  padding: 5rem 5vw;
  /* explicitly NO max-width here — full bleed is canonical */
}

.closing-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
  align-items: start;
}

.closing-head {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

.closing-col-left {
  padding-right: 2rem;
}

.closing-col-right {
  padding-left: 2rem;
}

.closing-final {
  grid-column: 1 / -1;
  margin-top: 2rem;
  padding-top: 1.8rem;
}

/* ── I4-TEASER block ────────────────────────────────────────────────────────── */
.i4-teaser {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 3.5rem 5vw 5rem;
}

.i4-tags {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── FOOTER — two variants (Conflict resolution #1) ────────────────────────── */
/* .footer--article: column-centered, links/icons/name/copy (i1–i5 style) */
/* .footer--landing: space-between, name left / copy right (homepage style) */

/* Article footer (default article pages) */
.footer--article {
  border-top: 2px solid var(--black);
  padding: 2.2rem 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.footer--article .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.4rem;
}

.footer--article .footer-icons {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.footer--article .footer-icons a {
  display: flex;
  align-items: center;
}

.footer--article .footer-icons svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Landing footer (homepage) */
.footer--landing {
  border-top: 2px solid var(--black);
  padding: 1.8rem 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Effects grid (i2-style positive effects block) ─────────────────────────── */
.effects-block {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 0 5vw 2.5rem;
}

.effects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.effect-item {
  padding: 1.4rem 1.6rem;
}

/* ── estate-attrib compliance footer ───────────────────────────────────────── */
/* Must survive — footer.html emits this. */
.estate-attrib {
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-m) var(--space-l);
  border-top: 1px solid var(--rule, #E0E0E0);
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.5;
}

.estate-attrib__byline {
  margin: 0 0 var(--space-s);
}

/* markup is now .footer--article > .estate-crosslinks / .estate-lang — bare-class rules below */

/* ── estate-nav (Lane-2 pages only — bespoke pages have their own header) ───── */
.estate-nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--rule, #E0E0E0);
}

.estate-nav__list {
  display: flex;
  gap: var(--space-m);
  list-style: none;
}

/* ── estate-crosslinks ──────────────────────────────────────────────────────── */
.estate-crosslinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.estate-crosslinks__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: 0;
}

.estate-crosslinks__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.estate-crosslinks__list li {
  display: inline;
}

/* ── estate-lang (EN/DE switcher — direct child of .footer--article) ─────── */
.estate-lang {
  display: flex;
  justify-content: center;
  align-items: center;
}

.estate-lang__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.estate-lang__list li {
  display: flex;
  align-items: center;
}

.estate-lang__list li + li::before {
  content: "|";
  padding-right: var(--space-s);
  display: inline-block;
}

/* ── Impressum page ─────────────────────────────────────────────────────────── */
.impressum-page {
  max-width: var(--read-max);
  margin: 0 auto;
  padding: 3rem 5vw 5rem;
}

.impressum-page h1 {
  margin-bottom: 2rem;
}

.impressum-page h2 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.impressum-page p {
  margin-bottom: 0.8rem;
  line-height: 1.7;
}

/* ── @media: responsive breakpoint ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-item-dark {
    grid-column: 1;
  }

  .work-item-profile {
    grid-column: 1;
  }

  .hero {
    padding: 3.5rem 5vw 2.5rem;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }

  .content {
    grid-template-columns: 1fr !important;
  }

  .qa-left {
    padding-right: 0;
    border-right: none;
  }

  .qa-right {
    padding-left: 0;
  }

  .closing-inner {
    grid-template-columns: 1fr;
  }

  .closing-col-left {
    padding-right: 0;
    border-right: none;
  }

  .closing-col-right {
    padding-left: 0;
  }

  .closing-head,
  .closing-final {
    grid-column: 1;
  }

  .effects-grid {
    grid-template-columns: 1fr;
  }
}

/* ── @media: print ──────────────────────────────────────────────────────────── */
@media print {
  .qa {
    page-break-inside: avoid;
  }

  .dark-break {
    page-break-inside: avoid;
  }

  .draft-banner {
    display: none;
  }
}