/* ==========================================================================
   [TAG: GRID SYSTEM & LAYOUT]
   Based on 12 columns with editorial constraints.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

/* Main Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gap);
  width: 100%;
  padding: 0 var(--page-margin);
}

/* -----------------------------------------------------------
   [TAG: WIDTH CONSTRAINTS]
----------------------------------------------------------- */
.col-4  { grid-column: 1 / span 4; }
.col-6  { grid-column: 1 / span 6; }
.col-8  { grid-column: 1 / span 8; }
.col-12 { grid-column: 1 / span 12; }
.col-6-right { grid-column: 7 / span 6; }

/* -----------------------------------------------------------
   [TAG: BODY STRUCTURE]
----------------------------------------------------------- */
body {
  padding-top: var(--space-s);
}

section {
  padding-top: var(--section-pt);
  padding-bottom: var(--section-pb);
  background-color: var(--bg-current);
  color: var(--text-current);
  width: 100%;
  position: relative;
}

section > *:first-child { margin-top: 0 !important; }
section > *:last-child { margin-bottom: 0 !important; }