/* Photo-card rules live outside the hashed legacy inline block so updates do
   not invalidate the homepage CSP. */
.gallery-image {
  overflow: hidden;
}

.gallery-image > .gallery-photo-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The Daily's lead tracks use fractional grid columns, whose grid items keep
   an automatic min-width by default. A long lede can therefore force the
   middle track wider than the grid and make the 100%-wide hero look like it
   stretched the entire page. Let every track shrink to its assigned fraction;
   text will wrap and the background image will stay inside the article. */
.lead-grid > * {
  min-width: 0;
}

/* paintLede() wraps the background DIV in a link after its image probe passes.
   Make that generated wrapper a real containing block for the 100%-wide hero. */
.lead-story > a:not(.section-eyebrow) {
  display: block;
  min-width: 0;
}

/* @loc feature with no usable artwork. LoC blog images moved behind a
   Cloudflare challenge on 2026-08-04, which blocks the poller's server-side
   fetch, so poll_loc_blogs.py stores image_url=NULL instead of a URL it knows
   is dead. boot.js paintLoc() sets .no-image in that case; collapse the image
   column so the story runs full width. An empty framed box reads as a broken
   image, not as a text-only feature.

   Since 2026-08-07 paintLoc() also lands here when image_url is *present but
   unfetchable* — it preflights the URL with an Image() probe, because a CSS
   background that 400s fires no error event and so silently leaves the bare
   box this rule exists to prevent. */
.loc-feature.no-image {
  grid-template-columns: 1fr;
}

.loc-feature.no-image .loc-image {
  display: none;
}

/* Same treatment for the news hero. Its placeholder state reads "Image
   loading…" (see .lead-image.placeholder::after in index.html), which is only
   honest while the outcome is still unknown — once boot.js paintLede() knows
   the image will never arrive, drop the box and let the lede run as text. */
.lead-image.no-image {
  display: none;
}