/*
 * Ad zone layout and slot styling
 */
.home-ad-zone,
.post-ad-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}

.home-ad-zone--top {
    margin-top: 0;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .home-ad-zone--top {
        margin-top: calc(var(--aqua-masthead-height, 160px) + 8px);
        position: relative;
        z-index: 1;
    }
}

.home-mobile-header-adsense-anchor {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.home-mobile-header-adsense-anchor .ad-slot--home-mobile-header {
    width: 100%;
    max-width: 336px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.home-mobile-header-adsense-anchor .ad-slot--home-mobile-header > * {
    width: auto;
    margin: 0;
}

.home-ad-zone--bottom,
.post-ad-zone--bottom {
    margin-top: 24px;
}

/* -------------------------------------------------------------------------- */
/* In-article interscroller (single posts)                                    */
/* -------------------------------------------------------------------------- */

.post-interscroller-slot,
.post-interscroller-slot__inner,
.post-interscroller-slot__container {
    width: 100%;
}

.b2b-interscroller__label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.b2b-interscroller__image,
.b2b-interscroller__custom {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.b2b-interscroller__gam {
    display: flex;
    align-items: center;
    justify-content: center;
}

.b2b-interscroller__gam-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b2b-interscroller__gam-slot iframe {
    max-width: 100%;
}

.b2b-interscroller__click {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.home-billboard-anchor,
.home-bottom-billboard-anchor {
    width: 100%;
    max-width: 970px;
}

.footer-mobile-adsense-anchor {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.ad-slot--footer-mobile {
    width: 100%;
    max-width: 336px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.ad-slot--footer-mobile > * {
    width: auto;
    margin: 0;
}

.mobile-footer-test {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.mobile-footer-test__creative {
    width: 100%;
    max-width: 320px;
    min-height: 250px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10141c, #1e2a3f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
}

.mobile-footer-test .ad-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
}

.item-rail-wrapper {
    --home-rail-width: 300px;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.post-rail-wrapper {
    --post-rail-width: 300px;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.post-rail-zone {
    display: flex;
    align-items: stretch;
}

.post-rail-zone--left {
    flex: 0 0 var(--post-rail-width);
    padding-top: 20px;
    display: block;
    align-self: flex-start;
    position: relative;
}

.post-rail-zone--right {
    flex: 0 0 var(--post-rail-width);
    padding-top: 20px;
    display: block;
    align-self: flex-start;
    position: relative;
}

.post-rail-zone--content {
    flex: 0 1 1170px;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
}

.post-left-rail-anchor,
.post-right-rail-anchor {
    width: 100%;
    align-self: flex-start;
    position: relative;
    margin-top: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.post-left-rail-slot,
.post-left-rail-slot__inner,
.post-left-rail-slot__container,
.post-right-rail-slot,
.post-right-rail-slot__inner,
.post-right-rail-slot__container {
    width: 100%;
}

.home-right-takeover-host {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    overflow: hidden;
}

.home-right-takeover-slot,
.home-right-takeover-slot__inner,
.home-right-takeover-slot__container {
    width: 100%;
}

.home-right-takeover-slot {
    height: 100%;
}

.home-right-takeover-slot__inner,
.home-right-takeover-slot__container {
    height: 100%;
}

.home-right-takeover-creative,
.home-right-takeover-creative__iframe {
    width: 100%;
    height: 100%;
}

.home-right-takeover-creative__iframe {
    display: block;
    border: 0;
}

/* -------------------------------------------------------------------------- */
/* Page Skin (desktop-only)                                                   */
/* -------------------------------------------------------------------------- */

.home-page-skin-host {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    pointer-events: none;
}

body.b2b-page-skin-active .site-header {
    position: relative;
    z-index: 2000;
    overflow: visible !important;
}

body.b2b-page-skin-active #masthead,
body.b2b-page-skin-active .site-header__top-row {
    overflow: visible !important;
}

.b2b-audio-skin-host {
    position: absolute;
    top: var(--b2b-demo-toolbar-offset, 0px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    pointer-events: auto;
}

.home-page-skin-slot,
.home-page-skin-slot__inner,
.home-page-skin-slot__container {
    width: 100%;
    height: 100%;
}

.b2b-page-skin {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.b2b-page-skin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(10, 14, 20, 0.92), rgba(20, 34, 58, 0.92));
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        var(--b2b-skin-content-right, 100%) 100%,
        var(--b2b-skin-content-right, 100%) var(--b2b-skin-top-height, 250px),
        var(--b2b-skin-content-left, 0px) var(--b2b-skin-top-height, 250px),
        var(--b2b-skin-content-left, 0px) 100%,
        0 100%
    );
}

.b2b-page-skin__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background: transparent;
    z-index: 1;
}

.b2b-page-skin__plane-mask {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        var(--b2b-skin-content-right, 100%) 100%,
        var(--b2b-skin-content-right, 100%) var(--b2b-skin-top-height, 250px),
        var(--b2b-skin-content-left, 0px) var(--b2b-skin-top-height, 250px),
        var(--b2b-skin-content-left, 0px) 100%,
        0 100%
    );
}

.b2b-page-skin__panel--left {
    left: 0;
    width: var(--b2b-skin-content-left, 0px);
}

.b2b-page-skin__panel--right {
    left: var(--b2b-skin-content-right, 100%);
    right: 0;
}

.b2b-page-skin__panel--top {
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--b2b-skin-top-height, 250px);
    z-index: 2;
    background: transparent;
}

.b2b-page-skin__panel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.b2b-page-skin__click {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 5;
    pointer-events: auto;
}

.b2b-page-skin__text {
    position: absolute;
    z-index: 4;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.b2b-page-skin__text--left {
    top: calc(var(--b2b-skin-top-height, 250px) + 28px);
    left: 18px;
    font-size: 18px;
    line-height: 1.08;
}

.b2b-page-skin__text--left strong {
    display: block;
    font-size: 28px;
    letter-spacing: 0.08em;
}

.b2b-page-skin__text--top {
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    letter-spacing: 0.14em;
    text-align: center;
    white-space: nowrap;
}

.b2b-page-skin__text--top strong {
    font-size: 34px;
    letter-spacing: 0.1em;
}

.b2b-page-skin__text--right {
    top: calc(var(--b2b-skin-top-height, 250px) + 28px);
    right: 18px;
    font-size: 18px;
    line-height: 1.08;
    text-align: right;
}

.b2b-page-skin__text--right strong {
    display: block;
    font-size: 28px;
    letter-spacing: 0.08em;
}

.b2b-page-skin__asset {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: 0.9;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}

.b2b-page-skin__cloud--top-left {
    top: 18px;
    left: 28px;
    width: 220px;
    opacity: 0.65;
}

.b2b-page-skin__cloud--top-right {
    top: 20px;
    right: 28px;
    width: 240px;
    opacity: 0.55;
}

.b2b-page-skin__glider--left {
    bottom: 30px;
    left: 22px;
    width: 220px;
    opacity: 0.7;
}

.b2b-page-skin__glider--right {
    bottom: 18px;
    right: 18px;
    width: 240px;
    opacity: 0.72;
}

.b2b-page-skin__plane {
    top: 110px;
    left: -320px;
    width: 320px;
    opacity: 0.92;
    transform: rotate(-2deg);
    animation: b2b-page-skin-plane 16s linear infinite;
    will-change: transform;
}

.b2b-page-skin__plane--masked {
    opacity: 0.94;
}

@keyframes b2b-page-skin-plane {
    0% {
        transform: translate3d(-12vw, 52px, 0) rotate(-2deg);
    }
    6% {
        transform: translate3d(-2vw, 62px, 0) rotate(-1deg);
    }
    12% {
        transform: translate3d(10vw, 86px, 0) rotate(-1deg);
    }
    18% {
        transform: translate3d(18vw, 126px, 0) rotate(0deg);
    }
    22% {
        transform: translate3d(24vw, 108px, 0) rotate(0deg);
    }
    26% {
        transform: translate3d(30vw, 74px, 0) rotate(1deg);
    }
    30% {
        transform: translate3d(38vw, 42px, 0) rotate(1deg);
    }
    36% {
        transform: translate3d(48vw, 18px, 0) rotate(0deg);
    }
    42% {
        transform: translate3d(58vw, 38px, 0) rotate(0deg);
    }
    48% {
        transform: translate3d(68vw, 20px, 0) rotate(1deg);
    }
    54% {
        transform: translate3d(78vw, 46px, 0) rotate(0deg);
    }
    60% {
        transform: translate3d(88vw, 22px, 0) rotate(1deg);
    }
    66% {
        transform: translate3d(94vw, 40px, 0) rotate(1deg);
    }
    72% {
        transform: translate3d(100vw, 84px, 0) rotate(1deg);
    }
    78% {
        transform: translate3d(108vw, 124px, 0) rotate(1deg);
    }
    84% {
        transform: translate3d(114vw, 98px, 0) rotate(1deg);
    }
    90% {
        transform: translate3d(120vw, 122px, 0) rotate(1deg);
    }
    96% {
        transform: translate3d(126vw, 86px, 0) rotate(1deg);
    }
    100% {
        transform: translate3d(132vw, 60px, 0) rotate(1deg);
    }
}

@media (max-width: 1199px) {
    .home-page-skin-host {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    body.b2b-page-skin-active .home-ad-zone--top {
        min-height: var(--b2b-skin-top-height, 250px);
    }
}

.home-rail-zone {
    display: flex;
    align-items: stretch;
}

.home-rail-zone--left {
    flex: 0 0 var(--home-rail-width);
    padding-top: 20px;
    display: block;
    align-self: flex-start;
    position: relative;
}

.home-rail-zone--right {
    flex: 0 0 var(--home-rail-width);
    padding-top: 20px;
    display: block;
    align-self: flex-start;
    position: relative;
}

.home-rail-zone--content {
    flex: 0 1 1170px;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
}

.home-rail-zone--content .item-wrapper {
    flex: 1 1 auto;
    width: 100%;
}

@media (min-width: 1200px) {
    .home-rail-zone--left,
    .home-rail-zone--right {
        position: absolute;
        top: 0;
        width: var(--home-rail-width);
        padding-top: 0;
    }

    .home-rail-zone--left {
        left: calc(-1 * (var(--home-rail-width) + 24px));
    }

    .home-rail-zone--right {
        right: calc(-1 * (var(--home-rail-width) + 24px));
    }

    .post-rail-zone--left,
    .post-rail-zone--right {
        position: absolute;
        top: 0;
        width: var(--post-rail-width);
        padding-top: 0;
    }

    .post-rail-zone--left {
        left: calc(-1 * (var(--post-rail-width) + 24px));
    }

    .post-rail-zone--right {
        right: calc(-1 * (var(--post-rail-width) + 24px));
    }
}

.home-left-rail-anchor,
.home-right-rail-anchor {
    width: 100%;
    align-self: flex-start;
    position: relative;
    margin-top: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.home-billboard-slot {
    max-width: 970px;
    margin: 0 auto;
    padding: 0;
    display: none;
}

.home-billboard-slot__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-billboard-slot__container {
    width: 100%;
}

.home-billboard-slot.has-ad {
    display: block;
    margin-top: 10px;
    margin-bottom: 30px;
}

.home-billboard-test {
    max-width: 970px;
    margin: 0 auto;
    text-align: center;
}

.home-billboard-test img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.home-billboard-test .ad-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
}

.home-left-rail-slot,
.home-left-rail-slot__inner,
.home-left-rail-slot__container,
.home-right-rail-slot,
.home-right-rail-slot__inner,
.home-right-rail-slot__container {
    width: 100%;
}

.home-native-zone {
    display: none;
    margin: 40px 0 0;
    width: 100%;
    max-width: 100%;
}

.home-native-zone[data-native-loaded="true"],
.home-native-zone[data-native-demo="true"],
.home-native-zone.has-ads {
    display: block;
}

.home-native-zone .section.item {
    margin-bottom: 40px;
}

.home-native-zone .section-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.home-native-zone .native-demo-card .native-demo-image {
    width: 100%;
    height: 264px; /* match featured image box on desktop */
    border-radius: 12px;
}

@media (max-width: 767px) {
    .home-native-zone .native-demo-card .native-demo-image {
        height: 252px; /* match featured image box on mobile */
    }
}

.home-native-zone .native-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 4px;
}

.home-native-zone .native-cta {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #988f80;
}

.home-native-zone [data-home-native-left-slot],
.home-native-zone [data-home-native-center-slot],
.home-native-zone [data-home-native-right-slot],
.home-native-zone [data-home-native-fourth-slot] {
    display: none;
}

.home-native-zone [data-home-native-left-slot].has-native-ad,
.home-native-zone [data-home-native-center-slot].has-native-ad,
.home-native-zone [data-home-native-right-slot].has-native-ad,
.home-native-zone [data-home-native-fourth-slot].has-native-ad {
    display: inline-block;
}

.home-native-zone [data-home-native-left-slot] .native-ad-slot,
.home-native-zone [data-home-native-left-slot] .native-ad-slot__inner,
.home-native-zone [data-home-native-left-slot] .native-ad-slot__container,
.home-native-zone [data-home-native-center-slot] .native-ad-slot,
.home-native-zone [data-home-native-center-slot] .native-ad-slot__inner,
.home-native-zone [data-home-native-center-slot] .native-ad-slot__container,
.home-native-zone [data-home-native-right-slot] .native-ad-slot,
.home-native-zone [data-home-native-right-slot] .native-ad-slot__inner,
.home-native-zone [data-home-native-right-slot] .native-ad-slot__container,
.home-native-zone [data-home-native-fourth-slot] .native-ad-slot,
.home-native-zone [data-home-native-fourth-slot] .native-ad-slot__inner,
.home-native-zone [data-home-native-fourth-slot] .native-ad-slot__container {
    width: 100%;
}

.home-native-zone [data-home-native-left-slot] .native-placeholder,
.home-native-zone [data-home-native-center-slot] .native-placeholder,
.home-native-zone [data-home-native-right-slot] .native-placeholder,
.home-native-zone [data-home-native-fourth-slot] .native-placeholder {
    transition: opacity 0.3s ease;
}

.home-native-zone [data-home-native-left-slot].has-native-ad .native-placeholder,
.home-native-zone [data-home-native-center-slot].has-native-ad .native-placeholder,
.home-native-zone [data-home-native-right-slot].has-native-ad .native-placeholder,
.home-native-zone [data-home-native-fourth-slot].has-native-ad .native-placeholder {
    display: none;
}

@media (max-width: 1199px) {
    .item-rail-wrapper {
        display: block;
    }
    .post-rail-wrapper {
        display: block;
    }
    .home-rail-zone {
        width: 100%;
    }
    .post-rail-zone {
        width: 100%;
    }
    .home-rail-zone--left {
        padding-top: 0;
        margin-bottom: 32px;
    }
    .post-rail-zone--left {
        padding-top: 0;
        margin-bottom: 32px;
    }
    .home-rail-zone--right {
        display: none;
    }
    .post-rail-zone--right {
        display: none;
    }
    .home-left-rail-anchor,
    .home-right-rail-anchor {
        width: 100%;
        position: static;
        margin: 0;
        transform: none;
    }
    .post-left-rail-anchor,
    .post-right-rail-anchor {
        width: 100%;
        position: static;
        margin: 0;
        transform: none;
    }
    .home-ad-zone--top {
        margin-top: 80px;
    }
    body.home .section.posts.padding-sm-60 {
        padding-top: 140px;
    }
    .home-left-rail-slot,
    .home-left-rail-slot__inner,
    .home-left-rail-slot__container,
    .home-right-rail-slot,
    .home-right-rail-slot__inner,
    .home-right-rail-slot__container {
        width: 100%;
    }
}

@media (max-width: 1023px) {
    .post-rail-zone--left,
    .post-rail-zone--right {
        display: none;
    }
}

@media (max-width: 1024px) {
    .home-billboard-slot.has-ad {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (min-width: 1200px) {
    .section.posts .container {
        width: 100%;
        max-width: calc(1170px + 2 * 300px + 48px);
        padding-left: 0;
        padding-right: 0;
    }

    body.single .post-rail-container {
        width: 100%;
        max-width: calc(1170px + 2 * 300px + 48px);
    }
}