/* ========================================
   DROPP Urban Wear - Responsive Stylesheet
   Mobile First Approach
   ======================================== */

/* ========================================
   Small Devices (Mobile - 576px and up)
   ======================================== */

@media (min-width: 576px) {
    /* Typography */
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem; }

    /* Products Grid */
    .products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    /* Cart */
    .cart-item {
        grid-template-columns: 100px 1fr;
        gap: var(--space-lg);
    }

    .cart-item__image {
        width: 100px;
        height: 100px;
    }

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

    .footer__brand {
        text-align: left;
    }

    .footer__social {
        text-align: right;
    }

    .footer__social-links {
        justify-content: flex-end;
    }
}

/* ========================================
   Medium Devices (Tablets - 768px and up)
   ======================================== */

@media (min-width: 768px) {
    /* Container */
    :root {
        --container-padding: 2rem;
    }

    /* Header */
    .header__nav {
        display: block;
    }

    .header__mobile-toggle {
        display: none;
    }

    /* Hero */
    .hero__tagline {
        font-size: 2rem;
    }

    .hero__cta {
        font-size: 1.5rem;
        padding: var(--space-lg) var(--space-3xl);
    }

    /* Products */
    .products {
        padding: var(--space-4xl) 0;
    }

    .products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }

    .product-card__content {
        padding: var(--space-xl);
    }

    /* Cart */
    .cart__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cart__content {
        grid-template-columns: 1fr 360px;
        align-items: start;
    }

    .cart-item {
        grid-template-columns: 120px 1fr auto;
        align-items: center;
    }

    .cart-item__image {
        width: 120px;
        height: 120px;
    }

    .cart-item__actions {
        margin-top: 0;
        flex-direction: column;
        align-items: flex-end;
    }

    /* Footer */
    .footer__content {
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
    }

    .footer__brand,
    .footer__contact,
    .footer__social {
        text-align: left;
    }

    .footer__social-links {
        justify-content: flex-start;
    }

    .footer__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer__founders {
        margin-top: 0;
    }
}

/* ========================================
   Large Devices (Desktops - 992px and up)
   ======================================== */

@media (min-width: 992px) {
    /* Typography */
    h1 { font-size: 4rem; }
    h2 { font-size: 3rem; }

    /* Header */
    .header__container {
        padding: var(--space-lg) var(--container-padding);
    }

    .header__logo img {
        height: 60px;
    }

    .header__menu {
        gap: var(--space-2xl);
    }

    .header__link {
        font-size: 1.25rem;
    }

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

    /* Cart */
    .cart__content {
        grid-template-columns: 1fr 400px;
        gap: var(--space-2xl);
    }

    .cart-item {
        padding: var(--space-lg);
    }
}

/* ========================================
   Extra Large Devices (1200px and up)
   ======================================== */

@media (min-width: 1200px) {
    /* Container */
    :root {
        --container-padding: 3rem;
    }

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

    /* Header */
    .header__logo img {
        height: 70px;
    }

    /* Hero */
    .hero__tagline {
        font-size: 2.5rem;
        letter-spacing: 0.3em;
    }

    /* Products */
    .products__grid {
        gap: var(--space-2xl);
    }

    .product-card__name {
        font-size: 1.75rem;
    }

    .product-card__price {
        font-size: 2rem;
    }
}

/* ========================================
   Extra Extra Large Devices (1400px and up)
   ======================================== */

@media (min-width: 1400px) {
    :root {
        --container-max: 1320px;
    }

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

/* ========================================
   Height-based Queries
   ======================================== */

/* Short viewports */
@media (max-height: 700px) {
    .hero {
        min-height: auto;
        padding: 120px 0 80px;
    }

    .hero__scroll-indicator {
        display: none;
    }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .size-btn {
        width: 48px;
        height: 48px;
    }

    .cart-item__quantity button {
        width: 40px;
        height: 40px;
    }

    /* Remove hover effects that don't work on touch */
    .product-card:hover {
        transform: none;
    }

    .product-card__zoom {
        opacity: 1;
        transform: translateY(0);
    }

    .btn:hover::before {
        display: none;
    }

    /* Disable parallax on mobile */
    .hero {
        background-attachment: scroll;
    }
}

/* ========================================
   High DPI Displays
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp borders */
    .product-card,
    .cart-item,
    .btn {
        border-width: 0.5px;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    /* Hide non-essential elements */
    .header,
    .mobile-menu,
    .hero__scroll-indicator,
    .lightbox,
    .toast,
    .product-card__add-btn,
    .cart__summary .btn,
    .footer__social {
        display: none !important;
    }

    /* Reset background colors */
    body,
    .hero,
    .products,
    .footer {
        background: white !important;
        color: black !important;
    }

    /* Ensure content is visible */
    .hero__content,
    .hero__tagline {
        color: black !important;
        filter: none !important;
    }

    /* Adjust layout for print */
    .products__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ========================================
   Dark Mode Support (Future)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /*
     * Dark mode styles can be added here
     * Currently the site uses a dark aesthetic already
     * This is a placeholder for future enhancements
     */
}

/* ========================================
   Landscape Mode Adjustments
   ======================================== */

@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: auto;
        padding: 80px 0 60px;
    }

    .hero__tagline {
        font-size: 1.25rem;
        margin-bottom: var(--space-md);
    }

    .hero__cta {
        padding: var(--space-sm) var(--space-lg);
        font-size: 1rem;
    }

    .hero__scroll-indicator {
        display: none;
    }
}

/* ========================================
   Very Small Screens (320px)
   ======================================== */

@media (max-width: 359px) {
    :root {
        --container-padding: 1rem;
    }

    .header__logo img {
        height: 40px;
    }

    .hero__tagline {
        font-size: 1.25rem;
        letter-spacing: 0.1em;
    }

    .hero__cta {
        padding: var(--space-sm) var(--space-lg);
        font-size: 1rem;
    }

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

    .product-card__sizes-options {
        flex-wrap: wrap;
    }

    .size-btn {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    .cart-item {
        grid-template-columns: 70px 1fr;
    }

    .cart-item__image {
        width: 70px;
        height: 70px;
    }

    .cart-item__name {
        font-size: 1rem;
    }
}

/* ========================================
   Safe Area Insets (Notched Devices)
   ======================================== */

@supports (padding: max(0px)) {
    .header__container {
        padding-left: max(var(--container-padding), env(safe-area-inset-left));
        padding-right: max(var(--container-padding), env(safe-area-inset-right));
    }

    .footer__container {
        padding-left: max(var(--container-padding), env(safe-area-inset-left));
        padding-right: max(var(--container-padding), env(safe-area-inset-right));
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
    }

    .mobile-menu {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}