/* Shared homepage grid
   One 1320px frame keeps the primary section edges on a common vertical axis. */

:root {
  --av-page-grid-max: 1320px;
  --av-page-grid-min-gutter: 18px;
  --av-page-grid-gutter: max(
    var(--av-page-grid-min-gutter),
    calc((100% - var(--av-page-grid-max)) / 2)
  );
}

/* About / experience */
#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:368"].av-about-experience {
  padding-right: var(--av-page-grid-gutter) !important;
  padding-left: var(--av-page-grid-gutter) !important;
}

/* Portfolio / active projects triptych */
#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:254"].triptych {
  padding-right: var(--av-page-grid-gutter) !important;
  padding-left: var(--av-page-grid-gutter) !important;
}

/* Process architecture */
#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:300"] {
  padding-right: var(--av-page-grid-gutter) !important;
  padding-left: var(--av-page-grid-gutter) !important;
}

#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:301"].process-triptych-grid {
  width: 100% !important;
  max-width: var(--av-page-grid-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Instagram journal heading and story rail */
#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:408"],
#root:has([data-loc="src/web/pages/Home.tsx:188"])
  #reels-scroll.reels-scroll.av-story-rail {
  width: min(
    var(--av-page-grid-max),
    calc(100% - (var(--av-page-grid-min-gutter) * 2))
  ) !important;
  max-width: var(--av-page-grid-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:406"][data-av-story-enhanced="true"]
  [data-loc="src/web/pages/Home.tsx:408"] {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:406"][data-av-story-enhanced="true"]
  [data-loc="src/web/pages/Home.tsx:424"] {
  padding-right: var(--av-page-grid-gutter) !important;
  padding-left: var(--av-page-grid-gutter) !important;
}

#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/pages/Home.tsx:424"]
  #reels-scroll.reels-scroll.av-story-rail {
  width: 100% !important;
  max-width: var(--av-page-grid-max) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Track record already uses 1320px; make the contract explicit. */
#root:has([data-loc="src/web/pages/Home.tsx:188"])
  [data-loc="src/web/components/StatsBanner.tsx:14"] {
  width: min(
    var(--av-page-grid-max),
    calc(100% - (var(--av-page-grid-min-gutter) * 2))
  ) !important;
  max-width: var(--av-page-grid-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Footer closes on the same frame as the homepage sections. */
body .av-contact-footer .av-footer-shell {
  width: min(
    var(--av-page-grid-max),
    calc(100% - (var(--av-page-grid-min-gutter) * 2))
  ) !important;
  max-width: var(--av-page-grid-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (max-width: 760px) {
  :root {
    --av-page-grid-min-gutter: 10px;
  }

  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/pages/Home.tsx:368"].av-about-experience,
  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/pages/Home.tsx:254"].triptych,
  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/pages/Home.tsx:300"] {
    padding-right: var(--av-page-grid-min-gutter) !important;
    padding-left: var(--av-page-grid-min-gutter) !important;
  }

  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/pages/Home.tsx:406"][data-av-story-enhanced="true"]
    [data-loc="src/web/pages/Home.tsx:408"],
  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/pages/Home.tsx:406"][data-av-story-enhanced="true"]
    [data-loc="src/web/pages/Home.tsx:424"],
  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    #reels-scroll.reels-scroll.av-story-rail,
  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/components/StatsBanner.tsx:14"] {
    width: calc(100% - (var(--av-page-grid-min-gutter) * 2)) !important;
  }

  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/pages/Home.tsx:424"]
    #reels-scroll.reels-scroll.av-story-rail {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/pages/Home.tsx:406"][data-av-story-enhanced="true"]
    [data-loc="src/web/pages/Home.tsx:424"] {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/components/StatsBanner.tsx:13"] {
    padding-right: var(--av-page-grid-min-gutter) !important;
    padding-left: var(--av-page-grid-min-gutter) !important;
  }

  #root:has([data-loc="src/web/pages/Home.tsx:188"])
    [data-loc="src/web/components/StatsBanner.tsx:14"] {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body .av-contact-footer .av-footer-shell {
    width: 100% !important;
  }
}