/* ==========================================================================
   layout.css — Structural layout: header, page shell, sections, responsive
   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);
}

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

/* ---- 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: 172px var(--gutter) 130px; }

.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 200px;
  height: 0;
  border-top: 1px solid var(--c-signal);
}

/* ---- Generic two-/three-column section grids -------------------------- */
.grid-about {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
  gap: 50px;
  align-items: start;
}

.grid-skills {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.grid-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--timeline-gap);
  align-items: start;
}

/* ---- Timeline scaffold ------------------------------------------------ */
.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. */