/* Global page-width constraint.
   On very wide monitors the site's sections were stretching edge-to-edge, which
   looks bad (each section only has a fixed 80px side padding, not a max
   content width). This does NOT box sections or repaint the page background -
   every section keeps its own full-bleed background/image exactly as before.
   It only grows each section's horizontal padding once the screen is wider
   than the site's normal 1440px design width, so the CONTENT stays capped and
   centered while the background (solid color or an image, e.g. the homepage
   hero photo) still spans edge to edge. That's why there is no body
   background override here: what you see as a "gutter" on a wide screen is
   just each section's own background, showing through its own extra padding -
   never a foreign color, and never a color mismatch.

   Single source of truth: this file is linked from every page, right after
   shared-styles.css. Do not duplicate this rule inline on individual pages.

   Wrapped in a min-width media query on purpose: below 1600px this file does
   nothing at all, so every page's existing responsive/mobile padding rules
   (e.g. the 24px mobile padding used everywhere below 960px) are completely
   untouched. Above 1600px, !important overrides each page's local
   .section/.hero/etc padding-left/right without editing every one of those
   rules individually - and only padding-left/right, never padding-top/bottom,
   so each section's own vertical rhythm is untouched too.

   Two exceptions:
   1. The homepage's <section class="hero"> itself carries no padding at all -
      its content padding lives on the child .hero-inner instead (the hero
      image is position:absolute and always full-bleed either way). So .hero
      is excluded from the section rule below and .hero-inner is targeted
      directly, to avoid stacking two paddings on top of each other.
   2. .neutrals-collage (the "Experience across sport" scrolling photo strip
      on the homepage) is a decorative full-bleed marquee and is meant to
      run edge to edge even on very wide screens - excluded on purpose, keep
      its own small 40px padding untouched. */

@media (min-width: 1600px) {
  main > section:not(.hero):not(.neutrals-collage) {
    padding-left: calc((100% - 1440px) / 2) !important;
    padding-right: calc((100% - 1440px) / 2) !important;
  }

  .hero-inner {
    padding-left: calc((100% - 1440px) / 2) !important;
    padding-right: calc((100% - 1440px) / 2) !important;
  }
}