/* gll-gutter.css — phone side gutter (owner 2026-10-13: "on smaller device views ... the width is more on all ... near
   the edges including hero sections"; cards like Law Firm of the Day and the listing cards should be wider).
   Phones (<576px) only: ONE 14px side gutter for every page edge (header, heroes, sections, cards, carousels, footer,
   member dashboard, admin). Cards run out to that gutter and keep 16px inner padding. 576px and up is untouched.
   The older phone rules (gll-qoves "Responsive QA" 20px, gll-final sections 6/8, gll-pages-premium --gpp-gut, the
   dashboard --gd-pad, the nav --gnav-mg) carry up to 4 id-level :not()s, so this file uses five to win once, here.
   Loaded last from header.html.php (public + member) and admin/header.html.php (admin). */

@media (max-width:575.98px){
  :root{--gll-gutter-phone:14px;--gll-card-pad-phone:16px}

  /* 1. Variable-driven edges */
  html:root body{--gd-pad:var(--gll-gutter-phone);--gd-cover-pad-x:var(--gll-card-pad-phone)}
  html:root body .gpp.gpp:not(#gg1){--gpp-gut:var(--gll-gutter-phone)}
  html:root body #sticky-header-nav:not(#gg1){--gnav-mg:var(--gll-gutter-phone);--gnav-sheet:var(--gll-gutter-phone)}

  /* 2a. Outer Bootstrap containers: one step above the gll-qoves 20px rule only, so the page rules that zero an outer
         container around a widget with its own guttered wrap still win (no doubled gutter) */
  html:root body main :is(.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl):not(:is(.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl) *),
  html:root body :is(header.header-widget,#sticky-header-nav) nav.navbar > .container-fluid{
    padding-left:var(--gll-gutter-phone) !important;padding-right:var(--gll-gutter-phone) !important}

  /* 2b. Every widget's own top-level wrapper insets its content by the gutter */
  html:root body :is(
      section.widget .gll-msg-band > .container,
      .listing-send-message-form-widget > .gll-msg-main > .container,
      .gll-editorial-grid,.gll-hero .gll-editorial-grid,#gll-team,.gh2-in,#glfaq-root > *,.gfq-wrap,
      .gir-in,.gfd-duo-container,.glf3-in,footer.gll-footer.glf2 .glf2-in,.lfl-in,.gnw-in,
      .glr-wrap,.glr-sec,.glr-inner,.glr-hero,.glr-desc-bar,.glr-accordion-wrap,.gllr-xw,
      .gph-in,.pl-cta-in,.gllp2-body,.gll-ins-grid,.gll-ah-in,.gll-cms-bc-in,.gll-cms-bc .gll-cms-bc-in,
      .gpp-wrap,.gpp-hero-in,.gpp-hero-bc-in,.iln-hero-inner,.iln-body,.iln-close-inner,.iln-index-inner,
      .gla-container,.gla-section,.gla-root .gla-member-inner,.mv-in,.gll-sa-cta-in,.gll-sa-in,
      .gllp-wrap,.gllp-hero .gllp-wrap,.jn-in,#gllila .ila-wrap,#ilfa .if-wrap,#gll-fn .fn-inner,
      .gll-art__hero-content,.gll-art__layout,.glh-in,.gls-in,.gls .gls-cards-page,
      .ga-foot,.gd-top-in,
      .gllp2 :is(.gll-section,.gll-scard-head,.gll-scard-body,.gll-scard-footer,.gfq,.gllp2-card.gls-pcard),
      .gllp2 .listing-widget-body-2.gllp2-more > .row > [class*="col-"],.gllp2 .gllp2-sidecard > [class*="col-"],
      body:has(#gll-dir-mark) :is(.glws-section,.glw-section,.locations-slider-widget,.gll-3col-section,.gll-cat-section) > .container,
      body:has(#gll-dir-mark) [data-component="listing-hero"] .gll-editorial-grid
    ):not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){
    padding-left:var(--gll-gutter-phone) !important;padding-right:var(--gll-gutter-phone) !important}

  /* Profile pages: the sections inside carry the gutter (full-bleed rows), so their outer container stays at 0 */
  html:root body .gllp2 > .container.gllp2-wrap:not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){padding-left:0 !important;padding-right:0 !important}
  /* Profile sidebar cards are full-bleed rows (margin 0), but kept the breakout width, so their right edge stopped 24px short */
  html:root body .gll-lw.gllp2 :is(.gll-scard,.gllp2-sidecard):not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){width:auto !important;max-width:none !important}
  /* Homepage hero: the grid is a flex item sized to its content, so on wide phones (~560px+) it shrank and centred */
  html:root body .gll-hero .gll-editorial-grid:not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){width:100% !important;margin-left:0 !important;margin-right:0 !important}
  /* Homepage hero slide control and the listing-hero photo credit sit on the gutter too */
  html:root body .gll-hero > .gsl-hero:not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){left:var(--gll-gutter-phone) !important}
  html:root body section[data-component="listing-hero"]:not(:has(img.gll-hero-col-img)) .gll-hero-credit:not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){right:var(--gll-gutter-phone) !important}
  /* Hero stats row: the first figure starts on the gutter like the headline and search above it */
  html:root body .gll-stats-row:not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){padding-left:0 !important;padding-right:0 !important}
  /* Boxed cards that break out of their column to the screen edges (gll-qoves: 12px from the edge) now stop on the
     gutter. Same weight class as that rule plus one, so the full-bleed variants some pages set still win. */
  html:root body :is(.gll-scard,.gll-section,.gfq-item,.gll-claim-cta,.gll-msg-acard,.gll-msg-points,.gll-link-preview,.gll-3col-card,.gll-cta-card,.gll-ac,.gllr-card,.mv-card,.gh2-col,.gll-map-wrap){
    margin-left:calc(50% - 50vw + var(--gll-gutter-phone)) !important;margin-right:calc(50% - 50vw + var(--gll-gutter-phone)) !important;
    width:calc(100vw - 2 * var(--gll-gutter-phone)) !important;max-width:calc(100vw - 2 * var(--gll-gutter-phone)) !important}

  /* Admin cards (Bootstrap .card in the admin area): 16px inner padding like every other card */
  html:root body.ga-app .ga-main :is(.card-body,.card-header):not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){padding-left:var(--gll-card-pad-phone) !important;padding-right:var(--gll-card-pad-phone) !important}

  /* 2c. Bootstrap grids that carry their own wider gutter: the row's negative margin matches the phone gutter,
         so the cards inside sit on it instead of 2px past the screen edge */
  html:root body .glw-grid:not(#gg1){--bs-gutter-x:calc(var(--gll-gutter-phone) * 2)}

  /* 2d. Boxed cards: 16px inner padding (they now run out to the gutter) */
  html:root body :is(.gh2-col,.gfq-item,.gpp.gpp .gpp-plan,.jn-card,.gll-art__author-box,.grv .grv-sum,.grv .grv-sum.has-cats,.gpc,.gll-claim-cta,.gll-msg-acard,.gll-cta-card,.gll-3col-card,.gllr-card,.mv-card,.gll-sa-stack .gll-sa-card--front,#gll-intro .gll-intro-aside):not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){
    padding-left:var(--gll-card-pad-phone) !important;padding-right:var(--gll-card-pad-phone) !important}
  html:root body .gpp.gpp .gpp-plan .gpp-plan-seal:not(#gg1){margin-left:calc(-1 * var(--gll-card-pad-phone));margin-right:calc(-1 * var(--gll-card-pad-phone))}
  html:root body .gpp.gpp .gpp-plan.is-pop .gpp-plan-seal:not(#gg1){margin-left:calc(1px - var(--gll-card-pad-phone));margin-right:calc(1px - var(--gll-card-pad-phone))}

  /* 3. Carousels: the track's right inset (peek room) matches the gutter */
  html:root body .gir .gsl > .gsl-track:not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){padding-right:var(--gll-gutter-phone) !important}

  /* 4. Header: the burger's bars (not its 12px hit padding) end on the gutter */
  html:root body #sticky-header-nav .navbar-toggler.ms-auto:not(#gg1):not(#gg2):not(#gg3):not(#gg4):not(#gg5){margin-right:-12px !important}
}