/* 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: hidden;
}

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: hidden;
}

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 {
    overflow: hidden !important;
    overscroll-behavior: none;
    scrollbar-width: none;
}

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);
    }
}