/**
 * Picture Slider – Content Element Styles
 * =========================================
 * Two-section layout:
 *   1. Main Swiper carousel with Coverflow effect (top)
 *   2. Clickable thumbnail strip (bottom)
 *
 * Design language: premium, dark, subtle gold accent.
 * Fully responsive: mobile → tablet → desktop.
 *
 * CSS custom properties are defined on :root so they can be
 * overridden globally in the project's theme stylesheet.
 */

/* ============================================================
   CUSTOM PROPERTIES (design tokens)
   ============================================================ */
:root {
    --ps-bg                : #0f0f1a;
    --ps-slide-radius      : 14px;
    --ps-accent            : #c9a84c;
    --ps-accent-glow       : rgba(201, 168, 76, 0.35);
    --ps-caption-bg        : rgba(10, 10, 20, 0.72);
    --ps-caption-blur      : blur(10px);
    --ps-btn-bg            : rgba(255, 255, 255, 0.12);
    --ps-btn-border        : rgba(255, 255, 255, 0.22);
    --ps-btn-hover-bg      : rgba(255, 255, 255, 0.24);
    --ps-thumb-border-idle : rgba(255, 255, 255, 0.18);
    --ps-transition-ease   : cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ps-transition-dur    : 0.45s;
}


/* ============================================================
   ROOT CONTAINER
   ============================================================ */
.picture-slider {
    position       : relative;
    width          : 100%;
    overflow       : hidden;
    border-radius  : var(--ps-slide-radius);
    padding        : 3rem 0 2rem;
    /* Ensure the coverflow 3D perspective works */
    perspective    : 1200px;
}


/* ============================================================
   PART 1 – MAIN CAROUSEL
   ============================================================ */

/* Wrapper holds the swiper + the two nav buttons */
.picture-slider__main-wrap {
    position   : relative;
    width      : 100%;
    padding    : 0 3.5rem;   /* Room for the nav buttons */
}

/* Swiper mount point */
.picture-slider__main.swiper {
    width   : 100%;
    overflow: visible !important; /* Let neighbouring slides peek out */
    padding : 2rem 0 2.5rem;
}

/* All slides share a centred flex layout */
.picture-slider__main .swiper-wrapper {
    align-items: center;
}

/* Individual slide sizing (CSS drives the "auto" slidesPerView) */
.picture-slider__slide {
    width         : 54%;
    max-width     : 860px;
    position      : relative;
    border-radius : var(--ps-slide-radius);
    overflow      : hidden;
    /* GPU layer for smooth 3D transforms */
    transform     : translateZ(0);
    will-change   : transform;
}

/* Responsive slide widths */
@media (max-width: 1200px) { .picture-slider__slide { width: 62%; } }
@media (max-width: 1024px) { .picture-slider__slide { width: 70%; } }
@media (max-width:  768px) { .picture-slider__slide { width: 80%; } }
@media (max-width:  480px) { .picture-slider__slide { width: 88%; } }

/* Image aspect-ratio container */
.picture-slider__slide-image {
    display       : block;
    width         : 100%;
    aspect-ratio  : 16 / 9;
    overflow      : hidden;
    border-radius : var(--ps-slide-radius);
    background    : #1a1a2e; /* Placeholder colour while image loads */
}

/* The image itself */
.picture-slider__img {
    display       : block;
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    border-radius : var(--ps-slide-radius);
    transition    : transform var(--ps-transition-dur) var(--ps-transition-ease);
}

/* Active slide: very slight scale for a "pop" feeling */
.swiper-slide-active .picture-slider__img {
    transform: scale(1.03);
}

/* Coverflow shadows – inherit the slide radius for a clean look */
.picture-slider__main .swiper-slide-shadow-left,
.picture-slider__main .swiper-slide-shadow-right {
    border-radius: var(--ps-slide-radius);
}


/* ============================================================
   CAPTION (overlaid on the active / adjacent slides)
   ============================================================ */
.picture-slider__caption {
    position      : absolute;
    inset         : auto 0 0;         /* stick to bottom edge */
    background    : var(--ps-caption-bg);
    backdrop-filter: var(--ps-caption-blur);
    -webkit-backdrop-filter: var(--ps-caption-blur);
    padding       : 1.125rem 1.5rem 1.25rem;
    border-radius : 0 0 var(--ps-slide-radius) var(--ps-slide-radius);
    transform     : translateY(100%);
    transition    : transform var(--ps-transition-dur) var(--ps-transition-ease);
    /* Keep captions visible only for centred + immediate neighbours */
    pointer-events: none;
}

.swiper-slide-active .picture-slider__caption,
.swiper-slide-prev   .picture-slider__caption,
.swiper-slide-next   .picture-slider__caption {
    transform: translateY(0);
}

.picture-slider__caption-title {
    color       : #fff;
    font-size   : 1rem;
    font-weight : 600;
    margin      : 0 0 0.3rem;
    line-height : 1.35;
    letter-spacing: 0.01em;
}

.picture-slider__caption-desc {
    color      : rgba(255, 255, 255, 0.75);
    font-size  : 0.875rem;
    margin     : 0;
    line-height: 1.55;
}

@media (max-width: 480px) {
    .picture-slider__caption {
        padding: 0.75rem 1rem;
    }
    .picture-slider__caption-title {
        font-size: 0.875rem;
    }
    .picture-slider__caption-desc {
        display: none; /* Hide description on very small screens */
    }
}


/* ============================================================
   NAVIGATION BUTTONS
   ============================================================ */
.picture-slider__btn {
    /* Positioning */
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    z-index         : 20;

    /* Size & shape */
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 3rem;
    height          : 3rem;
    border-radius   : 50%;
    flex-shrink     : 0;

    /* Appearance */
    background      : var(--ps-btn-bg);
    border          : 1px solid var(--ps-btn-border);
    color           : #fff;
    cursor          : pointer;
    backdrop-filter : blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* Transition */
    transition      :
        background var(--ps-transition-dur) var(--ps-transition-ease),
        transform   0.2s ease,
        opacity     0.2s ease,
        box-shadow  var(--ps-transition-dur) var(--ps-transition-ease);
}

.picture-slider__btn:hover {
    background : var(--ps-btn-hover-bg);
    transform  : translateY(-50%) scale(1.12);
    box-shadow : 0 0 0 4px var(--ps-accent-glow);
}

.picture-slider__btn:focus-visible {
    outline       : 2px solid var(--ps-accent);
    outline-offset: 3px;
}

/* Disabled state (when loop is off and at first / last slide) */
.picture-slider__btn.swiper-button-disabled {
    opacity       : 0.3;
    cursor        : not-allowed;
    pointer-events: none;
}

/* SVG chevron icon */
.picture-slider__btn svg {
    width        : 1.25rem;
    height       : 1.25rem;
    fill         : none;
    stroke       : currentColor;
    stroke-width : 2.5;
    stroke-linecap  : round;
    stroke-linejoin : round;
    flex-shrink  : 0;
}

/* Button placement */
.picture-slider__btn--prev { left : 0.375rem; }
.picture-slider__btn--next { right: 0.375rem; }

/* Smaller buttons on mobile */
@media (max-width: 480px) {
    .picture-slider__btn {
        width : 2.375rem;
        height: 2.375rem;
    }
    .picture-slider__btn svg {
        width : 1rem;
        height: 1rem;
    }
}


/* ============================================================
   PART 2 – THUMBNAIL STRIP
   ============================================================ */

/* Section wrapper */
.picture-slider__thumbs-section {
    position   : relative;
    padding-top: 1.75rem;
}

/* Optional visual separator between the two areas */
.picture-slider__thumbs-section::before {
    content   : '';
    display   : block;
    width     : 50%;
    margin    : 0 auto 1.75rem;
    height    : 1px;
    background: rgba(255, 255, 255, 0.08);
}

/* Swiper mount point */
.picture-slider__thumbs-wrap {
    padding: 0 1rem 1rem;
}

.picture-slider__thumbs.swiper {
    overflow: hidden;
}

.picture-slider__thumbs .swiper-wrapper {
    /* Let Swiper handle alignment; keep rows centred */
    justify-content: center;
}

/* Individual thumbnail slide */
.picture-slider__thumb-slide {
    /* Width is set by the JS breakpoints ("auto" from Swiper) */
    width        : auto !important;
    flex-shrink  : 0;
    position     : relative;
    cursor       : pointer;
    border-radius: 8px;
    overflow     : hidden;

    /* Visual state */
    opacity     : 0.48;
    border      : 2px solid var(--ps-thumb-border-idle);
    box-shadow  : none;

    /* Transition for all interactive states */
    transition  :
        opacity    var(--ps-transition-dur) var(--ps-transition-ease),
        transform  var(--ps-transition-dur) var(--ps-transition-ease),
        border-color var(--ps-transition-dur) var(--ps-transition-ease),
        box-shadow var(--ps-transition-dur) var(--ps-transition-ease);

    /* Remove outline (we style focus-visible manually) */
    outline: none;
}

/* Hover state */
.picture-slider__thumb-slide:hover {
    opacity  : 0.78;
    transform: translateY(-3px);
}

/* Focus-visible for keyboard users */
.picture-slider__thumb-slide:focus-visible {
    outline       : 2px solid var(--ps-accent);
    outline-offset: 3px;
    opacity       : 1;
}

/* Active thumbnail (Swiper's own class + our JS class) */
.picture-slider__thumb-slide.swiper-slide-thumb-active,
.picture-slider__thumb-slide.picture-slider__thumb-slide--active {
    opacity     : 1;
    border-color: #0E71B8;
    box-shadow  : 0 5px 20px var(--ps-accent-glow);
    transform   : translateY(-4px);
}

/* Thumbnail image */
.picture-slider__thumb-img {
    display      : block;
    width        : 110px;
    height       : 70px;
    object-fit   : cover;
    border-radius: 6px;
    pointer-events: none; /* Clicks handled by the parent slide */
    transition   : transform var(--ps-transition-dur) var(--ps-transition-ease);
}

/* Active thumbnail image: slight zoom */
.picture-slider__thumb-slide.swiper-slide-thumb-active .picture-slider__thumb-img,
.picture-slider__thumb-slide.picture-slider__thumb-slide--active .picture-slider__thumb-img {
    transform: scale(1.04);
}

/* Active indicator bar at the bottom of the thumbnail */
.picture-slider__thumb-indicator {
    display      : block;
    position     : absolute;
    bottom       : 0;
    left         : 0;
    right        : 0;
    height       : 3px;
    background   : #0E71B8;
    transform    : scaleX(0);
    transform-origin: left center;
    transition   : transform var(--ps-transition-dur) var(--ps-transition-ease);
    border-radius: 0 0 6px 6px;
}

.picture-slider__thumb-slide.swiper-slide-thumb-active .picture-slider__thumb-indicator,
.picture-slider__thumb-slide.picture-slider__thumb-slide--active .picture-slider__thumb-indicator {
    transform: scaleX(1);
}

/* Responsive thumbnail image sizes */
@media (max-width: 1024px) {
    .picture-slider__thumb-img {
        width : 92px;
        height: 58px;
    }
}

@media (max-width: 768px) {
    .picture-slider__thumb-img {
        width : 78px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .picture-slider__thumb-img {
        width : 64px;
        height: 42px;
    }
    .picture-slider__thumbs-section::before {
        width: 70%;
    }
}


/* ============================================================
   REDUCED MOTION SUPPORT
   Users who prefer reduced motion get instant transitions.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .picture-slider__img,
    .picture-slider__caption,
    .picture-slider__btn,
    .picture-slider__thumb-slide,
    .picture-slider__thumb-img,
    .picture-slider__thumb-indicator {
        transition: none !important;
        animation : none !important;
    }
}