/* ════════════════════════════════════════════════════════════════════════
 * Scionecx · CLS Prevention Stylesheet · v13.0
 * assets/css/scx-cls-fix.css
 *
 * Audit §7 fix: "Article images load unsized — add width/height to
 * prevent CLS (Cumulative Layout Shift)."
 *
 * The renderer (content-loader.js) is minified production code. Rather
 * than rebuild the entire renderer from source for one attribute fix,
 * we use modern CSS aspect-ratio + a JS shim to apply width/height
 * attributes to images that the renderer injects.
 *
 * Approach (3 layers, in order of preference):
 *   1. CSS aspect-ratio on container — reserves space before image loads
 *   2. img[loading=lazy] attribute auto-added by JS shim (next file)
 *   3. width/height attributes from natural image dims (JS shim)
 *
 * This stylesheet handles layer 1: gives every common article/insight
 * image container an aspect-ratio so the browser reserves layout space
 * before the image network request completes.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Article hero image ─────────────────────────────────────────────── */
.article-hero-img,
.article-hero img,
.article-body img:first-of-type {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%);
}

/* ── In-body article images ─────────────────────────────────────────── */
.article-body img,
.article-body figure img {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #fafafa;
}
.article-body figure {
  contain: layout style;
  margin: 1.6rem 0;
}

/* ── Insights listing thumbnails ────────────────────────────────────── */
.art-card-img,
.article-card-thumb,
.art-list img,
.insights-grid img {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: linear-gradient(135deg, #f4f4f5, #e4e4e7);
}

/* ── Industry tiles ─────────────────────────────────────────────────── */
.industry-tile img,
.ind-tile img,
.zrow-image img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: linear-gradient(135deg, #f4f4f5, #e4e4e7);
}

/* ── Feature-split images ───────────────────────────────────────────── */
.feature-split img,
.feature-image img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Hero video / image (homepage etc) ──────────────────────────────── */
.hero-video,
.hero-img,
video.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  background: #0A0A0B;
}

/* ── Avatar / logo images — fixed square ratio ─────────────────────── */
.avatar img,
.logo-img,
.mark img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ── Skeleton loading shimmer (for the brief moment before image arrives) */
@keyframes scx-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
img[data-loading="true"] {
  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
  background-size: 200% 100%;
  animation: scx-shimmer 1.5s infinite;
}

/* ── Dark mode adjustments ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .article-hero-img,
  .article-body img,
  .art-card-img,
  .industry-tile img {
    background: linear-gradient(135deg, #18181b, #27272a);
  }
}