/* ==========================================================================
   Friends of Music page - responsive side gutters
   --------------------------------------------------------------------------
   Two of this page's Elementor containers are `e-con-full` with zero side
   padding, so body copy and list items ran edge-to-edge on phones. The rest
   sat at a thin 10px. The footer already uses 20px, so 20px is the house
   value and this brings the page content up to match.

   Written as a FLOOR, not an override: `max(20px, var(--padding-left))` reads
   Elementor's own padding custom property, so any container that already has
   more than 20px keeps what it has, and anything the client sets later in the
   builder above 20px still wins. Padding sits on the container, so sections
   with a background stay full-bleed - only their contents are inset.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The footer's decorative sculpture is offset ~164px past its own <figure>,
   which pushed the DOCUMENT 154px wider than the viewport and put a horizontal
   scrollbar on every laptop-width screen. `clip` (not `hidden`) crops the bleed
   without creating a scroll container, so sticky positioning still works.
   -------------------------------------------------------------------------- */
footer.elementor-location-footer {
  overflow-x: clip;
}

/* The page's containers max out at 1140px, so content still runs to the edge
   well above the tablet breakpoint. Hold the gutter until there is natural
   margin either side. */
@media (max-width: 1200px) {

  .elementor.elementor-1098 > .elementor-element.e-con {
    padding-left:  max(20px, var(--padding-left,  0px));
    padding-right: max(20px, var(--padding-right, 0px));
  }

  /* Boxed containers put their padding on the container and hold an inner
     wrapper at 0; nothing to do there. Full-width containers have no inner
     wrapper, so the rule above is what gives their widgets room. */

  /* Bulleted lists were losing their marker into the new gutter. */
  .elementor.elementor-1098 .elementor-widget-text-editor ul,
  .elementor.elementor-1098 .elementor-widget-text-editor ol {
    padding-left: 1.15em;
    margin-left: 0;
  }

  /* Nothing on the page should be able to push the document sideways. */
  .elementor.elementor-1098 img,
  .elementor.elementor-1098 iframe {
    max-width: 100%;
    height: auto;
  }
}