/* =====================================================================
   TGL — FRONT PAGE mobile gutter (mobile only, <= 768px)
   ---------------------------------------------------------------------
   WHAT THIS FIXES
   A post page puts its text 10px from the screen edge (.tgl-content is
   padded 10px and the page container runs edge to edge). The front page
   paid the same gutter TWICE: the shell container is
   `width: min(1240px, 100% - 32px)` with auto margins (16px per side),
   and every section inside it is a .tgl-container again, so it paid
   another 16px. Result: 32px of dead space on the left and right of the
   homepage on a phone, 44-49px inside the rails, while the post page the
   user is happy with sits at 10px.

   WHAT THIS FILE DOES
   Pay the gutter ONCE on the front page, at the same 10px a post page
   uses, and stop nested containers paying it a second time.

   WHAT THIS FILE NEVER TOUCHES
   - Nothing on any other template: the stylesheet is enqueued only on
     the front page (is_front_page()) and every rule is scoped to
     `body.home`.
   - Nothing above 768px. Desktop and tablet layout are untouched.
   - No card, chip, rail or grid interior: only the page-level container
     gutter changes. Sections keep their own inner padding, exactly like
     the post page's rails keep theirs.
   - No typography, colours, spacing between sections, markup or ads.
   - The search hero keeps its full-bleed edge-to-edge band: its
     `margin-left: calc(50% - 50vw)` escape re-measures itself against the
     new container width, so it still reaches both screen edges.
   ===================================================================== */

@media (max-width: 768px) {

  /* ---- 1. The shell container: edge to edge, gutter paid once ------- */
  body.home .tgl-main > .tgl-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* ---- 2. Sections inside it: no second gutter ---------------------- */
  body.home .tgl-main > .tgl-container .tgl-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---- 3. Footer bands: same line, their own interior kept ---------- */
  body.home .tgl-footer > .tgl-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}