/**
 * LuperIQ Site Editor - Production Frontend CSS
 * 
 * Integrates the battle-tested grid styling from the original Barrington module
 * with our breakthrough display: contents layout ordering solution.
 * 
 * Features:
 * - Production-tested responsive breakpoints
 * - Perfect element ordering for JavaScript-generated HTML
 * - Advanced hover effects and animations  
 * - Zero hardcoded domains or values
 * - Mobile-first responsive design
 * - Accessibility support
 */

/* ============================================================================
   BREAKTHROUGH LAYOUT ORDERING SYSTEM
   The impossible solution that actually works!
   ============================================================================ */

/* Main Product Grid Container - Targeting ACTUAL JavaScript-Generated Classes */
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--luperiq-desktop-columns, 3), 1fr) !important;
    gap: var(--luperiq-grid-gap, 25px) !important;
    margin: var(--luperiq-container-margin, 20px 0) !important;
    padding: var(--luperiq-container-padding, 0) !important;
    justify-items: center !important;
    align-items: start !important;
}

/* Individual Product Cards - Target .product-clickable (the actual container) */
.product-grid .product-clickable {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: var(--luperiq-card-padding, 15px) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: var(--luperiq-card-max-width, 280px) !important;
    background: var(--luperiq-card-background, #ffffff) !important;
    border-radius: var(--luperiq-card-border-radius, 12px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: var(--luperiq-hover-transition, transform 0.2s ease, box-shadow 0.2s ease) !important;
    cursor: pointer !important;
    border: 1px solid var(--luperiq-card-border-color, transparent) !important;
}

/* Hover Effects - Production Tested */
.product-grid .product-clickable:hover {
    transform: var(--luperiq-hover-transform, translateY(-3px)) !important;
    box-shadow: var(--luperiq-hover-shadow, 0 4px 15px rgba(0,0,0,0.15)) !important;
}

/* ============================================================================
   THE BREAKTHROUGH SOLUTION: Element Ordering with display: contents
   This makes nested containers "transparent" to CSS layout!
   ============================================================================ */

/* Product Info Container - THE BREAKTHROUGH! */
.product-grid .product-info {
    display: contents !important;
    /* This is the magic - makes the container invisible to layout 
       while preserving the elements inside for individual ordering */
}

/* ORDER 1: Product Title FIRST - Target .product-title */
.product-grid .product-title {
    order: var(--luperiq-title-order, -1) !important;
    text-align: center !important;
    color: var(--luperiq-title-color, #cc0000) !important;
    font-size: var(--luperiq-title-font-size, 18px) !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    width: 100% !important;
    display: block !important;
}

/* ORDER 2: Product Image Container SECOND - Target .product-image-container and .product-image */
.product-grid .product-image-container {
    order: var(--luperiq-image-order, 1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
}

.product-grid .product-image {
    width: 100% !important;
    max-width: var(--luperiq-image-max-width, 240px) !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: var(--luperiq-image-border-radius, 8px) !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

.product-grid .product-clickable:hover .product-image {
    transform: var(--luperiq-image-hover-transform, scale(1.02)) !important;
}

/* ORDER 3: Product Price THIRD - Target .product-price */
.product-grid .product-price {
    order: var(--luperiq-price-order, 2) !important;
    text-align: center !important;
    color: var(--luperiq-price-color, #0066cc) !important;
    font-size: var(--luperiq-price-font-size, 16px) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* ============================================================================
   RESPONSIVE DESIGN - Production Tested Breakpoints
   ============================================================================ */

/* Tablet Responsive */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(var(--luperiq-tablet-columns, 2), 1fr) !important;
        gap: var(--luperiq-tablet-gap, 20px) !important;
        padding: 0 var(--luperiq-tablet-padding, 10px) !important;
    }
    
    .product-grid .product-clickable {
        max-width: none !important;
        padding: var(--luperiq-tablet-card-padding, 12px) !important;
    }
    
    .product-grid .product-title {
        font-size: var(--luperiq-tablet-title-size, 16px) !important;
        margin: 0 0 10px 0 !important;
    }
    
    .product-grid .product-image {
        max-width: var(--luperiq-tablet-image-size, 200px) !important;
    }
    
    .product-grid .product-price {
        font-size: var(--luperiq-tablet-price-size, 15px) !important;
    }
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(var(--luperiq-mobile-columns, 1), 1fr) !important;
        gap: var(--luperiq-mobile-gap, 18px) !important;
        padding: 0 var(--luperiq-mobile-padding, 15px) !important;
    }
    
    .product-grid .product-clickable {
        max-width: var(--luperiq-mobile-card-max-width, 300px) !important;
        margin: 0 auto !important;
        padding: var(--luperiq-mobile-card-padding, 15px) !important;
    }
    
    .product-grid .product-title {
        font-size: var(--luperiq-mobile-title-size, 17px) !important;
        margin: 0 0 12px 0 !important;
    }
    
    .product-grid .product-image {
        max-width: var(--luperiq-mobile-image-size, 220px) !important;
    }
    
    .product-grid .product-price {
        font-size: var(--luperiq-mobile-price-size, 16px) !important;
    }
}

/* ============================================================================
   THEME COMPATIBILITY & OVERRIDES
   ============================================================================ */

/* Extra specificity for stubborn themes */
body.woocommerce .product-grid .product-clickable,
body.single-product .product-grid .product-clickable {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Ensure proper flexbox behavior */
.product-grid .product-clickable > * {
    flex-shrink: 0 !important;
}

/* Hide problematic page titles */
body.woocommerce-page .page-title,
body.woocommerce-page .woocommerce-products-header__title,
body.woocommerce-page h1.entry-title,
body.archive .page-title,
body.shop .page-title {
    display: none !important;
}

/* ============================================================================
   LAYOUT ORDER VARIATIONS - Configurable through Admin
   ============================================================================ */

/* Title → Image → Price (Default) */
.product-grid.layout-title-image-price .product-title { order: -1 !important; }
.product-grid.layout-title-image-price .product-image-container { order: 1 !important; }
.product-grid.layout-title-image-price .product-price { order: 2 !important; }

/* Image → Title → Price */
.product-grid.layout-image-title-price .product-image-container { order: -1 !important; }
.product-grid.layout-image-title-price .product-title { order: 1 !important; }
.product-grid.layout-image-title-price .product-price { order: 2 !important; }

/* Title → Price → Image */
.product-grid.layout-title-price-image .product-title { order: -1 !important; }
.product-grid.layout-title-price-image .product-price { order: 1 !important; }
.product-grid.layout-title-price-image .product-image-container { order: 2 !important; }

/* ============================================================================
   MODAL SYSTEM INTEGRATION
   ============================================================================ */

/* Modal trigger buttons */
.luperiq-modal-trigger,
.bgtcs-more-info-button,
.bgtcs-view-images-button,
.bgtcs-color-details-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    background: var(--luperiq-button-background, #0073aa);
    color: var(--luperiq-button-color, #ffffff);
    border: none;
    border-radius: var(--luperiq-button-border-radius, 4px);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.luperiq-modal-trigger:hover,
.bgtcs-more-info-button:hover,
.bgtcs-view-images-button:hover,
.bgtcs-color-details-button:hover {
    background: var(--luperiq-button-hover-background, #005a87);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Button container */
.luperiq-button-container,
.bgtcs-sp-button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

/* ============================================================================
   ACCESSIBILITY FEATURES
   ============================================================================ */

/* Focus indicators */
.product-grid .product-clickable:focus,
.luperiq-modal-trigger:focus,
.bgtcs-more-info-button:focus {
    outline: 2px solid var(--luperiq-focus-color, #0073aa);
    outline-offset: 2px;
}

/* Screen reader only content */
.luperiq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   HIGH CONTRAST & REDUCED MOTION SUPPORT
   ============================================================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
    .product-grid .product-clickable {
        border: 2px solid currentColor !important;
    }
    
    .luperiq-modal-trigger,
    .bgtcs-more-info-button {
        border: 2px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .product-grid .product-clickable,
    .product-grid .product-image,
    .luperiq-modal-trigger,
    .bgtcs-more-info-button {
        transition: none !important;
    }
    
    .product-grid .product-clickable:hover {
        transform: none !important;
    }
}

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

@media print {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .product-grid .product-clickable {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .luperiq-modal-trigger,
    .bgtcs-more-info-button {
        display: none !important;
    }
}

/* ============================================================================
   DEBUGGING HELPERS (Remove in production)
   ============================================================================ */

/* Uncomment for debugging layout issues */
/*
.product-grid.debug {
    border: 2px dashed red;
}

.product-grid.debug .product-clickable {
    border: 1px dashed blue;
}

.product-grid.debug .product-info {
    border: 1px dashed green;
}

.product-grid.debug .product-title {
    background: rgba(255, 0, 0, 0.1);
}

.product-grid.debug .product-image-container {
    background: rgba(0, 255, 0, 0.1);
}

.product-grid.debug .product-price {
    background: rgba(0, 0, 255, 0.1);
}
*/