/* The Lakes Planner — shared image roles.
   Single source of truth for sitewide image display, injected on every content
   page via _partials/head.html (see build.py). Edit ONCE here, redeploy sitewide.

   Three roles. Every role reserves its space (aspect-ratio, or natural ratio with
   the width/height ATTRIBUTES that must always be present on the <img>) so no
   role introduces Cumulative Layout Shift.

   All selectors are namespaced lp- and match nothing in existing page markup:
   adding this stylesheet changes nothing until a page opts in with the classes. */

/* ============ 1. HERO ============
   Unchanged behaviour — identical to the current per-page hero pattern
   (absolute cover fill + Ken Burns). Provided here so future pages can use the
   shared class instead of redeclaring it; existing heroes keep their own CSS. */
.lp-img-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: lp-kenburns 24s ease-in-out infinite alternate;
}
@keyframes lp-kenburns { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ============ 2. ORIENTATION ============
   Recognise-this-spot photographs: path starts, gaps in walls, parking spots,
   junctions, signs. Their job is navigation, so they are NEVER cropped and
   NEVER paired — full content width at the photo's natural aspect ratio.
   The <img> must carry its true width/height attributes; with height:auto the
   browser derives the ratio from them and reserves the space (no CLS). */
figure.lp-orient { margin: 1.25rem 0; }
figure.lp-orient img,
img.lp-img-orient {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}
figure.lp-orient figcaption { font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; }

/* ============ 3. SCENERY PAIR ============
   Two equal columns on desktop, stacked on mobile. A row is landscape OR
   portrait — never mixed — and both images share the row's locked aspect
   ratio, so the pair bottom-aligns. aspect-ratio reserves the space (no CLS).
   Locked ratios follow the site's dominant families:
     landscape rows 3/2 · portrait rows 3/4. */
.lp-img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}
.lp-img-pair figure { margin: 0; }
.lp-img-pair img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.75rem;
}
.lp-img-pair--landscape img { aspect-ratio: 3 / 2; }
.lp-img-pair--portrait  img { aspect-ratio: 3 / 4; }
.lp-img-pair figcaption { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }
@media (max-width: 640px) {
  .lp-img-pair { grid-template-columns: 1fr; }
}