/* © 2025 Spwig. All rights reserved. */

/* ==========================================================================
   Category Page - Featured Template
   Hero product(s) with prominent display plus supporting product grid.
   Uses --theme-element-category-* design tokens from the token system.
   Fallbacks use hardcoded values for graceful degradation.
   ========================================================================== */

/* ==========================================================================
   Featured Heroes Container (multiple heroes side by side)
   ========================================================================== */

.cat-featured-heroes {
    display: grid;
    grid-template-columns: var(--theme-element-category-featured-heroes-columns, 1fr 1fr);
    gap: var(--theme-element-category-featured-heroes-gap, 1.5rem);
}

/* Single featured hero: full width */
.cat-featured-heroes:has(.cat-featured-hero:only-child) {
    grid-template-columns: 1fr;
}

/* ==========================================================================
   Featured Hero Card
   ========================================================================== */

.cat-featured-hero {
    position: relative;
    border-radius: var(--theme-element-category-featured-hero-radius, 1rem);
    overflow: hidden;
    box-shadow: var(--theme-element-category-featured-hero-shadow, 0 4px 20px rgba(0, 0, 0, 0.12));
}

.cat-featured-hero__link {
    display: block;
    position: relative;
    min-height: var(--theme-element-category-featured-hero-min-height, 24rem);
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   Featured Hero Image
   ========================================================================== */

.cat-featured-hero__image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cat-featured-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-featured-hero__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-element-category-featured-hero-placeholder-bg, #f3f4f6);
    font-size: var(--theme-element-category-featured-hero-placeholder-size, 4rem);
    color: var(--theme-element-category-featured-hero-placeholder-color, #9ca3af);
}

/* ==========================================================================
   Featured Hero Overlay
   ========================================================================== */

.cat-featured-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--theme-element-category-featured-hero-overlay-bg, linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%));
    z-index: 1;
}

/* ==========================================================================
   Featured Hero Content
   ========================================================================== */

.cat-featured-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: var(--theme-element-category-featured-hero-content-padding, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--theme-element-category-featured-hero-content-color, #ffffff);
}

/* ==========================================================================
   Featured Hero Badge
   ========================================================================== */

.cat-featured-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--theme-element-category-featured-hero-badge-padding-y, 0.375rem) var(--theme-element-category-featured-hero-badge-padding-x, 0.875rem);
    background: var(--theme-element-category-featured-hero-badge-bg, rgba(255, 255, 255, 0.2));
    color: var(--theme-element-category-featured-hero-badge-color, #ffffff);
    font-size: var(--theme-element-category-featured-hero-badge-font-size, 0.8125rem);
    font-weight: var(--theme-element-category-featured-hero-badge-font-weight, 600);
    border-radius: var(--theme-element-category-featured-hero-badge-radius, 9999px);
    backdrop-filter: var(--theme-element-category-featured-hero-badge-backdrop, blur(8px));
    margin-bottom: var(--theme-space-3, 0.75rem);
}

/* ==========================================================================
   Featured Hero Title
   ========================================================================== */

.cat-featured-hero__title {
    font-size: var(--theme-element-category-featured-hero-title-size, 1.875rem);
    font-weight: var(--theme-element-category-featured-hero-title-weight, 700);
    color: inherit;
    margin: 0 0 var(--theme-space-2, 0.5rem) 0;
    line-height: var(--theme-element-category-featured-hero-title-line-height, 1.2);
}

@media (min-width: 768px) {
    .cat-featured-hero__title {
        font-size: var(--theme-element-category-featured-hero-title-size-md, 2.5rem);
    }
}

/* ==========================================================================
   Featured Hero Price
   ========================================================================== */

.cat-featured-hero__price {
    font-size: var(--theme-element-category-featured-hero-price-size, 1.5rem);
    font-weight: var(--theme-element-category-featured-hero-price-weight, 700);
    color: inherit;
    margin: 0 0 var(--theme-space-4, 1rem) 0;
}

/* ==========================================================================
   Featured Hero Button
   ========================================================================== */

.cat-featured-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--theme-space-2, 0.5rem);
    padding: var(--theme-element-category-featured-hero-btn-padding-y, 0.75rem) var(--theme-element-category-featured-hero-btn-padding-x, 1.75rem);
    background: var(--theme-element-category-featured-hero-btn-bg, rgba(255, 255, 255, 0.2));
    color: var(--theme-element-category-featured-hero-btn-color, #ffffff);
    border: var(--theme-element-category-featured-hero-btn-border-width, 2px) solid var(--theme-element-category-featured-hero-btn-border-color, rgba(255, 255, 255, 0.4));
    border-radius: var(--theme-element-category-featured-hero-btn-radius, 0.5rem);
    font-size: var(--theme-element-category-featured-hero-btn-font-size, 1rem);
    font-weight: var(--theme-element-category-featured-hero-btn-font-weight, 600);
    backdrop-filter: blur(4px);
    transition: all var(--theme-element-category-featured-hero-btn-transition-duration, 200ms) var(--theme-element-category-featured-hero-btn-transition-easing, ease);
}

.cat-featured-hero__link:hover .cat-featured-hero__btn {
    background: var(--theme-element-category-featured-hero-btn-hover-bg, rgba(255, 255, 255, 0.35));
    border-color: var(--theme-element-category-featured-hero-btn-hover-border-color, rgba(255, 255, 255, 0.6));
}

/* ==========================================================================
   Split Layout (image + info side by side)
   ========================================================================== */

.cat-featured-heroes--split .cat-featured-hero__link {
    display: grid;
    grid-template-columns: var(--theme-element-category-featured-hero-split-columns, 1fr 1fr);
    min-height: var(--theme-element-category-featured-hero-split-min-height, 28rem);
}

.cat-featured-heroes--split .cat-featured-hero__image-wrapper {
    position: relative;
    inset: auto;
}

.cat-featured-heroes--split .cat-featured-hero__overlay {
    display: none;
}

.cat-featured-heroes--split .cat-featured-hero__content {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--theme-element-category-featured-hero-split-content-bg, #ffffff);
    color: var(--theme-element-category-featured-hero-split-content-color, #1f2937);
}

.cat-featured-heroes--split .cat-featured-hero__badge {
    background: var(--theme-element-category-featured-hero-badge-bg-split, #dbeafe);
    color: var(--theme-element-category-featured-hero-badge-color-split, #1d4ed8);
    backdrop-filter: none;
}

.cat-featured-heroes--split .cat-featured-hero__btn {
    background: var(--theme-element-category-featured-hero-btn-bg, #2563eb);
    color: var(--theme-element-category-featured-hero-btn-color, #ffffff);
    border-color: var(--theme-element-category-featured-hero-btn-border-color, #2563eb);
    backdrop-filter: none;
}

/* ==========================================================================
   Featured Divider
   ========================================================================== */

.cat-featured-divider {
    display: flex;
    align-items: center;
    gap: var(--theme-space-4, 1rem);
    margin: var(--theme-element-category-featured-divider-spacing, 2.5rem) 0;
}

.cat-featured-divider::before,
.cat-featured-divider::after {
    content: '';
    flex: 1;
    border-top: var(--theme-element-category-featured-divider-width, 1px) solid var(--theme-element-category-featured-divider-color, #e5e7eb);
}

.cat-featured-divider__text {
    font-size: var(--theme-element-category-featured-remaining-title-size, 1.125rem);
    font-weight: var(--theme-element-category-featured-remaining-title-weight, 600);
    color: var(--theme-element-category-featured-remaining-title-color, #6b7280);
    white-space: nowrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .cat-featured-heroes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cat-featured-hero__link {
        min-height: var(--theme-element-category-featured-hero-mobile-min-height, 18rem);
    }

    .cat-featured-heroes--split .cat-featured-hero__link {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .cat-featured-heroes--split .cat-featured-hero__image-wrapper {
        aspect-ratio: var(--theme-element-category-featured-hero-split-mobile-aspect-ratio, 16 / 9);
    }

    .cat-featured-hero__content {
        padding: var(--theme-element-category-featured-hero-content-mobile-padding, 1.5rem);
    }

    .cat-featured-hero__title {
        font-size: var(--theme-element-category-featured-hero-title-mobile-size, 1.5rem);
    }

    .cat-featured-hero__price {
        font-size: var(--theme-element-category-featured-hero-price-mobile-size, 1.25rem);
    }

    .cat-featured-divider {
        margin: var(--theme-element-category-featured-divider-mobile-spacing, 1.5rem) 0;
    }
}

@media (max-width: 480px) {
    .cat-featured-hero__content {
        padding: var(--theme-element-category-featured-hero-content-xs-padding, 1rem);
    }

    .cat-featured-hero__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .cat-featured-hero__btn {
        transition: none;
    }
}