/**
 * Shop The Look - Module-Specific Styles
 * Sparkles Design Library Component
 *
 * This file contains unique layout patterns and styles specific to Shop The Look
 * functionality that don't fit into generic card, button, or gallery components.
 *
 * Dependencies:
 * - sparkles-tokens.css (CSS variables)
 * - sparkles-utilities.css (base utilities)
 * - cards.css (extends card components)
 * - media-gallery.css (extends gallery components)
 *
 * Used by: CustomHyva_HyvaShopTheLook module
 */

/* ========== SHOP THE LOOK - CORE CONTAINER ========== */

/**
 * Primary wrapper for Shop The Look functionality
 * Ensures minimum height and proper layout context
 */
.shop-the-look-wrapper {
    min-height: 50vh;
    --color-primary: var(--color-primary);
    --color-primary-darker: var(--color-primary-dark);
    --color-secondary: var(--color-secondary);
    --color-accent: var(--color-accent);
    --color-white: var(--white);
    container-type: inline-size;
}

/* ========== HERO SECTIONS ========== */

/**
 * Hero section layouts for Shop The Look
 * Features optimized image rendering and isolation
 */
.hero-section {
    position: relative;
    isolation: isolate;
}

.hero-section img {
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.shop-the-look-hero-content {
    max-width: 1360px;
}

/* TODO: Replace with Tailwind v4.1 text-shadow-* utilities when moving to template classes */
.shop-the-look-hero-title-shadow {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* TODO: Replace with Tailwind v4.1 text-shadow-* utilities when moving to template classes */
.shop-the-look-hero-description-shadow {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* ========== CARD PATTERNS SPECIFIC TO SHOP THE LOOK ========== */

/**
 * Enhanced card styles that extend base Sparkles cards
 * Used for categories, looks, and products in Shop The Look contexts
 */
.category-card,
.look-card,
.product-card {
    background: var(--color-white);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.category-card:hover,
.look-card:hover,
.product-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* ========== IMAGE CONTAINER PATTERNS ========== */

/**
 * Specialized image containers for different content types
 * Features overflow management and responsive behavior
 */
.card-image-container,
.look-image-container,
.product-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
}

.card-image-container img,
.look-image-container img,
.product-image-container img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Group hover effects for enhanced user interaction
 * Provides subtle scale animation on image hover
 */
.group:hover .card-image-container img,
.group:hover .look-image-container img,
.group:hover .product-image-container img {
    transform: scale(1.05);
}

/* ========== INTERACTIVE BUTTONS ========== */

/**
 * Quick view and add to cart buttons with backdrop filter effects
 * Creates modern glassmorphism appearance
 */
.quick-view-btn,
.add-to-cart-btn {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.quick-view-btn:hover,
.add-to-cart-btn:hover {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ========== TYPOGRAPHY OVERRIDES ========== */

/**
 * Heading font family with letter spacing optimization
 * Enhances readability for Shop The Look content
 */
.font-heading {
    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
    letter-spacing: -0.02em;
}

/* ========== MODAL AND OVERLAY PATTERNS ========== */

/**
 * Quick preview modal content styling
 * Optimized for mobile and desktop viewing
 */
.quick-preview-content {
    /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- dvh fallback for older browsers */
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.quick-preview-content::-webkit-scrollbar {
    width: 6px;
}

.quick-preview-content::-webkit-scrollbar-track {
    background: transparent;
}

.quick-preview-content::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
}

/* ========== LOADING STATES ========== */

/**
 * Shimmer loading animation for content placeholders
 * Provides visual feedback during content loading
 */
.loading-placeholder {
    background: linear-gradient(90deg, var(--gray-150) 25%, var(--gray-250) 50%, var(--gray-150) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 2s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ========== BREADCRUMB NAVIGATION ========== */

/**
 * Enhanced breadcrumb styling for Shop The Look navigation
 * Improves visual hierarchy and interaction feedback
 */
.breadcrumb-nav a:hover {
    color: var(--color-primary);
}

.breadcrumb-nav svg {
    flex-shrink: 0;
}

/* ========== STATUS AND FEEDBACK PATTERNS ========== */

/**
 * Error state styling for Shop The Look contexts
 * Provides clear visual feedback for error conditions
 */
.error-state {
    color: var(--color-error);
    text-align: center;
    padding: 2rem;
}

.error-state svg {
    color: var(--color-error);
    opacity: 0.6;
}

/**
 * Success message styling for user feedback
 * Used for cart additions, wishlist updates, etc.
 */
.success-message {
    color: var(--color-success);
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

/* ========== PERFORMANCE OPTIMIZATIONS ========== */

/**
 * Content visibility optimizations for Shop The Look images
 * Improves rendering performance for large product catalogs
 */
.hero-section img.lazy-loaded {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

.category-grid img,
.look-cards-section img,
.product-grid img {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

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

/**
 * Focus styles for Shop The Look interactive elements
 * Ensures proper keyboard navigation support
 */
.category-card:focus-within,
.look-card:focus-within,
.product-card:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

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

/**
 * Mobile-first responsive design for Shop The Look
 * Note: Grid layouts use Tailwind utilities in templates
 */
@container (max-width: 768px) {
    .shop-the-look-wrapper {
        min-height: 40vh;
    }

    .hero-section {
        margin-bottom: 2rem;
    }

    .quick-preview-content {
        /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- dvh fallback for older browsers */
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .category-card:hover,
    .look-card:hover,
    .product-card:hover {
        transform: translateY(-1px);
    }
}

/* ========== THEME VARIATIONS ========== */

/**
 * Dark mode support for Shop The Look
 * Provides theme-aware styling when dark mode is active
 */
@media (prefers-color-scheme: dark) {

    .category-card,
    .look-card,
    .product-card {
        background: var(--color-surface-dark, var(--gray-800));
        color: var(--color-text-dark, var(--gray-50));
    }

    .loading-placeholder {
        background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
        background-size: 200% 100%;
    }
}

/* ========== HIGH CONTRAST MODE SUPPORT ========== */

/**
 * Enhanced visibility for high contrast preferences
 * Improves accessibility for users with visual needs
 */
@media (prefers-contrast: high) {

    .category-card,
    .look-card,
    .product-card {
        border: 2px solid;
    }

    .hero-section .absolute {
        background: rgba(0, 0, 0, 0.8);
    }

    .quick-view-btn,
    .add-to-cart-btn {
        border: 2px solid var(--color-primary);
    }
}

/* ========== REDUCED MOTION SUPPORT ========== */

/**
 * Motion reduction for accessibility compliance
 * Respects user preferences for reduced motion
 */
@media (prefers-reduced-motion: reduce) {

    body .group:hover .card-image-container img,
    body .group:hover .look-image-container img,
    body .group:hover .product-image-container img {
        transform: none;
    }
}

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

/**
 * Print-optimized styling for Shop The Look content
 * Ensures proper printing behavior and layout
 */
@media print {

    body .hero-section .absolute,
    body .quick-view-btn,
    body .add-to-cart-btn,
    body button,
    body [x-show],
    body .breadcrumb-nav {
        display: none;
    }

    .category-card,
    .look-card,
    .product-card,
    .showcase-section {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--gray-350);
    }

    body .hero-section {
        height: auto;
        max-height: 300px;
    }

    .shop-the-look-wrapper {
        min-height: auto;
    }
}

/* ========== GRID LAYOUT HELPERS ========== */

/**
 * Utility classes for Shop The Look specific grid patterns
 * Supplements Tailwind grid utilities with custom behaviors
 */
.shop-grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.shop-grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Aspect ratio helpers for consistent product display */
.shop-aspect-product {
    aspect-ratio: 3 / 4;
}

.shop-aspect-look {
    aspect-ratio: 4 / 3;
}

.shop-aspect-category {
    aspect-ratio: 16 / 10;
}

/* ========== INTERACTION STATES ========== */

/**
 * Enhanced interaction feedback for Shop The Look elements
 * Provides clear visual feedback for user actions
 */
.shop-interactive:active {
    transform: scale(0.98);
}

.shop-interactive:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ========== LOADING AND TRANSITION STATES ========== */

/**
 * Loading state animations for Shop The Look
 * Provides smooth transitions during content loading
 */
.shop-loading {
    opacity: 0.7;
    pointer-events: none;
}

.shop-loading .loading-placeholder {
    animation: loading-shimmer 1.5s infinite;
}

.shop-fade-in {
    animation: shop-fade-in 0.5s ease-out;
}

@keyframes shop-fade-in {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}