/* Loaded after the main bundle; no asset rebuild is needed for this stylesheet. */
@media (max-width: 767px) {
    .hero-swiper {
        --hero-controls-height: calc(68px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        height: calc(100vh - 5rem);
        height: calc(100dvh - 5rem);
        min-height: 0;
        padding-bottom: var(--hero-controls-height);
    }

    /* Every slide shares the available first-screen height beneath the 80px header. */
    .hero-swiper .swiper-wrapper {
        height: 100%;
        align-items: stretch;
    }

    .hero-swiper .swiper-slide {
        display: flex;
        height: 100%;
    }

    /* Keep slide widths/offsets for Swiper, but avoid cross-fading overlapping copy. */
    .hero-swiper.swiper-initialized .swiper-slide:not(.swiper-slide-active) {
        visibility: hidden;
        pointer-events: none;
    }

    .hero-swiper .hero-slide [data-ha-item] {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .hero-swiper .hero-slide {
        height: 100%;
        min-height: 0;
        flex: 1;
    }

    .hero-slide--cover {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        background-color: var(--hero-bg, #f0f1ec);
    }

    .hero-slide--cover .hero-slide__cover-media {
        position: relative;
        inset: auto;
        flex: none;
        width: 100%;
        min-height: 0;
        height: 100%;
    }

    .hero-slide__cover-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .hero-slide--cover .hero-slide__cover-content {
        height: auto;
        flex: none;
        padding: 12px 16px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Keep controls reachable with enlarged text or a short landscape viewport. */
    .hero-slide--cover .hero-slide__cover-content,
    .hero-slide--split .hero-slide__content {
        max-height: calc(100vh - 5rem - var(--hero-controls-height) - 80px);
        max-height: calc(100dvh - 5rem - var(--hero-controls-height) - 80px);
        overflow-y: auto;
        min-height: 0;
    }

    /* Mobile copy sits on a light panel, independent of desktop overlay colors. */
    .hero-slide__cover-content,
    .hero-slide__content {
        background-color: var(--hero-bg, #f0f1ec);
        color: #17232f;
    }

    .hero-slide__cover-content h1,
    .hero-slide__cover-content h2,
    .hero-slide__copy h1,
    .hero-slide__copy h2 {
        color: #17232f !important;
        text-shadow: none;
        margin-bottom: 8px;
    }

    .hero-slide__cover-content p,
    .hero-slide__copy p {
        color: #475569 !important;
        margin-bottom: 12px;
        line-height: 1.7;
    }

    .hero-slide__cover-content .inline-flex,
    .hero-slide__badge {
        color: #334155 !important;
        background: #e5e9d5;
        border-color: #cbd3ae;
        margin-bottom: 8px;
    }

    .hero-swiper .btn-primary {
        color: #17232f !important;
        background-color: #bed433;
    }

    .hero-slide__cover-content h1,
    .hero-slide__cover-content h2,
    .hero-slide__copy h1,
    .hero-slide__copy h2 {
        font-size: clamp(1.25rem, 5.2vw, 1.75rem);
        line-height: 1.4;
    }

    .hero-slide--split {
        overflow: hidden;
    }

    .hero-slide--split .hero-slide__grid {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        height: 100%;
        min-height: 0;
    }

    .hero-slide--split .hero-slide__media {
        min-height: 0;
        height: 100%;
        padding: 0 16px;
    }

    .hero-slide--split .hero-slide__content-inner {
        padding: 12px 16px;
    }

    .hero-slide--split .hero-slide__media-frame {
        height: 100%;
        max-height: none;
    }

    .hero-slide--split .hero-slide__image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
    }

    .hero-slide__copy {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .hero-swiper .swiper-button-next,
    .hero-swiper .swiper-button-prev {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        margin-top: 0;
        width: 44px !important;
        height: 44px !important;
    }

    .hero-swiper .swiper-button-next {
        left: 16px !important;
        right: auto !important;
    }

    .hero-swiper .swiper-button-prev {
        right: 16px !important;
        left: auto !important;
    }

    .hero-swiper .swiper-pagination {
        top: auto;
        bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
        left: 50%;
        right: auto;
        transform: translate(-50%, 50%);
        max-width: calc(100% - 144px);
    }
}