/* Story Stories frontend reset / Elementor compatibility */
.story-stories .story-wrapper,
.story-stories .story-wrapper button,
.story-stories .story-wrapper h2,
.story-stories .story-wrapper h3,
.story-stories .story-wrapper p {
    margin: 0;
}
.story-stories .story-wrapper button {
    font-family: inherit;
}
.story-stories .story-wrapper img {
    max-width: none;
}
.story-stories .story-wrapper {
    width: 100%;
}
.story-stories,
.story-stories * { box-sizing: border-box; }

.story-stories {
    width: 100%;
    background: #fff;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
}

.story-wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
}

.story-sidebar {
    width: 18%;
    min-width: 230px;
    background: var(--story-sidebar-bg);
    color: #fff;
    padding: 35px 25px;
    position: sticky;
    top: 0;
   
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 20;
}
.story-sidebar::-webkit-scrollbar { display:none; }

.story-heading {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}
.story-heading-line {
    width: 140px;
    height: 2px;
    background: var(--story-accent);
    margin: 12px 0 32px;
}

.story-timeline { position: relative; }
.story-timeline::before {
    content:"";
    position:absolute;
    left:16px;
    top:16px;
    bottom:18px;
    width:1px;
    background:rgba(255,255,255,.5);
}

.story-nav {
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    width:100%;
    text-align:left;
    padding:15px 0 !important;
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin:0 0 25px;
    cursor:pointer;
    font:inherit;
    transition:padding-left .3s ease;
}
.story-nav:hover { padding-left:1px; }

.story-nav-icon,
.story-bottom-icon {
    position:relative;
    z-index:2;
    width:34px;
    min-width:34px;
    height:34px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.9);
    background:var(--story-sidebar-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:12px;
    transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.story-nav.active .story-nav-icon,
.story-bottom-item.active .story-bottom-icon {
    background:var(--story-accent);
    border-color:var(--story-accent);
    box-shadow:0 0 0 5px rgba(247,148,29,.15);
}

.story-nav-content { padding-top:1px; }
.story-nav-number {
    display:block;
    font-size:16px;
    line-height:1.1;
    font-weight:700;
    color:var(--story-accent);
    margin-bottom:5px;
}
.story-nav-title {
    display:block;
    font-size:14px;
    line-height:1.35;
    color:#fff;
}

.story-bottom { margin-top:8px; }
.story-bottom-item {
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    padding:0;
    display:flex;
    align-items:center;
    gap:13px;
    margin:0 0 22px;
    cursor:pointer;
    font:inherit;
    text-align:left;
    transition:padding-left .3s ease;
}
.story-bottom-item:hover,
.story-bottom-item.active { padding-left:4px; }
.story-bottom-icon {
    font-size:14px;
}
.story-bottom-item.active .story-bottom-icon { color:#fff; }

.story-content { width:82%; }

.story-article {
    width:100%;
    min-height:135px;
    display:grid;
    grid-template-columns:31% 31% 25% 13%;
    position:relative;
    border-bottom:1px solid #d6d6d6;
    scroll-margin-top:45vh;
    transition:background-color .55s ease,opacity .4s ease,box-shadow .55s ease;
}

.story-image {
    width:100%;
    height:100%;
    min-height:135px;
    overflow:hidden;
    background:#eee;
}
.story-image img {
    display:block;
    width:100%;
    height:100%;
    min-height:135px;
    object-fit:cover;
    transition:filter .5s ease;
}
.story-image-placeholder {
    width:100%;
    height:100%;
    min-height:135px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee;
    color:#888;
    font-size:14px;
}

.story-info {
    padding:17px 22px;
    background:#fafafa;
}
.story-chapter {
    margin:0 0 7px;
    font-size:10px;
    line-height:1.2;
    font-weight:700;
    text-transform:uppercase;
}
.story-title {
    margin:0 0 10px;
padding:20px 0;
    font-size:20px;
    line-height:1.05;
    font-weight:700;
    color:#111;
}
.story-quote {
    display:flex;
    align-items:flex-start;
    gap:6px;
    margin:0;
    font-size:19px;
    line-height:1.35;
    font-style:italic;
    font-weight:500;
}
.story-quote-mark {
    font-size:34px;
    line-height:18px;
    font-weight:700;
}

.story-description {
    padding:17px 23px;
    background:#fdfdfd;
    font-size:13px;
    line-height:1.55;
    color:#1d1d1d;
}
.story-description p { margin:0 0 10px; }
.story-description p:last-child { margin-bottom:0; }

.story-icon {
    min-height:135px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f8f8f8;
}
.story-icon > span { font-size:40px; line-height:1; }

.story-orange .story-chapter,.story-orange .story-quote,.story-orange .story-quote-mark,.story-orange .story-icon { color:#e87500; }
.story-blue .story-chapter,.story-blue .story-quote,.story-blue .story-quote-mark,.story-blue .story-icon { color:#0066c4; }
.story-green .story-chapter,.story-green .story-quote,.story-green .story-quote-mark,.story-green .story-icon { color:#4d8c22; }
.story-purple .story-chapter,.story-purple .story-quote,.story-purple .story-quote-mark,.story-purple .story-icon { color:#74348f; }
.story-cyan .story-chapter,.story-cyan .story-quote,.story-cyan .story-quote-mark,.story-cyan .story-icon { color:#008ea5; }
.story-red .story-chapter,.story-red .story-quote,.story-red .story-quote-mark,.story-red .story-icon { color:#e32620; }

.story-article.story-selected {
    z-index:5;
    opacity:1 !important;
    background:var(--story-active-bg);
    box-shadow:0 10px 32px rgba(0,0,0,.07);
}
.story-article.story-selected .story-info,
.story-article.story-selected .story-description,
.story-article.story-selected .story-icon { background:transparent; }
.story-article.story-selected .story-image img { filter:brightness(1.025); }

.story-content.has-selection .story-article:not(.story-selected) { opacity:.72; }

@keyframes storyHighlight {
    0% { background-color:#fff; box-shadow:0 0 0 rgba(0,0,0,0); }
    45% { background-color:var(--story-active-bg); box-shadow:0 10px 35px rgba(0,0,0,.09); }
    100% { background-color:var(--story-active-bg); box-shadow:0 10px 32px rgba(0,0,0,.07); }
}
.story-article.story-animate { animation:storyHighlight .65s ease-out both; }

@media (max-width:1100px) {
    .story-sidebar { width:24%; min-width:210px; padding:28px 18px; }
    .story-content { width:76%; }
    .story-article { grid-template-columns:38% 62%; }
    .story-description,.story-icon { display:none; }
    .story-title { font-size:19px; }
}

@media (max-width:700px) {
    .story-wrapper { display:block; }
    .story-sidebar {
        position:relative;
        width:100%;
        height:auto;
        min-width:0;
        padding:22px 15px 15px;
        overflow:hidden;
    }
    .story-heading { font-size:21px; }
    .story-heading-line { margin-bottom:20px; }
    .story-timeline {
        display:flex;
        gap:12px;
        overflow-x:auto;
        padding-bottom:10px;
        scrollbar-width:none;
    }
    .story-timeline::-webkit-scrollbar { display:none; }
    .story-timeline::before { display:none; }
    .story-nav {
        flex:0 0 125px;
        display:block;
        margin:0;
    }
    .story-nav-icon { margin-bottom:7px; }
    .story-nav-number { font-size:14px; }
    .story-nav-title { font-size:12px; }
    .story-bottom {
        display:flex;
        gap:25px;
        margin-top:12px;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .story-bottom::-webkit-scrollbar { display:none; }
    .story-bottom-item { width:auto; flex:0 0 auto; margin-bottom:0; }
    .story-content { width:100%; }
    .story-article {
        display:block;
        min-height:auto;
        scroll-margin-top:20px;
    }
    .story-image,.story-image img,.story-image-placeholder {
        height:230px;
        min-height:230px;
    }
    .story-info { padding:18px; }
    .story-title { font-size:22px; }
    .story-description {
        display:block;
        padding:0 18px 20px;
    }
    .story-icon { display:none; }
    .story-content.has-selection .story-article:not(.story-selected) { opacity:1; }
}
@media (max-width:450px) {
    .story-image,.story-image img,.story-image-placeholder { height:200px; min-height:200px; }
    .story-info { padding:16px; }
    .story-title { font-size:20px; }
    .story-quote { font-size:13px; }
}
.story-nav-icon img { width:1.35em; height:1.35em; object-fit:contain; display:block; }
.story-icon > span img { width:40px; height:40px; object-fit:contain; display:block; }