/**
 * STREET DOGS | Craft Hot Dogs & Urban Diner
 * Responsive Breakpoints & Adaptive Layouts
 * Breakpoints: 480px, 768px, 1024px, 1280px
 */

/* ==========================================================================
   TABLET & DESKTOP (Min-width: 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
  .menu-toggle-btn {
    display: none !important;
  }
}

/* ==========================================================================
   LAPTOPS & TABLETS HORIZONTAL (Max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-desktop {
    display: none;
  }

  .menu-toggle-btn {
    display: flex;
  }

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

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

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

/* ==========================================================================
   TABLETS VERTICAL (Max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }

  .hero-media-wrapper {
    order: -1;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .cod-grid {
    grid-template-columns: 1fr;
  }

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

  .editorial-split {
    grid-template-columns: 1fr !important;
  }

  .btn {
    min-height: 48px; /* Área táctil generosa para móvil */
  }

  .whatsapp-float {
    bottom: var(--space-4);
    right: var(--space-4);
    padding: 0.65rem 1rem;
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   SMARTPHONES (Max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;
  }

  .brand-logo {
    font-size: var(--text-lg);
  }

  .countdown-box {
    gap: var(--space-2);
  }

  .countdown-unit {
    min-width: 44px;
    padding: var(--space-1) var(--space-2);
  }

  .countdown-number {
    font-size: var(--text-base);
  }

  .btn-group-responsive {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
  }

  .btn-group-responsive .btn {
    width: 100%;
  }

  .card-media {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   PANTALLAS MUY PEQUEÑAS (Max-width: 360px)
   ========================================================================== */
@media (max-width: 360px) {
  .btn {
    font-size: 0.8rem;
    padding: 0.65rem 1rem;
  }

  .announcement-bar {
    font-size: 0.7rem;
  }
}