/**
 * B04 Categories Tiles - Category Navigation Component
 * CSS ISOLATION: ALL classes prefixed with .saly-ps-
 * NO generic class names like .tile, .grid, .category
 *
 * FIGMA VARIANT: Updated to match Figma design (2025-11-13)
 * - Text overlay on top-left (not bottom)
 * - White text with 20% gradient overlay
 * - Spartan Bold 18px typography
 * - Fixed 224px tile height
 */

/* Spartan Font Import */
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@600;700&display=swap');

.saly-ps-block-categories-tiles {
    margin-bottom: 3rem;
    width: 100%;
}

/* Section Title - FIGMA SPEC: Spartan Bold 18px */
.saly-ps-block-title {
    font-family: 'Spartan', sans-serif;  /* Figma: Spartan Bold */
    font-weight: 700;                     /* Figma: Bold (700) */
    font-size: 18px;                      /* Figma: 18px */
    line-height: 28px;                    /* Figma: 28px */
    letter-spacing: -0.36px;              /* Figma: -0.36px */
    color: #333333;                       /* Figma: Main/Black */
    margin-bottom: 1.5rem;                /* 24px - Figma spec */
}

/* Categories Grid */
.saly-ps-categories-grid {
    display: grid;
    gap: 1.5rem;  /* 24px - matches Figma! */
    width: 100%;
}

/* Grid column layouts */
.saly-ps-categories-grid[data-ps-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.saly-ps-categories-grid[data-ps-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.saly-ps-categories-grid[data-ps-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.saly-ps-categories-grid[data-ps-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.saly-ps-categories-grid[data-ps-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* Layout Variants */
.saly-ps-categories-grid[data-ps-layout="list"] {
    grid-template-columns: 1fr !important;  /* Single column */
    gap: 1rem;  /* Smaller gap for list */
}

.saly-ps-categories-grid[data-ps-layout="list"] .saly-ps-category-tile {
    height: auto;  /* Auto height for list items */
    display: flex;
    flex-direction: row;  /* Horizontal layout */
}

.saly-ps-categories-grid[data-ps-layout="list"] .saly-ps-category-image {
    width: 200px;
    flex-shrink: 0;
}

.saly-ps-categories-grid[data-ps-layout="cards"] .saly-ps-category-tile {
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.saly-ps-categories-grid[data-ps-layout="cards"] .saly-ps-category-tile:hover {
    border-color: #cbd5e0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Category Tile */
.saly-ps-category-tile {
    position: relative;
    border-radius: 8px;  /* Matches Figma! */
    overflow: hidden;
    background: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.saly-ps-category-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.saly-ps-category-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Category Image */
.saly-ps-category-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f7fafc;
}

.saly-ps-category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.saly-ps-category-tile:hover .saly-ps-category-img {
    transform: scale(1.08);
}

/* Category Overlay (darkens on hover) - DEFAULT VARIANT */
.saly-ps-category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    transition: opacity 0.3s ease;
}

.saly-ps-category-tile:hover .saly-ps-category-overlay {
    opacity: 0.8;
}

/* Category Content */
.saly-ps-category-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.saly-ps-category-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: #1a202c;
    line-height: 1.3;
}

/* Product count styles removed - not in Figma design */

.saly-ps-category-description {
    font-size: 0.9375rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA functionality removed - not in Figma design */

/* No Categories Message */
.saly-ps-no-categories {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #718096;
    font-size: 1.125rem;
    margin: 0;
}

/* ========================================
   FIGMA VARIANT - Overlay Style (Updated 2025-11-13)
   ======================================== */

/* Fixed tile height - FIGMA SPEC: 224px */
.saly-ps-category-tile--overlay {
    height: 224px;
}

/* Full image coverage - aspect ratio 2:1 (448:224) */
.saly-ps-category-tile--overlay .saly-ps-category-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
}

/* Gradient Overlay - TOP LEFT (FIGMA SPEC) */
.saly-ps-category-tile--overlay .saly-ps-category-overlay {
    position: absolute;
    top: 0;          /* ← TOP zamiast bottom */
    left: 0;
    right: 0;
    bottom: auto;    /* ← IMPORTANT: unset bottom */
    height: 94px;    /* ← FIGMA SPEC: fixed gradient height */
    background: linear-gradient(
        to bottom,   /* ← DO DOŁU zamiast "to top" */
        rgba(0, 0, 0, 0.2) 0%,   /* ← 20% opacity zamiast 80% */
        transparent 100%
    );
    border-radius: 8px 8px 0 0;  /* ← Only top corners */
    opacity: 1;      /* ← Always visible */
    pointer-events: none;  /* ← Allow clicks through to link */
    z-index: 2;
}

/* HOVER STATE - Show subcategories (Figma 2025 design) */
.saly-ps-category-tile--overlay:hover .saly-ps-category-overlay {
    /* Full dark overlay on hover */
    height: 100%;
    background: rgba(78, 79, 85, 0.95);  /* Figma: almost black, 95% opacity */
    border-radius: 8px;  /* Full corners */
}

/* Content positioning - TOP LEFT */
.saly-ps-category-tile--overlay .saly-ps-category-content {
    position: absolute;
    top: 0;          /* ← TOP zamiast bottom */
    left: 0;
    right: 0;
    bottom: auto;    /* ← IMPORTANT: unset bottom */
    padding: 20px;   /* ← FIGMA SPEC: exact 20px */
    background: transparent;  /* ← No gradient (gradient is in overlay) */
    z-index: 3;      /* ← Above overlay */
    pointer-events: auto;  /* ← Text is clickable */
}

/* Typography - FIGMA SPEC: Spartan Bold 18px */
.saly-ps-category-tile--overlay .saly-ps-category-name {
    font-family: 'Spartan', sans-serif;  /* ← Spartan font */
    font-weight: 700;                     /* ← Bold (700) */
    font-size: 18px;                      /* ← Exact Figma size */
    line-height: 28px;                    /* ← Figma line height */
    letter-spacing: -0.36px;              /* ← Figma letter spacing */
    color: #FFFFFF;                       /* ← White text */
    margin: 0;
}

/* Description visibility controlled by showDescription config */
/* Product count and CTA removed - not in Figma design */

/* Subcategories list (hidden by default, shown on hover) */
.saly-ps-category-subcategories {
    position: absolute;
    top: 64px;  /* Figma: below title (20px padding + 28px title + 16px gap) */
    left: 20px;
    right: 20px;
    z-index: 4;  /* Above overlay */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.saly-ps-category-tile--overlay:hover .saly-ps-category-subcategories {
    opacity: 1;
    pointer-events: auto;
}

/* Subcategory link - Figma: Spartan Medium 14px */
.saly-ps-subcategory-link {
    display: block;
    font-family: 'Spartan', sans-serif;
    font-weight: 500;  /* Medium */
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.28px;
    color: #FFFFFF;
    text-decoration: none;
    margin-bottom: 0;
    transition: opacity 0.2s ease;
}

.saly-ps-subcategory-link:hover {
    opacity: 0.8;
}

/* "Zobacz wszystko" link at bottom */
.saly-ps-category-view-all {
    display: block;
    font-family: 'Spartan', sans-serif;
    font-weight: 500;  /* Medium */
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.28px;
    color: #FFFFFF;
    text-decoration: none;
    margin-top: 0;  /* No extra spacing, continues list */
    transition: opacity 0.2s ease;
}

.saly-ps-category-view-all:hover {
    opacity: 0.8;
}

/* Variant: No Image (showImage=false) */
.saly-ps-category-tile--no-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* Neutral gradient */
    min-height: 180px;
}

.saly-ps-category-tile--no-image .saly-ps-category-content {
    position: static;  /* Not absolute */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.saly-ps-category-tile--no-image .saly-ps-category-name {
    color: #FFFFFF;  /* White text on gradient */
    font-size: 1.5rem;
}

/* Variant: Compact (no image) */
.saly-ps-category-tile--compact {
    border: 1px solid #e2e8f0;
}

.saly-ps-category-tile--compact .saly-ps-category-content {
    padding: 1.5rem;
    text-align: center;
}

.saly-ps-category-tile--compact:hover {
    border-color: #3182ce;
    background: #f7fafc;
}

/* Responsive Breakpoints */
@media (max-width: 640px) {
    .saly-ps-categories-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1rem;
    }

    .saly-ps-block-title {
        font-size: 1.5rem;
    }

    .saly-ps-category-name {
        font-size: 1.125rem;
    }

    /* Figma variant - smaller on mobile */
    .saly-ps-category-tile--overlay {
        height: 180px;
    }

    .saly-ps-category-tile--overlay .saly-ps-category-overlay {
        height: 80px;
    }

    .saly-ps-category-tile--overlay .saly-ps-category-content {
        padding: 16px;
    }

    .saly-ps-category-tile--overlay .saly-ps-category-name {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .saly-ps-categories-grid[data-ps-columns="3"],
    .saly-ps-categories-grid[data-ps-columns="4"],
    .saly-ps-categories-grid[data-ps-columns="5"],
    .saly-ps-categories-grid[data-ps-columns="6"] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Figma variant - medium size */
    .saly-ps-category-tile--overlay {
        height: 200px;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .saly-ps-categories-grid[data-ps-columns="4"],
    .saly-ps-categories-grid[data-ps-columns="5"],
    .saly-ps-categories-grid[data-ps-columns="6"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .saly-ps-categories-grid[data-ps-columns="5"],
    .saly-ps-categories-grid[data-ps-columns="6"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   VIEWPORT SIMULATION (test-runner)
   ======================================== */
/* Mobile viewport simulation for test-runner environment */
.viewport-mobile .saly-ps-categories-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1rem;
}

.viewport-mobile .saly-ps-block-title {
    font-size: 1.5rem !important;
}

.viewport-mobile .saly-ps-category-name {
    font-size: 1.125rem !important;
}

.viewport-mobile .saly-ps-category-tile--overlay {
    height: 180px !important;
}

.viewport-mobile .saly-ps-category-tile--overlay .saly-ps-category-overlay {
    height: 80px !important;
}

.viewport-mobile .saly-ps-category-tile--overlay .saly-ps-category-content {
    padding: 16px !important;
}

.viewport-mobile .saly-ps-category-tile--overlay .saly-ps-category-name {
    font-size: 16px !important;
    line-height: 24px !important;
}

/* Tablet viewport simulation for test-runner environment */
.viewport-tablet .saly-ps-categories-grid[data-ps-columns="3"],
.viewport-tablet .saly-ps-categories-grid[data-ps-columns="4"],
.viewport-tablet .saly-ps-categories-grid[data-ps-columns="5"],
.viewport-tablet .saly-ps-categories-grid[data-ps-columns="6"] {
    grid-template-columns: repeat(2, 1fr) !important;
}

.viewport-tablet .saly-ps-category-tile--overlay {
    height: 200px !important;
}

/* Accessibility */
.saly-ps-category-link:focus {
    outline: 2px solid #3182ce;
    outline-offset: 2px;
}

.saly-ps-category-link:focus-visible {
    outline: 2px solid #3182ce;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .saly-ps-category-tile {
        break-inside: avoid;
    }

    .saly-ps-category-cta {
        display: none;
    }
}

/* Loading state */
.saly-ps-category-tile--loading {
    opacity: 0.6;
    pointer-events: none;
}

.saly-ps-category-tile--loading .saly-ps-category-img {
    animation: salyPsCategoryPulse 1.5s ease-in-out infinite;
}

@keyframes salyPsCategoryPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}