/* ============================
   MOBILE-FIRST RESPONSIVE
   Base = mobile (320px+)
   ============================ */

/* Mobile hero & button fixes */
@media (max-width: 767px) {
  .hero__content {
    padding: calc(70px + var(--space-8)) 0 var(--space-12);
  }

  .hero__actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: var(--text-sm);
  }

  .hero__scroll {
    display: none;
  }

  .hero__text {
    font-size: var(--text-base);
    margin-bottom: var(--space-8);
  }

  /* Tighten large buttons on mobile globally */
  .btn--lg {
    padding: 0.85rem 2rem;
    font-size: var(--text-sm);
  }
}

/* Small phones — extra tightening */
@media (max-width: 375px) {
  .hero__title {
    font-size: 2rem;
  }

  .stats-bar__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .stat__number {
    font-size: var(--text-2xl);
  }

  .filter-bar {
    gap: var(--space-2);
  }

  .filter-btn {
    padding: 0.5rem 1rem;
    font-size: var(--text-xs);
  }
}

/* Small tablets (576px+) */
@media (min-width: 576px) {
  .container {
    padding: 0 var(--space-8);
  }

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

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

  .stats-bar__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .hero__content {
    padding: var(--space-32) 0 var(--space-24);
  }
}

/* Tablets (768px+) */
@media (min-width: 768px) {
  .navbar__links {
    display: flex;
  }

  .navbar__phone {
    display: flex;
  }

  .navbar__toggle {
    display: none;
  }

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

  .story-teaser {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }

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

  .contact-info {
    order: 0;
  }

  .contact-form-card {
    padding: var(--space-10);
  }

  .product-detail__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .section {
    padding: var(--space-24) 0;
  }

  .section--lg {
    padding: var(--space-32) 0;
  }

  .section__header {
    margin-bottom: var(--space-16);
  }
}

/* Desktops (1024px+) */
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .related-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-16);
  }

  .product-detail__grid {
    gap: var(--space-16);
  }
}

/* Large desktops (1280px+) */
@media (min-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero__content {
    max-width: 700px;
  }
}

/* ============================
   MOBILE TOUCH IMPROVEMENTS
   ============================ */

@media (hover: none) {
  /* Disable hover transforms on touch devices — use active state instead */
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  .card:active {
    transform: scale(0.98);
  }

  .card__overlay {
    display: none;
  }

  .btn:hover {
    transform: none;
  }

  .btn:active {
    transform: scale(0.97);
  }
}

/* ============================
   PRINT STYLES
   ============================ */
@media print {
  .navbar, .footer, .scroll-top, .hero__scroll,
  .cta-banner, .filter-bar, .btn {
    display: none !important;
  }

  body {
    color: black;
    background: white;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
    background: none !important;
  }

  .hero__title, .hero__text {
    color: black !important;
  }
}