/* ========================================
   Photo system

   Replaces the CSS background-image approach used everywhere else on this
   site. Backgrounds cannot lazy-load, cannot offer the browser a choice of
   widths, and give it no dimensions - so every photo cost a full-size download
   and shifted the layout as it arrived.

   Every photo here is a real <picture> with srcset, explicit width/height and
   an art-directed crop baked in by tools/build-images.py. The container locks
   the aspect ratio, so the box is the right shape before a single byte of image
   has landed and nothing moves.
   ======================================== */

.ph {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
}

.ph picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The crop is decided in the pipeline, not here. This is only a safety net
     for the odd pixel of rounding. */
  object-position: center;
}

.ph--tile   { aspect-ratio: 4 / 5; }
.ph--split  { aspect-ratio: 3 / 2; }
.ph--detail { aspect-ratio: 1 / 1; }
.ph--hero   { aspect-ratio: 16 / 9; }

/* Caption sits over the foot of the image on a short scrim. Kept short - it
   names what you are looking at, it is not a sales line. */
.ph figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.2rem 0.9rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.55) 45%, transparent 100%);
  pointer-events: none;
}

/* ---- Photo panels that carry overlay children ----
   The editorial split panels and trip cards hold tags and floating icons over
   the photograph, so the image becomes a positioned <picture> behind them
   rather than a background on the panel itself. Same benefit as everywhere
   else: real srcset, lazy loading, and dimensions the browser can use.
   These boxes are 4:5 on desktop and 16:10 on mobile, so no single baked crop
   fits - object-fit does the last step. */
.ed-split__art--photo > picture,
.ed-trip__card--photo > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.ed-split__art--photo > picture img,
.ed-trip__card--photo > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep the existing overlays above the photo. */
.ed-split__art--photo > .ed-split__tag,
.ed-split__art--photo > .icon3d,
.ed-trip__card--photo > .ed-trip__content,
.ed-trip__card--photo > .icon3d {
  z-index: 2;
}

/* ---- The store tour grid ----
   Deliberately not a uniform grid of identical squares: a real tour has a lead
   image and supporting detail. Mobile is two columns, because one column of
   4:5 tiles makes the page endless and people stop scrolling. */
.tour {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* The lead photo spans the full width on every size. */
.tour__lead { grid-column: 1 / -1; }

/* The lead occupies both columns, so a tour with an odd number of tiles after
   it leaves the final tile alone beside a hole, and the group ends on a ragged
   edge. Let the odd one out span instead. Scoped to the two-column phone
   layout: from 700px the grid is six columns with its own spans. */
@media (max-width: 699px) {
  .tour > .ph:last-child:nth-child(even) { grid-column: 1 / -1; }
}

@media (min-width: 700px) {
  .tour {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
  }
  /* 6 columns lets tiles take 2 (a third) or 3 (a half) without the layout
     collapsing into sameness. */
  .tour > * { grid-column: span 2; }
  .tour__lead { grid-column: span 6; }
  .tour__wide { grid-column: span 3; }
}

/* A quiet caption under a group, for context the images cannot carry. */
.tour-note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .ph img {
    transition: transform 400ms ease;
  }
  .ph:hover img {
    transform: scale(1.02);
  }
}