/* ==========================================================================
   عَزْم — AZM ATHLETIC & NUTRITION | Responsive Media Queries
   Breakpoints: 360px, 390px, 768px, 1024px, 1440px
   ========================================================================== */

/* Up to Tablet (Max 1023px) - Navigation & Header */
@media (max-width: 1023px) {
  .site-header {
    height: var(--header-height-mobile);
  }

  .header-nav {
    display: none;
  }

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

  .header-actions .btn-primary {
    display: none;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Tablet (Max 768px) */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hotspots behavior on mobile */
  .hotspot-card {
    display: none !important;
  }

  .panorama-mobile-cards {
    display: grid;
  }

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

  .section {
    padding-block: var(--space-10);
  }

  /* Sticky Mobile Bar on Product Detail */
  .mobile-sticky-action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-pure-white);
    border-top: 1px solid var(--color-silver-light);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  /* Schedule view on mobile: Cards instead of large desktop table */
  .schedule-desktop-table {
    display: none !important;
  }

  .schedule-mobile-cards {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* Mobile Screens (Max 480px / 390px / 360px) */
@media (max-width: 480px) {
  :root {
    --space-16: 3rem;
    --space-20: 3.5rem;
    --space-24: 4rem;
  }

  .container {
    padding-inline: var(--space-3);
  }

  .btn {
    padding: 0.75rem 1.25rem;
  }

  .btn-lg {
    padding: 0.9rem 1.5rem;
    font-size: var(--font-size-sm);
  }

  .header-actions {
    gap: var(--space-1);
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .header-brand img,
  .header-brand svg {
    height: 36px;
  }

  .membership-card {
    padding: var(--space-5);
  }

  .membership-card.featured {
    transform: none;
  }
}

/* Very Small Mobile (Max 360px) */
@media (max-width: 360px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  .options-group {
    gap: var(--space-1);
  }

  .option-tile label {
    padding: 0.4rem 0.6rem;
    font-size: 11px;
  }
}

/* Large Screens (Min 1440px) */
@media (min-width: 1440px) {
  .container-wide {
    max-width: 1400px;
  }
}