/**
 * Related Products Responsive Grid
 * Applies to all card styles with proper responsive breakpoints
 *
 * @package eSaicoWC
 * @version 1.0.0
 */

/* ========================================================================
   RELATED PRODUCTS CONTAINER
   ======================================================================== */

.related.products ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.related.products ul.products li {
    margin: 0;
}

/* ========================================================================
   RESPONSIVE BREAKPOINTS
   ======================================================================== */

/* Large Desktop: 4 columns */
@media (min-width: 1441px) {
    .related.products ul.products {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1400px;
    }
}

/* Desktop: 3-4 columns based on space */
@media (min-width: 1025px) and (max-width: 1440px) {
    .related.products ul.products {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1024px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .related.products ul.products {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ========================================================================
   LIMIT NUMBER OF PRODUCTS
   ======================================================================== */

/* Show max 4 products on large screens */
@media (min-width: 1025px) {
    .related.products ul.products li:nth-child(n+5) {
        display: none;
    }
}

/* Show max 4 products on tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .related.products ul.products li:nth-child(n+5) {
        display: none;
    }
}

/* Show all on mobile (but in single column) */
@media (max-width: 768px) {
    .related.products ul.products li:nth-child(n+4) {
        display: none;
    }
}

/* ========================================================================
   SECTION STYLING
   ======================================================================== */

.related.products {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--esaico-border-color-light, #f0f0f0);
}

.related.products > h2 {
    font-size: var(--esaico-font-size-2xl, 1.75rem);
    font-weight: var(--esaico-font-weight-bold, 700);
    color: var(--esaico-text-primary, #1a1a1a);
    margin-bottom: 30px;
    font-family: var(--esaico-font-family-heading, inherit);
}

/* ========================================================================
   CARD STYLE OVERRIDES
   ======================================================================== */

/* Ensure related product cards don't get extra large */
.related.products .music-card,
.related.products .product-item,
.related.products .product-card {
    max-width: 100%;
}

/* Vertical cards in related products */
body.design-vertical .related.products .music-card {
    height: auto;
}

/* Horizontal cards in related products - stack on small containers */
body.design-horizontal .related.products .product-item {
    flex-direction: column;
    text-align: center;
}

body.design-horizontal .related.products .product-image {
    margin-right: 0;
    margin-bottom: 12px;
}

@media (min-width: 1025px) {
    body.design-horizontal .related.products .product-item {
        flex-direction: row;
        text-align: left;
    }

    body.design-horizontal .related.products .product-image {
        margin-right: 16px;
        margin-bottom: 0;
    }
}

/* Minimalist cards - already responsive */
body.design-minimalist .related.products .product-card {
    /* Inherits minimalist card styles - no override needed */
}

/* ========================================================================
   LOADING STATE
   ======================================================================== */

.related.products.loading ul.products {
    opacity: 0.6;
    pointer-events: none;
}

.related.products.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--esaico-border-color, #e0e0e0);
    border-top-color: var(--esaico-primary, #0b996e);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}