/**
 * Responsive Styles
 * Media queries and responsive utilities
 */

/* ===========================================
   BREAKPOINT REFERENCE

   sm: 640px   - Small devices (landscape phones)
   md: 768px   - Medium devices (tablets)
   lg: 1024px  - Large devices (desktops)
   xl: 1280px  - Extra large devices (large desktops)
   2xl: 1536px - 2X large devices (larger desktops)
   =========================================== */

/* ===========================================
   MOBILE FIRST - BASE STYLES
   Applied to all screen sizes
   =========================================== */

/* Hide/Show utilities */
.hide-mobile {
  display: none;
}

.hide-desktop {
  display: block;
}

/* ===========================================
   SMALL DEVICES (640px and up)
   =========================================== */

@media (min-width: 640px) {
  .container {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }

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

  .sm\:flex-row {
    flex-direction: row;
  }
}

/* ===========================================
   MEDIUM DEVICES (768px and up)
   =========================================== */

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }

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

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

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:text-left {
    text-align: left;
  }

  /* Header Navigation */
  .header-nav {
    display: flex;
  }

  .mobile-menu-btn {
    display: none;
  }

  /* Product Modal Grid */
  .product-modal .modal-body {
    grid-template-columns: 1fr 1fr;
  }

  /* Checkout Grid */
  .checkout-page {
    grid-template-columns: 1fr 380px;
  }
}

/* ===========================================
   LARGE DEVICES (1024px and up)
   =========================================== */

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Product Grid - 3 columns */
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer Grid */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===========================================
   EXTRA LARGE DEVICES (1280px and up)
   =========================================== */

@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Product Grid - 4 columns */
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===========================================
   2X LARGE DEVICES (1536px and up)
   =========================================== */

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

/* ===========================================
   MOBILE ONLY STYLES (below 768px)
   =========================================== */

@media (max-width: 767px) {
  /* Typography Scaling */
  h1, .h1 {
    font-size: var(--font-size-2xl);
  }

  h2, .h2 {
    font-size: var(--font-size-xl);
  }

  /* Header */
  .header-inner {
    height: 60px;
  }

  .site-logo {
    font-size: var(--font-size-xl);
  }

  /* Store */
  .store-hero {
    padding: var(--spacing-10) 0;
  }

  .store-hero-title {
    font-size: var(--font-size-2xl);
  }

  .store-hero-subtitle {
    font-size: var(--font-size-base);
  }

  .store-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Product Grid */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
  }

  .product-card-body {
    padding: var(--spacing-3);
  }

  .product-card-name {
    font-size: var(--font-size-base);
  }

  .product-card-price-value {
    font-size: var(--font-size-lg);
  }

  /* Modal */
  .modal {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .modal-body {
    max-height: calc(100vh - 140px);
  }

  .product-modal .modal-body {
    grid-template-columns: 1fr;
    padding: var(--spacing-4);
  }

  .product-preview {
    max-height: 300px;
  }

  .product-preview-image {
    max-height: 280px;
  }

  /* Cart Drawer */
  .cart-drawer {
    max-width: 100%;
  }

  /* Checkout */
  .checkout-page {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .order-summary {
    order: -1;
  }

  .address-row {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  /* Section Spacing */
  .section {
    padding: var(--spacing-10) 0;
  }

  .main-content {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-10);
  }
}

/* ===========================================
   VERY SMALL SCREENS (below 480px)
   =========================================== */

@media (max-width: 479px) {
  .container {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }

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

  .btn-full-mobile {
    width: 100%;
  }

  .datetime-row {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   TOUCH DEVICE ADJUSTMENTS
   =========================================== */

@media (hover: none) {
  /* Disable parallax on touch devices (iOS doesn't support background-attachment: fixed) */
  body {
    background-attachment: scroll;
  }

  /* Disable hover effects that don't work well on touch */
  .product-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .hover-lift:hover {
    transform: none;
  }

  /* Larger touch targets */
  .btn {
    min-height: 44px;
  }

  .form-input,
  .form-select {
    min-height: 44px;
  }

  .quantity-btn {
    width: 44px;
    height: 44px;
  }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
  /* Hide non-essential elements */
  .site-header,
  .site-footer,
  .cart-drawer,
  .modal-backdrop,
  .btn,
  .filter-group,
  .toast-container {
    display: none !important;
  }

  /* Reset colors for print */
  body {
    background: white;
    color: black;
  }

  /* Ensure images print */
  img {
    max-width: 100% !important;
  }

  /* Break pages appropriately */
  .product-card {
    break-inside: avoid;
  }
}

/* ===========================================
   HIGH CONTRAST MODE
   =========================================== */

@media (prefers-contrast: high) {
  :root {
    --color-border: #000;
    --color-text-muted: #333;
  }

  .btn {
    border-width: 3px;
  }

  .form-input,
  .form-select {
    border-width: 2px;
  }
}

/* ===========================================
   LANDSCAPE ORIENTATION
   =========================================== */

@media (orientation: landscape) and (max-height: 500px) {
  /* Compact header in landscape on small screens */
  .header-inner {
    height: 50px;
  }

  .modal {
    max-height: 100vh;
  }

  .modal-body {
    max-height: calc(100vh - 100px);
  }
}