/* Speedcafe Interscroller */

.sc-isc {
    position: relative;
    margin: 20px 0 28px;
    -webkit-clip-path: inset(0);
    clip-path: inset(0); /* clips the fixed layer to this box; overflow:hidden would not */
}
.sc-isc--empty { display: none !important; }

.sc-isc__bar {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 24px; /* 22px visible + 2px overshoot past the clip edge, so sub-pixel rounding can't leak the layer through */
    box-sizing: border-box;
    background: #ededf0;
    color: #666a70;
    font: 11px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: center;
    letter-spacing: 0.01em;
}
.sc-isc__bar--top { top: -2px; padding-top: 2px; }
.sc-isc__bar--bottom { bottom: -2px; padding-bottom: 2px; }

.sc-isc__fixed {
    position: fixed;
    top: var(--sc-isc-bar, 0px); /* sits under a sticky header, not behind it */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #f4f4f6;
}

.sc-isc__slot {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Fluid / 1x1 creatives are stretched to the whole window by the script */
.sc-isc .sc-isc__slot .sc-isc__fill,
.sc-isc .sc-isc__slot iframe.sc-isc__fill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Fixed-size creatives (e.g. 320x480) are centred and scaled to fit */
.sc-isc .sc-isc__slot .sc-isc__fit {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

/* scroll cue: chevron in the bottom bar, bounces only while the window is on screen */
.sc-isc__cue {
    display: inline-block;
    vertical-align: middle;
    margin: -2px 6px 0 0;
    color: #8a8f96;
}
.sc-isc--inview .sc-isc__cue {
    -webkit-animation: sc-isc-bounce 1.4s ease-in-out infinite;
    animation: sc-isc-bounce 1.4s ease-in-out infinite;
}
@-webkit-keyframes sc-isc-bounce {
    0%, 100% { -webkit-transform: translateY(-1px); }
    50%      { -webkit-transform: translateY(2px); }
}
@keyframes sc-isc-bounce {
    0%, 100% { transform: translateY(-1px); }
    50%      { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .sc-isc--inview .sc-isc__cue { -webkit-animation: none; animation: none; }
}

/* ---- preview: test image via ?sc_isc=preview&sc_isc_img=URL (scaled to fit, like a served creative) ---- */
/* High specificity + !important so theme image rules (e.g. .entry-content img { height:auto }) cannot shrink it */
.sc-isc .sc-isc__slot img.sc-isc__ph-img {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    -o-object-fit: contain;
    object-fit: contain;
    background: #f4f4f6;
}

/* ---- preview placeholder (no ad call) ---- */

.sc-isc__ph {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a2a66;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Emulates a 9:16 image set to cover, so the crop matches what a real creative gets */
.sc-isc__ph-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: 9 / 16;
    background: -webkit-linear-gradient(295deg, #06183a 0%, #0d3b94 58%, #0a2a66 100%);
    background: linear-gradient(155deg, #06183a 0%, #0d3b94 58%, #0a2a66 100%);
}
.sc-isc__ph-canvas:before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: repeating-linear-gradient(-24deg, rgba(255,255,255,0.05) 0 14px, transparent 14px 46px);
}
.sc-isc__ph-safe {
    position: absolute;
    left: 8.333%;   /* 90 / 1080 */
    right: 8.333%;
    top: 12.5%;     /* 240 / 1920 */
    bottom: 12.5%;
    border: 2px dashed #ffd400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}
.sc-isc__ph-title {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 14px;
}
.sc-isc__ph-sub {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255,255,255,0.85);
}