/* =========================================================
   Responsive images — The Sick Kitten picture house
   Load after page CSS (+ after mobile-responsive.css OK).

   Strategies:
   1. Never overflow viewport
   2. Reserve space (aspect-ratio / width+height) → less CLS
   3. Object-fit frames for film stills & meme plates
   4. Lazy by default; LCP hero opts out via .img-lcp
   5. Ready for srcset/sizes when multi-width assets exist
   ========================================================= */

/* --- Base: all content images --- */
img{
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}
/* SVG icons that should not be block-fluid */
img.img-inline,
img.icon{
  display: inline-block;
  max-width: none;
  height: 1em;
  width: auto;
}

/* --- Intrinsic ratio box (wrap any img) ---
   <div class="img-frame img-frame--film">
     <img ... width="1200" height="900" />
   </div>
*/
.img-frame{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--ink-2, #1b1712);
  border: 1px solid var(--soot, #4A4136);
  isolation: isolate;
}
.img-frame > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Prefer aspect-ratio when width/height attrs missing */
.img-frame--film{ aspect-ratio: 4 / 3; }
.img-frame--closeup{ aspect-ratio: 1 / 1; }
.img-frame--poster{ aspect-ratio: 3 / 4; }
.img-frame--wide{ aspect-ratio: 16 / 9; }
.img-frame--reel{ aspect-ratio: 1080 / 1340; } /* meme plate */
.img-frame--hero{ aspect-ratio: 1 / 1; max-width: min(420px, 100%); margin-inline: auto; }

/* Contain (letterbox) instead of crop */
.img-frame--contain > img,
img.img-contain{
  object-fit: contain;
  object-position: center;
  background: var(--ink, #14110F);
}

/* Soft film treatment (optional) */
.img-frame--sepia > img,
img.img-sepia{
  filter: sepia(.28) contrast(1.06);
}

/* --- Standalone fluid images with known ratio via attrs ---
   Always set width & height attributes in HTML for CLS.
*/
img.img-fluid{
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* --- LCP / lazy policy (pair with responsive-images.js) --- */
img.img-lcp{
  /* hero: do not lazy; elevate priority in HTML: fetchpriority="high" */
  content-visibility: visible;
}
img.img-lazy,
img[loading="lazy"]{
  content-visibility: auto;
  contain-intrinsic-size: 400px 300px; /* fallback guess; override per frame */
}
.img-frame--film img[loading="lazy"]{ contain-intrinsic-size: 800px 600px; }
.img-frame--reel img[loading="lazy"]{ contain-intrinsic-size: 360px 448px; }
.img-frame--closeup img[loading="lazy"]{ contain-intrinsic-size: 400px 400px; }

/* Fade-in when decoded (class set by JS) */
img.img-fade{
  opacity: 0;
  transition: opacity .35s ease;
}
img.img-fade.is-loaded{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  img.img-fade{ opacity: 1; transition: none; }
}

/* --- Skeleton / LQIP placeholder --- */
.img-frame.is-loading::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgba(237,227,208,.04) 0%,
      rgba(237,227,208,.09) 50%,
      rgba(237,227,208,.04) 100%);
  background-size: 200% 100%;
  animation: img-shimmer 1.2s linear infinite;
}
.img-frame.is-loading > img{ position: relative; z-index: 1; }
.img-frame.is-ready::before{ display: none; }
@keyframes img-shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce){
  .img-frame.is-loading::before{ animation: none; opacity: .5; }
}

/* --- Picture / art-direction helpers --- */
picture.img-picture{
  display: block;
  width: 100%;
  max-width: 100%;
}
picture.img-picture img{
  width: 100%;
  height: auto;
}

/* --- Meme reel / projection plate ---
   #nowImg and #projImg are deliberately absent: the Meme Reel letterboxes its
   plates with object-fit:contain because a meme cropped is a meme with its
   caption cut off, and an id selector here would have overridden that. These
   classes are for frames that genuinely want a cover crop. */
.meme-plate,
.projection-plate{
  width: min(100%, 420px);
  margin-inline: auto;
  aspect-ratio: 1080 / 1340;
  overflow: hidden;
  border: 1px solid var(--soot, #4A4136);
  background: var(--ink-2, #1b1712);
}
.meme-plate img,
.projection-plate img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* --- Iris / hero close-up on Feature --- */
.iris-wrap img,
.iris-shutter img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
  max-width: none; /* fill the circle */
}
.iris-wrap{
  max-width: min(320px, 72vw);
  margin-inline: auto;
}

/* --- Avatar / portrait --- */
.portrait-frame{
  aspect-ratio: 1;
  width: min(100%, 360px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--soot, #4A4136);
}
.portrait-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Library close-up still ---
   Scoped to the flipbook page it belongs to; a bare .still would have claimed
   any element that happens to carry that class. */
.page.closeup .still{
  width: min(70%, 240px);
  aspect-ratio: 1;
  overflow: hidden;
  margin-inline: auto;
}
.page.closeup .still img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
}

/* --- Workshop posters / hub cards --- */
.hub-poster,
.sk-hub-card .poster,
.game-card-art{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-2, #1b1712);
}
.hub-poster img,
.game-card-art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Grid of frames (archive / studio) --- */
.img-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
@media (min-width: 640px){
  .img-grid{ grid-template-columns: 1fr 1fr 1fr; gap: .85rem; }
}
@media (min-width: 960px){
  .img-grid{ grid-template-columns: repeat(4, 1fr); }
}
.img-grid .img-frame{ margin: 0; }

/* --- Print: avoid huge ink --- */
@media print{
  img{ max-width: 100%; break-inside: avoid; }
  .img-frame--sepia > img, img.img-sepia{ filter: none; }
}

/* --- Dark-data-saver: optional class on html from JS --- */
html.sk-save-data img.img-lazy:not(.is-loaded){
  /* keep reserved space; JS may swap to tinier src */
  background: var(--ink-2, #1b1712);
}