/* === layout.css === */
/* =========================================================
   === LAYOUT (FINAL • NO SNAP • WINDOW SCROLL)
   ========================================================= */

.container{
  width: min(var(--max), calc(100% - 56px));
  margin: 0 auto;
}

/* Window scroll */
html, body{
  height: 100%;
  overflow: auto;
}

/* Main wrapper is not a scroller */
.page{
  min-height: 100svh;
  overflow: visible;
  padding-top: var(--header-h);     /* offset for fixed header */
  scroll-behavior: smooth;
  background-image:
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Sections: full-screen feel but can grow naturally */
.snap{
  min-height: calc(100svh - var(--header-h));
  display: block;
}

/* Section spacing lives here */
.snap > .container{
  padding: var(--section-pad-y) 0;
}

/* HERO: extra breathing room */
.hero.snap > .container{
  padding-top: calc(var(--header-h) + 4px);
  padding-bottom: 44px;
}

/* Optional separators */
.section{
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ---------- Headings / Metrics / Grids ---------- */
.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
}

.metrics{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metric{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(0,0,0,.06);
}

.metric__num{ font-weight: 900; letter-spacing: -0.02em; }
.metric__label{ font-size: 12.5px; color: rgba(7,19,15,.60); }

.grid{ display: grid; gap: 14px; }
.grid--cards{ grid-template-columns: repeat(12, 1fr); }
.grid--cards > .cardx{ grid-column: span 4; }

.grid--contact{
  grid-template-columns: repeat(12, 1fr);
  margin-top: 32px;
}
.grid--contact > .contact-card{ grid-column: span 6; }

.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.section--about,
.section--activities,
.section--projects,
.section--contact{
  background: transparent !important;
}

.page::before{ z-index: 0 !important; }
.page > *{ z-index: 1; }