/* ==========================================================
   Athex Oval Slider – Front-end styles
   All positions, sizes and transforms are set by slider.js.
   CSS handles: layout, transitions, arrows, dots, responsive.
   ========================================================== */

/* ----------------------------------------------------------
   Wrapper
---------------------------------------------------------- */
.athex-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0 56px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    border: none;
}

/* ----------------------------------------------------------
   Track
---------------------------------------------------------- */
.athex-slider-track-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: visible;
}

.athex-slider-track {
    position: relative;
    width: 100%;
    /* Height is set dynamically by JS */
}

/* ----------------------------------------------------------
   Individual slide
   All position/size/opacity values are applied inline by JS.
   Only transition and static visual rules live here.
---------------------------------------------------------- */
.athex-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    /* translateX offset is added by JS on top of the -50% centering */
    will-change: transform, opacity, width, height;

    /* Smooth directional movement */
    transition:
        transform   0.55s cubic-bezier(0.4, 0, 0.2, 1),
        opacity     0.55s cubic-bezier(0.4, 0, 0.2, 1),
        width       0.55s cubic-bezier(0.4, 0, 0.2, 1),
        height      0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Oval / rounded mask — border-radius set via CSS variable by JS */
.athex-slide-inner {
    overflow: hidden;
    width: 100%;
    height: 100%;
    /* border-radius comes from --athex-radius CSS variable (set by JS) */
    border-radius: var(--athex-radius, 50%);
    box-sizing: border-box;
}

.athex-slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    /* subtle inner zoom on center slide, applied via .athex-slide-active class */
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    /* Image border-radius matches container (set dynamically by JS) */
    border-radius: var(--athex-radius, 50%);
}

/* Inner zoom for active (center) slide */
.athex-slide.athex-slide-active .athex-slide-inner img {
    transform: scale(1.04);
    border-radius: var(--athex-radius, 50%);
}

/* Active slide border — dimensions/couleur injectées par JS */
.athex-slide.athex-slide-active .athex-slide-inner {
    /* padding creates margin around image, background makes it visible */
    padding: var(--athex-image-padding, 0px);
    border: var(--athex-border-width, 0px) solid var(--athex-border-color, #000);
    /* Espace blanc entre image et bordure via box-shadow */
    box-shadow: 0 0 0 var(--athex-border-gap, 0px) white;
}

.athex-slide-inner a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Side slides: pointer cursor to invite click-to-navigate */
.athex-slide.athex-slide-side {
    cursor: pointer;
}
.athex-slide.athex-slide-side .athex-slide-inner img {
    pointer-events: none;
}

/* Right side slides: drop shadow */
.athex-slide.athex-slide-right .athex-slide-inner {
    box-shadow: 8px 12px 24px rgba(0, 0, 0, 0.25);
}

/* Left side slides: drop shadow */
.athex-slide.athex-slide-left .athex-slide-inner {
    box-shadow: -8px 12px 24px rgba(0, 0, 0, 0.25);
}

/* ----------------------------------------------------------
   Navigation arrows
---------------------------------------------------------- */
.athex-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #555;
    line-height: 0;
    margin-top: -14px; /* compensate dots height */
    transition: color 0.2s ease, transform 0.2s ease;
}

.athex-slider-arrow:hover {
    color: #111;
    transform: translateY(-50%) scale(1.2);
}

.athex-slider-arrow svg {
    width: 28px;
    height: 28px;
    display: block;
}

.athex-slider-prev { left: 16px; }
.athex-slider-next { right: 16px; }

/* Hide arrows if disabled */
.athex-no-arrows .athex-slider-arrow {
    display: none;
}

/* ----------------------------------------------------------
   Dot indicators
---------------------------------------------------------- */
.athex-slider-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.athex-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--athex-dots-color, rgba(0, 0, 0, 0.25));
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}

.athex-slider-dot.active {
    background: var(--athex-dots-active-color, rgba(0, 0, 0, 0.65));
    transform: scale(1.3);
}

/* ----------------------------------------------------------
   Accessibility: reduce motion
   On réduit la durée mais on NE supprime PAS les transitions
   car elles sont indispensables au fonctionnement du slider.
   L'annulation complète (none) casserait l'effet de glissement.
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .athex-slide {
        transition-duration: 0.15s !important;
    }
    .athex-slide-inner img {
        transition-duration: 0.1s !important;
    }
}

/* ----------------------------------------------------------
   Empty state
---------------------------------------------------------- */
.athex-slider-empty {
    text-align: center;
    color: #888;
    padding: 2em;
}