/* ============================================
   RESPONSIVE DESIGN
   Mobile-first breakpoints and optimizations
   ============================================ */

/* Mobile First Approach */
/* Base styles are for mobile, then scale up */

/* ============================================
   BREAKPOINTS
   ============================================ */
/* 
  - Mobile: < 768px (default)
  - Tablet: 768px - 1024px
  - Desktop: > 1024px
*/

/* ============================================
   MOBILE OPTIMIZATIONS (Default)
   ============================================ */

/* Touch-friendly sizes */
button,
a.btn,
.btn {
    min-height: 44px;
    min-width: 44px;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   TABLET & UP (768px+)
   ============================================ */
@media (min-width: 768px) {

    /* Container adjustments */
    .container {
        padding: 0 32px;
    }

    /* Grid layouts */
    .grid-tablet-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .grid-tablet-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Typography scaling */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {

    /* Container max width */
    .container {
        max-width: 1320px;
    }

    /* Grid layouts */
    .grid-desktop-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .grid-desktop-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }

    /* Typography scaling */
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    h3 {
        font-size: 2rem;
    }

    /* Hover effects only on desktop */
    .hover-desktop:hover {
        opacity: 0.85;
    }
}

/* ============================================
   MOBILE ONLY (< 768px)
   ============================================ */
@media (max-width: 767px) {

    /* Hide desktop navigation */
    .desktop-nav {
        display: none !important;
    }

    /* Show mobile menu button */
    .mobile-menu-btn {
        display: block !important;
    }

    /* Stack elements */
    .stack-mobile {
        flex-direction: column;
    }

    /* Full width on mobile */
    .full-width-mobile {
        width: 100%;
    }

    /* Reduce font sizes */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Smaller padding */
    .container {
        padding: 0 16px;
    }

    /* Reduce section spacing */
    section {
        padding: 40px 0;
    }

    /* Product cards - 1 column on mobile */
    .product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show on mobile only */
    .show-mobile {
        display: block !important;
    }
}

/* ============================================
   TABLET ONLY (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Product cards - 2 columns on tablet */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Hide on tablet */
    .hide-tablet {
        display: none !important;
    }
}

/* ============================================
   NAVIGATION RESPONSIVENESS
   ============================================ */

/* Mobile menu */
@media (max-width: 767px) {
    .navbar-nav {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .navbar-nav.active {
        transform: translateX(0);
    }

    .navbar-nav li {
        width: 100%;
        margin: 8px 0;
    }

    .navbar-nav .nav-link {
        display: block;
        padding: 12px 16px;
        border-radius: 8px;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background-color: rgba(0, 174, 239, 0.1);
    }
}

/* ============================================
   PRODUCT DETAIL RESPONSIVENESS
   ============================================ */
@media (max-width: 767px) {

    /* Stack product image and info */
    .product-detail-layout {
        flex-direction: column;
    }

    /* Sticky buy button on mobile */
    .product-buy-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px;
        background: white;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

    /* Adjust body padding for fixed buy button */
    body.has-sticky-buy {
        padding-bottom: 80px;
    }
}

/* ============================================
   FOOTER RESPONSIVENESS
   ============================================ */
@media (max-width: 767px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-column {
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Flexbox utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: 1rem;
}

.gap-8 {
    gap: 2rem;
}

/* Spacing utilities */
.m-0 {
    margin: 0;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.p-4 {
    padding: 1rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Text alignment */
.text-center {
    text-align: center;
}

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

.text-right {
    text-align: right;
}

/* Display utilities */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.hidden {
    display: none;
}

/* Width utilities */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    /* Hide non-essential elements */
    nav,
    footer,
    .no-print {
        display: none !important;
    }

    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    a {
        text-decoration: underline;
    }
}