/* ============================================
   CROMALLA - MOBILE-FIRST MEDIA QUERIES
   Responsive design para tablet y desktop
   ============================================ */

/* === TABLET (768px+) === */
@media (min-width: 768px) {
  /* Typography */
  h1 { font-size: 2.5rem; }    /* 40px */
  h2 { font-size: 2rem; }      /* 32px */
  h3 { font-size: 1.5rem; }    /* 24px */

  /* Container */
  :root {
    --container-padding: 2rem;
  }

  /* Header */
  .logo img {
    height: 50px;
  }

  /* Hide mobile menu toggle */
  .menu-toggle {
    display: none;
  }

  /* Desktop navigation */
  .nav {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    box-shadow: none;
  }

  .nav__list {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    padding: 0;
  }

  .nav__list li {
    margin-bottom: 0;
  }

  .nav__list a {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }

  /* Hero */
  .hero__content h1 {
    font-size: 3rem;
  }

  .hero__subtitle {
    font-size: 1.25rem;
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  /* Products grid - 2 columns */
  .productos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .producto-card__actions {
    flex-direction: row;
  }

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

  /* Forms */
  .form__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .form__group--full {
    grid-column: 1 / -1;
  }

  /* Filters */
  .filtros {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* === DESKTOP (1024px+) === */
@media (min-width: 1024px) {
  /* Typography */
  h1 { font-size: 3rem; }      /* 48px */
  h2 { font-size: 2.25rem; }   /* 36px */

  /* Hero */
  .hero {
    padding: var(--spacing-xl) 0;
    min-height: 600px;
  }

  .hero__content h1 {
    font-size: 3.5rem;
  }

  /* Products grid - 3 columns */
  .productos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Spacing */
  section {
    padding: var(--spacing-xl) 0;
  }

  /* WhatsApp float - larger on desktop */
  .whatsapp-float {
    width: 70px;
    height: 70px;
  }

  .whatsapp-float img {
    width: 36px;
    height: 36px;
  }
}

/* === LARGE DESKTOP (1280px+) === */
@media (min-width: 1280px) {
  /* Products grid - 4 columns for very large screens */
  .productos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === PRINT STYLES === */
@media print {
  .header,
  .whatsapp-float,
  .footer,
  .filtros,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
  }

  a {
    text-decoration: underline;
  }

  .producto-card {
    break-inside: avoid;
  }
}

/* === DARK MODE (Optional - respects system preference) === */
@media (prefers-color-scheme: dark) {
  /* Currently not implemented - can add dark mode styles here if needed */
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}