/**
 * =============================================================================
 * WOLLUX - Category Carousel Styles
 * =============================================================================
 *
 * File    : assets/css/wollux-category-carousel.css
 * Scope   : [wollux_category_carousel] output
 *
 * This file handles ONLY carousel-specific layout (wrapper, arrows, dots).
 * All card visual styles (colors, typography, image, CTA, etc.) are defined
 * in wollux-category-grid.css and reused unchanged here.
 *
 * Tokens used here are intentionally the same --wollux-cat-* custom properties
 * defined in wollux-category-grid.css. No new color or font tokens are added.
 *
 * Structure:
 *   1.  Carousel wrapper
 *   2.  Swiper slide — equal-height cards
 *   3.  Navigation arrows
 *   4.  Pagination dots
 *   5.  Responsive overrides
 *
 * =============================================================================
 */


/* =============================================================================
 * 1. CAROUSEL WRAPPER
 * ============================================================================= */

.wollux-catcarousel {
    position: relative;
    width: 100%;

    /*
     * Horizontal padding creates space for the nav arrows so they sit
     * outside the visible slide area without overlapping card content.
     * Adjust to match arrow button width + desired gap.
     */
    padding: 0 52px;
    box-sizing: border-box;
}

/* When arrows are absent the extra padding is not needed — toggle via
   the absence of arrow buttons. We cannot detect this in CSS alone, so
   the PHP renderer adds a modifier class when show_arrows="false". */
.wollux-catcarousel--no-arrows {
    padding: 0;
}

/* Extra bottom space when dots are present */
.wollux-catcarousel--has-dots {
    padding-bottom: 40px;
}


/* =============================================================================
 * 2. SWIPER SLIDE — EQUAL-HEIGHT CARDS
 * ============================================================================= */

/*
 * Swiper by default gives slides auto height. We want all cards in a
 * row to share the same height (tallest card wins). Setting height on
 * the wrapper and stretching the slide + card achieves this cleanly.
 */
.wollux-catcarousel__swiper {
    width: 100%;
    /* Allow overflow to show the slide edges on either side */
    overflow: hidden;
}

.wollux-catcarousel .swiper-wrapper {
    align-items: stretch;
}

.wollux-catcarousel__slide {
    height: auto; /* Let Swiper control width; height fills naturally */
    box-sizing: border-box;
}

/* Card inside a slide fills the full slide height */
.wollux-catcarousel__slide .wollux-catcard {
    height: 100%;
}

.wollux-catcarousel__swiper .wollux-catcard a {
	text-decoration: none !important;
}

/* =============================================================================
 * 3. NAVIGATION ARROWS
 * ============================================================================= */

.wollux-catcarousel__btn {
    /* Position */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    /* Size */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;

    /* Visuals — use existing card tokens, no new colors */
    background: var(--wollux-cat-bg);
    border: 2px solid var(--wollux-cat-border);
    box-shadow: var(--wollux-cat-card-shadow);
    color: var(--wollux-cat-text-secondary);
    cursor: pointer;

    /* Reset browser button defaults */
    padding: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;

    transition:
        color            var(--wollux-cat-transition),
        background       var(--wollux-cat-transition),
        border-color     var(--wollux-cat-transition),
        box-shadow       var(--wollux-cat-transition),
        transform        var(--wollux-cat-transition);
}

.wollux-catcarousel__btn:hover {
    background: var(--wollux-cat-accent);
    border-color: var(--wollux-cat-accent);
    color: #ffffff;
    box-shadow: var(--wollux-cat-card-shadow-hover);
    /* Keep vertical centering while adding slight lift */
    transform: translateY(calc(-50% - 2px));
}

.wollux-catcarousel__btn:focus-visible {
    outline: 2px solid var(--wollux-cat-accent);
    outline-offset: 3px;
}

/* Disabled state — Swiper adds .swiper-button-disabled on the element.
   We replicate the pattern for our custom buttons via the disabled attr
   which Swiper sets when navigation is at its boundary and loop=false. */
.wollux-catcarousel__btn:disabled,
.wollux-catcarousel__btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Placement */
.wollux-catcarousel__btn--prev {
    left: 0;
}

.wollux-catcarousel__btn--next {
    right: 0;
}

/* Material icon inside button — match subcat icon sizing token */
.wollux-catcarousel__btn .material-icons {
    font-size: 22px !important;
    line-height: 1;
    user-select: none;
}


/* =============================================================================
 * 4. PAGINATION DOTS
 * ============================================================================= */

.wollux-catcarousel__dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    /* Swiper sets position: absolute on .swiper-pagination; we let it manage
       positioning within our wrapper instead */
    line-height: 1;
}

/* Swiper pagination bullet (dot) */
.wollux-catcarousel .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wollux-cat-border);
    opacity: 1; /* Swiper default is 0.2 for inactive — override */
    transition:
        background      var(--wollux-cat-transition),
        width            var(--wollux-cat-transition),
        border-radius    var(--wollux-cat-transition);
    cursor: pointer;
    display: inline-block;
}

/* Active dot — accent color + pill shape */
.wollux-catcarousel .swiper-pagination-bullet-active {
    background: var(--wollux-cat-accent);
    width: 22px;
    border-radius: 4px;
}


/* =============================================================================
 * 5. RESPONSIVE OVERRIDES
 * ============================================================================= */

/*
 * On mobile the arrows sit flush against the card edges and are
 * slightly smaller to avoid eating into the narrow viewport.
 */
@media (max-width: 767px) {
    .wollux-catcarousel {
        padding: 0 36px;
    }

    .wollux-catcarousel--no-arrows {
        padding: 0;
    }

    .wollux-catcarousel__btn {
        width: 32px;
        height: 32px;
    }

    .wollux-catcarousel__btn .material-icons {
        font-size: 18px !important;
    }
}

/*
 * On very small screens (< 360px) collapse padding fully —
 * arrows float over the card edges instead.
 */
@media (max-width: 359px) {
    .wollux-catcarousel {
        padding: 0 28px;
    }
}