:root {
    --slider02-white: #ffffff;
    --slider02-black: #000000;
    --slider02-green-cta: #2e9737;
    --slider02-white-025: rgba(255, 255, 255, 0.25);
    --slider02-black-015: rgba(0, 0, 0, 0.15);
    --slider02-pink-deep: #ed7c8a;
    --slider02-pink: #ef939e;
    --slider02-pink-90: rgba(239, 147, 158, 0.9);
    --slider02-pink-063: rgba(239, 147, 158, 0.631388);
    --slider02-pink-transparent: rgba(239, 147, 158, 0);
}


.chapter-slider-02 {
    /* Design proportions:
     * base card 240×420
     * centered card 360×630 (1.5×)
     *
     * JS breakpoints (Slick): ≥1701px → 7 | <1701px → 5 | <1200px → 3 | <768px → 1 + peek
     * CSS: 1700px (Slick 5) | 767px mobile | 640px compact
     */
    --chapter-card-base-w: 240px;
    --chapter-card-base-h: 420px;
    --chapter-card-small-h: 506.88px; /* +10% additional */
    --chapter-card-center-h: calc(var(--chapter-card-small-h) * 1.2); /* +20% */
    --slider02-clip-y: 80px;
    --chapter-card-gap: 15px;

    width: 100%;
    padding: 108px 0 0px;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.chapter-slider-02.show {
    opacity: 1;
}

.chapter-slider-02__inner {
    position: relative;
    width: 100%;
    max-width: 1928px;
    margin: 0 auto;
    padding: 0;
}

.chapter-slider-02__track.slick-slider {
    margin: 0 0 40px;
}

.chapter-slider-02__track .slick-list {
    overflow: visible;
    margin: 0;
}

.chapter-slider-02__track .slick-track {
    display: flex;
    align-items: center;
}

.chapter-slider-02__track .slick-track {
    gap: var(--chapter-card-gap);
}

.chapter-slider-02__track .slick-slide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    opacity: 1;
    margin: 0 !important;
    height: var(--chapter-card-center-h); /* fixed container height = centered card */
    clip-path: inset(var(--slider02-clip-y, 30px) 0 var(--slider02-clip-y, 30px) 0 round 20px 0 20px 0);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    text-align:left;
}

/* Center effect is driven by .is-target-center (applied by JS in
   beforeChange to the real target slide) so it does NOT flicker on
   clones/neighbors while Slick re-assigns its own .slick-center
   class during the transition. The other classes are kept as
   fallback when JS has not yet applied the target class. */
.chapter-slider-02__track .slick-slide.is-target-center,
.chapter-slider-02__track .slick-slide.is-center-fallback {
    z-index: 3;
    clip-path: inset(0 0 0 0 round 20px 0 20px 0);
    --chapter-card-current-h: var(--chapter-card-center-h);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.chapter-card {
    width: var(--chapter-card-base-w);
    height: var(--chapter-card-current-h, var(--chapter-card-small-h));
    aspect-ratio: auto;
    margin: 0;
    border-radius: 20px 0 20px 0;
    overflow: hidden;
    background: var(--slider02-white);
    box-shadow: 0 4px 20px var(--slider02-black-015);
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.chapter-card__media {
    width: 100%;
    height: 74.191%; /* -5% from original media height */
    margin: 0;
    overflow: hidden;
    border-radius: 20px 0 20px 0;
    background: var(--slider02-black);
    position: relative;
    transition: height 0.3s ease-in-out;
}

.chapter-slider-02__track .slick-slide.is-target-center .chapter-card__media,
.chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__media {
    height: 80%;
}

.chapter-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.35s cubic-bezier(0.25, 0.1, 0.1, 1);
    transform-origin: center;
}

.chapter-card__media--video {
    aspect-ratio: 240 / 328;
}

.chapter-card__video,
.chapter-card__video iframe {
    width: 100%;
    height: 100%;
}

.chapter-card__video {
    position: relative;
    overflow: hidden;
    background: var(--slider02-black);
}

.chapter-card__video.is-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.95);
    animation: slider02-spin 0.8s linear infinite;
    z-index: 2;
    pointer-events: none;
}

.chapter-card__audio-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    cursor: pointer;
    padding: 0;
}

.chapter-slider-02__track .slick-slide .chapter-card__audio-toggle {
    opacity: 0;
    pointer-events: none;
}

.chapter-slider-02__track .slick-slide.is-target-center .chapter-card__audio-toggle,
.chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__audio-toggle {
    opacity: 1;
    pointer-events: auto;
}

.chapter-card__audio-toggle svg {
    display: block;
    width: 24px;
    height: 24px;
}

.chapter-card__play-toggle {
    position: absolute;
    top: 58px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    cursor: pointer;
    padding: 0;
}

.chapter-slider-02__track .slick-slide .chapter-card__play-toggle {
    opacity: 0;
    pointer-events: none;
}

.chapter-slider-02__track .slick-slide.is-target-center .chapter-card__play-toggle,
.chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__play-toggle {
    opacity: 1;
    pointer-events: auto;
}

.chapter-card__play-toggle svg {
    display: block;
    width: 24px;
    height: 24px;
}

.chapter-card__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    border: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -50%) scale(1.35);
}

.chapter-card__video.is-ready iframe {
    opacity: 1;
}

.chapter-card__thumb {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.chapter-card__video iframe {
    z-index: 1;
}

@keyframes slider02-spin {
    to {
        transform: rotate(360deg);
    }
}


.chapter-card__body {
    position: relative;
    width: 100%;
    height: 25.809%; /* completes 100% with media 74.191% */
    padding: 15px;
    box-sizing: border-box;
    transition: height 0.3s ease-in-out;
}

.chapter-slider-02__track .slick-slide.is-target-center .chapter-card__body,
.chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__body {
    height: 20%;
}

.chapter-card__body p {
    margin: 0;
    color: var(--slider02-black);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.1;
    max-width: 180px;
}

body .chapter-card__title {
    display: none;
    margin: 0 0 5px;
    font-size: 1.125rem!important;
    font-weight: 800!important;
    line-height: 1!important;
    color: var(--slider02-black);
}

body .chapter-card__desc {
    margin: 0;
    width: 100%;
}

body .chapter-slider-02__track .slick-slide.is-target-center .chapter-card__title,
body .chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__title {
    display: block;
}

body .chapter-slider-02__track .slick-slide.is-target-center .chapter-card__body p,
body .chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__body p,
body .chapter-slider-02__track .slick-slide.is-target-center .chapter-card__desc,
body .chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__desc {
    line-height: 1.1;
}

@media (max-width: 1440px) {
    .chapter-card__body {
        padding: 15px;
    }
}

.chapter-card__arrow {
    position: absolute;
    right: 16px;
    bottom: 10px;
    display: block;
    width: 18px;
    height: 15px;
}


.chapter-slider-02__cta {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.chapter-slider-02__button {
    width: 253px;
    height: 60px;
    border-radius: 10px;
    background: var(--slider02-green-cta);
    box-shadow: 0 0 30px var(--slider02-white-025);
    color: var(--slider02-white);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chapter-slider-02__button:hover {
    background-color:#03680C;
    color:var(--slider02-white);
}

.chapter-slider-02__nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0px;
    right: 100px;
}

.chapter-slider-02__nav-btn {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease-in-out;
}

.chapter-slider-02__nav-btn.js-chapter-prev svg {
    transform: rotate(180deg);
}

.chapter-slider-02__nav-btn.js-chapter-prev:hover svg {
    transform: rotate(180deg) translateX(10px);
}

.chapter-slider-02__nav-btn.js-chapter-next:hover svg {
    transform: translateX(10px);
}

.chapter-slider-02__nav-btn.js-chapter-prev {
    margin: 0 60px 0 0;
}

.chapter-slider-02__nav-btn svg {
    display: block;
    stroke: var(--slider02-white);
    transition: all 0.35s ease-in-out;
}

.chapter-slider-02__nav-btn:hover svg {
    stroke: var(--slider02-black-015);
}

.chapter-slider-02__nav-btn.inactive {
    cursor: default;
    pointer-events: none;
}

.chapter-slider-02__nav-btn.inactive svg {
    stroke: var(--slider02-black-015);
}

@media (max-width: 767px) {
    .chapter-slider-02 {
        --chapter-card-gap: 8px;
    }

    .chapter-slider-02__track .slick-list {
        margin: 0;
    }

    .chapter-card {
        width: 100%;
        max-width: var(--chapter-card-base-w);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .chapter-slider-02__nav {
        left: 0;
        right: 0;
        margin: 0 auto;
        width: max-content;
    }

    .chapter-slider-02__nav-btn.js-chapter-prev {
        margin: 0 60px 0 0;
    }

    .chapter-slider-02__nav-btn {
        transition: none;
    }

    .chapter-slider-02__nav-btn svg {
        transition: none;
    }

    .chapter-slider-02__nav-btn:hover svg,
    .chapter-slider-02__nav-btn.js-chapter-prev:hover svg,
    .chapter-slider-02__nav-btn.js-chapter-next:hover svg {
        transform: none;
        stroke: var(--slider02-white);
    }
}

@media (max-width: 767px) {
    /* Side peek: centerPadding set in slider-02-videos.js (88px) */
    .chapter-slider-02 {
        --chapter-mobile-peek: 36px;
        padding: 48px 0 40px;
    }

    .chapter-slider-02__inner {
        padding: 0;
    }

    .chapter-slider-02__track.slick-slider {
        margin-bottom: 100px;
    }

    .chapter-slider-02__track .slick-track {
        display: block !important;
    }

    .chapter-slider-02__track .slick-slide {
        display: block;
        float: left;
        padding: 0;
        margin: 0 8px !important;
        box-sizing: border-box;
    }

    .chapter-slider-02__track .slick-slide.is-target-center .chapter-card__body,
    .chapter-slider-02__track .slick-slide.is-center-fallback .chapter-card__body {
        transform: none;
        width: 100%;
    }

    .chapter-slider-02__track .slick-list {
        overflow: hidden;
        box-sizing: border-box;
        overscroll-behavior-x: contain;
        /* Keep visible side peeks on mobile even if Slick padding is not applied. */
        padding: 0 var(--chapter-mobile-peek) !important;
    }

    /* 1 slide: card fills full slide width (peek), no 240px cap */
    .chapter-card {
        max-width: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .chapter-slider-02__nav {
        bottom: -80px;
        left: 0;
        right: 0;
        justify-content: center;
    }

    .chapter-slider-02__nav-btn.js-chapter-prev {
        margin: 0 120px 0 0;
    }

    .chapter-slider-02__nav-btn {
        transition: none;
    }

    .chapter-slider-02__nav-btn svg {
        transition: none;
    }

    .chapter-slider-02__nav-btn:hover svg,
    .chapter-slider-02__nav-btn.js-chapter-prev:hover svg,
    .chapter-slider-02__nav-btn.js-chapter-next:hover svg {
        transform: none;
        stroke: var(--slider02-white);
    }
}

@media (max-width: 640px) {
    .chapter-slider-02 {
        --chapter-card-gap: 4px;
        padding: 24px 0 24px;
    }

    .chapter-slider-02__button {
        width: 220px;
        height: 54px;
        font-size: 1.0625rem;
    }
}