/* =========================================
   RADHE WEB STUDIOS — Responsive CSS
   Mobile-first breakpoints
   ========================================= */

/* ─── LARGE DESKTOP (≥1400px) ─── */
@media (min-width: 1400px) {
  :root { --container: 1320px; }

  .hero-title {
    font-size: 4.8rem;
  }
}

/* ─── DESKTOP (≤1200px) ─── */
@media (max-width: 1200px) {
  :root {
    --section-py: 80px;
    --container: 960px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 36px;
  }

  .footer-grid .footer-contact {
    grid-column: 1 / -1;
  }

  .why-grid {
    gap: 40px;
  }
}

/* ─── TABLET (≤992px) ─── */
@media (max-width: 992px) {
  :root {
    --section-py: 70px;
  }

  /* Navbar */
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hero */
  .hero {
    padding-top: 120px;
    min-height: auto;
    padding-bottom: 60px;
  }

  .hero-title {
    font-size: 3rem;
  }

  /* Niche */
  .niche-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Services */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Portfolio */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .pricing-card.featured {
    transform: none;
  }
  .pricing-card.featured:hover {
    transform: translateY(-6px);
  }

  /* Why */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .why-visual { order: -1; }

  /* Process */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .process-timeline::before {
    display: none;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-img img {
    height: 360px;
  }

  /* Contact */
  .contact-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Values */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Comparison */
  .comparison-table {
    font-size: 0.82rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 14px 16px;
  }
}

/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
  :root {
    --section-py: 60px;
  }

  html { font-size: 15px; }

  /* Loader */
  .loader-logo { width: 140px; }

  /* Hero */
  .hero {
    padding: 110px 0 50px;
    min-height: 100svh;
  }

  .hero-title {
    font-size: 2.4rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-trust {
    gap: 10px;
  }

  .trust-badge {
    font-size: 0.78rem;
    padding: 7px 13px;
  }

  .hero-scroll { display: none; }

  /* Section header */
  .section-title { font-size: 2rem; }
  .section-header { margin-bottom: 44px; }

  /* Niche cards */
  .niche-card { padding: 32px 24px; }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Portfolio */
  .portfolio-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .portfolio-overlay { opacity: 1; }

  /* Portfolio filter */
  .portfolio-filter {
    justify-content: center;
  }

  /* Pricing */
  .pricing-grid {
    max-width: 100%;
  }

  /* Process */
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 320px;
    margin: 0 auto;
  }

  /* Testimonials */
  .testimonials-grid { max-width: 100%; }

  /* FAQ */
  .faq-question { font-size: 0.97rem; }

  /* CTA */
  .cta-banner { padding: 60px 0; }
  .cta-title  { font-size: 1.9rem; }

  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .cta-actions .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  /* Footer */
  .footer { padding: 52px 0 24px; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* Page hero */
  .page-hero {
    padding: 140px 0 70px;
  }

  .page-hero-title { font-size: 2.4rem; }

  /* Values */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* Why visual */
  .why-visual-card { padding: 24px; }

  /* About */
  .about-img img { height: 280px; }

  /* Contact */
  .contact-card { padding: 36px 24px; }

  /* Hours */
  .hours-grid { grid-template-columns: 1fr; }

  /* Comparison table — horizontal scroll */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 600px;
  }

  /* Floating buttons */
  .float-whatsapp {
    bottom: 84px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }

  .float-call {
    bottom: 24px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .scroll-top {
    left: 16px;
    bottom: 24px;
    width: 40px;
    height: 40px;
  }
}

/* ─── SMALL MOBILE (≤480px) ─── */
@media (max-width: 480px) {
  html { font-size: 14px; }

  .container { padding: 0 16px; }

  .hero-title { font-size: 2.1rem; }

  .hero-badge { font-size: 0.75rem; padding: 6px 14px; }

  .trust-badge { font-size: 0.75rem; }

  .niche-card { padding: 28px 20px; }
  .niche-title { font-size: 1.4rem; }

  .btn-lg { padding: 15px 28px; }

  .cta-title { font-size: 1.7rem; }

  .section-title { font-size: 1.8rem; }

  .testimonial-card { padding: 28px 20px; }

  .pricing-header,
  .pricing-price,
  .pricing-features,
  .pricing-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .niche-grid,
  .pricing-grid,
  .portfolio-grid,
  .testimonials-grid,
  .contact-cards,
  .values-grid {
    max-width: 100%;
  }

  .page-hero { padding: 130px 0 60px; }

  /* Footer brand */
  .footer-social { justify-content: flex-start; }
}

/* ─── TOUCH DEVICE OPTIMIZATIONS ─── */
@media (hover: none) {
  .portfolio-overlay { opacity: 1; }

  .niche-card:hover,
  .service-card:hover,
  .pricing-card:hover,
  .testimonial-card:hover {
    transform: none;
  }

  .btn:hover { transform: none; }
}

/* ─── PRINT ─── */
@media print {
  .navbar,
  .float-whatsapp,
  .float-call,
  .scroll-top,
  #page-loader {
    display: none !important;
  }

  body { color: #000; background: #fff; }
  .dark-section,
  .navy-section,
  .section-dark,
  .section-navy,
  .section-darker {
    background: #f5f5f5 !important;
  }

  * { color: #000 !important; }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #666 !important;
  }
}