/* CLEAN MOBILE CSS - Simplified approach */
/* Focus: Proper centering and spacing on mobile */

@media screen and (max-width: 768px) {
  /* ================================================
     CORE RESET: Clean foundation
     ================================================ */
  body, html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* ================================================
     LAYOUT: Sections and containers
     ================================================ */
  .section, section {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .container,
  .container--narrow,
  .container--wide {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Direct children of sections also need padding */
  .section > .grid,
  .section > .head,
  .section > .media,
  .section > .main,
  .section > div:not(.container) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Prevent double padding - nested elements don't add more */
  .container .grid,
  .container .head,
  .container .media,
  .container .main,
  .container .offer-sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure offer-sidebar gets padding when direct child of grid */
  #intro-group .grid > .offer-sidebar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Everything stays within viewport */
  * {
    max-width: 100vw !important;
  }

  /* Images are responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ================================================
     MOBILE STACKING: Intro group layout
     ================================================ */
  #intro-group .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* No gaps between elements */
  }

  /* Reorder intro-group elements */
  #intro-group .head {
    order: 1 !important;
  }

  #intro-group .media {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #intro-group .main {
    order: 3 !important;
  }

  #intro-group .offer-sidebar {
    order: 4 !important;
  }

  /* ================================================
     SPACING FIXES: Specific adjustments
     ================================================ */

  /* Add spacing above the hero eyebrow */
  .hero-eyebrow {
    padding-top: 20px !important;
  }

  /* Remove spacing around VSL/media - CLEAN VERSION */
  .media {
    margin: 0 !important;
    padding: 0 !important;
  }

  .media-16x9 {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove excess spacing after lists */
  #intro-group .main .ul-cross {
    margin-bottom: 10px !important;
  }

  #intro-group .main .result-text {
    margin-top: 10px !important;
  }

  /* Clean up header spacing */
  #intro-group h3,
  #intro-group .hero-subhead {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Remove section vertical padding for intro */
  #intro-group.section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #intro-group .grid {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ================================================
     WHAT IS SECTION: Reduce excessive spacing
     ================================================ */

  /* Target the main "What Is Lucrative Landscaping?" section */
  #intro-group .main,
  .main#what-is {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Reduce spacing on the main title */
  .main#what-is .section-title,
  .main#what-is h2,
  h2.section-title {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important; /* Remove the 20px bottom padding */
  }

  /* Control spacing for paragraphs and lists in this section */
  .main#what-is p {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .main#what-is ul {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Reduce spacing from inline styles */
  .main#what-is [style*="margin"] {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Aggressive bottom spacing control */
  .main#what-is {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
  }

  /* Target the last elements in the section to remove bottom spacing */
  .main#what-is > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-block-end: 0 !important;
  }

  /* Also target all elements in the section for logical properties */
  .main#what-is * {
    margin-block-end: 0 !important;
  }

  /* Target the parent container after what-is section */
  #intro-group .main + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-block-start: 0 !important;
  }

  /* ================================================
     FAQ SECTION: Clean stacking
     ================================================ */
  .faq-section .faq-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .faq-section .faq-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .faq-section .faq-column:first-child {
    margin-bottom: 20px !important;
  }

  .faq-section .faq-item {
    margin: 0 !important;
  }
}

/* Extra small screens - tighter padding */
@media screen and (max-width: 480px) {
  .container,
  .container--narrow,
  .container--wide,
  .section > .grid,
  .section > .head,
  .section > .media,
  .section > .main,
  .section > div:not(.container) {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}