/* ============================================================
   GLOBAL RESPONSIVE FIXES
   Fixes text over images, overflow, and layout issues
   ============================================================ */

/* ============================================================
   1. CONTAINER & LAYOUT FIXES
   ============================================================ */

/* Ensure all containers have proper sizing */
.container,
.site-container,
.header-inner,
.footer-grid,
.product-hero-grid {
    box-sizing: border-box;
    max-width: 100%;
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix images causing overflow */
img, video, iframe, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   2. TEXT OVERFLOW FIXES
   ============================================================ */

/* Prevent text overflow with ellipsis */
.product-title,
.inr-product-card .inr-card-title,
.woocommerce-loop-product__title,
.product-details-wrapper .product_title,
.inr-card-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    hyphens: auto;
}

/* Single line text overflow */
.inr-card-price,
.price,
.inr-product-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   3. CARD LAYOUT FIXES - Prevent text over images
   ============================================================ */

/* Ensure cards have proper structure */
.inr-product-card,
.woocommerce ul.products li.product,
.content-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Image container - fixed aspect ratio */
.inr-card-img-wrap,
.inr-product-card .inr-card-img,
.woocommerce ul.products li.product .inr-card-img,
.woocommerce ul.products li.product a img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    flex-shrink: 0;
}

/* Card info - proper spacing below image */
.inr-card-info,
.woocommerce ul.products li.product .inr-card-info {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255,255,255,0.02);
}

/* ============================================================
   4. HERO SECTION FIXES
   ============================================================ */

/* Hero content positioning */
.hero-content-wrap,
.marketplace-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Ensure text doesn't overlap with background elements */
.hero-title,
.marketplace-hero-title {
    position: relative;
    z-index: 3;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
    word-wrap: break-word;
}

/* ============================================================
   5. PRODUCT PAGE FIXES
   ============================================================ */

/* Product gallery - prevent overlap */
.product-gallery-wrapper {
    position: relative;
    z-index: 1;
}

/* Product details - proper spacing */
.product-details-wrapper {
    position: relative;
    z-index: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ============================================================
   6. MOBILE BREAKPOINT FIXES
   ============================================================ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :root {
        --header-h: 70px;
    }
    
    /* Fix product grid spacing */
    .product-hero-grid {
        gap: 2rem;
    }
    
    /* Ensure text doesn't overlap */
    .product-details-wrapper .product_title {
        font-size: 2rem;
    }
}

/* Mobile (640px - 768px) */
@media (max-width: 768px) {
    :root {
        --header-h: 64px;
    }
    
    /* Fix container padding */
    .container,
    .site-container,
    .header-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Product hero - single column with proper spacing */
    .product-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .product-gallery-wrapper {
        position: relative;
        top: 0;
    }
    
    /* Text sizing for mobile */
    .product-details-wrapper .product_title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .product-details-wrapper .price {
        font-size: 1.25rem;
    }
    
    /* Ensure no text over images on mobile */
    .inr-product-options {
        margin: 15px 0;
    }
    
    /* Card spacing fix */
    .woocommerce ul.products {
        gap: 1rem;
    }
    
    /* Footer grid fix */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Small Mobile (480px - 640px) */
@media (max-width: 640px) {
    /* Even smaller padding */
    .container,
    .site-container,
    .header-inner {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Cards - ensure proper spacing */
    .inr-product-card,
    .woocommerce ul.products li.product {
        border-radius: 8px;
    }
    
    .inr-card-info {
        padding: 0.75rem;
    }
    
    .inr-card-title {
        font-size: 0.9rem;
    }
    
    .inr-card-price {
        font-size: 0.85rem;
    }
    
    /* Footer - single column */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Hero title sizing */
    .marketplace-hero-title {
        font-size: 1.75rem;
    }
    
    /* Mobile bottom bar spacing */
    body {
        padding-bottom: 60px;
    }
}

/* Extra Small Mobile (< 480px) */
@media (max-width: 480px) {
    :root {
        --header-h: 60px;
    }
    
    /* Very compact header */
    .header-inner {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Smaller text */
    .marketplace-hero-title {
        font-size: 1.5rem;
    }
    
    /* Compact cards */
    .inr-card-title {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
    
    .inr-card-price {
        font-size: 0.8rem;
    }
    
    /* Product page - extra compact */
    .product-details-wrapper .product_title {
        font-size: 1.25rem;
    }
    
    /* Single product option */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* Very Small Devices (< 375px) */
@media (max-width: 375px) {
    .marketplace-hero-title {
        font-size: 1.25rem;
    }
    
    .inr-card-title {
        font-size: 0.8rem;
    }
    
    /* Extreme compact header */
    .site-branding .logo-text {
        font-size: 0.9rem;
    }
    
    .custom-logo {
        max-height: 28px;
    }
}

/* ============================================================
   7. LANDSCAPE MODE FIXES
   ============================================================ */

/* Landscape on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --header-h: 56px;
    }
    
    /* Compact hero */
    .marketplace-hero {
        min-height: auto;
        padding: 3rem 0;
    }
    
    /* Side-by-side layout if possible */
    .product-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   8. TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */

/* Larger touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .nav-toggle {
        width: 48px;
        height: 48px;
    }
    
    .header-icons .icon-link {
        width: 44px;
        height: 44px;
    }
    
    .inr-product-card .button,
    .woocommerce ul.products li.product .button {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    .inr-option-select {
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* ============================================================
   9. NOTCH DEVICE FIXES (iPhone X+)
   ============================================================ */

@supports (padding-top: env(safe-area-inset-top)) {
    .site-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .marketplace-hero {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ============================================================
   10. PRINT FIXES
   ============================================================ */

@media print {
    .site-header,
    .mobile-bottom-bar,
    .cart-drawer,
    .mobile-nav-overlay {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
    }
}