/* ============================================================================
   MCT CHEMICALS — WEBSITE 2.0
   FILE: image-slots.css  —  photo-ready image integration layer
   ----------------------------------------------------------------------------
   Converts every visual mount point into a CLS-safe <picture> slot that:
   - reserves its space via aspect-ratio (no layout shift when the image loads)
   - serves AVIF -> WebP -> SVG fallback (the SVG renders today; raster later)
   - shows a subtle skeleton while lazy images decode
   This file only ADDS rules. It does not modify the frozen framework.
   ========================================================================== */

/* base picture: block-level, fills its container */
.pic { display: block; position: relative; width: 100%; height: 100%; }
.pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* CLS-safe aspect boxes per context (the container already sizes most; these
   guarantee the ratio even before the image has intrinsic size applied) */
.product-card__img { aspect-ratio: 4 / 3; }
.article__img      { aspect-ratio: 16 / 9; }
.split__media      { aspect-ratio: 4 / 3; }
.industry          { aspect-ratio: 3 / 2; }
/* projects size themselves via the grid; keep min-height as the CLS guard */

/* ---------- lazy skeleton shimmer (shows until the img paints) ---------- */
.pic::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--bg-sunken,#0A1019) 30%, var(--bg-elevated,#111E2E) 50%, var(--bg-sunken,#0A1019) 70%);
  background-size: 200% 100%;
  animation: pic-shimmer 1.4s linear infinite;
  opacity: 0; transition: opacity .3s ease;
}
.pic:has(img:not([data-loaded]))::before { opacity: .6; }
.pic > img { position: relative; z-index: 1; }
@keyframes pic-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pic::before { animation: none; } }

/* ---------- 'photo pending' affordance on placeholder slots ---------- */
/* slots still showing the SVG fallback (data-ph="svg") get a tiny corner tag
   so reviewers can see at a glance which assets are awaiting the photo pipeline.
   Purely a build-time affordance; hidden in print and from AT. */
.pic[data-ph="svg"]::after {
  content: "photo pending"; position: absolute; right: 6px; bottom: 6px; z-index: 2;
  font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.55); background: rgba(0,0,0,.35);
  padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
body.hide-slot-tags .pic[data-ph="svg"]::after { display: none; }

/* ---------- HERO PHOTO BACKDROP ---------- */
/* sits behind the interactive SVG building; fills the stage; no CLS because the
   stage already has fixed dimensions. When a real render is present it shows
   through; the SVG can be dimmed via a body/theme flag later without code here. */
.hero-photo {
  position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the SVG building layer stays above the photo */
.hq-wrap > .hq { position: relative; z-index: 1; }
/* when a real hero photo is confirmed present, add data-has-photo to hero.
   The photo becomes the backdrop; the SVG building art fades out so the two
   buildings don't overlap. The interactive hotspot layer is a separate sibling
   (.hero__hotspots) and is intentionally left untouched. */
[data-hero][data-has-photo] .hq { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
[data-hero][data-has-photo] .hero-lighting { display: none; }

/* ---------- performance: decode hints already inline; contain paint ---------- */
.industry, .project, .product-card, .article, .split__media { contain: layout paint; }