/* ============================================
   WINGBOOKS - HOMEPAGE RESPONSIVE STYLES
   ============================================ */

/* ============================================
   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 is already using clamp() functions which is good,
   but we'll add mobile-specific overrides for consistency */

@media (max-width: 767px) {
  .hero-section {
    padding: 100px 16px 80px !important;
  }
}

/* Hero buttons - stack on mobile and limit width */
@media (max-width: 640px) {
  .hero-buttons-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .hero-button-primary,
  .hero-button-secondary {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ============================================
   BOOK DISPLAY SECTION - CRITICAL FIXES
   ============================================ */

/* Container - remove fixed height */
@media (max-width: 1023px) {
  div[style*="height: 700px"][style*="position: relative"] {
    height: auto !important;
    min-height: 400px !important;
    margin-top: 60px !important;
    margin-bottom: 80px !important;
  }
}

@media (max-width: 767px) {
  div[style*="height: 700px"][style*="position: relative"] {
    height: auto !important;
    min-height: 300px !important;
    margin-top: 40px !important;
    margin-bottom: 60px !important;
  }
}

/* Quote - fix nowrap issue */
@media (max-width: 1023px) {
  blockquote[style*="white-space: nowrap"] {
    white-space: normal !important;
    font-size: 24px !important;
  }
}

@media (max-width: 767px) {
  blockquote[style*="white-space: nowrap"] {
    white-space: normal !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

/* Center book page - make responsive */
@media (max-width: 1023px) {
  div[style*="width: 400px"][style*="height: 575px"][style*="position: absolute"] {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: min(400px, 90vw) !important;
    height: auto !important;
  }

  div[style*="width: 400px"][style*="height: 575px"] img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Side book pages - hide on mobile/tablet */
@media (max-width: 1023px) {
  div[style*="width: 380px"][style*="height: 550px"][style*="position: absolute"],
  div[style*="left: calc(50% - 270px)"],
  div[style*="right: calc(50% - 270px)"] {
    display: none !important;
  }
}

/* ============================================
   LOGOS SECTION
   ============================================ */

/* Logos container - allow wrapping and reduce gap */
@media (max-width: 1023px) {
  div[style*="display: flex"][style*="gap: 60px"][style*="flex-wrap: nowrap"] {
    flex-wrap: wrap !important;
    gap: 40px !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  div[style*="display: flex"][style*="gap: 60px"] > img {
    height: 22px !important;
  }

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

/* Logo quote */
@media (max-width: 767px) {
  p[style*="font-size: 30px"][style*="font-style: italic"] {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
}

/* ============================================
   WORKFLOW/PROCESS SECTION
   ============================================ */

/* Process heading */
@media (max-width: 767px) {
  h2[style*="font-size: 52px"] {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }
}

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

/* Workflow description */
@media (max-width: 767px) {
  p[style*="font-size: 20px"][style*="max-width: 800px"] {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}

/* Process steps - already uses flex-wrap, but ensure proper stacking */
@media (max-width: 640px) {
  div[style*="flex: 1 1 calc(25% - 18px)"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  div[style*="flex: 1 1 calc(25% - 18px)"] {
    flex: 1 1 calc(50% - 12px) !important;
  }
}

/* Step icons */
@media (max-width: 767px) {
  div[style*="flex: 1 1 calc(25% - 18px)"] svg {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Step headings */
@media (max-width: 767px) {
  div[style*="flex: 1 1 calc(25% - 18px)"] h3 {
    font-size: 18px !important;
  }
}

/* ============================================
   PRINT & DELIVERY SECTION
   ============================================ */

/* Section heading */
@media (max-width: 767px) {
  section[style*="background: #f5f4ed"] h2 {
    font-size: 32px !important;
  }
}

/* Container - stack on mobile */
@media (max-width: 767px) {
  section[style*="background: #f5f4ed"] > div[style*="display: flex"][style*="gap: 80px"] {
    flex-direction: column !important;
    gap: 40px !important;
  }
}

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

/* Print & delivery headings */
@media (max-width: 767px) {
  section[style*="background: #f5f4ed"] h3 {
    font-size: 22px !important;
  }
}

/* ============================================
   PRICING SECTION
   ============================================ */

/* Pricing heading */
@media (max-width: 767px) {
  section h2[style*="font-size: 48px"] {
    font-size: 32px !important;
  }
}

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

/* Pricing cards - already have min/max width and flex-wrap */
@media (max-width: 640px) {
  div[style*="min-width: 300px"][style*="max-width: 450px"] {
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* Pricing card titles */
@media (max-width: 767px) {
  div[style*="padding: 40px"] > h3[style*="font-size: 32px"] {
    font-size: 24px !important;
  }
}

/* Pricing amounts */
@media (max-width: 767px) {
  div[style*="font-size: 48px"][style*="font-weight: 300"] {
    font-size: 36px !important;
  }
}

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

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

/* Features heading */
@media (max-width: 767px) {
  #features h2,
  section h2[id="features"] {
    font-size: 32px !important;
  }
}

/* Features grid - already responsive with min(250px) */
@media (max-width: 640px) {
  div[style*="flex: 1 1 250px"] {
    flex: 1 1 100% !important;
  }
}

/* Feature icons */
@media (max-width: 767px) {
  div[style*="flex: 1 1 250px"] svg {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Feature titles */
@media (max-width: 767px) {
  div[style*="flex: 1 1 250px"] h3 {
    font-size: 18px !important;
  }
}

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

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

@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 button */
@media (max-width: 640px) {
  section:last-of-type a[style*="font-size: 18px"] {
    width: 100% !important;
    max-width: 300px !important;
    padding: 16px 40px !important;
    font-size: 16px !important;
  }
}

/* ============================================
   GENERAL SECTION SPACING
   ============================================ */

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

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

/* Margin-bottom reductions */
@media (max-width: 767px) {
  section[style*="margin-bottom: 100px"],
  div[style*="margin-bottom: 100px"] {
    margin-bottom: 60px !important;
  }

  section[style*="margin-bottom: 80px"],
  div[style*="margin-bottom: 80px"] {
    margin-bottom: 48px !important;
  }
}