/* Responsive Back-to-School hero artwork.
   Dedicated 16:9 desktop and 3:4 mobile assets now fill the existing hero shell.
   The shared carousel controls stay untouched and above the artwork. */
body[data-page="home"] .home-hero.campaign-mode .campaign-artwork {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
    overflow: clip;
}

body[data-page="home"] .home-hero.campaign-mode .campaign-artwork::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(5, 12, 35, 0.58) 0, rgba(5, 12, 35, 0.24) 92px, transparent 180px),
        linear-gradient(to top, rgba(5, 12, 35, 0.78) 0, rgba(28, 54, 91, 0.36) 115px, transparent 250px);
}

body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-viewport,
body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-link,
body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: clip;
}

body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

body[data-page="home"] .home-hero.campaign-mode .campaign-scroll-hint,
body[data-page="home"] .home-hero.campaign-mode .campaign-viewer-tools,
body[data-page="home"] .campaign-dialog {
    display: none !important;
}

body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-viewport {
    /* Clip the artwork without making it a nested scroll container.
       Vertical gestures must reach the document, including over the link. */
    overflow: clip !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    scrollbar-width: none;
}

body[data-page="home"] .home-hero.campaign-mode .campaign-artwork,
body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-link,
body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-image {
    touch-action: pan-y;
}

body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-viewport::-webkit-scrollbar {
    display: none;
}

/* Keep controls visibly interactive because the carousel loops continuously. */
body[data-page="home"] .carousel-arrows-container .arrow-btn:disabled {
    opacity: 1;
    cursor: pointer;
}

@media (max-width: 900px) {
    body[data-page="home"] .home-hero.campaign-mode .campaign-artwork-image {
        object-position: center center;
    }

    body[data-page="home"] .home-hero.campaign-mode .campaign-artwork::after {
        background:
            linear-gradient(to bottom, rgba(5, 12, 35, 0.68) 0, rgba(5, 12, 35, 0.24) 86px, transparent 165px),
            linear-gradient(to top, rgba(5, 12, 35, 0.82) 0, rgba(28, 54, 91, 0.42) 130px, transparent 290px);
    }
}


/* Stable hero arrow geometry and hit areas on desktop and mobile. */
body[data-page="home"] .carousel-arrows-container {
    position: relative;
    z-index: 30;
    direction: ltr;
}

body[data-page="home"] .carousel-arrows-container .arrow-btn {
    width: 56px;
    height: 48px;
    flex: 0 0 56px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 1;
    transform: none !important;
    pointer-events: auto;
}

body[data-page="home"] .carousel-arrows-container .arrow-btn::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

body[data-page="home"] #prev-btn {
    border-radius: 28px 0 0 28px !important;
}

body[data-page="home"] #next-btn {
    border-radius: 0 28px 28px 0 !important;
}

body[data-page="home"] #prev-btn::before {
    transform: rotate(-135deg);
}

body[data-page="home"] #next-btn::before {
    transform: rotate(45deg);
}

@media (max-width: 900px) {
    body[data-page="home"] .carousel-arrows-container .arrow-btn {
        width: 54px;
        height: 46px;
        flex-basis: 54px;
    }

    body[data-page="home"] .carousel-arrows-container .arrow-btn::before {
        width: 14px;
        height: 14px;
    }
}