/* === GALAA Hero Media — video or image, swap freely === */

.g-hero__media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 21/9;
    overflow: hidden;
    background: #0a0a0a;
}

/* ── Shared: both image and video fill the box ── */
.g-hero__media-wrap img,
.g-hero__media-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Overlay — subtle dark gradient for legibility ── */
.g-hero__media-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.05) 40%,
        rgba(0,0,0,.35) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ── Fallback image (shown when video is absent) ── */
.g-hero__media-wrap .hero-fallback-img {
    z-index: 0;
}

/* ── Video sits above fallback image ── */
.g-hero__media-wrap video {
    z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .g-hero__media-wrap {
        aspect-ratio: 4/3;
    }
}
@media (max-width: 480px) {
    .g-hero__media-wrap {
        aspect-ratio: 3/4;
    }
}