/**
 * digitalgrowth24 — Responsive Overrides
 *
 * Comprehensive responsive adjustments for all screen sizes.
 * WooCommerce-specific responsive rules are in woocommerce.css.
 *
 * @package digitalgrowth24
 */

/* ==========================================================================
   21. Responsive
   ========================================================================== */

/* ── Extra Large (≤1280px) ── */
@media (max-width: 1280px) {
  .container { max-width: 72rem; }
}

/* ── Large (≤1024px) ── */
@media (max-width: 1024px) {
  :root {
    --grid-gap: 1rem;
  }

  .hero-title { font-size: var(--text-3xl); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-stats { gap: var(--space-6); }

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

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

/* ── Medium (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --grid-gap: 0.75rem;
  }

  /* Typography scale down */
  .page-title { font-size: var(--text-2xl); }
  .section-title { font-size: var(--text-xl); }

  /* Hero */
  .hero { padding: var(--space-8) 0 var(--space-10); }
  .hero-title { font-size: var(--text-2xl); }
  .hero-subtitle { font-size: var(--text-sm); max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-direction: row; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
  .hero-stat { justify-content: center; }
  .hero-blob { display: none; }

  /* Trust badges */
  .trust-section { padding: var(--space-10) 0; }
  .trust-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .trust-card { padding: var(--space-5); }

  /* Product grid */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .featured-section { padding: var(--space-10) 0; }

  /* Header */
  .header-nav { display: none; }
  .header-hamburger { display: flex; }
  .header-actions { gap: var(--space-2); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .site-footer { padding-top: var(--space-12); }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-3); }

  /* Grid system */
  .col-6, .col-4, .col-3, .col-8 {
    grid-column: span 12;
  }

  /* Navigation overlay */
  .mobile-nav {
    padding: var(--space-6) var(--space-4);
  }
}

/* ── Small (≤640px) ── */
@media (max-width: 640px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Product grid — single column on small screens */
  .product-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero-pill { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
  .hero-stat-number { font-size: var(--text-xl); }

  /* Buttons */
  .btn-lg { padding: 0.875rem 1.5rem; font-size: var(--text-base); }

  /* Cards */
  .card { border-radius: var(--radius-xl); }
  .card-body { padding: var(--space-4); }

  /* Section headers */
  .section-header { margin-bottom: var(--space-6); }
  .section-label { font-size: 0.65rem; }

  /* Featured section */
  .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .view-all-desktop { display: none; }
  .view-all-mobile { display: block; margin-top: var(--space-6); }

  /* Product card */
  .product-card-body { padding: var(--space-4); }
  .product-card-actions { flex-direction: column; }
  .product-card-actions .btn { width: 100%; }
}

/* ── Extra Small (≤480px) ── */
@media (max-width: 480px) {
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .hero-title { font-size: var(--text-xl); }

  /* Stack badges */
  .badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
}

/* ── Print Styles ── */
@media print {
  .site-header,
  .site-footer,
  .dg-whatsapp,
  .dg-mobile-cta,
  .hero-blob,
  .mobile-nav {
    display: none !important;
  }

  body { background: #fff; color: #000; }
  .container { max-width: 100%; }
}