/* Mouldshop News article banner - M4 / TASK-0077.
   ============================================================================================
   The full-bleed panoramic image at the top of a news article, with the article's own title,
   subtitle and date over it. Rendered by MouldshopNewsBanner.cshtml, which Swift-v2_Page.cshtml
   draws for any Mouldshop_NewsArticle page. Nobody places it.

   FULL BLEED NEEDS NO ESCAPE HERE, AND THE FIRST VERSION OF THIS FILE GOT IT WRONG.
   <main id="content"> is ALREADY the full viewport width, and vendor's own grid rows sit at
   left 0 across it - measured: viewport 1425, main 1425 @ left 0, vendor row 1425 @ left 0.
   So the banner is full bleed by simply being a block child of <main>, exactly like every
   vendor row beside it.

   The first version pinned it with `margin-inline: calc(50% - 50vw + ...)`. That is the
   100vw family of tricks, and 100vw INCLUDES the scrollbar: the banner came out 1440 wide
   at left -7 against a 1425 viewport - 7.5px of overhang per side. The comment that used to
   sit here warned about precisely that trap and the code below it then fell into a variant
   of it. Caught by news-banner.mjs, which compares the banner's width against the VIEWPORT
   rather than trusting that it looks right.

   THE RULE: do not reach for a viewport unit to escape a container until you have measured
   that the container actually constrains you. Here it never did.

   RATIO IS FIXED AT 1488/415 (DEC-0041). Not a default awaiting a field - the format switch
   was removed deliberately, and a different ratio means a different component.

   THE OVERLAY IS NOT SHARED WITH THE SLIDER, ON PURPOSE. mouldshop-slide-overlay.css styles
   ms-overlay__* for a 1:1 card. This is a 3.58:1 banner and needs its own type scale, padding
   and gradient. The markup uses ms-news-banner__* for exactly that reason - see the note in
   MouldshopNewsBanner.cshtml.

   NO COLOUR TOKENS ARE INVENTED HERE. The text sits on artwork, so it is white with a scrim
   beneath it rather than a scheme foreground - the same decision mouldshop-slide-overlay.css
   makes, for the same reason: the scheme cannot know what the photograph looks like. */

.ms-news-banner {
    position: relative;
    display: block;

    /* No negative margin and no viewport unit - see the note above. A block child of
       <main id="content"> is already edge to edge. */
    width: 100%;

    margin-inline: 0;
    margin-block-start: 0;
    margin-block-end: clamp(1.5rem, 4vw, 3rem);

    overflow: hidden;
    isolation: isolate;
}

.ms-news-banner__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1488 / 415;
    object-fit: cover;

    /* The image is decorative when text sits over it; it still must not be selectable or
       draggable out of the banner on a long press. */
    -webkit-user-drag: none;
    user-select: none;
}

/* ── The text layer ──────────────────────────────────────────────────────────────────────── */

.ms-news-banner__overlay {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;

    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    padding: clamp(1rem, 4vw, 3rem);
    padding-block-start: clamp(3rem, 12vw, 8rem);

    /* The scrim. Bottom-anchored so the headline stays legible over a light photograph
       without flattening the whole image the way a full-surface tint would. */
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.45) 45%,
                rgba(0, 0, 0, 0) 100%);

    color: #fff;
    pointer-events: none;
}

.ms-news-banner__title {
    margin: 0;
    font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
    line-height: 1.12;
    font-weight: 700;
    text-wrap: balance;
}

.ms-news-banner__subtitle {
    margin: 0;
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
    line-height: 1.4;
    max-width: 62ch;
    opacity: 0.92;
}

.ms-news-banner__date {
    margin: 0;
    margin-block-start: 0.25rem;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    letter-spacing: 0.02em;
    opacity: 0.8;
}

/* ── Small screens ───────────────────────────────────────────────────────────────────────
   Mobile-first is the project rule, so this is the correction rather than the base: at
   narrow widths a 3.58:1 crop leaves a strip too shallow to hold three lines of text, so
   the banner is allowed to grow taller and the scrim covers proportionally more of it. */

/* MS-SWITCH-BANNER: the banner image switch, 767.98 / 768 (DEC-0094). TASK-0152b moved this rule here from the retired phone step. */
@media (max-width: 767.98px) {
    .ms-news-banner__img {
        aspect-ratio: 16 / 10;
    }

    .ms-news-banner__overlay {
        padding-block-start: clamp(2rem, 20vw, 5rem);
        gap: 0.25rem;
    }
}

/* Reduced motion and forced colours: nothing animates here, but the scrim must not be
   dropped in forced-colours mode or white text lands on an unknown background. */
@media (forced-colors: active) {
    .ms-news-banner__overlay {
        background: Canvas;
        color: CanvasText;
        forced-color-adjust: none;
    }
}