/**
 * Card Layout Styles for Product Display
 * 
 * This file contains styles specific to the card layout.
 * The main wcps-styles.scss is loaded as default for all layouts.
 * 
 * @package Product_Display
 */

// Card layout specific styles will be added here
// Currently empty - styles will be moved from wcps-styles.scss as needed
/* --------------MODERN Card Grid layout wcps-layout-card-grid -------------- */
// Elevate Card Gallery 

// Breakpoints
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

/* -------------- Shared Base Styles for Card Grid Layouts -------------- */
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Common styles for all card grid layouts
    &.wcps-layout-card-grid,
    &.wcps-layout-card-grid-2,
    // PRO rest are in PRO 2
    &.wcps-layout-card-grid-3 {
        // pro rest are in pro 3
        margin: 30px 0;
        position: relative;

        .wcps-products-container {
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);
        }

        // Card Container
        .wcps-card-container {
            display: grid;
            grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 25px);
            width: var(--wcps-grid-width, 100%);
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);

            // Responsive grid adjustments
            @media (max-width: 1200px) {
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
                gap: 18px;
            }

            @media (max-width: 480px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 20px;
            }
        }

        // Modern Card Item with elevated design
        .wcps-card-item {
            background: var(--wcps-product-background, #fff);
            border-radius: var(--wcps-border-radius, 16px);
            overflow: hidden;
            position: relative;
            transition: all var(--wcps-hover-transition, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;

            // Modern card shadows
            @if var(--wcps-box-shadow)=="none" {
                box-shadow: none;
            }

            @else if var(--wcps-box-shadow)=="light" {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }

            @else if var(--wcps-box-shadow)=="medium" {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }

            @else if var(--wcps-box-shadow)=="heavy" {
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }

            @else {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }

            // Modern hover effects
            &:hover {
                @if var(--wcps-hover-effect)=="none" {
                    transform: none;
                }

                @else if var(--wcps-hover-effect)=="lift" {
                    transform: translateY(-8px);
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                @else if var(--wcps-hover-effect)=="shadow" {
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                @else if var(--wcps-hover-effect)=="zoom" {
                    transform: scale(1.03);
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                @else if var(--wcps-hover-effect)=="glow" {
                    box-shadow: 0 0 30px rgba(var(--wcps-accent-color, 59, 130, 246), 0.3);
                }

                @else {
                    transform: translateY(-8px);
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                .wcps-card-overlay {
                    opacity: 1;
                }

                .wcps-product-actions.wcps-actions-hover {
                    opacity: 1;
                    visibility: visible;
                }
            }
        }

        // Product wrapper
        .wcps-product {
            height: var(--wcps-product-width, 100%);
            display: flex;
            flex-direction: column;
            position: relative;
            background: var(--wcps-product-background, #fff);
        }

        // Enhanced Product Image with overlay
        .wcps-product-image {
            position: relative;
            overflow: hidden;
            aspect-ratio: var(--wcps-image-aspect-ratio, 4/3);

            // Gradient overlay for better text readability
            .wcps-card-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 2;
            }

            // Enhanced badge design
            .wcps-product-badge {
                position: var(--wcps-product-badge-position, absolute);
                top: var(--wcps-product-badge-top, 12px);
                right: var(--wcps-product-badge-right, 12px);
                background: linear-gradient(135deg, var(--wcps-product-badge-background, #ef4444) 0%, var(--wcps-product-badge-background, #dc2626) 100%);
                color: var(--wcps-product-badge-font-color, #fff);
                font-size: var(--wcps-product-badge-font-size, 12px);
                font-weight: var(--wcps-product-badge-font-weight, 700);
                text-transform: var(--wcps-product-badge-text-transform, uppercase);
                padding: var(--wcps-product-badge-padding, 5px);
                border-radius: var(--wcps-product-badge-border-radius, 20px);
                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
                z-index: var(--wcps-product-badge-z-index, 3);
                letter-spacing: 0.5px;
                backdrop-filter: blur(10px);
            }

            a {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 1;
            }

            img.wcps-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform var(--wcps-image-transition, 0.6s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
                border-radius: 0;
            }

            &:hover {
                img.wcps-image {
                    @if var(--wcps-image-hover-effect)=="none" {
                        transform: none;
                    }

                    @else if var(--wcps-image-hover-effect)=="zoom" {
                        transform: scale(1.1);
                    }

                    @else if var(--wcps-image-hover-effect)=="fade" {
                        opacity: 0.9;
                    }

                    @else if var(--wcps-image-hover-effect)=="blur" {
                        filter: blur(1px);
                    }

                    @else {
                        transform: scale(1.1);
                    }
                }
            }
        }


        // Enhanced Product Content
        .wcps-product-content {
            padding: var(--wcps-product-content-padding, 15px);
            margin: var(--wcps-product-content-margin, 0px);
            flex-grow: 1;
            display: flex;
            flex-direction: var(--wcps-product-content-direction, column);
            background: var(--wcps-product-content-background, #ffffff);
            position: relative;
            z-index: 1;
            text-align: var(--wcps-text-align, left);

            .wcps-product-title {
                margin: 0 0 12px;
                font-size: var(--wcps-title-size, 16px);
                font-weight: var(--wcps-title-weight, 600);
                line-height: 1.4;
                color: var(--wcps-product-title, #111827);

                a {
                    color: var(--wcps-product-title, #333);
                    font-size: var(--wcps-title-size, 16px);
                    font-weight: var(--wcps-title-weight, 600);
                    text-decoration: none;
                    transition: color 0.2s ease;

                    &:hover {
                        color: var(--wcps-product-title-hover-color, var(--wcps-accent-color, #3b82f6));
                    }
                }
            }

            .wcps-product-rating {
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                gap: 6px;

                .star-rating {
                    font-size: var(--wcps-star-size, 14px);

                    &::before {
                        color: var(--wcps-star-color, #fbbf24);
                        font-size: var(--wcps-star-size, 14px);
                    }
                }
            }

            .wcps-product-price {
                font-weight: var(--wcps-price-font-weight, 700);
                font-size: var(--wcps-price-font-size, 18px);
                color: var(--wcps-price-font-color, #111827);
                margin-bottom: 12px;

                del {
                    color: var(--wcps-price-delete-font-color, #9ca3af);
                    font-weight: 400;
                    margin-right: 8px;
                }
            }

            .wcps-product-description {
                font-size: var(--wcps-desc-size, 14px);
                color: var(--wcps-description-color, #6b7280);
                line-height: 1.5;
                margin-top: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

                p.wcps-product-description-content {
                    font-size: var(--wcps-desc-size, 14px);
                    color: var(--wcps-description-color, #23282d);
                }
            }
        }
    }


    // Modern pulse animation
    @keyframes modernPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        }

        70% {
            transform: scale(1.05);
            box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        }
    }
}

/* -------------- END -------------- */