/**
 * Categories carousel — premium jewellery category selector.
 *
 * Structure (template-parts/sections/categories.php):
 *   .categories-carousel-viewport
 *     .categories-carousel-track
 *       .categories-carousel-slide > .category-card
 *     .categories-carousel-prev / .categories-carousel-next
 *
 * The track is a CSS scroll-snap row at every breakpoint. Slide width is
 * auto-calculated from container width, cards-per-view and gap:
 *   flex: 0 0 calc((100% - (cols - 1) * gap) / cols)
 *
 * On mobile, the divisor is (cols + 0.3), so ~30% of the next card peeks in
 * from the trailing edge and the row reads as swipeable without an arrow hint.
 *
 * Every rule is scoped under .casablanca-categories-section. The category drawer
 * (categories-drawer.css) reuses the same card class names.
 *
 * Customizer settings consumed, all preserved:
 *   --cats-ratio           categories_image_ratio
 *   --cats-cols-desktop    categories_cols_desktop   (1–8)
 *   --cats-cols-tablet     categories_cols_tablet     (1–6)
 *   --cats-cols-mobile     categories_cols_mobile     (1–4)
 *   --cats-gap             categories_gap             (4–40px)
 *   --cats-nav-size        categories_nav_size        (28–56px)
 *   --cats-nav-offset      categories_nav_offset      (-20–20px)
 */

/* ── Section shell ──────────────────────────────────────────────────── */

.casablanca-categories-section {
    /* Component tokens — same ground/border as product-card.css so a
       category tile reads as the same object in the same design system. */
    --cat-ground: #f6f3f0;
    --cat-border: rgba(26, 26, 26, 0.09);
    --cat-ink: var(--casablanca-text-primary, #1a1a1a);

    /* Resolved per-breakpoint; desktop is the initial value. */
    --cats-cols: var(--cats-cols-desktop, 4);

    padding-top: clamp(26px, 3.4vw, 52px);
    padding-bottom: clamp(30px, 3.8vw, 58px);
    background-color: var(--casablanca-bg-primary, #ffffff);
}

/* ── Header ─────────────────────────────────────────────────────────── */

.casablanca-categories-section .categories-header {
    text-align: center;
    margin-bottom: clamp(18px, 2.4vw, 34px);
}

.casablanca-categories-section .categories-subtitle {
    display: block;
    font-family: var(--casablanca-font-primary, inherit);
    font-size: clamp(9.5px, 0.24vw + 0.53rem, 11.5px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1.4;
    color: var(--fp-accent, var(--casablanca-c-section-accent, var(--casablanca-brand, #531628)));
    margin: 0 0 7px;
}

.casablanca-categories-section .categories-main-title {
    font-family: var(--casablanca-font-secondary, inherit);
    font-size: clamp(16px, 0.6vw + 0.78rem, 25px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.25;
    margin: 0;
    padding: 0;
    color: var(--cat-ink);
}

/* ── Carousel viewport ──────────────────────────────────────────────── */

.casablanca-categories-section .categories-carousel-viewport {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ── Track ──────────────────────────────────────────────────────────── */

.casablanca-categories-section .categories-carousel-track {
    display: flex;
    gap: var(--cats-gap, 16px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    margin: 0;
    padding: 2px 0 4px;
    box-sizing: border-box;

    /* Hide scrollbar on all browsers. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.casablanca-categories-section .categories-carousel-track::-webkit-scrollbar {
    display: none;
}

.casablanca-categories-section .categories-carousel-track:focus-visible {
    outline: 2px solid var(--casablanca-brand);
    outline-offset: 4px;
}

/* ── Slide ──────────────────────────────────────────────────────────── */

.casablanca-categories-section .categories-carousel-slide {
    flex: 0 0 calc((100% - (var(--cats-cols) - 1) * var(--cats-gap, 16px)) / var(--cats-cols));
    min-width: 0;
    scroll-snap-align: start;
}

/* ── Card (design preserved from original) ──────────────────────────── */

.casablanca-categories-section .category-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.casablanca-categories-section .category-image-wrapper {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: var(--cats-ratio, 1 / 1);
    overflow: hidden;
    background-color: var(--cat-ground);
    border: 1px solid var(--cat-border);
    border-radius: var(--casablanca-radius);
}

.casablanca-categories-section .category-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    outline: none;
}

/* Label below the image — small, refined, quiet. */
.casablanca-categories-section .category-title {
    margin: clamp(9px, 0.9vw, 13px) 0 0;
    padding: 0;
    background: none;
    font-family: var(--casablanca-font-primary, inherit);
    font-size: clamp(10.5px, 0.22vw + 0.6rem, 13px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    line-height: 1.35;
    text-align: center;
    color: var(--cat-ink);
    text-shadow: none;
}

/* ── Navigation arrows ──────────────────────────────────────────────── */

.casablanca-categories-section .categories-carousel-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cats-nav-size, 38px);
    height: var(--cats-nav-size, 38px);
    padding: 0;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.12);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    /* Minimum 44px touch target even if visually smaller. */
    min-width: 44px;
    min-height: 44px;
}

.casablanca-categories-section .categories-carousel-prev {
    inset-inline-start: var(--cats-nav-offset, 0px);
}

.casablanca-categories-section .categories-carousel-next {
    inset-inline-end: var(--cats-nav-offset, 0px);
}

.casablanca-categories-section .categories-carousel-nav:focus-visible {
    outline: 2px solid var(--casablanca-brand);
    outline-offset: 2px;
}

.casablanca-categories-section .categories-carousel-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.casablanca-categories-section .categories-carousel-nav[hidden] {
    display: none !important;
}

/* ── Tablet (768–1023px) ────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .casablanca-categories-section {
        --cats-cols: var(--cats-cols-tablet, 3);
    }
}

/* ── Mobile (≤767px) ────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .casablanca-categories-section {
        --cats-cols: var(--cats-cols-mobile, 2);
        padding-top: 22px;
        padding-bottom: 26px;
        overflow-x: clip;
    }

    .casablanca-categories-section .categories-header {
        margin-bottom: 14px;
    }

    .casablanca-categories-section .categories-subtitle {
        letter-spacing: 0.14em;
        margin-bottom: 5px;
    }

    /* Cancel .header-container-full's 10px mobile inset so the track runs
       to both edges; padding re-establishes the visual margin. */
    .casablanca-categories-section .categories-carousel-viewport {
        margin-inline-start: -10px;
        margin-inline-end: -10px;
        width: calc(100% + 20px);
    }

    .casablanca-categories-section .categories-carousel-track {
        scroll-padding-inline-start: 14px;
        padding: 2px 14px 4px;
    }

    /* Peek: divide by (cols + 0.3) so ~30% of the next card is visible,
       communicating horizontal scrollability without an arrow hint. */
    .casablanca-categories-section .categories-carousel-slide {
        flex: 0 0 calc(
            (100% - var(--cats-cols-mobile, 2) * var(--cats-gap, 16px))
            / (var(--cats-cols-mobile, 2) + 0.3)
        );
        scroll-snap-align: start;
    }

    .casablanca-categories-section .category-title {
        margin-top: 8px;
        font-size: 10.5px;
        letter-spacing: 0.08em;
    }

    /* Navigation arrows are desktop/tablet only — mobile returns to clean native touch swipe with NO buttons over cards. */
    .casablanca-categories-section .categories-carousel-nav,
    .casablanca-categories-section .categories-carousel-prev,
    .casablanca-categories-section .categories-carousel-next {
        display: none !important;
    }
}