/**
 * Builder Slider — General CSS (PrestaShop 9)
 * =============================================
 * Structural and base styles for all .builder-slider elements on the page.
 * This file is the CSS companion to slider.js — load both on every page
 * that contains a slider rendered by SliderComponent.php.
 *
 * IMPORTANT: Slides always use min-height + height:auto so each slide
 * can have its own configured height (e.g. 900px vs 400px).  The
 * container height is updated dynamically by slider.js on every slide
 * change.  Do NOT set a fixed height on slides or the container.
 *
 * Dependencies:
 *   - Swiper CSS (swiper-bundle.min.css, currently 10.3.1) must be loaded
 *     BEFORE this file.
 *   - slider.js must be loaded AFTER swiper-bundle.min.js.
 *
 * Breakpoints (desktop-first, matching JSON reference):
 *   1920 = Desktop | 1440 = Laptop | 1360 = Small PC (1360)
 *   1280 = Small PC (1280) | 768 = Tablet | 375 = Mobile
 */

/* ==================================================================
   1.  SLIDER CONTAINER
   ================================================================== */

.builder-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    /* Reset any Swiper defaults that conflict */
    margin-left: auto;
    margin-right: auto;
}

.builder-slider.rtl {
    direction: rtl;
}

.builder-slider .swiper-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    /* flex-start so slides with different heights are top-aligned,
       not stretched to the tallest slide. */
    align-items: flex-start;
}

/* ==================================================================
   2.  SLIDE
   ================================================================== */

.builder-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Always height:auto so each slide can have its own min-height.
       The configured height is set as min-height via CSS class rules. */
    height: auto;
}

/* Hide duplicate slides during loop mode until Swiper makes them visible */
.builder-slider .swiper-slide-duplicate {
    visibility: hidden;
}

/* ==================================================================
   3.  FADE EFFECT
   ================================================================== */

.builder-slider.swiper-fade .swiper-slide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.builder-slider.swiper-fade .swiper-slide-active {
    opacity: 1;
    pointer-events: auto;
}

.builder-slider.swiper-fade .swiper-slide-duplicate-active {
    opacity: 1;
    pointer-events: auto;
}

/* ==================================================================
   4.  CREATIVE / CARDS / COVERFLOW EFFECTS
   ================================================================== */

.builder-slider.swiper-cards .swiper-slide {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.builder-slider.swiper-coverflow .swiper-slide {
    backface-visibility: hidden;
}

/* ==================================================================
   5.  BACKGROUND LAYERS
   ================================================================== */

.builder-slider .swiper-bg-wrapper,
.builder-slider .swiper-bg-color,
.builder-slider .swiper-bg-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ==================================================================
   6.  LAYERS CONTAINER  (content layers inside each slide)
   ================================================================== */

/* absolute + inset:0, not min-height:100%. .swiper-slide only ever has
   height:auto plus a min-height — a percentage height on this element
   would try to resolve against that and correctly compute to nothing
   per spec (min-height alone does not give a parent a resolvable
   height for percentage children). inset:0 against .swiper-slide's
   position:relative instead stretches this to the slide's actual
   rendered box directly, the same technique .swiper-bg-wrapper above
   already uses. All layers inside are position:absolute already, so
   nothing here needs to be in normal flow. */
.builder-slider .swiper-slide-layers {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 2;
}

/* ==================================================================
   7.  INDIVIDUAL LAYER  (heading, text, button, image)
   ================================================================== */

.builder-slider .swiper-layer {
    position: absolute;
    box-sizing: border-box;
}

/* hoverContent support — base/hover content switching */
.builder-slider .swiper-layer .swiper-layer-hover-content {
    display: none;
}

.builder-slider .swiper-layer:hover > .swiper-layer-base-content {
    display: none;
}

.builder-slider .swiper-layer:hover > .swiper-layer-hover-content {
    display: block;
}

/* Touch device hover content state (toggled via JS data-hover-state) */
.builder-slider .swiper-layer[data-hover-state="active"] > .swiper-layer-base-content {
    display: none;
}

.builder-slider .swiper-layer[data-hover-state="active"] > .swiper-layer-hover-content {
    display: block;
}

/* ==================================================================
   8.  CUSTOM ARROW NAVIGATION
   ================================================================== */

.builder-slider .swiper-button-prev-custom,
.builder-slider .swiper-button-next-custom {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    border: none;
    margin: 0;
    transition: all 0.25s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.builder-slider .swiper-button-prev-custom:focus-visible,
.builder-slider .swiper-button-next-custom:focus-visible {
    outline: 2px solid #4a90d9;
    outline-offset: 2px;
}

.builder-slider .swiper-button-prev-custom.swiper-button-disabled,
.builder-slider .swiper-button-next-custom.swiper-button-disabled {
    pointer-events: none;
}

/* Swiper's lock class (when only 1 slide and loop is off) */
.builder-slider .swiper-button-prev-custom.swiper-button-lock,
.builder-slider .swiper-button-next-custom.swiper-button-lock {
    display: none !important;
}

/* Arrow inner SVG / img / span inherit colour and size */
.builder-slider .swiper-button-prev-custom svg,
.builder-slider .swiper-button-next-custom svg {
    display: block;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.builder-slider .swiper-button-prev-custom img,
.builder-slider .swiper-button-next-custom img {
    display: block;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================================================================
   9.  CUSTOM DOT NAVIGATION
   ================================================================== */

.builder-slider .swiper-dots-custom {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.builder-slider .swiper-dot-item {
    display: inline-block;
    cursor: pointer;
    transition: all 0.25s ease;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.builder-slider .swiper-dot-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.builder-slider .swiper-dot-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.builder-slider .swiper-dot-item:focus-visible {
    outline: 2px solid #4a90d9;
    outline-offset: 2px;
}

/* ==================================================================
   10.  SLIDE LINK OVERLAY
   ================================================================== */

.builder-slider .swiper-slide a[aria-label="Slide link"] {
    display: block;
    text-decoration: none;
    color: inherit;
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ==================================================================
   11.  BUTTON LAYER DEFAULTS
   ================================================================== */

.builder-slider .swiper-layer[role="button"] {
    text-decoration: none;
    display: inline-block;
}

/* ==================================================================
   12.  DEVICE-SPECIFIC LAYER VISIBILITY
       Layers with data-bp are hidden by default and shown only at
       their target breakpoint.  The PHP dynamic CSS handles the
       per-breakpoint display:none / display:block rules via
       @media queries; here we just set the base state so nothing
       flashes on load.
   ================================================================== */

.builder-slider [data-bp] {
    display: none;
}

/* ==================================================================
   13.  GRAB CURSOR (when grabCursor option is enabled)
   ================================================================== */

/* Intentionally no rule here. Swiper's grabCursor module sets
   `cursor: grab` / `cursor: grabbing` as a direct inline style via
   its internal setGrabCursor() call — it never adds or removes a
   `.swiper-grab` class, so a CSS rule for that class would never
   match anything. Do not reintroduce one. */

/* ==================================================================
   14.  RTL SUPPORT
   ================================================================== */

.builder-slider.rtl .swiper-wrapper {
    direction: rtl;
}

.builder-slider.rtl .swiper-button-prev-custom {
    /* In RTL, prev button should be on the right */
}

.builder-slider.rtl .swiper-button-next-custom {
    /* In RTL, next button should be on the left */
}

/* ==================================================================
   15.  ACCESSIBILITY — REDUCED MOTION
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .builder-slider .swiper-wrapper {
        transition-duration: 0.01ms !important;
    }
    .builder-slider .swiper-button-prev-custom,
    .builder-slider .swiper-button-next-custom,
    .builder-slider .swiper-dot-item,
    .builder-slider .swiper-layer {
        transition-duration: 0.01ms !important;
    }
    .builder-slider.swiper-fade .swiper-slide {
        transition-duration: 0.01ms !important;
    }
}

/* ==================================================================
   16.  PRINT STYLES — hide navigation, keep slide content
   ================================================================== */

@media print {
    .builder-slider .swiper-button-prev-custom,
    .builder-slider .swiper-button-next-custom,
    .builder-slider .swiper-dots-custom {
        display: none !important;
    }
    .builder-slider .swiper-wrapper {
        transform: none !important;
    }
    .builder-slider .swiper-slide {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .builder-slider [data-bp] {
        display: block !important;
    }
}

/* ==================================================================
   17.  RESPONSIVE BREAKPOINT OVERRIDES
       These are base responsive rules that apply across ALL builder
       sliders. Per-instance overrides are generated dynamically by
       SliderComponent.php and injected into the <style> block.
   ================================================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .builder-slider .swiper-button-prev-custom,
    .builder-slider .swiper-button-next-custom {
        /* Slightly smaller arrows on tablet by default */
    }
}

/* Mobile (375px and below) */
@media (max-width: 375px) {
    .builder-slider .swiper-button-prev-custom,
    .builder-slider .swiper-button-next-custom {
        /* Even smaller arrows on mobile by default;
           individual sliders may override via arrowStyleOverrides.375 */
    }
}