/* mod_serenade_hero
 *
 * Figma reference: hero image (1728 x 798 home / 1728 x 566 inner pages),
 * rounded bottom corners 100 px.
 *
 * The decorative gradient topbar (Figma rect 23:27) used to live here.
 * It belongs to the navigation, so it now sits on <header> in template.css;
 * the hero is purely the rounded-bottom image with optional headline beneath.
 * The legacy `__topbar` DOM element (still emitted when show_topbar=1) is
 * hidden, keeping the manifest param a harmless no-op until next rebuild.
 */

.mod-serenade-hero {
    position: relative;
    width: 100%;
    margin: 0;
}

.mod-serenade-hero__topbar {
    display: none;
}

.mod-serenade-hero__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-bottom-left-radius: var(--rad-hero);
    border-bottom-right-radius: var(--rad-hero);
}

.mod-serenade-hero--full .mod-serenade-hero__media {
    aspect-ratio: 1728 / 798;
}

.mod-serenade-hero--compact .mod-serenade-hero__media {
    aspect-ratio: 1728 / 566;
}

.mod-serenade-hero__img,
.mod-serenade-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Decorative hero video — strip the user-agent default controls UI in case
   the host browser shows them when JS is off, and disable picture-in-picture
   so the video does not pop out of the layout context. */
.mod-serenade-hero__video {
    pointer-events: none;
}

.mod-serenade-hero__title {
    margin: var(--s-9) 0 0 var(--layout-gutter);
    padding-right: var(--layout-gutter);
}

.mod-serenade-hero__title--wasser { color: var(--c-wasser); }
.mod-serenade-hero__title--wiese  { color: var(--c-wiese);  }
.mod-serenade-hero__title--schilf { color: var(--c-schilf); }
.mod-serenade-hero__title--white  { color: var(--c-white);  }
.mod-serenade-hero__title--petrol { color: var(--c-petrol); }

@media (max-width: 1280px) {
    .mod-serenade-hero__title {
        margin-left: 60px;
        padding-right: 60px;
    }
}

@media (max-width: 768px) {
    .mod-serenade-hero__title {
        margin-left: 24px;
        padding-right: 24px;
        margin-top: 32px;
    }

    .mod-serenade-hero__media {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
}

/* Phones (no Figma mobile frame): make the hero a tall, immersive panel
   that fills most of the screen instead of a thin banner. The fixed aspect
   ratio is dropped in favour of a viewport min-height so the panel keeps a
   strong presence even under the (small-screen) nav bar; dvh tracks the
   real viewport as mobile browser toolbars collapse, with vh as the
   fallback for browsers without dvh. The image/video is positioned to
   cover the panel, so full-bleed + object-fit:cover are preserved. */
@media (max-width: 640px) {
    .mod-serenade-hero__img,
    .mod-serenade-hero__video {
        position: absolute;
        inset: 0;
    }

    .mod-serenade-hero--full .mod-serenade-hero__media {
        aspect-ratio: auto;
        min-height: 70vh;
        min-height: 70dvh;
    }

    .mod-serenade-hero--compact .mod-serenade-hero__media {
        aspect-ratio: auto;
        min-height: 60vh;
        min-height: 60dvh;
    }
}