/* ============================================================
   TWEET — Responsive Overrides
   ============================================================ */

/* ── Breakpoints ──
   Mobile:  < 768px
   Tablet:  768px - 1023px
   Laptop:  1024px - 1279px
   Desktop: > 1280px
============================================================ */

/* ── Laptop & Below (Max 1279px) ── */
@media (max-width: 1279px) {
  :root {
    --text-7xl: 4.5rem;
    --text-6xl: 3.75rem;
    --text-5xl: 3rem;
  }
}

/* ── Tablet & Below (Max 1023px) ── */
@media (max-width: 1023px) {
  :root {
    --text-6xl: 3rem;
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    
    --navbar-height: 64px;
    --space-24: 4rem;
    --space-32: 5rem;
    --space-40: 6rem;
    --space-48: 8rem;
  }

  .section { padding-block: var(--space-12); }
  .section-lg { padding-block: var(--space-16); }

  /* Grid adjustments */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }

  /* Forms */
  .form-control { padding: var(--space-2) var(--space-3); }
}

/* ── Mobile (Max 767px) ── */
@media (max-width: 767px) {
  :root {
    --text-base: 0.938rem; /* 15px */
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    --space-16: 3rem;
    --space-20: 4rem;
    
    --navbar-height: 60px;
  }

  .section { padding-block: var(--space-10); }
  .section-lg { padding-block: var(--space-12); }
  .section-sm { padding-block: var(--space-8); }

  /* Typography */
  .display-1 { font-size: var(--text-4xl); }
  .display-2 { font-size: var(--text-3xl); }
  .display-3 { font-size: var(--text-2xl); }
  
  .section-heading { margin-bottom: var(--space-10); }

  /* Layout */
  .container { padding-inline: var(--space-4); }
  .container-fluid { padding-inline: var(--space-4); }
  .container-narrow { padding-inline: var(--space-4); }

  .grid-2, .grid-3, .grid-4, .grid-5 { 
    grid-template-columns: 1fr; 
    gap: var(--space-4);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  
  .product-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* Components */
  .btn { width: 100%; padding: var(--space-3); }
  .btn-icon { width: auto; }
  
  .modal-content {
    margin: var(--space-4);
    width: calc(100% - var(--space-8));
    max-height: 80vh;
  }
  
  .toast-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }
  .toast { width: 100%; min-width: 0; }

  /* Navigation */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ── Small Mobile (Max 374px) ── */
@media (max-width: 374px) {
  :root {
    --text-base: 0.875rem; /* 14px */
  }
  
  .product-grid {
    grid-template-columns: 1fr; /* Single column for very small devices */
  }
}

/* ── Hover capability check (touch devices) ── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch to prevent sticky states */
  .hover-lift:hover { transform: none; box-shadow: none; }
  .hover-scale:hover { transform: none; }
  .btn::before { display: none; }
  
  /* Show product actions permanently on mobile */
  .product-card-actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: var(--space-2);
  }
  .product-card-img-hover { display: none; }
}