/* 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;
  }

  /* ================================================
     COMPARISON FLOWCHART: NEVER stack columns
     Enhanced styling with gradients preserved
     ================================================ */
  .comparison-flowchart {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    align-items: stretch !important;
    border-radius: 14px !important;
  }

  /* Hide center divider on mobile */
  .comparison-flowchart::before {
    display: none !important;
  }

  .comparison-flowchart .comparison-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: none !important;
    justify-content: space-between !important;
  }

  .comparison-flowchart .comparison-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  /* Disable hover on touch */
  .comparison-flowchart .comparison-row:hover {
    transform: none !important;
  }

  .comparison-flowchart .comparison-header {
    font-size: 0.7rem !important;
    padding: 0.6rem 0.5rem !important;
    min-height: 2.8em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .comparison-flowchart .comparison-subtitle {
    font-size: 0.6rem !important;
    margin: 0.25rem 0 !important;
  }

  .comparison-flowchart .comparison-box {
    font-size: 0.6rem !important;
    padding: 0.5rem 0.35rem !important;
    border-radius: 6px !important;
  }

  .comparison-flowchart .comparison-box:hover {
    transform: none !important;
  }

  .comparison-flowchart .comparison-icon {
    font-size: 0.85rem !important;
    width: 22px !important;
    height: 22px !important;
  }

  .comparison-flowchart .flow-line {
    height: 14px !important;
    width: 2px !important;
    margin: 0 auto !important;
  }

  .comparison-flowchart .flow-line.with-arrow {
    height: 20px !important;
  }

  .comparison-flowchart .comparison-top,
  .comparison-flowchart .comparison-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .comparison-flowchart .flow-line-spacer {
    flex: 1 !important;
    min-height: 14px !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;
  }
}