/* Blog hero images that must not be cropped.

   The hero band is about 2.1:1 at desktop width and fills it with
   object-fit:cover, which is right for the 16:9 photographs most posts use.
   A source shaped very differently - a portrait photograph, or a graphic with
   text set into it - loses its subject that way: the band takes a strip out of
   the middle and discards the rest. Those heroes carry .hero-fit-whole and are
   shown complete on the band's own dark ground instead.

   Kept out of inner.css on purpose: that file is linked by hundreds of pages,
   and each would need its ?v= bumped. A new file only needs the pages that
   load it. */

.insight-hero-media.hero-fit-whole{background:#111}
.insight-hero-media.hero-fit-whole img{object-fit:contain}

/* The same two sources appear as 16:9 cards on /blog/, where the crop is
   just as unkind. They need different handling, because a card is a
   thumbnail and not the image itself:

   - the graphic is shown whole, on the dark ground its own artwork uses, so
     the headline set into it stays readable;
   - the portrait keeps filling its card, but anchored near the top, so the
     crop takes the floor rather than the subject's head. */
.editorial-card-image.card-fit-whole{object-fit:contain;background:#111}
.editorial-card-image.card-anchor-top{object-position:center 16%}

/* One hero graphic sits on its own dark navy gradient rather than on flat
   black. Repeating that gradient behind the card keeps the thumbnail
   reading as one surface instead of artwork floating on a black field. */
.editorial-card-image.card-fit-gradient{object-fit:contain;background:linear-gradient(#11233d,#081526)}