/* ============================================================
   LAYOUT — container, grid, section rhythm
   Breakpoints: desktop-first
     Default  → 1280px+
     Tablet   → max-width: 1024px
     Mobile   → max-width: 768px
   ============================================================ */

/* ----------------------------------------------------------
   CONTAINER
---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--narrow {
  max-width: 860px;
}

.container--wide {
  max-width: 1600px;
}

/* ----------------------------------------------------------
   12-COLUMN GRID
   Usage: <div class="grid"> <div class="col-6"> ...
---------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Span helpers — add more as needed */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ----------------------------------------------------------
   SECTION RHYTHM
---------------------------------------------------------- */
.section {
  padding-block: var(--space-5xl);
  position: relative;
}

.section--flush {
  padding-block: 0;
}

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

/* ----------------------------------------------------------
   NAV
---------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 56px;
  z-index: var(--z-nav);
  background: transparent;
  transform: translateY(0);
  transition:
    transform 400ms var(--ease-out),
    background var(--duration-base) var(--ease-out);
}

/* Solid dark sections (no full-bleed image) */
.nav--solid {
  background: #000;
}

.nav--hidden {
  transform: translateY(-100%);
}

.nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--container-gutter);
  right: var(--container-gutter);
  height: 1px;
  background: transparent;
  pointer-events: none;
  transition: background var(--duration-base) var(--ease-out);
}

.nav--solid::after {
  background: rgba(255, 255, 255, 0.15);
}

.nav--menu-open::after {
  background: #fff;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--container-gutter);
  font-family: var(--font-ui);
  font-variant-ligatures: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #fff;
  transition: color var(--duration-base) var(--ease-out);
}

/* Nav is over a light (white) section */
.nav--on-light {
  background: #fff;
}
.nav--on-light .nav__inner {
  color: #000;
}
.nav--on-light::after {
  background: rgba(0, 0, 0, 0.1);
}

.nav__logo {
  color: inherit;
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.nav__year {
  display: inline-block; /* required for transform */
  opacity: 1; /* explicit baseline so the transition always has a from-value */
  transition: opacity 600ms var(--ease-out), transform 400ms var(--ease-out);
}

.nav__menu-btn {
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 768px) {
  .nav__year {
    display: none;
  }

  .nav__logo {
    position: static;
    transform: none;
  }
}

/* ----------------------------------------------------------
   TABLET  ≤ 1024px
---------------------------------------------------------- */
@media (max-width: 1024px) {

  .col-3  { grid-column: span 6; }
  .col-4  { grid-column: span 6; }

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

}

/* ----------------------------------------------------------
   MOBILE  ≤ 768px
---------------------------------------------------------- */
@media (max-width: 768px) {

  .grid {
    --grid-cols: 4;
  }

  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    grid-column: span 4;
  }

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

  .nav__links {
    display: none; /* replace with mobile menu when design arrives */
  }

}