/* Portal Stories */
.portal-stories-shell { font-family: inherit; }
.portal-stories-button,
.portal-stories-open-direct {
    appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; border-radius:999px; background:#255263; color:#fff; font-weight:700;
    line-height:1; box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.portal-stories-button-icon { width:22px; height:22px; display:grid; place-items:center; background:#fff; color:#255263; border-radius:50%; font-size:10px; }
.portal-stories-auto-button { position:fixed; z-index:9998; right:20px; bottom:20px; }
.portal-stories-overlay {
    position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.92); padding:20px; box-sizing:border-box;
}
.portal-stories-overlay.is-open { display:flex; }
.portal-stories-viewer {
    position:relative; width:min(430px, 92vw); height:min(820px, 92vh);
    background:#080808; border-radius:18px; overflow:hidden; box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.portal-stories-stage { position:absolute; inset:0; }
.portal-story-slide { position:absolute; inset:0; overflow:hidden; background:#111; }
.portal-story-image {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    background:#222;
}
.portal-story-shade {
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.9) 100%);
}
.portal-story-top { position:absolute; top:12px; left:12px; right:12px; z-index:3; }
.portal-story-progress { display:flex; gap:4px; width:100%; }
.portal-story-progress span { height:3px; flex:1; border-radius:3px; background:rgba(255,255,255,.38); overflow:hidden; }
.portal-story-progress i { display:block; width:0; height:100%; background:#fff; }
.portal-story-meta { display:flex; align-items:center; gap:8px; margin-top:14px; color:#fff; }
.portal-story-category {
    display:inline-flex; align-items:center; min-height:26px; padding:5px 10px;
    border-radius:6px; color:#fff; font-size:12px; font-weight:800; letter-spacing:.2px;
}
.portal-story-title {
    position:absolute; left:20px; right:20px; bottom:78px; z-index:3; margin:0;
    color:#fff; font-size:clamp(24px, 4vw, 38px); line-height:1.08; font-weight:800;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.portal-story-read {
    position:absolute; left:20px; bottom:25px; z-index:3; display:inline-flex; align-items:center;
    padding:10px 17px; border-radius:8px; background:#fff; color:#111; text-decoration:none;
    font-size:14px; font-weight:800;
}
.portal-story-read:hover { color:#111; transform:translateY(-1px); }
.portal-story-ad {
    position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
    background:#111; color:#fff; padding:28px; text-align:center; box-sizing:border-box;
}
.portal-story-ad-inner { max-width:100%; max-height:100%; overflow:auto; }
.portal-story-ad-label { font-size:10px; opacity:.55; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.portal-stories-close {
    position:absolute; top:28px; right:12px; z-index:30; border:0; background:rgba(0,0,0,.35);
    color:#fff; width:34px; height:34px; border-radius:50%; font-size:27px; line-height:30px; cursor:pointer;
}
.portal-stories-prev,.portal-stories-next {
    position:absolute; top:50%; z-index:25; transform:translateY(-50%); border:0; cursor:pointer;
    width:46px; height:90px; background:transparent; color:#fff; font-size:58px; opacity:.85;
}
.portal-stories-prev { left:2px; }
.portal-stories-next { right:2px; }
.portal-stories-prev:hover,.portal-stories-next:hover { opacity:1; }
.portal-stories-shell.is-playing .portal-story-progress i { transition:width linear; }

@media (min-width: 900px) {
    .portal-stories-viewer { width:430px; height:820px; }
    .portal-stories-prev { left:-65px; }
    .portal-stories-next { right:-65px; }
}
@media (max-width: 600px) {
    .portal-stories-overlay { padding:0; }
    .portal-stories-viewer { width:100vw; height:100vh; border-radius:0; }
    .portal-story-title { font-size:28px; bottom:92px; }
    .portal-story-read { bottom:38px; }
    .portal-stories-close { top:26px; right:14px; }
}