/* =========================================================
   File: css/layout.css
   Title: Invent City — Unified 4-Column Layout System
   Version: 2025-11-22 (HERO MODE A — CLEAN, STABLE)
   Author: Invent City

   PURPOSE
   • One grid system across entire site
   • Hero now behaves like every other full-bleed section
   • Hero background is full-width via #hero-bg::before
   • Hero content lives in columns 2–3 (area-center-2)
   • Mobile collapses to 1-column
   • Dark sections (hero, benefits, mart, footer) are truly black
   • Debug grid toggles with “g” key
   ========================================================= */


/* ==========================================================================
   1) GLOBAL RESET
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

:root {
  --grid-gap: 2rem;
  --color-bg-dark: #000;
  --color-bg-light: #fff;
  --color-text-light: #fff;
  --color-text-dark: #000;
}


/* ==========================================================================
   2) MAIN 4-COLUMN GRID
   ========================================================================== */

.grid-main {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  overflow-x: hidden;
}

.area-cell {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  position: relative;
  width: 100%;
  padding-block: 6rem;
  overflow: hidden;
}

.area-center-2 {
  grid-column: 2 / span 2;
  position: relative;
  z-index: 2;
}

.area-dark  { color: #fff; }
.area-light { color: #000; }

@media (max-width: 991.98px) {
  .area-center-2 {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   3) FULL-BLEED BACKGROUND BANDS
   ========================================================================== */

#hero-bg,
#mission-bg,
#strategy-bg,
#benefits-bg,
#mart-bg,
#footer-bg {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  position: relative;
}

#hero-bg::before,
#mission-bg::before,
#strategy-bg::before,
#benefits-bg::before,
#mart-bg::before,
#footer-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  z-index: -1;
}

/* Correct colors */
#hero-bg::before     { background: #000; }
#mission-bg::before  { background: #fff; }
#strategy-bg::before { background: #fff; }
#benefits-bg::before { background: #000; }
#mart-bg::before     { background: #000; }
#footer-bg::before   { background: #000; }


/* ==========================================================================
   4) HERO SECTION (MODE A — simple, clean, grid-aligned)
   ========================================================================== */

#hero-bg {
  padding-block: 0;  /* hero uses intrinsic height */
  min-height: 100vh;
}

.hero-media {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

#hero {
  grid-column: 2 / span 2;
  position: relative;
  z-index: 2;
  padding-top: 20vh; /* tune hero text vertical offset */
}

@media (max-width: 900.98px) {
  #hero {
    grid-column: 1 / -1;
    padding-top: 6rem;
      padding-left: 2rem;
      padding-right: 2rem;
  }
}


/* ==========================================================================
   5) MISSION SECTION (with sticky logo)
   ========================================================================== */

#mission-bg {
  padding-block: 6rem;
  overflow: visible;
  border-bottom: 6px solid currentColor;
}

#mission {
  grid-column: 2 / span 2;
  position: relative;
  z-index: 10;
  color: #000;
}

#mission-bg .mission-logo-col1 {
  grid-column: 1 / 2;
  align-self: start;
  justify-self: start;
  position: relative;
  top: 1rem;
  padding-left: 2rem;
  z-index: 20;
}

#mission-bg .mission-logo-col1 img {
  width: clamp(64px, 7vw, 110px);
}

#mission-bg .mission-logo-col1.site-logo--fixed {
  position: fixed;
  top: 1rem;
}


/* ==========================================================================
   6) STRATEGY SECTION
   ========================================================================== */

#strategy-bg { padding-block: 6rem; }
#strategy     { grid-column: 2 / span 2; color: #000; }


/* ==========================================================================
   7) BENEFITS + FOOTER (dark sections)
   ========================================================================== */

#benefits-bg,
#footer-bg {
  padding-block: 6rem;
  color: #fff;
    background-color: #000;
}

#benefits,
#footer {
  grid-column: 2 / span 2;
  color: #fff;
}


/* ==========================================================================
   8) MART — full-bleed image band
   ========================================================================== */

#mart-bg { padding-block: 0; }

#mart-bg .band-media {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
}

#mart-bg .band-media img {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  display: block;
  margin-left: 50%;
  transform: translateX(-50%);
}

#mart {
  grid-column: 2 / span 2;
  position: relative;
  z-index: 3;
  color: #fff;
  padding-block: 8rem;
}


/* ==========================================================================
   9) RESPONSIVE
   ========================================================================== */

@media (max-width: 900.98px) {
  #mission,
  #strategy,
  #benefits,
  #mart,
  #footer {
    grid-column: 1 / -1;
    padding-inline: 1.5rem;
  }
}


/* ==========================================================================
   10) DEBUG GRID — toggle with “g”
   ========================================================================== */

body.debug-grid {
  --dbg-gap: var(--grid-gap);
  --dbg-col: calc((100vw - 3 * var(--dbg-gap)) / 4);
}

body.debug-grid::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;

  background:
    linear-gradient(to right,
      rgba(255,0,0,.12) 0,
      rgba(255,0,0,.12) var(--dbg-col),
      transparent       var(--dbg-col),
      transparent       calc(var(--dbg-col) + var(--dbg-gap))
    ),
    linear-gradient(to right,
      transparent       calc(var(--dbg-col) + var(--dbg-gap)),
      rgba(255,0,0,.12) calc(var(--dbg-col) + var(--dbg-gap)),
      rgba(255,0,0,.12) calc(var(--dbg-col)*2 + var(--dbg-gap)),
      transparent       calc(var(--dbg-col)*2 + var(--dbg-gap))
    ),
    linear-gradient(to right,
      transparent       calc(var(--dbg-col)*2 + var(--dbg-gap)*2),
      rgba(255,0,0,.12) calc(var(--dbg-col)*2 + var(--dbg-gap)*2),
      rgba(255,0,0,.12) calc(var(--dbg-col)*3 + var(--dbg-gap)*2),
      transparent       calc(var(--dbg-col)*3 + var(--dbg-gap)*2)
    ),
    linear-gradient(to right,
      transparent       calc(var(--dbg-col)*3 + var(--dbg-gap)*3),
      rgba(255,0,0,.12) calc(var(--dbg-col)*3 + var(--dbg-gap)*3),
      rgba(255,0,0,.12) calc(var(--dbg-col)*4 + var(--dbg-gap)*3),
      transparent       calc(var(--dbg-col)*4 + var(--dbg-gap)*3)
    );
}

.dbg-numbers { display: none !important; }

body.debug-grid .dbg-numbers {
  display: grid !important;
  position: fixed;
  top: 0.4rem;
  left: 0;
  width: 100vw;
  z-index: 9991;
  pointer-events: none;

  grid-template-columns:
    var(--dbg-col) var(--dbg-gap)
    var(--dbg-col) var(--dbg-gap)
    var(--dbg-col) var(--dbg-gap)
    var(--dbg-col);
}

body.debug-grid .dbg-numbers span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  text-shadow: 0 0 6px #fff;
  font: 700 12px/1.2 Arial, sans-serif;
}


/* ==========================================================================
   END OF FILE — css/layout.css
   ========================================================================== */