/*
 * Mindful Times editorial photography, 2026-11-10.
 * All story thumbnails fill their tiles edge-to-edge. Optional face detection
 * then adjusts the focal point; the fallback shows a slightly top-biased crop.
 * Loaded AFTER news.css so these rules override the old 16:9/16:8 crops.
 */
:root { --mt-image-mat: #e9e9e4; }

/* The leading story and editorial grids get taller, 4:3 photo slots. */
.mt-hero-card .thumb,
.mt-card .thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: var(--mt-focal-x, 50%) var(--mt-focal-y, 40%);
  background: var(--mt-image-mat);
}
.mt-hero-card .mt-ghost-link,
.mt-card .mt-ghost-link {
  background: var(--mt-image-mat);
}

/* Compact lists, trending links and related-story thumbnails. */
.mt-list-item .thumb {
  width: 150px;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: var(--mt-focal-x, 50%) var(--mt-focal-y, 40%);
  background: var(--mt-image-mat);
}
.mt-sticky a.d-flex > img {
  aspect-ratio: 5 / 4 !important;
  object-fit: cover !important;
  object-position: var(--mt-focal-x, 50%) var(--mt-focal-y, 40%);
  background: var(--mt-image-mat);
}
.mt-related-story img {
  width: 112px;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: var(--mt-focal-x, 50%) var(--mt-focal-y, 40%);
  background: var(--mt-image-mat);
}

/* A full article photo should NEVER be cropped (previously forced to 16:8). */
.mt-article .mt-article-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 50% 50%;
}
.mt-article .mt-article-image {
  background: var(--mt-image-mat);
}
.mt-article-body img {
  max-width: 100%;
  height: auto;
}

/*
 * Progressive enhancement: detection refines the focal point when available.
 * Missing detections, blocked external images and unsupported browsers still
 * fill the full card, centred slightly towards the top by default.
 */
.mt-hero-card .thumb.mt-face-fit,
.mt-card .thumb.mt-face-fit,
.mt-list-item .thumb.mt-face-fit,
.mt-sticky a.d-flex > img.mt-face-fit,
.mt-related-story img.mt-face-fit {
  object-fit: cover !important;
  object-position: var(--mt-focal-x, 50%) var(--mt-focal-y, 40%) !important;
}
@media (max-width: 575.98px) {
  .mt-list-item .thumb { width: 112px; }
}