/* ============================================================
   NTM Article — Feature image

   The article photo overlaps the bottom of the dark hero and
   breaks into the cream below. The hero section carries the
   bottom padding that produces the "dark tail"; this section is
   transparent, pulled upward via a negative `margin-top`, and
   stacked above the hero. A thin white border isolates the
   photo against the dark band.

   The image always keeps its own shape: no frame crops it. The
   template adds a shape modifier when the stored variants give
   the image size; the `sizes` values in the template mirror the
   widths below.
   ============================================================ */

.ntm-article-feature {
    position: relative;
    z-index: 2;
    padding: 0 clamp(24px, 5vw, 64px);
    margin-top: clamp(-215px, -14vw, -50px);
    background: transparent;
}

.ntm-article-feature__figure {
    margin: 0 auto;
    max-width: var(--ntm-container-max, 1392px);
}

/* Unknown size (no stored variants): natural size, height capped
   so a tall image still fits the screen. */
.ntm-article-feature__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 85vh;
    margin: 0 auto;
    border: 3px solid #ffffff;
}

.ntm-article-feature__image--landscape {
    width: 100%;
    max-height: none;
}

/* Portrait and square: the headline column of the hero (920px
   minus its 64px gutters), at full height, so text inside an
   infographic stays readable. */
.ntm-article-feature__image--portrait {
    width: 100%;
    max-width: 792px;
    max-height: none;
}