/* ============================================
   WINGBOOKS - SOLUTIONS PAGES RESPONSIVE STYLES
   For podcasters, educators, content-creators, businesses
   ============================================ */

/* ============================================
   MINIMUM SIDE PADDING
   ============================================ */

@media (max-width: 767px) {
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  @media (max-width: 360px) {
    section {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }
}

/* ============================================
   HERO SECTION
   ============================================ */

/* Hero title - massive 64px needs scaling */
@media (max-width: 767px) {
  .hero-section h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section h1 {
    font-size: 52px !important;
    line-height: 1.15 !important;
  }
}

/* Hero subtitle */
@media (max-width: 767px) {
  .hero-section p {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}

/* Hero full height on mobile */
@media (max-width: 767px) {
  .hero-section {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
  }

  div[style*="padding: 160px"] {
    padding: 80px 16px 60px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  div[style*="padding: 160px"] {
    padding: 120px 24px 80px !important;
  }
}

/* Hero container gap */
@media (max-width: 767px) {
  .hero-section > div[style*="gap: 80px"] {
    gap: 32px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section > div[style*="gap: 80px"] {
    gap: 48px !important;
  }
}

/* Hero buttons - stack on mobile with natural width */
@media (max-width: 640px) {
  .hero-section div[style*="display: flex"][style*="gap: 16px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .hero-button-primary,
  .hero-button-secondary {
    width: auto !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
  }
}

/* Hero border-left accent */
@media (max-width: 767px) {
  div[style*="border-left: 4px solid #000"] {
    border-left-width: 3px !important;
    padding-left: 16px !important;
  }
}

/* ============================================
   BENEFITS SECTION
   ============================================ */

/* Benefits grid gap */
@media (max-width: 767px) {
  div[style*="display: grid"][style*="gap: 48px"][style*="margin-bottom: 80px"] {
    gap: 32px !important;
    margin-bottom: 48px !important;
  }
}

/* Benefit icons */
@media (max-width: 767px) {
  svg[width="40"][height="40"] {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Benefit card text */
@media (max-width: 767px) {
  div[style*="display: grid"] > div > h3 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }

  div[style*="display: grid"] > div > p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}

/* ============================================
   USE CASES SECTION
   ============================================ */

/* Use case container gaps */
@media (max-width: 767px) {
  div[style*="display: flex"][style*="gap: 80px"][style*="margin-bottom: 80px"] {
    gap: 32px !important;
    margin-bottom: 48px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  div[style*="display: flex"][style*="gap: 80px"][style*="margin-bottom: 80px"] {
    gap: 48px !important;
    margin-bottom: 60px !important;
  }
}

/* Use case headings */
@media (max-width: 767px) {
  div[style*="display: flex"] > div > h3[style*="font-size: 32px"] {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  div[style*="display: flex"] > div > h3[style*="font-size: 32px"] {
    font-size: 28px !important;
  }
}

/* Use case list items */
@media (max-width: 767px) {
  ul[style*="list-style-position: inside"] li {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
  }
}

/* Use case images */
@media (max-width: 767px) {
  div[style*="display: flex"] > div > img[style*="border-radius"] {
    margin-top: 16px !important;
  }
}

/* Use case row-reverse on mobile should be column */
@media (max-width: 767px) {
  div[style*="flex-direction: row-reverse"] {
    flex-direction: column !important;
  }
}

/* ============================================
   HOW IT WORKS SECTION
   ============================================ */

/* Steps container */
@media (max-width: 767px) {
  div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="min-width: 200px"] {
    min-width: 100% !important;
    margin-bottom: 24px !important;
  }

  div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 24px"] {
    gap: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="min-width: 200px"] {
    min-width: calc(50% - 12px) !important;
  }
}

/* Step numbers/badges */
@media (max-width: 767px) {
  div[style*="font-size: 24px"][style*="font-weight: 600"] {
    font-size: 20px !important;
  }

  /* Step card padding */
  div[style*="padding: 24px"][style*="border-left"] {
    padding: 20px !important;
    padding-left: 16px !important;
  }
}

/* ============================================
   TESTIMONIAL SECTION
   ============================================ */

/* Testimonial quote */
@media (max-width: 767px) {
  blockquote[style*="font-size: 32px"] {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin-bottom: 24px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  blockquote[style*="font-size: 32px"] {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
}

/* Testimonial author */
@media (max-width: 767px) {
  blockquote + p {
    font-size: 14px !important;
  }
}

/* ============================================
   FINAL CTA SECTION
   ============================================ */

/* CTA title */
@media (max-width: 767px) {
  section:last-of-type h3[style*="font-size: 48px"] {
    font-size: 32px !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  section:last-of-type h3[style*="font-size: 48px"] {
    font-size: 40px !important;
  }
}

/* CTA subtitle */
@media (max-width: 767px) {
  section:last-of-type p[style*="font-size: 20px"] {
    font-size: 18px !important;
    margin-bottom: 24px !important;
  }
}

/* CTA button */
@media (max-width: 640px) {
  section:last-of-type a[style*="font-size: 18px"] {
    font-size: 16px !important;
    padding: 16px 40px !important;
    width: 100% !important;
    max-width: 280px !important;
  }
}

/* ============================================
   SECTION PADDING OVERRIDES
   ============================================ */

@media (max-width: 767px) {
  section[style*="padding: 100px"],
  section[style*="padding: 120px"] {
    padding: 60px 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  section[style*="padding: 100px"],
  section[style*="padding: 120px"] {
    padding: 80px 24px !important;
  }
}

/* ============================================
   IMAGE RESPONSIVENESS
   ============================================ */

@media (max-width: 767px) {
  /* All images should be full width on mobile */
  section img[style*="border-radius"] {
    max-height: none !important;
    width: 100% !important;
  }

  /* Box shadows - reduce on mobile */
  section img[style*="box-shadow"] {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  }
}