/* ═══════════════════════════════════════════════════════════════
   SEO Pages - Shared Responsive Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet (768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero Section */
  .seo-hero,
  [style*="padding: 100px 0"],
  [style*="padding: 80px 0"] {
    padding: 60px 0 !important;
  }

  .seo-hero h1,
  [style*="font-size: 48px"],
  [style*="font-size: 52px"] {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .seo-hero p,
  [style*="font-size: 20px"][style*="color: #94a3b8"],
  [style*="font-size: 18px"][style*="color: #64748b"] {
    font-size: 16px !important;
  }

  /* Grid Layouts - 4 columns to 2 */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Grid Layouts - 3 columns to 1 */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Grid Layouts - 2 columns to 1 */
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Before & After grid - 2 columns to 1 (1fr 1fr pattern) */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Remove max-width constraint on mobile */
  [style*="max-width: 900px"] {
    max-width: 100% !important;
  }

  /* Section Padding */
  section[style*="padding: 80px 0"],
  section[style*="padding: 60px 0"] {
    padding: 48px 0 !important;
  }

  /* CTA Buttons - hero */
  .seo-cta-hero,
  [style*="padding: 16px 40px"][style*="border-radius: 12px"] {
    padding: 14px 28px !important;
    font-size: 16px !important;
  }

  /* Section Titles */
  [style*="font-size: 36px"][style*="font-weight: 800"] {
    font-size: 28px !important;
  }

  [style*="font-size: 32px"][style*="font-weight: 800"] {
    font-size: 24px !important;
  }

  /* FAQ Section */
  .faq-item h3 {
    font-size: 16px !important;
  }

  .faq-item p {
    font-size: 14px !important;
  }

  /* Related Articles */
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Before/After images consistent sizing */
  .seo-before-after-img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}

/* ── Mobile (480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Further reduce hero */
  .seo-hero h1,
  [style*="font-size: 48px"][style*="font-weight: 800"] {
    font-size: 24px !important;
  }

  [style*="font-size: 32px"][style*="font-weight: 800"] {
    font-size: 22px !important;
  }

  [style*="font-size: 36px"][style*="font-weight: 800"] {
    font-size: 24px !important;
  }

  /* Reduce section padding more */
  section[style*="padding: 80px 0"],
  section[style*="padding: 60px 0"],
  section[style*="padding: 48px 0"] {
    padding: 32px 0 !important;
  }

  /* Hero CTA buttons - smaller padding */
  .seo-cta-hero,
  [style*="padding: 16px 40px"][style*="border-radius: 12px"] {
    padding: 12px 20px !important;
    font-size: 15px !important;
    display: block !important;
    text-align: center !important;
  }

  /* Bottom CTA section buttons */
  .seo-cta-bottom,
  [style*="padding: 16px 48px"][style*="border-radius: 12px"] {
    padding: 14px 24px !important;
    font-size: 16px !important;
    display: block !important;
    text-align: center !important;
  }

  /* Icon containers smaller */
  [style*="width: 64px"][style*="height: 64px"] {
    width: 48px !important;
    height: 48px !important;
  }

  /* Reduce icon SVG size */
  [style*="width: 64px"][style*="height: 64px"] svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Feature card titles */
  [style*="font-size: 18px"][style*="font-weight: 700"] {
    font-size: 16px !important;
  }

  /* Feature card text */
  [style*="font-size: 14px"][style*="color: #64748b"] {
    font-size: 13px !important;
  }

  /* Before/After images */
  .seo-before-after-img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  /* Related articles single column */
  .related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Small Mobile (360px) ───────────────────────────────────── */
@media (max-width: 360px) {
  /* Even smaller hero */
  .seo-hero h1,
  [style*="font-size: 48px"][style*="font-weight: 800"] {
    font-size: 22px !important;
  }

  /* Container padding */
  .container {
    padding: 0 16px !important;
  }

  /* Hero CTA - mobile friendly */
  .seo-cta-hero,
  [style*="padding: 16px 40px"][style*="border-radius: 12px"] {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  /* Bottom CTA - mobile friendly */
  .seo-cta-bottom,
  [style*="padding: 16px 48px"][style*="border-radius: 12px"] {
    padding: 14px 24px !important;
    font-size: 15px !important;
  }

  /* Section titles */
  [style*="font-size: 32px"][style*="font-weight: 800"] {
    font-size: 20px !important;
  }

  [style*="font-size: 36px"][style*="font-weight: 800"] {
    font-size: 22px !important;
  }

  /* Reduce section padding */
  section[style*="padding: 32px 0"] {
    padding: 24px 0 !important;
  }

  /* FAQ items */
  [style*="padding: 24px"][style*="background: #f8fafc"] {
    padding: 16px !important;
  }

  [style*="font-size: 18px"][style*="font-weight: 700"] {
    font-size: 15px !important;
  }

  [style*="font-size: 14px"][style*="color: #64748b"] {
    font-size: 12px !important;
  }
}