/* Homepage banner: a single, predictable composition on phones. */
@media (max-width: 767.98px) {
    .home-hero-v2 .hero-display {
        padding: 10px;
        background: #f7f4fc;
    }

    .home-hero-v2 .hero-slider-area,
    .home-hero-v2 .hero-slider-area .carousel,
    .home-hero-v2 .hero-carousel-inner,
    .home-hero-v2 .hero-slider-area .carousel-item {
        height: auto !important;
        border-radius: 18px;
    }

    .home-hero-v2 .hero-card {
        display: block;
        min-height: 0;
        height: auto !important;
        overflow: hidden;
        border: 1px solid rgba(66, 31, 137, .12);
        border-radius: 18px;
        text-align: start;
        box-shadow: 0 12px 30px rgba(43, 17, 95, .14);
        isolation: isolate;
    }

    /* Image and copy share one visual surface instead of becoming two tall cards. */
    .home-hero-v2 .hero-card--with-image.hero-card--with-copy {
        min-height: clamp(340px, 94vw, 430px);
        height: clamp(340px, 94vw, 430px) !important;
        aspect-ratio: auto !important;
    }

    .home-hero-v2 .hero-card--with-image.hero-card--with-copy .hero-card__media {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 100% !important;
        min-height: 0;
    }

    .home-hero-v2 .hero-card--with-image.hero-card--with-copy .hero-card__media::after {
        background: linear-gradient(
            180deg,
            rgba(25, 8, 58, .05) 20%,
            rgba(25, 8, 58, .45) 57%,
            rgba(25, 8, 58, .94) 100%
        );
    }

    .home-hero-v2 .hero-card--with-image.hero-card--with-copy .hero-card__media img {
        width: 100%;
        height: 100% !important;
        min-height: 0;
        object-fit: cover;
        object-position: center;
        transform: none !important;
    }

    .home-hero-v2 .hero-card--with-copy .hero-card__content {
        position: relative;
        z-index: 2;
        display: flex;
        min-height: inherit;
        height: 100%;
        padding: 1.25rem 1.15rem 4.5rem;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        color: #fff;
        background: transparent;
    }

    .home-hero-v2 .hero-card--with-copy .hero-card__content h1,
    .home-hero-v2 .hero-card--with-copy .hero-card__content h2 {
        max-width: 18ch;
        margin: 0 0 .45rem;
        color: inherit;
        font-size: clamp(1.4rem, 6.3vw, 1.85rem);
        font-weight: 900;
        line-height: 1.28;
        text-wrap: balance;
        text-shadow: 0 2px 12px rgba(15, 5, 35, .35);
    }

    .home-hero-v2 .hero-card--with-copy .hero-card__content p {
        display: -webkit-box;
        max-width: 34ch;
        margin: 0 0 .85rem;
        overflow: hidden;
        color: rgba(255, 255, 255, .9);
        font-size: .82rem;
        line-height: 1.65;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-hero-v2 .hero-card__cta {
        min-height: 42px;
        padding: .65rem 1rem;
        border-radius: 11px;
        box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
        font-size: .78rem;
    }

    /* Artwork supplied as a complete banner keeps its original proportions. */
    .home-hero-v2 .hero-card--with-image.hero-card--artwork-only {
        min-height: 0;
        height: auto !important;
        aspect-ratio: 5 / 3 !important;
        background: #2b115f;
    }

    .home-hero-v2 .hero-card--with-image.hero-card--artwork-only .hero-card__media,
    .home-hero-v2 .hero-card--with-image.hero-card--artwork-only .hero-card__media img {
        width: 100%;
        height: 100% !important;
        min-height: 0;
    }

    .home-hero-v2 .hero-card--with-image.hero-card--artwork-only .hero-card__media {
        position: absolute;
        inset: 0;
    }

    .home-hero-v2 .hero-card--with-image.hero-card--artwork-only .hero-card__media::after {
        background: linear-gradient(180deg, transparent 68%, rgba(25, 8, 58, .35));
    }

    .home-hero-v2 .hero-card--with-image.hero-card--artwork-only .hero-card__media img {
        object-fit: cover;
        object-position: center;
        transform: none !important;
    }

    /* Text-only banners retain the same polished rhythm without empty media space. */
    .home-hero-v2 .hero-card--without-image {
        min-height: 300px;
        height: 300px !important;
        aspect-ratio: auto !important;
    }

    .home-hero-v2 .hero-card__controls {
        position: absolute;
        z-index: 5;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
        transform: none;
    }

    .home-hero-v2 .hero-card__controls .carousel-control-prev,
    .home-hero-v2 .hero-card__controls .carousel-control-next {
        position: absolute;
        top: 50%;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, .55);
        color: #fff;
        background: rgba(31, 11, 70, .62);
        box-shadow: 0 5px 16px rgba(13, 4, 31, .24);
        backdrop-filter: blur(8px);
        pointer-events: auto;
        transform: translateY(-50%);
    }

    .home-hero-v2 .hero-card__controls .carousel-control-prev {
        inset-inline-start: .65rem;
        inset-inline-end: auto;
    }

    .home-hero-v2 .hero-card__controls .carousel-control-next {
        inset-inline-start: auto;
        inset-inline-end: .65rem;
    }

    .home-hero-v2 .hero-card__dots {
        position: absolute;
        bottom: .7rem;
        left: 50%;
        min-height: 22px;
        padding: .35rem .5rem;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 999px;
        background: rgba(31, 11, 70, .56);
        backdrop-filter: blur(8px);
        pointer-events: auto;
        transform: translateX(-50%);
    }

    .home-hero-v2 .hero-card__dots i {
        width: 7px;
        height: 7px;
    }

    .home-hero-v2 .hero-card__dots i.is-active {
        width: 18px;
    }
}

@media (max-width: 389.98px) {
    .home-hero-v2 .hero-card--with-image.hero-card--with-copy {
        min-height: 330px;
        height: 330px !important;
    }

    .home-hero-v2 .hero-card--with-copy .hero-card__content {
        padding-inline: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-v2 .hero-card__media img {
        transition: none;
    }
}