/* ============================================
   WINGBOOKS - SEO PAGES RESPONSIVE STYLES
   For transcription, podcast-monetization, course-materials
   ============================================ */

/* ============================================
   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 */
@media (max-width: 767px) {
  .hero-section h1,
  section:first-of-type h1[style*="font-size: 64px"] {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section h1,
  section:first-of-type h1[style*="font-size: 64px"] {
    font-size: 52px !important;
    line-height: 1.15 !important;
  }
}

/* Hero subtitle */
@media (max-width: 767px) {
  .hero-section p[style*="font-size: 24px"],
  .hero-section p[style*="font-size: 28px"] {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section p[style*="font-size: 24px"],
  .hero-section p[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
}

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

  section:first-of-type[style*="padding: 160px"],
  .hero-section[style*="padding: 160px"] {
    padding: 80px 16px 60px !important;
  }
}

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

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

/* Hero images */
@media (max-width: 767px) {
  section:first-of-type img[style*="max-height"] {
    max-height: none !important;
  }
}

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

/* Benefits grid - force single column on small mobile */
@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(280px"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
}

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

  div[style*="display: grid"][style*="gap: 60px"] {
    gap: 40px !important;
  }
}

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

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

/* ============================================
   COMPARISON SECTION (transcription.ejs)
   ============================================ */

/* Comparison grid - stack on tablet and mobile */
@media (max-width: 1024px) {
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 60px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Comparison boxes */
@media (max-width: 767px) {
  div[style*="grid-template-columns: 1fr 1fr"] > div[style*="padding: 40px"] {
    padding: 24px !important;
  }

  div[style*="grid-template-columns: 1fr 1fr"] > div h4 {
    font-size: 20px !important;
  }
}

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

/* Steps container */
@media (max-width: 767px) {
  div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="flex: 1 1 calc(25%"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

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

/* Step numbers (large circular badges) */
@media (max-width: 767px) {
  div[style*="width: 80px"][style*="height: 80px"] {
    width: 64px !important;
    height: 64px !important;
    font-size: 28px !important;
  }
}

/* Step numbers (large text) */
@media (max-width: 767px) {
  p[style*="font-size: 72px"] {
    font-size: 56px !important;
  }
}

/* Step headings */
@media (max-width: 767px) {
  div[style*="display: flex"][style*="flex-wrap: wrap"] > div h4 {
    font-size: 18px !important;
  }
}

/* ============================================
   ARTICLE/CONTENT SECTIONS (podcast-monetization)
   ============================================ */

/* Article section headings */
@media (max-width: 767px) {
  h2[style*="font-size: 36px"] {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  h2[style*="font-size: 36px"] {
    font-size: 32px !important;
  }
}

/* Article text */
@media (max-width: 767px) {
  p[style*="font-size: 18px"] {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

/* List items */
@media (max-width: 767px) {
  ul li[style*="font-size: 18px"],
  ol li[style*="font-size: 18px"] {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

/* Bordered content boxes (course-materials "What You Can Create") */
@media (max-width: 767px) {
  div[style*="border"][style*="padding: 40px"] {
    padding: 24px !important;
  }

  div[style*="border"][style*="padding: 40px"] h3 {
    font-size: 20px !important;
  }
}

/* ============================================
   CASE STUDY / TESTIMONIAL SECTIONS
   ============================================ */

/* Case study container */
@media (max-width: 767px) {
  div[style*="background-color: #f5f4ed"][style*="padding: 60px"] {
    padding: 32px 20px !important;
  }
}

/* Case study quote */
@media (max-width: 767px) {
  blockquote[style*="font-size: 28px"] {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }
}

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

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

@media (min-width: 768px) and (max-width: 1023px) {
  section:last-of-type h2[style*="font-size: 48px"],
  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"],
  section:last-of-type p[style*="font-size: 24px"] {
    font-size: 18px !important;
  }
}

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

/* ============================================
   GENERAL SECTION PADDING
   ============================================ */

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

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

/* ============================================
   BORDER ACCENTS
   ============================================ */

@media (max-width: 767px) {
  div[style*="border-left: 4px solid"] {
    border-left-width: 3px !important;
    padding-left: 1rem !important;
  }
}

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

@media (max-width: 767px) {
  /* Remove max-height constraints */
  section img[style*="max-height"] {
    max-height: none !important;
  }

  /* Box shadows - reduce intensity */
  section img[style*="box-shadow: 0 10px 30px"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
}

/* ============================================
   FLEX LAYOUT ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
  /* Two-column flex layouts should stack */
  section > div[style*="display: flex"][style*="gap: 60px"],
  section > div[style*="display: flex"][style*="gap: 80px"] {
    flex-direction: column !important;
    gap: 32px !important;
  }
}