/* MDD hero video carousel — see Components/Widgets/Carousels_and_filters/__CarouselHeroVideosMDD.razor

   NOT a Blazor .razor.css: this project sets <StaticWebAssetsEnabled>false</StaticWebAssetsEnabled>,
   so the scoped bundle is never generated. Served as a plain stylesheet, same approach as
   /css/isolated/BottomPanel.css.

   TYPOGRAPHY
   The source brand site sets headings in "DIN 2014" and body in "Helvetica Neue" — both are
   commercially licensed faces, so neither font file is redistributed here.

   The heading stack instead leans on DIN-derived fonts that are already installed on the visitor's
   OS, so nothing has to be licensed, downloaded or hotlinked:

     DIN 2014       – used only if the licensed face is ever installed under /fonts
     Bahnschrift    – Windows 10/11. Microsoft's cut of DIN 1451, the same lineage as DIN 2014
     DIN Alternate  – macOS / iOS ship this, also DIN 1451-derived
     Roboto Condensed / Roboto – Android's closest grotesk
     Helvetica Neue / Helvetica / sans-serif – last resort

   Deliberately no Arial anywhere: its humanist shapes read nothing like DIN, and the generic
   sans-serif fallback lands on something better on every platform (San Francisco, Roboto, …).

   Note Bahnschrift is a Windows system font: it is not available on macOS/Android/Linux, which is
   exactly why the stack continues past it rather than relying on it alone. To pin the identical
   face everywhere you would need a licensed webfont — drop the woff2 into wwwroot/fonts and add an
   @font-face here, and it takes precedence automatically. */

/* Spacing goes on the OUTER wrapper, not on .mddhero. .mddhero sits inside the rounded,
   overflow:hidden wrapper — a margin there detaches the video from the wrapper's bottom edge, so
   the clipped bottom corners stop looking rounded. */
.mddhero-wrap {
    margin-bottom: 10px;
}

.mddhero {
    position: relative;
}

.mddhero-video {
    width: 100%;
    height: auto;
    max-height: 57vh;
    object-fit: cover;
    display: block;
}

/* Caption sits bottom-left over the clip, matching the source site's hero layout
   (content grid, align-content:flex-end, colour #222 on its light product footage). */
.mddhero-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: clamp(16px, 4vw, 56px);
    color: #222;
    pointer-events: none;
    /* Very light scrim: the clips are bright product footage, so dark text needs only a hint of
       lift to stay legible if a frame darkens. */
    background: linear-gradient(to top, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%);
}

.mddhero-title {
    font-family: "DIN 2014", "Bahnschrift", "DIN Alternate", "Roboto Condensed", Roboto, "Helvetica Neue", Helvetica, sans-serif;
    /* Bahnschrift is variable and renders light by default — state the weight explicitly. */
    font-weight: 700;
    font-stretch: 100%;
    font-size: clamp(24px, 3.4vw, 56px);
    line-height: 1.05;
    margin: 0;
    margin-top: 26px;
    max-width: 33rem; /* same measure the source site uses for the hero title */
}

.mddhero-subtitle {
    font-family: "Helvetica Neue", Helvetica, Roboto, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 1.3vw, 20px);
    line-height: 1.3;
    margin: 6px 0 0 0;
    max-width: 33rem;
}

/* The carousel arrows are dark-on-light here, unlike Bootstrap's default white icons. */
.mddhero .carousel-control-prev-icon,
.mddhero .carousel-control-next-icon {
    filter: invert(1) grayscale(1);
    opacity: 0.55;
}

.mddhero .carousel-indicators li {
    background-color: #222;
    opacity: 0.35;
}

    .mddhero .carousel-indicators li.active {
        opacity: 0.9;
    }

@media (max-width: 576px) {
    .mddhero-video {
        max-height: 52vh;
    }

    .mddhero-caption {
        background: linear-gradient(to top, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0) 70%);
    }
}