/* ==========================================================================
   WebStoriesFullPage.css  —  fully responsive
   Breakpoints: 360 | 480 | 640 | 768 | 1024 | 1200-1500 (1366) | 1500+
   ========================================================================== */

/* ---------- Ambient blurred background ---------- */
.story-bg {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(45px) brightness(0.4);
    transform: scale(1.2);
    z-index: 0;
    pointer-events: none;
    transition: background-image 0.4s ease;
}

/* ---------- Wrapper (uses design tokens) ---------- */
.story-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 640px; /* wide enough for side buttons */
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    box-sizing: border-box;
    overflow: visible;
    /* ---- responsive tokens ---- */
    --card-w: min(455px, 100%, calc(89vh * 9 / 16));
    --card-w: min(455px, 100%, calc(89dvh * 9 / 16)); /* modern */
    --btn-size: clamp(36px, 3.4vw, 48px);
    --nav-gap: 14px;
}

/* ---------- Story card (9:16, never overflows) ---------- */
.story-card {
    position: relative;
    width: var(--card-w);
    aspect-ratio: 9 / 16;
    max-height: 89vh;
    max-height: 89dvh;
    overflow: hidden;
    background: #000;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    isolation: isolate;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

    .story-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: #000;
    }

/* ---------- Progress bars ---------- */
#progress-container {
    position: absolute;
    top: clamp(10px, 1.8vh, 14px);
    left: 12px;
    right: 12px;
    z-index: 30;
    display: flex;
    gap: 5px;
}

.progress-track {
    height: 3px;
    flex: 1;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 10px;
}

/* ---------- Nav buttons ---------- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: background .2s, transform .2s, opacity .2s;
}

    .nav-btn:hover {
        background: #fff;
        transform: translateY(-50%) scale(1.08);
    }

    .nav-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .nav-btn svg {
        width: 55%;
        height: 55%;
        color: #000;
    }

    /* positioned relative to wrapper — card is centered in wrapper */
    .nav-btn.prev {
        left: calc(50% - var(--card-w) / 2 - var(--nav-gap) - var(--btn-size));
    }

    .nav-btn.next {
        left: calc(50% + var(--card-w) / 2 + var(--nav-gap));
    }

/* ---------- Story logo ---------- */
.story-logo {
    position: absolute;
    left: 12px;
    top: clamp(26px, 4vh, 36px);
    z-index: 40;
}

    .story-logo img {
        height: clamp(26px, 4vh, 40px);
        width: auto;
        max-width: 80px;
        object-fit: contain;
        background: none !important;
    }

/* ---------- Story overlay (caption) ---------- */
.story-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(14px, 2.4vh, 22px) clamp(18px, 6%, 36px) clamp(14px, 2.4vh, 22px);
    text-align: center;
    z-index: 20;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .5s ease, opacity .5s ease;
    will-change: transform, opacity;
}

    .story-overlay.show {
        transform: translateY(0);
        opacity: 1;
        animation: slideUp .5s ease forwards;
    }

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.story-caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

#story-caption-top {
    font-size: 35px;
}



/* ---------- Dual-image transition ---------- */
.story-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    will-change: opacity, transform;
}

    .story-img.active {
        opacity: 1;
        visibility: visible;
        z-index: 2;
    }

    .story-img.slide-next-in {
        animation: storyNext .35s ease-out forwards;
        z-index: 3;
    }

    .story-img.slide-prev-in {
        animation: storyPrev .35s ease-out forwards;
        z-index: 3;
    }

    .story-img.slide-next-out {
        opacity: 0;
        transform: translateX(-30px);
        z-index: 1;
    }

    .story-img.slide-prev-out {
        opacity: 0;
        transform: translateX(30px);
        z-index: 1;
    }

#story-image {
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease-in-out;
    will-change: transform, opacity;
}

    #story-image.story-next {
        animation: storyNext .35s ease-out forwards;
    }

    #story-image.story-prev {
        animation: storyPrev .35s ease-out forwards;
    }

@keyframes storyNext {
    0% {
        opacity: .2;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes storyPrev {
    0% {
        opacity: .2;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------- Slow zoom (Ken Burns) ---------- */
.story-zoom,
.story-img.active.zoom {
    animation: storyZoom 5s linear forwards;
    transform-origin: center center;
    will-change: transform;
}

@keyframes storyZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.12);
    }
}

/* ---------- Replay button ---------- */
#replay-container {
    position: absolute;
    right: calc(30% - var(--card-w) / 2 + 12px);
    z-index: 50;
}

.RepllyButton {
}

.replay-container,
.replaycontainer {
}

/* ---------- Legacy helpers kept for compatibility ---------- */
.borderBOx {
    border: 2px solid red;
    width: 165px;
}

.relativeDiv {
    height: 325px;
}

    .relativeDiv img {
        height: 240px;
    }

    .relativeDiv p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 20px;
        max-height: 66px;
    }

.Ullistlist {
    font-size: 16px;
}

.WEbsitenameWebStory { /* hook kept */
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ----- Ultra wide 1501+ : bigger card ----- */
@media (min-width: 1501px) {
    .story-wrapper {
        max-width: 760px;
        --card-w: min(500px, 100%, calc(89dvh * 9 / 16));
        --nav-gap: 22px;
    }
}

/* ----- Laptop 1200 – 1500 (target 1366) ----- */
@media (min-width: 1200px) and (max-width: 1500px) {
    .story-wrapper {
        max-width: 640px;
        --card-w: min(455px, 100%, calc(89dvh * 9 / 16));
        --nav-gap: 16px;
    }

    .Ullistlist {
        font-size: 16px;
    }

    #story-date {
        margin: 0;
    }

    .relatedStory {
        height: 140px;
    }
}

/* ----- Small laptop / large tablet 1024 – 1199 ----- */
@media (min-width: 1024px) and (max-width: 1199px) {
    .story-wrapper {
        max-width: 600px;
        --card-w: min(430px, 100%, calc(89dvh * 9 / 16));
        --nav-gap: 12px;
    }
}

/* ----- Tablet 641 – 1023 : buttons move INSIDE card ----- */
@media (min-width: 641px) and (max-width: 1023px) {
    .story-wrapper {
        max-width: 560px;
        --nav-gap: 8px;
    }

    .nav-btn {
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

        .nav-btn:hover {
            background: rgba(0, 0, 0, 0.65);
        }

        .nav-btn svg {
            color: #fff;
        }

        .nav-btn.prev {
            left: calc(50% - var(--card-w) / 2 + 8px);
        }

        .nav-btn.next {
            left: calc(50% + var(--card-w) / 2 - var(--btn-size) - 8px);
        }
}

/* ----- Mobile ≤640 : full-screen, hide nav buttons ----- */
@media (max-width: 640px) {
    .nav-btn.prev,
    .nav-btn.next {
        display: none !important;
    }

    .story-wrapper {
        max-width: 100%;
        padding: 0;
        height: 100vh;
        height: 100dvh;
        --card-w: 100%;
        --nav-gap: 0;
    }

    .story-card {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    body {
        padding: 0;
    }

    .story-logo {
        top: 26px;
        left: 10px;
    }

        .story-logo img {
            height: 50px;
        }

    #replay-container {
        right: 200px;
        bottom: 30px;
    }
}

/* ----- Short viewports (1366×640 / landscape phones) ----- */
@media (max-height: 700px) {
    .story-overlay {
        padding: 12px 20px;
    }


    #story-caption-bottom {
        font-size: clamp(11px, 1.2vw, 14px);
    }

    .story-logo {
        top: 22px;
    }

        .story-logo img {
            height: 40px;
        }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .story-zoom,
    .story-img.active.zoom {
        animation: none;
    }

    .story-overlay,
    .story-img,
    #story-image,
    .nav-btn {
        transition: none;
    }
}