/*
 * Homepage banner landscape-safe staging candidate, rebased 2026-08-12.
 * Loaded after master.css. The current images contain baked-in text, so this
 * candidate does not force them into a full-screen cover crop. Instead, the
 * banner box follows the source aspect ratio and the JavaScript draws the
 * entire image without stretching.
 */

/* Desktop production slides are currently 1920x800. This is only the
 * no-JavaScript/first-paint fallback; JavaScript replaces it with the natural
 * ratio of the actual first slide so future assets do not depend on this
 * hard-coded value. */
.index-banner .swiper-container {
    /* A definite inline size is mandatory. With width:auto, aspect-ratio plus
     * the JS inline height can feed back through ResizeObserver (height derives
     * width, then width derives height) and grow the box exponentially. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    aspect-ratio: 1920 / 800;
}

/* Current mobile slides are 1554x2695. At 360/390/430px this shows the whole
 * portrait asset and intentionally lets the next section enter the remaining
 * viewport instead of stretching/cropping the image to full-screen height. */
@media (max-width: 576px) {
    .index-banner .swiper-container {
        aspect-ratio: 1554 / 2695;
    }
}

/* A phone UA continues receiving the portrait group after rotation. Bound the
 * no-JavaScript/first-paint box to one short viewport; JavaScript then subtracts
 * the measured header height and uses contain to show the complete portrait
 * image with centered side letterboxing. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 576px) {
    .index-banner .swiper-container {
        height: 100svh;
        max-height: 100svh;
        aspect-ratio: auto;
    }
}

.index-banner #shows {
    width: 100%;
    height: 100%;
    max-width: none;
    /* master.css transitions every canvas property for two seconds. During an
     * orientation change that would animate the CSS box after the backing
     * store has already resized, briefly reintroducing distortion. */
    transition: none;
}
/* Keep the existing header controls on one row in short phone landscape. */
@media (orientation: landscape) and (max-height: 576px) {
    .header .h-right .lt {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
    }

    .header .h-right .lt > i {
        flex: 0 0 auto;
        margin-left: 10px;
        margin-right: 0;
        line-height: 90px;
        font-size: 22px;
    }

    .header .h-right .lang-en {
        flex: 0 0 auto;
        margin: 0 8px;
        line-height: 90px;
        font-size: 20px;
        white-space: nowrap;
    }
}