/* layout.css (UPGRADED - copy/paste ready)
   ✅ Goals:
   - Stable top padding (announcement + nav)
   - Hero grid widths fully controllable (left text / right media)
   - Mobile becomes 1 column (no weird 2-col on small screens)
   - Clean max-width control for hero + sections
*/

/* =========================
   Page top spacing
========================= */
.page{
  /* desktop: announcement(36) + nav(var(--navH)) + breathing */
  padding-top: calc(36px + var(--navH) + 18px);
}
@media (max-width: 980px){
  /* mobile: announcement hidden => just nav + breathing */
  .page{
    padding-top: calc(var(--navH) + 16px);
  }
}

/* =========================
   HERO
========================= */
.hero{
  padding: 64px 20px 30px;
}

/* ✅ Fully controllable hero grid:
   --hero-max   => overall width
   --hero-left  => left column (text)
   --hero-right => right column (media)
   --hero-gap   => gap between columns
*/
.hero__grid{
  max-width: var(--hero-max, 1400px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--hero-left, 0.97fr) var(--hero-right, 1.13fr);
  gap: var(--hero-gap, 20px);
  align-items: center;
}

/* ✅ Mobile: single column (recommended) */
@media (max-width: 980px){
  .hero{
    padding: 44px 16px 20px;
  }
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* =========================
   Generic Sections
========================= */
.section{
  padding: 70px 20px;
  border-top: 1px solid var(--line);
}
.section__inner{
  max-width: var(--site-max, 1400px);
  margin: 0 auto;
}

/* Optional: slightly tighter sections on mobile */
@media (max-width: 980px){
  .section{
    padding: 54px 16px;
  }
}