/* =====================================================
   Stories Slider Shortcode — stories-slider.css
   ===================================================== */

/* ---------- Layout wrapper ---------- */
.stories-slider-wrap {
    display: flex;
    width: 100%;
    max-width: 1860px;
    height: 600px;
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
    margin: 0 auto;
}

/* ---------- Left: content panel (1/3) ---------- */
.ss-content-panel {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    height: 100%;
    background: linear-gradient(to bottom, #f8882a 0%,#f04b00 100%);
    display: flex;
    flex-direction: column;
    padding: 70px 50px 50px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.ss-content-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ---------- Block title ---------- */
.ss-block-title {
    font-family: "MuseoSans900", sans-serif!important;
    font-size: clamp(16px, 1.4vw, 22px)!important;
    font-weight: 900!important;
    letter-spacing: 0.06em!important;
    text-transform: uppercase!important;
    color: #fff!important;
    margin: 0 0 12px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* ---------- Block description ---------- */
.ss-block-desc {
    font-family: "MuseoSans300", sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,0.88);
    line-height: 22px;
    margin: 0 0 20px;
    flex-shrink: 0;
}

/* ---------- Navigation arrows ---------- */
.ss-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.ss-prev,
.ss-next {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.ss-prev:hover,
.ss-next:hover { opacity: 1; transform: scale(1.1); }
.ss-prev svg,
.ss-next svg { width: 40px; height: 40px; }

/* ---------- Slide content area ---------- */
.ss-slide-content-area {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ss-slide {
    display: none;
    flex-direction: column;
}
.ss-slide.ss-active {
    display: flex;
    animation: ss-fade-in 0.35s ease forwards;
}
@keyframes ss-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ss-slide-meta {
    font-family: "MuseoSans300", sans-serif;
    font-size: clamp(10px, 0.75vw, 13px);
    color: #FFFFFF;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ss-slide-meta .ss-date {
    font-family: "MuseoSans700";
    character-spacing: .79px;
}
.ss-sep-dot { opacity: 0.5; }

.ss-slide-divider {
    width: 100%;
    height: 1px;
    background: rgb(0 0 0 / 50%);
    margin-bottom: 30px;
    margin-top: 10px;
}

.ss-slide-cats {
    font-family: "MuseoSans900", sans-serif;
    font-size: clamp(9px, 0.7vw, 11px);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.ss-slide-title {
    font-family: "ProspectusL Bld", "MuseoSans300", serif!important;
    font-size: clamp(18px, 1.6vw, 26px)!important;
    color: #fff!important;
    line-height: 1.25!important;
    margin: 0 0 16px!important;
    font-weight: 700!important;
}

.ss-read-more::before {
    content: "";
    position: relative;
    border-bottom: 1px solid white;
    height: 5px;
    width: 36px;
    left: -10px;
    bottom: 4px;
    display: inline-block;
}
.ss-read-more {
    font-family: "MuseoSans900", sans-serif;
    font-size: clamp(9px, 0.7vw, 11px);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding-bottom: 2px;
    display: inline-block;
    transition: border-color 0.2s;
}
.ss-read-more:hover { border-color: #fff; }

/* View All — pinned to bottom via margin-top:auto */
.ss-view-all {
    display: inline-block;
    font-family: "MuseoSans900", sans-serif;
    font-size: clamp(10px, 0.75vw, 12px);
    line-height: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border: 1.5px solid black;
    padding: 15px 30px;
    transition: background 0.2s, border-color 0.2s;
    align-self: flex-start;
    margin-top: auto;
    flex-shrink: 0;
    border-radius: 50px;
    background: #000000;
}
.ss-view-all:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
}

/* ---------- Right: image panel (2/3) ---------- */
.ss-image-panel {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #222;
}

/* Background crossfade layers — behind the page */
.ss-image-panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

/* ---------- Indicator bars ---------- */
.ss-indicators {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 30;
    white-space: nowrap;
}
.ss-indicator {
    display: block;
    width: 105px;
    height: 5px;
    background: rgba(255,255,255,0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease;
    flex-shrink: 0;
    border-radius: 5px;
}
.ss-indicator-active { background: linear-gradient(90deg, rgba(248,136,42,1) 0%, rgba(244,85,167,1) 100%); }
.ss-indicator:hover:not(.ss-indicator-active) { background: rgba(255,255,255,0.6); }

/* ==========================================================
   SINGLE-PAGE TURN
   One full-size page sits over the image panel.
   It pivots around its LEFT edge (transform-origin: left center)
   sweeping right-to-left like a magazine page turning.

   Structure:
     .ss-page-stage   (full-size, holds the flipping page)
       .ss-page       (the flipping element, preserve-3d, pivot: left)
         .ss-pf       (front face — current image)
         .ss-pb       (back face — next image, pre-flipped scaleX(-1))

   The dog-ear hint lives inside .ss-pf (top-right corner).
   On hover it grows to 300×300. Its back side shows a 50%-opacity
   peek of the next image clipped to the same triangle shape.
   Clicking the image panel (or nav arrows) fires the turn.
   ========================================================== */

/* Stage: full image panel, no clipping, just a positioning context */
.ss-page-stage {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

/* The page itself */
.ss-page {
    position: absolute;
    inset: 0;
    cursor: pointer;
    pointer-events: auto;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    will-change: clip-path;
}

/* Front face — current image */
.ss-pf {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* Subtle right-edge shadow to suggest page depth */
    box-shadow: inset -12px 0 28px rgba(0,0,0,0.14);
}

/* Back face — next image, mirrored so it reads correctly */
.ss-pb {
    display: none;
}

/* ==========================================================
   DOG-EAR CORNER HINT (top-right of front face)
   - Triangle grows from 0→300 on hover
   - Has a folded-paper gradient on its visible face
   - A 50%-opacity peek of the next image sits behind it
     (clipped to the same triangle via clip-path)
   ========================================================== */

/* Container — positions at top-right of the front face */
.ss-dog-ear {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 5;
}

/* Next-image peek — behind the fold, 50% opacity, triangle shape */
.ss-dog-ear-peek-nope {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: top right;
    /* Rotate 90° as per the brief — shows a rotated crop of the next image */
    transform: rotate(90deg);
    transform-origin: top right;
    opacity: 0.5;
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
    transition: none; /* grows instantly with the parent */
}

/* this fixes it */

.ss-dog-ear-peek {
    position: absolute;
    inset: 0;
    background-position: top right;
    transform: rotate(180deg);
    transform-origin: top;
    opacity: 1;
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
    transition: none;
    top: 300px;
    width: 300px;
    heighT: 300px;
    z-index: 1000;
    background-size: auto;
}

/* The folded paper triangle — sits on top of the peek */
.ss-dog-ear-fold {
    position: absolute;
    inset: 0;
    /* Triangle via clip-path */
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
    background: linear-gradient(
        225deg,
        #ffffff 0%,
        #f0f0f0 45%,
        #e0e0e0 50%,
        #f5f5f5 55%,
        #ffffff 100%
    );
    box-shadow: -5px 5px 15px rgba(0,0,0,0.3);
}

/* The whole dog-ear starts at 0×0, grows on hover */
/* We scale via clip on the parent by animating width/height of
   a pseudo-clip. Simplest: just shrink/grow the container.
   At 0: nothing visible. At 300: full triangle. */
.ss-dog-ear-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    transition: width 0.3s ease, height 0.3s ease;
}

.ss-page:not(.ss-turning):hover .ss-dog-ear-inner {
    width: 300px;
    height: 300px;
}

.ss-page::before,
.ss-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 3;
}

.ss-page::before {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.04) 35%,
        rgba(0,0,0,0.22) 100%
    );
    mix-blend-mode: soft-light;
}

.ss-page::after {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.16) 78%,
        rgba(0,0,0,0.42) 100%
    );
}

.ss-page.ss-turning {
    animation: ss-page-turn 720ms cubic-bezier(0.45, 0, 0.18, 1) forwards;
}

.ss-page.ss-turning::before,
.ss-page.ss-turning::after {
    opacity: 1;
}

@keyframes ss-page-turn {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    46% {
        clip-path: polygon(0% 0%, 72% 0%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
}

/* During animation, hide the dog-ear so the page turn takes over cleanly */
.ss-page.ss-turning .ss-dog-ear-inner {
    width: 0;
    height: 0;
    transition: none;
}

/* ---------- Feature variant: simple post-card slider ---------- */
.stories-slider-wrap.ss-variant-feature {
    background: transparent;
    height: 680px;
}

.ss-variant-feature .ss-content-panel {
    background: transparent;
    padding: 70px 50px 60px;
}

.ss-variant-feature .ss-block-title {
    font-family: "ProspectusL Bld", "MuseoSans900", serif!important;
    font-size: 60px!important;
    line-height: 65px!important;
    letter-spacing: 0!important;
    text-transform: none!important;
    margin: 0 0 28px!important;
    text-transform: capitalize!important;
}

.ss-variant-feature .ss-block-desc {
    display: none;
}

.ss-variant-feature .ss-nav {
    gap: 12px;
    margin-bottom: 48px;
}

.ss-variant-feature .ss-prev,
.ss-variant-feature .ss-next {
    width: 48px;
    height: 48px;
    opacity: 1;
}

.ss-variant-feature .ss-prev svg,
.ss-variant-feature .ss-next svg {
    width: 48px;
    height: 48px;
}

.ss-variant-feature .ss-prev svg circle,
.ss-variant-feature .ss-next svg circle {
    stroke: #fff;
}

.ss-variant-feature .ss-prev svg polygon,
.ss-variant-feature .ss-next svg polygon {
    fill: #fff;
}

.ss-variant-feature .ss-slide-content-area {
    flex: 0 1 auto;
}

.ss-variant-feature .ss-slide.ss-active {
    animation: ss-fade-in 0.28s ease forwards;
}

.ss-variant-feature .ss-slide-divider {
    background: rgba(255,255,255,0.75);
    height: 1px;
    margin: 0 0 42px;
}

.ss-variant-feature .ss-slide-title {
    font-size: 30px!important;
    line-height: 30px!important;
    margin: 0 0 24px!important;
    letter-spacing: 0!important;
}

.ss-slide-excerpt {
    font-family: "MuseoSans300", sans-serif;
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    margin: 0 0 28px;
    letter-spacing: 0px;
}

.ss-feature-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 50px;
    padding: 14px 34px;
    border-radius: 999px;
    background: #ff8a24;
    color: #fff;
    font-family: "MuseoSans900", sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease, transform 0.15s ease;
    max-width: 160px;
}

.ss-feature-button:hover {
    background: #f04b00;
    color: #fff;
    transform: translateY(-1px);
}

.ss-variant-feature .ss-image-panel {
    background: transparent;
    cursor: pointer;
}

.ss-feature-image-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 520ms ease;
    will-change: transform;
}

.ss-feature-image-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ss-content-panel,
    .ss-image-panel { flex: 0 0 50%; max-width: 50%; }
    .ss-block-title  { font-size: 18px; }
    .ss-slide-title  { font-size: 20px; }
    .ss-page:not(.ss-turning):hover .ss-dog-ear-inner { width: 180px; height: 180px; }
    .ss-page.ss-turning .ss-dog-ear-inner { width: 0; height: 0; }
    .stories-slider-wrap.ss-variant-feature { height: 580px; }
    .ss-variant-feature .ss-content-panel { padding: 48px 34px; }

    .ss-slide-excerpt { font-size: 18px; }
}

@media (max-width: 640px) {
    .stories-slider-wrap { flex-direction: column; height: auto; }
    .ss-content-panel,
    .ss-image-panel { flex: 0 0 auto; max-width: 100%; width: 100%; }
    .ss-content-panel { height: auto; min-height: 340px; padding: 28px 24px 24px; }
    .ss-image-panel  { min-height: 260px; height: 260px; }
    .ss-block-title  { font-size: 16px; }
    .ss-slide-title  { font-size: 20px; }
    .ss-view-all     { margin-top: 24px; }
    .ss-indicator    { width: 48px; }
    .ss-indicators   { gap: 4px; }
    .ss-page:not(.ss-turning):hover .ss-dog-ear-inner { width: 100px; height: 100px; }
    .ss-page.ss-turning .ss-dog-ear-inner { width: 0; height: 0; }
    .stories-slider-wrap.ss-variant-feature { height: auto; }
    .ss-variant-feature .ss-content-panel { min-height: 0; padding: 34px 26px; padding-left: 0px;
        padding-right: 0px; }
    .ss-variant-feature .ss-image-panel { min-height: 300px; height: 300px; }
    .ss-variant-feature .ss-nav { margin-bottom: 34px; }
    .ss-variant-feature .ss-slide-divider { margin-bottom: 28px; }
    
}

/* Hide the per-slide img wrapper — only used for data-img */
.ss-slide-img { display: none; }