/* =============================================================
   KomodoMoonBooks — FLEX image layouts (preview variant)
   Loaded AFTER styles.css, only on *-flex.html pages.
   Principle: every <img> sizes from its WIDTH with height:auto,
   so its natural shape is kept — never a fixed height, never stretched.
   ============================================================= */

/* the fix: no image may take a height the browser didn't derive from its own ratio */
img{height:auto}

/* ---- home: spotlight shows the whole photo; portraits narrow instead of cropping ---- */
.spotlight .shot{height:auto;overflow:visible}
.spotlight .shot img{
  width:min(100%, calc(560px * var(--r,1.33)));
  height:auto;object-fit:initial;margin:0 auto;
}

/* ---- detail hero: whole photo, capped so portraits don't run off-screen ---- */
.d-hero-img img{width:min(100%, calc(78vh * var(--r,1.33)));margin-left:auto}

/* ---- full-bleeds (cover + closing image): whole photo, max 86vh tall ---- */
.fullbleed{padding:0 var(--pad)}
.fullbleed img{
  width:min(100%, calc(86vh * var(--r,1.5)));
  max-height:none;object-fit:initial;margin:0 auto;
}

/* ---- cover: wide landscape, cropped (original treatment, by choice) ---- */
.fullbleed.crop{padding:0}
.fullbleed.crop img{width:100%;max-height:78vh;object-fit:cover;margin:0}

/* ---- two-up: natural heights; a portrait is kept narrower ---- */
.two-up img{width:100%}
.two-up figure.portrait img{width:min(100%, 520px);margin:0 auto}

/* ---- justified rows (carousel slides + gallery) ----
   Each cell's flex-grow = its photo's aspect ratio and flex-basis is 0,
   so widths are proportional to ratios and, with height:auto, every photo
   in a row lands at the same height with nothing cropped. */
.jrow{display:flex;gap:14px;align-items:flex-start}
.jcell{flex-basis:0;flex-shrink:1;min-width:0;background:var(--tint)}
.jcell img{width:100%;height:auto;cursor:zoom-in}

.carousel-track{align-items:flex-start}
.slide{min-width:100%;display:block}

.mosaic{display:flex;flex-direction:column;gap:12px;padding:30px var(--pad) 40px;grid-template-columns:none;grid-auto-rows:auto}
.mosaic .jrow{gap:12px}
.mosaic img{transition:opacity .3s}
.mosaic .jcell:hover img{opacity:.85}

@media (max-width:1000px){
  .spotlight .shot img{width:min(100%, calc(460px * var(--r,1.33)))}
  .d-hero-img img{margin:0}
}
@media (max-width:600px){
  .jrow{gap:8px}
  .mosaic .jrow{flex-wrap:wrap}
  .mosaic .jcell{flex-basis:100%}
  .fullbleed{padding:0}
}

/* preview badge — only on *-flex.html pages, so it's always clear which layout you're viewing */
.flex-badge{
  position:fixed;left:16px;bottom:16px;z-index:900;background:var(--blue);color:var(--moon);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;
}
.flex-badge:hover{background:var(--moon);color:var(--blue);outline:1px solid var(--blue)}