/* ==========================================================================
   layout.css — Structural layout: the 12-column field, header, sections
   Layout primitives and the responsive grid behaviour. Visual "things"
   (buttons, cards, fields) live in components.css.
   ========================================================================== */

/* ---- Container & section rhythm --------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* The dark contact section provides its own gutter, so its inner container
   sits flush rather than double-padding. */
.container--flush { padding-inline: 0; }

.section { padding-block: var(--space-section); }

/* ==========================================================================
   The 12-column grid — the single layout primitive
   Every multi-column region is a `.grid` whose children claim spans by name in
   components.css (never via inline styles). On the narrow breakpoint the grid
   collapses to one column and the spans reset (see components.css responsive).
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--gutter);
}
.grid--flow { margin-top: var(--space-7); } /* grid that follows a section label */

/* ---- Site header / nav ------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--c-paper) 88%, transparent);
  backdrop-filter: blur(var(--blur-nav));
  -webkit-backdrop-filter: blur(var(--blur-nav));
  border-bottom: 1px solid var(--c-border-nav);
  z-index: 50;
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.nav__brand { justify-self: start; }
.nav__list  { justify-self: center; }

/* ---- Hero ------------------------------------------------------------- */
.hero { padding: 10.75rem var(--gutter) 8.125rem; }

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

.hero__rule {
  flex: 1 1 12.5rem;
  height: 0;
  border-top: 1px solid var(--c-signal);
}

/* ==========================================================================
   Section grids — all placed on the 12-column field
   Column spans are the layout contract; change a span here, not in the markup.
   ========================================================================== */

/* About: portrait | prose | pullquote */
.grid-about > .portrait    { grid-column: 1 / span 3; }
.grid-about > .about__body { grid-column: 4 / span 6; }
.grid-about > .pullquote   { grid-column: 10 / span 3; }

/* Skills: heading | list (col 5 is an empty channel) */
.grid-skills > .skills__heading { grid-column: 1 / span 4; }
.grid-skills > .skill-list      { grid-column: 6 / span 7; }

/* Contact: form | socials (col 7 is an empty channel) */
.grid-contact > .contact__form-col { grid-column: 1 / span 6; }
.grid-contact > .contact__socials  { grid-column: 8 / span 5; }

/* ---- Timeline scaffold ------------------------------------------------ */
/* The career timeline mirrors the grid's centre line (the 6|7 column gutter):
   left entries fill columns 1–6, right entries 7–12, spine at 50%. */
.timeline { position: relative; }

.timeline__spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-rule-strong);
  transform: translateX(-50%);
}

/* NOTE: responsive overrides for layout AND components live together at the
   end of components.css — that file loads last, so its media queries reliably
   win over every base rule regardless of specificity. */