/* ============================================================
   YIELD MARKETING — Mobile Responsive Fixes
   For Mortgage & Roofing Lead Pages
   ============================================================ */

/* ── TABLET (max-width: 960px) ─────────────────────────────── */
@media (max-width: 960px) {
  /* AI Studio Promo 2-col grid → stack */
  .ai-promo-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* AI Studio Upsell pricing cards → stack */
  .ai-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* CTA buttons in AI Studio section → stack */
  .ai-cta-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .ai-cta-wrap a {
    margin-right: 0 !important;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Delivery cards → 2 columns on tablet */
  .delivery-cards {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── MOBILE (max-width: 700px) ─────────────────────────────── */
@media (max-width: 700px) {
  /* Hero section tighten up */
  .hero, .page-hero {
    padding: 80px 16px 40px !important;
  }
  .hero-title, .page-title {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  .hero-title br {
    display: none;
  }
  .hero-sub, .page-sub {
    font-size: .95rem !important;
    line-height: 1.7 !important;
  }

  /* Section padding reduce */
  section {
    padding: 48px 16px !important;
  }

  /* Pricing table — horizontal scroll with hint */
  .pricing-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .pricing-table-wrap table {
    min-width: 580px;
  }

  /* AI Studio Promo 2-col grid → stack */
  .ai-promo-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* AI Studio Upsell pricing cards → stack */
  .ai-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Calculator section — already stacks via calc-section breakpoint */
  /* Contact form grid → stack */
  .contact-form-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-form-grid input[style*="grid-column:1/3"],
  .contact-form-grid input[style*="grid-column: 1/3"] {
    grid-column: 1 / -1 !important;
  }

  /* Cart sidebar — full width, no sticky on mobile */
  .cart-sidebar {
    position: relative !important;
    top: auto !important;
  }

  /* Included box — no sticky on mobile */
  .included-box-sticky {
    position: relative !important;
    top: auto !important;
  }

  /* Delivery cards → single column */
  .delivery-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Channel strip → 3 cols then 2 cols */
  .channel-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Compare grid — already stacks */

  /* CTA buttons → full width stack */
  .ai-cta-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .ai-cta-wrap a {
    margin-right: 0 !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  /* Buttons — ensure they don't overflow */
  .btn-p, .btn-s, .btn-lg {
    font-size: .88rem !important;
    padding: 12px 20px !important;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Storm banner — stack on mobile */
  .storm-banner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* Commit banner — stack on mobile */
  .commit-banner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }

  /* Compliance box — tighter padding */
  .compliance-box {
    padding: 16px !important;
  }

  /* Volume display — stack if needed */
  .vol-display {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Tier select grid — 1 column on very small */
  .tier-select-grid {
    grid-template-columns: 1fr !important;
  }

  /* Upsell card — tighter */
  .upsell-card {
    padding: 12px !important;
  }

  /* Cart box — tighter padding */
  .cart-box {
    padding: 18px !important;
  }

  /* Grand total — smaller on mobile */
  .cart-grand-val {
    font-size: 1.4rem !important;
  }

  /* Footer links — wrap better */
  .footer-links {
    gap: 12px !important;
  }

  /* Sec title — responsive */
  .sec-title {
    font-size: clamp(1.3rem, 5vw, 2rem) !important;
  }
  .sec-sub {
    font-size: .92rem !important;
  }

  /* Lead type grid — stay 2 col but smaller padding */
  .lead-type-btn {
    padding: 8px 6px !important;
    font-size: .72rem !important;
  }

  /* Range labels — smaller */
  .range-labels {
    font-size: .65rem !important;
  }
}

/* ── SMALL MOBILE (max-width: 480px) ───────────────────────── */
@media (max-width: 480px) {
  /* Channel strip → 2 columns */
  .channel-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Even tighter section padding */
  section {
    padding: 36px 12px !important;
  }

  /* Hero even tighter */
  .hero, .page-hero {
    padding: 72px 12px 32px !important;
  }

  /* Nav CTA button — hide text, show icon only or shrink */
  nav .btn-p.btn-sm {
    font-size: .75rem !important;
    padding: 6px 12px !important;
  }

  /* Eyebrow — smaller */
  .eyebrow {
    font-size: .65rem !important;
  }

  /* Compare card — tighter */
  .compare-card {
    padding: 16px !important;
  }

  /* Calc main — tighter */
  .calc-main {
    padding: 18px !important;
  }

  /* Form inputs — slightly smaller */
  .form-input {
    padding: 9px 12px !important;
    font-size: .88rem !important;
  }
}