/*
 * LBF Theme — assets/css/page-mobile-fix.css
 * v31.2.0 — Wave A: mobile responsive fixes for section/content pages
 *
 * Loads on all pages EXCEPT the home page (see inc/enqueue.php).
 * All rules inside @media (max-width: 767px).
 * Additive over section-pages.css and page-specific stylesheets.
 */

@media (max-width: 767px) {


/* ════════════════════════════════════════════════════════════════
   SHARED: Page hero section
════════════════════════════════════════════════════════════════ */

.sp-pg-hero {
  padding: 5rem 1rem 2.5rem !important;
  text-align: center !important;
}
.sp-pg-hero__inner {
  align-items: center !important;
  text-align: center !important;
}
.sp-pg-hero__h {
  font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
  line-height: 1.15 !important;
}
.sp-pg-hero__sub {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}
.sp-pg-hero__btns {
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.sp-pg-hero__stats {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
}
.sp-pg-hero__pills {
  justify-content: center !important;
}


/* ════════════════════════════════════════════════════════════════
   PRIVACY / LEGAL — sp-legal-layout
   Desktop: sticky TOC sidebar (220px) + content
   Mobile: hide TOC, full-width content
════════════════════════════════════════════════════════════════ */

.sp-legal-layout {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.sp-legal-toc {
  display: none !important;
}
.sp-legal-content {
  width: 100% !important;
}
.sp-legal-intro {
  font-size: 0.95rem !important;
}
.sp-legal-section h2 {
  font-size: 1.25rem !important;
}
.sp-legal-section p,
.sp-legal-section ul {
  font-size: 0.9rem !important;
}
.lbf-page-canvas,
.lbf-page-card {
  padding: 1.25rem 1rem !important;
}


/* ════════════════════════════════════════════════════════════════
   APPLICATION PAGES — sp-app-layout
   Used by: vendor, food-vendor, register, sponsor, parade-entry
   Desktop: form col (1fr) + info sidebar (380px)
   Mobile: stack, info sidebar below form
════════════════════════════════════════════════════════════════ */

.sp-app-layout {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.sp-app-form-col { order: 1 !important; }
.sp-app-info     { order: 2 !important; }
.sp-app-form-card {
  padding: 1.25rem !important;
}
.sp-detail-card {
  padding: 0.75rem !important;
}


/* ════════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUTS — sp-pg-two-col, sp-donate-layout
   Desktop: content (1fr) + sidebar (400-420px)
   Mobile: stack single column
════════════════════════════════════════════════════════════════ */

.sp-pg-two-col {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.sp-donate-layout {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.sp-amt-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
}


/* ════════════════════════════════════════════════════════════════
   CONTACT GRID — sp-contact-grid
   Desktop: 1fr 1fr
   Mobile: 1 col
════════════════════════════════════════════════════════════════ */

.sp-contact-grid {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.sp-info-cards {
  grid-template-columns: 1fr !important;
}


/* ════════════════════════════════════════════════════════════════
   SCHEDULE PAGE — sp-sched-row
   Desktop: time + icon + body grid
   Mobile: simplified 2-col
════════════════════════════════════════════════════════════════ */

.sp-sched-row {
  grid-template-columns: 80px 1fr !important;
  gap: 0.75rem !important;
  padding: 0.75rem !important;
}
.sp-sched-time {
  font-size: 0.8rem !important;
}
.sp-sched-icon { display: none !important; }
.sp-sched-body h3 { font-size: 0.95rem !important; }


/* ════════════════════════════════════════════════════════════════
   ENTERTAINMENT PAGE — performer cards
   Desktop: grid with 2-3 columns
   Mobile: single column
════════════════════════════════════════════════════════════════ */

.lbf-ent-grid,
.lbf-performer-grid {
  grid-template-columns: 1fr !important;
}
.lbf-card {
  width: 100% !important;
}
/* Performer modal — full screen on mobile */
.lbf-modal-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
}


/* ════════════════════════════════════════════════════════════════
   ATTRACTIONS PAGE
   Desktop: card grid (repeat auto-fill 280px)
   Mobile: already uses auto-fill minmax so should be 1-col.
   Just ensure proper padding and card sizing.
════════════════════════════════════════════════════════════════ */

.sp-attr-grid {
  grid-template-columns: 1fr !important;
  gap: 0.875rem !important;
}
.lbf-attr-controls {
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}
.lbf-attr-filter-btn {
  font-size: 0.8rem !important;
  padding: 0.4rem 0.875rem !important;
}


/* ════════════════════════════════════════════════════════════════
   SPONSORS PAGE (sponsors-v2)
   Desktop: sponsor tier grids, package cards
   Mobile: stack, horizontal scroll for logo rows
════════════════════════════════════════════════════════════════ */

.sv2-canvas {
  padding: 0 0.75rem !important;
}
.sv2-tier-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 0.625rem !important;
  padding-bottom: 0.5rem !important;
}
.sv2-tier-row::-webkit-scrollbar { display: none !important; }
.sv2-sp {
  flex: 0 0 120px !important;
  min-width: 120px !important;
}
.sv2-pkg-grid {
  grid-template-columns: 1fr !important;
}
.sv2-btn {
  width: 100% !important;
  justify-content: center !important;
}


/* ════════════════════════════════════════════════════════════════
   ABOUT PAGE — timeline
   Desktop: alternating left/right milestone layout
   Mobile: linear single column
════════════════════════════════════════════════════════════════ */

.abt-timeline {
  padding-left: 1.25rem !important;
}
.abt-mile {
  flex-direction: column !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.abt-mile--left,
.abt-mile--right {
  flex-direction: column !important;
}
.abt-mile__card {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.abt-mile__dot {
  left: -1.25rem !important;
}


/* ════════════════════════════════════════════════════════════════
   FAQ PAGE
   Desktop: accordion sections in columns or with large gaps
   Mobile: single column, comfortable spacing
════════════════════════════════════════════════════════════════ */

.lbf-faq-v3-accordion-wrap {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}
.lbf-faq-v3-anchor {
  padding: 0.875rem 1rem !important;
}


/* ════════════════════════════════════════════════════════════════
   SHARED: CTA band / footer CTA
════════════════════════════════════════════════════════════════ */

.sp-cta-band__inner {
  flex-direction: column !important;
  text-align: center !important;
  gap: 1rem !important;
}
.sp-cta-band__btns {
  flex-direction: column !important;
  width: 100% !important;
}
.sp-cta-band__btns a,
.sp-cta-band__btns button {
  width: 100% !important;
  justify-content: center !important;
}


/* ════════════════════════════════════════════════════════════════
   SHARED: section-pages.css container / canvas
════════════════════════════════════════════════════════════════ */

.container {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
.sec-h {
  font-size: clamp(1.5rem, 6vw, 2rem) !important;
}


/* ════════════════════════════════════════════════════════════════
   SHARED: Button full-width on mobile for paired CTA buttons
════════════════════════════════════════════════════════════════ */

.btn.btn-full {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Paired buttons (ghost + solid) — stack */
.sp-pg-hero__btns .btn,
.sp-cta-pair .btn {
  width: 100% !important;
  justify-content: center !important;
}


/* ════════════════════════════════════════════════════════════════
   BUSINESS VENDOR / FOOD VENDOR FORM TEMPLATE
   lbf-form-template--business-vendor (and food-vendor variant)
════════════════════════════════════════════════════════════════ */

.lbf-form-template--business-vendor,
.lbf-form-template--food-vendor {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
}
.lbf-form-template--business-vendor .lbf-form-template__hero,
.lbf-form-template--food-vendor .lbf-form-template__hero {
  grid-template-columns: 1fr !important;
  padding: 1.5rem 1.25rem !important;
  min-height: 0 !important;
  gap: 1.25rem !important;
}
.lbf-form-template--business-vendor .lbf-form-template__hero h1,
.lbf-form-template--food-vendor .lbf-form-template__hero h1 {
  font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  line-height: 1.05 !important;
  margin: 0.5rem 0 !important;
  max-width: none !important;
}
.lbf-form-template--business-vendor .lbf-form-template__hero p,
.lbf-form-template--food-vendor .lbf-form-template__hero p {
  font-size: 0.9rem !important;
  max-width: none !important;
}
.lbf-form-template--business-vendor .lbf-form-template__facts,
.lbf-form-template--food-vendor .lbf-form-template__facts {
  max-width: none !important;
  width: 100% !important;
  justify-self: stretch !important;
}
.lbf-form-template--business-vendor .lbf-form-template__body,
.lbf-form-template--food-vendor .lbf-form-template__body {
  padding: 0.75rem 0.625rem 1.25rem !important;
  border-radius: 0 0 20px 20px !important;
}
.lbf-form-template--business-vendor .lbf-form-template__step,
.lbf-form-template--food-vendor .lbf-form-template__step {
  margin: 0 0 0.75rem !important;
  padding: 1rem 0.875rem !important;
  border-radius: 18px !important;
  grid-template-columns: 28px minmax(0,1fr) !important;
  gap: 0.625rem !important;
  transform: none !important;
}
.lbf-form-template--business-vendor .lbf-form-template__step:hover,
.lbf-form-template--food-vendor .lbf-form-template__step:hover {
  transform: none !important;
}
.lbf-form-template--business-vendor .lbf-form-template__step h2,
.lbf-form-template--food-vendor .lbf-form-template__step h2 {
  font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
}
.lbf-form-template--business-vendor .lbf-form-template__grid,
.lbf-form-template--food-vendor .lbf-form-template__grid,
.lbf-form-template--business-vendor .lbf-form-template__grid--3,
.lbf-form-template--food-vendor .lbf-form-template__grid--3,
.lbf-form-template--business-vendor .lbf-form-template__grid--4,
.lbf-form-template--food-vendor .lbf-form-template__grid--4 {
  grid-template-columns: 1fr !important;
  gap: 0.625rem !important;
}
.lbf-form-template--business-vendor .lbf-form-template__choice-grid,
.lbf-form-template--food-vendor .lbf-form-template__choice-grid {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}
.lbf-form-template--business-vendor input[type="text"],
.lbf-form-template--business-vendor input[type="email"],
.lbf-form-template--business-vendor input[type="tel"],
.lbf-form-template--business-vendor input[type="number"],
.lbf-form-template--business-vendor input[type="date"],
.lbf-form-template--business-vendor select,
.lbf-form-template--business-vendor textarea,
.lbf-form-template--food-vendor input[type="text"],
.lbf-form-template--food-vendor input[type="email"],
.lbf-form-template--food-vendor input[type="tel"],
.lbf-form-template--food-vendor input[type="number"],
.lbf-form-template--food-vendor input[type="date"],
.lbf-form-template--food-vendor select,
.lbf-form-template--food-vendor textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
}
.lbf-form-template--business-vendor .lbf-form-template__price-grid,
.lbf-form-template--food-vendor .lbf-form-template__price-grid {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}
.lbf-form-template--business-vendor .lbf-form-template__fee-row,
.lbf-form-template--food-vendor .lbf-form-template__fee-row {
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  padding: 0.625rem 0.75rem !important;
}
/* Fix label text wrapping mid-word in narrow fee row */
.lbf-form-template--business-vendor .lbf-form-template__fee-row > span,
.lbf-form-template--food-vendor .lbf-form-template__fee-row > span,
.lbf-form-template--business-vendor .lbf-form-template__fee-row > div:first-child,
.lbf-form-template--food-vendor .lbf-form-template__fee-row > div:first-child {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
}
/* Stack quantity + price together on the right */
.lbf-form-template--business-vendor .lbf-form-template__fee-row input[type="number"],
.lbf-form-template--food-vendor .lbf-form-template__fee-row input[type="number"] {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  font-size: 15px !important;
}
.lbf-form-template--business-vendor .lbf-form-template__total-band strong,
.lbf-form-template--food-vendor .lbf-form-template__total-band strong {
  font-size: 2rem !important;
}
.lbf-form-template--business-vendor .lbf-food-submit-parade-options,
.lbf-form-template--food-vendor .lbf-food-submit-parade-options {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
}
.lbf-form-template--business-vendor .lbf-form-template__step--submit .lbf-form-template__submit-panel,
.lbf-form-template--food-vendor .lbf-form-template__step--submit .lbf-form-template__submit-panel,
.lbf-form-template--business-vendor .lbf-food-submit-parade-panel,
.lbf-form-template--food-vendor .lbf-food-submit-parade-panel {
  grid-template-columns: 1fr !important;
  padding: 1rem !important;
  border-radius: 16px !important;
}
.lbf-form-template--business-vendor .lbf-food-submit-parade-head,
.lbf-form-template--food-vendor .lbf-food-submit-parade-head {
  grid-template-columns: 36px minmax(0,1fr) !important;
  gap: 0.5rem !important;
}
.lbf-form-template--business-vendor .lbf-food-submit-parade-pill,
.lbf-form-template--food-vendor .lbf-food-submit-parade-pill {
  display: none !important;
}
.lbf-form-template--business-vendor .lbf-food-submit-ready-row,
.lbf-form-template--food-vendor .lbf-food-submit-ready-row {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}
.lbf-form-template--business-vendor .lbf-food-submit-ready-row .lbf-form-template__button,
.lbf-form-template--food-vendor .lbf-food-submit-ready-row .lbf-form-template__button {
  min-width: 0 !important;
  width: 100% !important;
}
.lbf-form-template--business-vendor .lbf-form-template__submit-total strong,
.lbf-form-template--food-vendor .lbf-form-template__submit-total strong {
  font-size: 2rem !important;
}
.lbf-form-template--business-vendor .lbf-form-template__submit-card,
.lbf-form-template--food-vendor .lbf-form-template__submit-card {
  min-width: 0 !important;
  width: 100% !important;
}
.lbf-form-template--business-vendor .lbf-form-template__submit-card .lbf-form-template__button,
.lbf-form-template--food-vendor .lbf-form-template__submit-card .lbf-form-template__button {
  min-width: 0 !important;
  width: 100% !important;
}
.lbf-form-template--business-vendor .lbf-form-template__deadline-band,
.lbf-form-template--food-vendor .lbf-form-template__deadline-band {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}
.lbf-form-template--business-vendor .lbf-form-template__document-card,
.lbf-form-template--food-vendor .lbf-form-template__document-card {
  grid-template-columns: 1fr !important;
}
.lbf-form-template--business-vendor .lbf-form-template__shortcut,
.lbf-form-template--food-vendor .lbf-form-template__shortcut {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}
.lbf-form-template--business-vendor .lbf-form-template__shortcut .lbf-form-template__button,
.lbf-form-template--food-vendor .lbf-form-template__shortcut .lbf-form-template__button {
  width: 100% !important;
  min-width: 0 !important;
}
.lbf-business-vendor-gf-bridge {
  padding: 1rem !important;
  border-radius: 16px !important;
  margin: 1rem 0 0 !important;
}
.lbf-business-vendor-gf-bridge .gform_ppcp_smart_payment_buttons {
  max-width: 100% !important;
}
/* "Before submitting:" notice — stack label and text */
.lbf-business-vendor-gf-bridge__status,
.lbf-form-template--business-vendor .lbf-form-template__notice,
.lbf-form-template--food-vendor .lbf-form-template__notice {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.375rem !important;
  font-size: 0.8rem !important;
}
.lbf-business-vendor-gf-bridge__status strong,
.lbf-form-template--business-vendor .lbf-form-template__notice strong,
.lbf-form-template--food-vendor .lbf-form-template__notice strong {
  white-space: normal !important;
  word-break: normal !important;
}


/* ════════════════════════════════════════════════════════════════
   GENERAL IMAGE SAFETY
   Exclude nav logo — it has its own height rule in lbf-nav-v2.css
   which our height: auto would override and break.
════════════════════════════════════════════════════════════════ */

img:not(.custom-logo):not(.lbf-nav-logo) {
  max-width: 100% !important;
  height: auto !important;
}


/* ════════════════════════════════════════════════════════════════
   GRAVITY FORMS — mobile layout
   All application pages use Gravity Forms. On mobile:
   - Multi-column field rows stack to single column
   - Inputs are full width with proper font-size (16px prevents zoom)
   - Payment/product fields readable
   - Submit button full width
════════════════════════════════════════════════════════════════ */

.gform_wrapper .gform_fields {
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
}
.gform_wrapper .gfield {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 16px !important;    /* prevents iOS auto-zoom */
  padding: 0.625rem 0.875rem !important;
  border-radius: 8px !important;
}
.gform_wrapper textarea {
  min-height: 100px !important;
}
/* Checkboxes and radio buttons — stack vertically */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
/* Product/payment fields */
.gform_wrapper .ginput_product_price,
.gform_wrapper .ginput_quantity {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Choice-based product fields (checkboxes with prices) */
.gform_wrapper .gfield_price {
  flex-wrap: wrap !important;
}
/* Submit button */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  padding: 0 !important;
  margin-top: 1rem !important;
}
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
  width: 100% !important;
  padding: 0.875rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}
/* Amount/pricing grid in vendor forms */
.gform_wrapper .ginput_container_total,
.gform_wrapper .gf_progressbar_wrapper {
  width: 100% !important;
}
/* Multi-column layout inside gforms */
.gform_wrapper .gform_body .gfield--width-half,
.gform_wrapper .gform_body .gfield--width-quarter,
.gform_wrapper .gform_body .gfield--width-third {
  grid-column: 1 / -1 !important;
}
/* PayPal / payment section */
.gform_wrapper .gform_payment_summary {
  width: 100% !important;
  overflow-x: auto !important;
}
.gform_wrapper .gform_payment_summary table {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.875rem !important;
}


/* ════════════════════════════════════════════════════════════════
   BASE lbf-form-template (Parade form, non-vendor forms)
   The parade-style-public-form-template-v506.css has 640px rules
   but the hero grid (1.35fr / 300px) still needs mobile fix.
════════════════════════════════════════════════════════════════ */

.lbf-form-template {
  width: min(100%, calc(100vw - 16px)) !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
}
.lbf-form-template__hero {
  grid-template-columns: 1fr !important;
  padding: 1.5rem 1.25rem !important;
  min-height: 0 !important;
  gap: 1rem !important;
}
.lbf-form-template__hero h1 {
  font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  max-width: none !important;
}
.lbf-form-template__facts {
  max-width: none !important;
  width: 100% !important;
}
.lbf-form-template__body {
  padding: 0.75rem 0.625rem 1.25rem !important;
}
.lbf-form-template__grid,
.lbf-form-template__grid--3,
.lbf-form-template__grid--4 {
  grid-template-columns: 1fr !important;
  gap: 0.625rem !important;
}
.lbf-form-template__step {
  margin: 0 0 0.75rem !important;
  padding: 1rem !important;
  border-radius: 18px !important;
  grid-template-columns: 28px minmax(0,1fr) !important;
  gap: 0.625rem !important;
}
.lbf-form-template__submit {
  grid-template-columns: 1fr !important;
}
.lbf-form-template__fee-row {
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 0.5rem !important;
}
.lbf-form-template__shortcut {
  flex-direction: column !important;
  gap: 0.75rem !important;
}


/* ════════════════════════════════════════════════════════════════
   SUNDAY FUNDAY PARADE FORM (lbf-sfp- prefix)
   Already has 760px rules but some grids still break at 390px.
════════════════════════════════════════════════════════════════ */

.lbf-sfp-shell {
  width: min(100%, calc(100vw - 16px)) !important;
  margin: 0 auto !important;
}
.lbf-sfp-hero {
  grid-template-columns: 1fr !important;
  padding: 1.5rem 1.25rem !important;
}
.lbf-sfp-hero h1 {
  font-size: clamp(2rem, 9vw, 3rem) !important;
}
.lbf-sfp-options {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.625rem !important;
}
.lbf-sfp-donation-options {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0.5rem !important;
}
.lbf-sfp-card,
.lbf-sfp-submit-card {
  padding: 1rem !important;
  border-radius: 18px !important;
}
.lbf-sfp-address-grid {
  grid-template-columns: 1fr !important;
}
.lbf-sfp-paypal-bridge {
  padding: 1rem !important;
  border-radius: 16px !important;
}


/* ════════════════════════════════════════════════════════════════
   SPONSORS-V2 PAGE — tier logo rows → horizontal scroll
   The sponsors-v2.css has 700px rules converting 4-col grids to
   2-col. On phones (390px) logos in 2-col grids are still too big.
   Convert to horizontal scroll strips matching home page behavior.
════════════════════════════════════════════════════════════════ */

body.lbf-sponsors-v2-page .sv2-tier-logos {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  gap: 0.625rem !important;
  padding: 0.25rem 0 0.5rem !important;
}
body.lbf-sponsors-v2-page .sv2-tier-logos::-webkit-scrollbar {
  display: none !important;
}
body.lbf-sponsors-v2-page .sv2-sp {
  flex: 0 0 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  height: 64px !important;
  scroll-snap-align: start !important;
}
body.lbf-sponsors-v2-page .sv2-sp img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
/* Two-col header grid → stack */
body.lbf-sponsors-v2-page .sv2-hero-grid {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
/* Package cards — 1 col */
body.lbf-sponsors-v2-page .sv2-pkg-grid,
body.lbf-sponsors-v2-page .sv2-packages-grid {
  grid-template-columns: 1fr !important;
}
/* Buttons */
body.lbf-sponsors-v2-page .sv2-btn {
  width: 100% !important;
  justify-content: center !important;
}


/* ════════════════════════════════════════════════════════════════
   CAR SHOW PAGE — remaining grids at phone width
   car-show-page-v2.css has 900px rules but some 2-col grids
   (cs-cca, cs-awards-layout, cs-split) only collapse at 1000px.
   The 700px media query handles most cases.
════════════════════════════════════════════════════════════════ */

/* Shell: reduce border-radius so content isn't clipped by corners */
.lbf-car-show-page .cs-shell {
  border-radius: 1rem !important;
  padding: 0.5rem !important;
}
/* Hero inner: ensure proper padding inside the rounded shell */
.lbf-car-show-page .cs-hero {
  border-radius: 1rem !important;
}
/* v31.2.7 — hero overflow fix.
   Base CSS gives .cs-hero-feature and .cs-hero-dashboard width:min(90vw,440px),
   which inflates the grid track wider than the inner's padded content area
   and pushes everything (paragraph, buttons, image) past the right edge of
   the dark card. min-width:0 on the inner and its children lets grid items
   shrink below their intrinsic widths, and max-width:100% caps the offenders.
*/
.lbf-car-show-page .cs-hero-inner {
  padding: 1.5rem 1.25rem !important;
  min-width: 0 !important;
}
.lbf-car-show-page .cs-hero-inner > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.lbf-car-show-page .cs-cca {
  grid-template-columns: 1fr !important;
}
.lbf-car-show-page .cs-cca-copy {
  padding: 1.5rem 1.25rem !important;
}
.lbf-car-show-page .cs-cca-visual {
  display: none !important;
}
.lbf-car-show-page .cs-winners-layout {
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}
.lbf-car-show-page .cs-winner-thumbs {
  grid-template-rows: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.lbf-car-show-page .cs-split {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.lbf-car-show-page .cs-judging {
  position: static !important;
}
/* Override the 600px 1-col rule — keep 2x2 on phones */
.lbf-car-show-page .cs-stats {
  grid-template-columns: repeat(2, 1fr) !important;
  padding: 1rem !important;
}
.lbf-car-show-page .cs-stat:not(:last-child)::after {
  display: none !important;
}
/* Classes grid — 2-col */
.lbf-car-show-page .cs-classes-grid {
  grid-template-columns: 1fr 1fr !important;
}
/* v31.2.7 — hero CTAs: base CSS at line 87 targets .cs-hero-ctas .btn
   for the column-stack rule, but the template uses .cs-hero-btn. The pills
   stay inline-flex and exceed the container width. Force full-width column. */
.lbf-car-show-page .cs-hero-ctas {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0.75rem !important;
}
.lbf-car-show-page .cs-hero-ctas .cs-hero-btn {
  width: 100% !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
/* v31.2.7 — feature card and dashboard: kill the width:min(90vw,440px) +
   auto-margin combo from base. They now fit the inner's padded width. */
.lbf-car-show-page .cs-hero-feature {
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.5rem 0 0 !important;
}
.lbf-car-show-page .cs-hero-dashboard {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.85rem 0 0 !important;
}


/* ════════════════════════════════════════════════════════════════
   WAVE B — PAGEANT CLUSTER (v31.2.8)
   Templates: page-template-pageant-overview.php,
              page-template-pageant-journey.php,
              page-template-contestant-guide.php,
              page-template-2026-contestants.php,
              page-template-pageant-application-form.php
   All five use the .lbfpg-* class family from pageant-v4-pages.css.
   That stylesheet is mobile-first; its existing @media (max-width:767px)
   block already collapses the main grids. This block tightens type,
   padding, and the few spots base CSS leaves too large for phone.
   Note: page-pageant.php is NOT touched here — it uses .lbf-pag25-*
   classes covered by home-mobile-fix.css.
════════════════════════════════════════════════════════════════ */

/* Hero — every pageant template starts with .lbfpg-hero */
.lbfpg-hero__grid {
  padding: 1.5rem 1rem 2rem !important;
  gap: 1.25rem !important;
}
.lbfpg-hero--compact .lbfpg-hero__grid {
  padding: 1.5rem 1rem 1.75rem !important;
}
.lbfpg-hero__title,
.lbfpg-hero--compact .lbfpg-hero__title,
.lbfpg-hero--overview-exact .lbfpg-hero__title {
  font-size: 1.85rem !important;
  line-height: 1.05 !important;
  margin-top: 0.75rem !important;
}
.lbfpg-hero__desc,
.lbfpg-hero--compact .lbfpg-hero__desc,
.lbfpg-hero--overview-exact .lbfpg-hero__desc {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin-top: 0.75rem !important;
  max-width: 100% !important;
}
.lbfpg-hero__chips,
.lbfpg-hero--overview-exact .lbfpg-hero__chips {
  gap: 0.4rem !important;
  margin-top: 1rem !important;
  margin-bottom: 0.25rem !important;
}
/* Overview hero's 3-up action grid: keep 3-col layout but shrink for phone */
.lbfpg-hero--overview-exact .lbfpg-hero__actions {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.4rem !important;
  margin-top: 1.25rem !important;
  max-width: 100% !important;
}
.lbfpg-hero--overview-exact .lbfpg-btn {
  padding: 0.55rem 0.4rem !important;
  font-size: 0.7rem !important;
  min-height: 42px !important;
  border-radius: 0.7rem !important;
  line-height: 1.1 !important;
}

/* Editorial title (used on journey, guide, 2026 contestants).
   Base @media 767 rule sets 1.45rem — let the span subtitle stack tightly. */
.lbfpg-editorial-title span {
  font-size: 0.7em !important;
  margin-top: 0.25rem !important;
}

/* Overview highlights — base min-height:170px is overkill stacked */
.lbfpg-overview-highlights .lbfpg-highlight,
.lbfpg-highlight {
  min-height: auto !important;
  padding: 0.875rem 1rem !important;
}

/* Timeline (journey page) — tighten card padding + step circle */
.lbfpg-timeline__item {
  padding: 0.875rem !important;
  gap: 0.75rem !important;
  border-radius: 1.1rem !important;
}
.lbfpg-timeline__num {
  width: 2.1rem !important;
  height: 2.1rem !important;
  font-size: 11px !important;
}

/* Tables (contestant guide packing + judging) — base already collapses
   to 1-col at 767. Tighten cell padding so text breathes. */
.lbfpg-table__head,
.lbfpg-table__row {
  padding: 0.75rem 0.875rem !important;
}
.lbfpg-table__headgrid,
.lbfpg-table__row {
  gap: 0.625rem !important;
}

/* Modal (contestant profiles on 2026 contestants page) — full-bleed feel */
.lbfpg-modal {
  padding: 0.5rem !important;
}
.lbfpg-modal__copy {
  padding: 1rem !important;
}
.lbfpg-modal__title {
  font-size: 1.5rem !important;
}
.lbfpg-modal__thumbs {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.4rem !important;
  padding: 0.5rem !important;
}
.lbfpg-modal__thumb img {
  height: 4rem !important;
}

/* Filter board (2026 contestants page) */
.lbfpg-board {
  padding: 0.75rem !important;
}
.lbfpg-board__title {
  font-size: 0.95rem !important;
}

/* Roster rail (2026 contestants page) — copy + mini cards full-width */
.lbfpg-roster__title {
  font-size: 1.5rem !important;
}
.lbfpg-roster__copy,
.lbfpg-roster__mini {
  max-width: 100% !important;
}

/* Application form host — inherits global GF mobile treatment above */
.lbfpg-app-form-host {
  padding: 0 !important;
}
.lbfpg-app-form-page .lbfpg-shell {
  padding: 0.875rem !important;
}


/* ════════════════════════════════════════════════════════════════
   WAVE C — REMAINING FORMS (v31.2.9)
   Templates: page-register.php, page-sponsor.php, page-parade-entry.php,
              page-volunteer.php, page-waiver.php

   Coverage status:
   - page-sponsor.php + page-parade-entry.php: hero uses .sp-pg-hero
     (already covered in Wave A above), post-hero uses .sp-app-layout
     (already covered above). NO new rules needed.
   - page-register.php: register-page.css is fully mobile-first
     (every @media is min-width). Already responsive by design.
     Only adding a light belt-and-suspenders rule for hero overflow.
   - page-volunteer.php and page-waiver.php: each has its own inline
     <style> block with @media (max-width: 980px/640px/560px) rules.
     The inline rules don't use !important so external !important wins
     by cascade. This block tightens the hero padding, ensures CTA
     buttons stack full-width, and constrains the form shell on phone.
════════════════════════════════════════════════════════════════ */

/* ── Register page hero overflow safety ── */
.lbf-reg-hero-copy {
  max-width: 100% !important;
  right: 6% !important;
}
.lbf-reg-hero-btns {
  width: 100% !important;
}
.lbf-reg-hero-btns > a {
  flex: 1 1 auto !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ── Volunteer page ── */
.lbf-vol-hero {
  padding: 3.5rem 0 3rem !important;
}
.lbf-vol-hero-inner {
  padding: 0 1rem !important;
  gap: 1.5rem !important;
}
.lbf-vol-h {
  font-size: 2rem !important;
  line-height: 1.05 !important;
}
.lbf-vol-eyebrow {
  margin-bottom: 0.875rem !important;
  font-size: 0.65rem !important;
}
.lbf-vol-btns,
.lbf-vol-cta-btns {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0.625rem !important;
}
.lbf-vol-btns > a,
.lbf-vol-cta-btns > a {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.lbf-vol-cta-band {
  padding: 2.5rem 1rem !important;
}
.lbf-vol-cta-inner {
  padding: 0 !important;
}
.lbf-vol-cta-h {
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}
.lbf-vol-form-shell {
  padding: 1rem 0.875rem !important;
}

/* ── Waiver page (parallel to volunteer structure) ── */
.lbf-wv-hero {
  padding: 3.5rem 0 3rem !important;
}
.lbf-wv-hero-inner {
  padding: 0 1rem !important;
  gap: 1.5rem !important;
}
.lbf-wv-h {
  font-size: 2rem !important;
  line-height: 1.05 !important;
}
.lbf-wv-eyebrow {
  margin-bottom: 0.875rem !important;
  font-size: 0.65rem !important;
}
.lbf-wv-btns,
.lbf-wv-cta-btns {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0.625rem !important;
}
.lbf-wv-btns > a,
.lbf-wv-cta-btns > a {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.lbf-wv-cta-band {
  padding: 2.5rem 1rem !important;
}
.lbf-wv-cta-inner {
  padding: 0 !important;
}
.lbf-wv-cta-h {
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}
.lbf-wv-form-shell {
  padding: 1rem 0.875rem !important;
}
.lbf-wv-agreement-strip {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.625rem !important;
  text-align: center !important;
}


/* ════════════════════════════════════════════════════════════════
   WAVE D — SPONSOR SINGLES (v31.2.10)
   Templates: page-sponsors.php (.spn-* family),
              page-sponsors-v2.php (.sv2-* family),
              page-sponsorship-packet.php (.sp-pg-hero + .sp-packet-*)

   Coverage status:
   - sponsors.css is mobile-first (all @media use min-width). Base
     phone styles already present. Adding defensive padding + button
     stacking only.
   - sponsors-v2.css has its own max-width breakpoints (900/700/480px)
     and Wave A added the tier-row horizontal scroll + pkg-grid stack
     + btn full-width rules. This block extends to hero, funds list,
     and stickybar.
   - sponsorship-packet uses .sp-pg-hero (Wave A) and section-pages.css
     already collapses .sp-packet-grid to 1-col at 1023px. Adding
     gap + padding tightening only.
════════════════════════════════════════════════════════════════ */

/* ── Sponsors page (.spn-*) ── */
.spn-canvas {
  padding: 0 0.75rem !important;
}
.spn-outer-shell {
  padding: 0.75rem !important;
}
.spn-hero-inner {
  padding: 1.5rem 1rem 2rem !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.spn-hero-benefits {
  grid-template-columns: 1fr !important;
}
/* Featured-sponsor showcase: collapse 2-col panel layout */
.spn-fp-panels {
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  padding: 1rem !important;
}
.spn-fp-shell {
  margin-top: 0 !important;
}
.spn-fp-shell .spn-sec-hd {
  padding: 1.5rem 1rem 1rem !important;
}
.spn-fp-bar {
  padding: 1rem !important;
  flex-wrap: wrap !important;
  gap: 0.625rem !important;
}
/* Sponsor buttons (.spn-btn family) full-width column where they appear */
.spn-hero-inner .spn-btn,
.spn-fp-bar .spn-btn {
  width: auto !important;
}

/* ── Sponsors v2 (.sv2-*) — extends Wave A coverage ── */
.sv2-hero-inner {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  padding: 1.5rem 1rem 2rem !important;
}
.sv2-hero-h1 {
  font-size: 2rem !important;
  line-height: 1.05 !important;
}
.sv2-hero-sub {
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}
.sv2-hero-ctas {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0.625rem !important;
}
.sv2-hero-ctas > a,
.sv2-hero-ctas > .sv2-btn {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.sv2-hero-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.sv2-funds-inner {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  padding: 1.5rem 1rem !important;
}
.sv2-funds-list {
  gap: 0.75rem !important;
}
.sv2-funds-item {
  padding: 0.875rem !important;
}
/* Stickybar — stack copy + CTAs vertically on phone */
.sv2-stickybar-inner {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.625rem !important;
  padding: 0.75rem !important;
}
.sv2-stickybar-ctas {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  width: 100% !important;
}
.sv2-stickybar-ctas > a {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ── Sponsorship-packet (.sp-packet-* / .sp-benefit-* / .sp-demo-*) ── */
.sp-packet-grid {
  gap: 1.5rem !important;
}
.sp-demo-list,
.sp-benefit-list {
  gap: 0.625rem !important;
  margin-bottom: 1.25rem !important;
}
.sp-demo-row,
.sp-benefit-row {
  padding: 0.75rem !important;
  gap: 0.625rem !important;
  align-items: flex-start !important;
}
.sp-demo-icon,
.sp-benefit-icon {
  flex-shrink: 0 !important;
}
.sp-packet-download-banner {
  padding: 1rem !important;
  gap: 0.625rem !important;
  text-align: center !important;
  align-items: center !important;
}


/* ════════════════════════════════════════════════════════════════
   WAVE E — REMAINING ONE-OFFS (v31.2.11)
   Templates: page-fireworks.php (.fw-*),
              page-merchandise.php (.lbf-merch-* + .sp-pg-hero),
              page-memories.php (.mem2-*),
              page-press.php (.sp-pg-hero + .sp-app-layout — Wave A covered),
              page-map.php (.lbf-map-* — Wave C twin),
              page-accessibility.php (.lbf-a11y-* — Wave C twin)

   Coverage status:
   - Press: no new rules (uses .sp-pg-hero + .sp-app-layout, both Wave A).
   - Map + accessibility: structural clones of volunteer/waiver. Apply
     the same hero/btns/CTA-band/form-shell pattern as Wave C.
   - Fireworks: inline <style id="lbf-fw-css"> has 600px and 480px
     breakpoints. Adding belt-and-suspenders for hero padding and
     guide grid full-width.
   - Merchandise: inline grid is mobile-first (420px → 1-col).
     Adding filter row + hero tightening.
   - Memories: section-pages.css mem2 grids are mobile-first
     (3 → 4 @640 → 5 @900). Hero needs tightening.
════════════════════════════════════════════════════════════════ */

/* ── Map page (.lbf-map-*) — Wave C twin ── */
.lbf-map-hero {
  padding: 3.5rem 0 3rem !important;
}
.lbf-map-hero-inner {
  padding: 0 1rem !important;
  gap: 1.5rem !important;
}
.lbf-map-h {
  font-size: 2rem !important;
  line-height: 1.05 !important;
}
.lbf-map-eyebrow {
  margin-bottom: 0.875rem !important;
  font-size: 0.65rem !important;
}
.lbf-map-btns,
.lbf-map-cta-btns {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0.625rem !important;
}
.lbf-map-btns > a,
.lbf-map-cta-btns > a {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.lbf-map-cta-band {
  padding: 2.5rem 1rem !important;
}
.lbf-map-cta-inner {
  padding: 0 !important;
}
.lbf-map-cta-h {
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}

/* ── Accessibility page (.lbf-a11y-*) — Wave C twin ── */
.lbf-a11y-hero {
  padding: 3.5rem 0 3rem !important;
}
.lbf-a11y-hero-inner {
  padding: 0 1rem !important;
  gap: 1.5rem !important;
}
.lbf-a11y-h {
  font-size: 2rem !important;
  line-height: 1.05 !important;
}
.lbf-a11y-eyebrow {
  margin-bottom: 0.875rem !important;
  font-size: 0.65rem !important;
}
.lbf-a11y-btns,
.lbf-a11y-cta-btns {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0.625rem !important;
}
.lbf-a11y-btns > a,
.lbf-a11y-cta-btns > a {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.lbf-a11y-cta-band {
  padding: 2.5rem 1rem !important;
}
.lbf-a11y-cta-inner {
  padding: 0 !important;
}
.lbf-a11y-cta-h {
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}
.lbf-a11y-feature-card {
  padding: 1rem !important;
}

/* ── Fireworks page (.fw-*) ── */
.fw-canvas {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.fw-close {
  padding: 1.5rem 1rem !important;
}
.fw-close__h {
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}
.fw-close__big,
.fw-cd__big {
  font-size: 2.25rem !important;
}
.fw-card {
  padding: 1rem !important;
}
.fw-encore {
  padding: 1.5rem 1rem !important;
}
.fw-guide__grid {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

/* ── Merchandise page (.lbf-merch-*) ── */
.lbf-merch-filter {
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  justify-content: center !important;
}
.lbf-merch-full-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
}
.lbf-merch-card {
  font-size: 0.875rem !important;
}
.lbf-merch-card__body {
  padding: 0.75rem !important;
}
.lbf-merch-card__name {
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
}
.lbf-merch-card__cta {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ── Memories page (.mem2-*) ── */
.mem2-hero {
  padding: 3rem 1rem 2.5rem !important;
}
.mem2-hero__h {
  font-size: 2rem !important;
  line-height: 1.05 !important;
}
.mem2-hero__sub {
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}
.mem2-stats {
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  justify-content: center !important;
}
.mem2-stat__n {
  font-size: 1.5rem !important;
}
.mem2-feat-vid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 1.25rem !important;
}
.mem2-show-more {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}


} /* end @media (max-width: 767px) */


/* ════════════════════════════════════════════════════════════
   ENTERTAINMENT HERO — sponsor "Presented By" block (v32.0.17)
   The .lbf-bs-block grid uses grid-template-columns:max-content and
   the Brightspeed logo is width:100%, so the column blows out to the
   SVG's intrinsic width on small screens — overflowing the hero and
   pushing the layout sideways. Cap the block and logo to a phone-safe
   width. Loaded after section-pages.css; uses a body-scoped selector +
   !important to win over the inline <style> later in the document. */
@media (max-width: 767px) {
  body .lbf-bs-block {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-items: start !important;
  }
  body .lbf-bs-logo {
    width: auto !important;
    max-width: 180px !important;
    height: auto !important;
  }
  /* Make sure the hero text column itself can't be forced wider than
     the viewport by any max-content child. */
  body .lbf-hero-left {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}


/* ════════════════════════════════════════════════════════════
   GLOBAL MOBILE OVERFLOW GUARD — non-home pages (v32.0.17)
   The home page has body.lbf-home-v3 { overflow-x:hidden }; inner
   page templates had no equivalent, so any single over-wide element
   (now or added later) could make the whole page scroll sideways.
   This caps horizontal overflow at the document level WITHOUT touching
   intentional horizontal-scroll regions (schedule day strips, sponsor
   rows, etc.) — those use overflow-x:auto on their OWN inner elements,
   which still scroll normally inside a body that can't scroll-x.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}