/* ==========================================================================
   Responsive fine-tuning
   Base breakpoints already handled in style.css (mobile-first).
   This file adds extra-small and extra-large refinements.
   ========================================================================== */

/* Extra small phones (320px - 359px) */
@media (max-width: 359px) {
  .hero-headline { font-size: 1.9rem; }
  .section-title { font-size: 1.6rem; }
  .container { padding: 0 0.85rem; }
  .logo-link img { height: 3rem; }
}

/* 360px - 413px */
@media (min-width: 360px) and (max-width: 413px) {
  .hero-headline { font-size: 2rem; }
}

/* Large desktop refinement */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
}

@media (min-width: 1920px) {
  .container { max-width: 1440px; }
}

/* Tablet portrait tweaks (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Small laptop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .about-grid { gap: 3.5rem; }
}

/* ---- Mega menu (NEW): reflow columns on narrower desktop/laptop widths ---- */
/* Between 1024px (where .desktop-nav appears) and 1279px there isn't quite
   enough room for 4 comfortable columns, so drop the Products menu to 2
   columns + promo tile stacked below rather than squeezing everything. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mega-menu-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .mega-promo {
    grid-column: 1 / -1;
    min-height: 120px;
  }
}

@media (min-width: 1280px) {
  .mega-menu-inner {
    grid-template-columns: repeat(3, 1fr) 1.1fr;
  }
}

/* Print styles (basic safety net) */
@media print {
  .site-header, .mobile-bottom-bar, .floating-actions, .hero-arrow, .hero-dots {
    display: none !important;
  }
}