/* ============================================================
   Lifestyle Collage Section
   1 large hero tile + N small tiles.
   Desktop: 4-col grid — hero spans 2×2, smalls fill 1×1 cells.
   Mobile: 2-col grid — hero spans full width, smalls 2-up.
   ============================================================ */

.lifestyle-collage {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.lifestyle-collage__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

/* Desktop only — when a video tile is present, use 5 columns:
   hero 2×2 | portrait video 1×2 | four smalls in a 2×2 block.
   The video column is ~15% wider than the image columns so the
   1×2 tile lands at ≈9:16 — a 1080x1920 video then fills the
   full tile height with no letterbox and no crop.
   NOTE: :has() outranks plain class selectors in specificity, so this
   MUST stay inside the desktop media query or it overrides mobile. */
@media screen and (min-width: 750px) {
  .lifestyle-collage__grid:has(.lifestyle-collage__item--video) {
    grid-template-columns: 1fr 1fr 1.15fr 1fr 1fr;
  }

  /* Two videos + detail image: two mirrored bands on a 4-column grid.
     Band 1 (rows 1-2): hero 2×2 | video1 1×2 | two smalls stacked (1 col)
     Band 2 (rows 3-4): video2 1×2 | two smalls stacked | detail image 2×2
     Explicitly placed: video2 (col 1) and detail (cols 3-4); the small
     images auto-flow into the remaining single cells. */
  /* Columns 1 and 3 host the videos (band 2 col 1, band 1 col 3) and are
     ~16% wider so a 1×2 video cell lands just past 9:16 — the 1080x1920
     videos then fill the full band height (object-fit: contain), with
     only hairline side margins. Hero (cols 1-2) and detail (cols 3-4)
     each span one wide + one normal column, keeping the bands symmetric. */
  /* Band 1 (rows 1-2): hero 2 cols | video1 col3 | smalls stacked col4
     Band 2 (rows 3-4): video2 col1 | smalls stacked col2 | detail col3 | video3 col4
     Columns 1, 3, 4 are ~16% wider (portrait tenants: videos + detail);
     column 2 stays 1fr and its square smalls define the row height. */
  .lifestyle-collage__grid:has(.lifestyle-collage__item--video ~ .lifestyle-collage__item--video) {
    grid-template-columns: 1.16fr 1fr 1.16fr 1.16fr;
    /* Definite track sizing: the grid's own aspect ratio + 4 equal rows
       makes every cell size explicit (rows ≈ narrow column width, so the
       small tiles stay square). This avoids the circular auto-row sizing
       that intrinsic media heights otherwise cause.
       aspect = (4.48w + 3 gaps) / (4w + 3 gaps) at w ≈ 252px. */
    aspect-ratio: 1165 / 1044;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  /* All tiles stretch to their (now definite) cells in this layout */
  .lifestyle-collage__grid:has(.lifestyle-collage__item--video ~ .lifestyle-collage__item--video) .lifestyle-collage__item {
    aspect-ratio: auto;
  }
  /* Small tiles: cover with bottom anchoring. Band 1's smalls sit in the
     widened video column (landscape cells) where square product photos
     get cropped — anchor the crop to the bottom so any clipping happens
     at the top of the image, keeping the product (bottom-weighted in
     these shots) fully visible. */
  .lifestyle-collage__grid:has(.lifestyle-collage__item--video ~ .lifestyle-collage__item--video)
    .lifestyle-collage__item:not(.lifestyle-collage__item--main):not(.lifestyle-collage__item--video):not(.lifestyle-collage__item--detail)
    .lifestyle-collage__img {
    object-fit: cover;
    object-position: center bottom;
  }
  .lifestyle-collage__item--video ~ .lifestyle-collage__item--video {
    grid-column: 1;
    grid-row: 3 / span 2;
  }
  /* Third video: last spot of band 2 (overrides the 2nd-video rule above) */
  .lifestyle-collage__item--video ~ .lifestyle-collage__item--video ~ .lifestyle-collage__item--video {
    grid-column: 4;
    grid-row: 3 / span 2;
  }
  .lifestyle-collage__item--detail {
    grid-column: 3;
    grid-row: 3 / span 2;
  }
  .lifestyle-collage__item--detail .lifestyle-collage__img {
    object-fit: contain; /* never crop the detail diagram */
  }
}

.lifestyle-collage__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
}

.lifestyle-collage__item--main {
  grid-column: span 2;
  grid-row: span 2;
  position: relative; /* anchor for the product-image overlay */
}

/* Per-product overlay pinned flush to the hero tile's lower-right corner.
   Percentage width scales with the tile at every viewport. */
.lifestyle-collage__product-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
}

/* Video tile: portrait 1 col × 2 rows (≈9:16) — video renders uncropped */
.lifestyle-collage__item--video {
  grid-column: span 1;
  grid-row: span 2;
  aspect-ratio: auto;
  background: #fff;
}

.lifestyle-collage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lifestyle-collage__video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop the video */
  display: block;
}

/* Mobile: hero full-width (row 1), 2 smalls (row 2), full-width video
   (row 3), 2 smalls (row 4). CSS order pulls the video between the
   small-image pairs regardless of DOM position. */
@media screen and (max-width: 749px) {
  .lifestyle-collage__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .lifestyle-collage__item--video {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 9 / 16; /* matches the 1080x1920 videos — no crop, no bars */
    order: 1;
  }

  /* The 3rd and 4th small images (DOM children 5 and 6:
     main, video1, s1, s2, [s3], [s4], video2, detail) drop below video1 */
  .lifestyle-collage__item:nth-child(5),
  .lifestyle-collage__item:nth-child(6) {
    order: 2;
  }

  /* Second video: after the last small-image pair */
  .lifestyle-collage__item--video ~ .lifestyle-collage__item--video {
    order: 3;
  }

  /* Detail image: full width, natural height, never cropped */
  .lifestyle-collage__item--detail {
    grid-column: span 2;
    aspect-ratio: auto;
    order: 4;
  }
  .lifestyle-collage__item--detail .lifestyle-collage__img {
    height: auto;
    object-fit: contain;
  }

  /* Third video: very end of the mobile collage, after the detail image */
  .lifestyle-collage__item--video ~ .lifestyle-collage__item--video ~ .lifestyle-collage__item--video {
    order: 5;
  }
}

/* ============================================================
   Simplified layout (temporary release mode)
   Hero image on top, then the 3 video tiles in one row.
   Both the image and the video row are constrained to the
   theme page width (--page-width) with the same horizontal
   padding as .page-width, so they line up exactly with the
   product-details section above. The 3 videos fill that width
   together (each = one third minus the gaps).
   Toggled by the section's "Simplified layout" setting; the
   small tiles + detail image are skipped in the Liquid.
   ============================================================ */

/* Neutralize the wide collage wrapper so the inner container alone
   controls width (matching .page-width exactly at every viewport). */
.lifestyle-collage:has(.lifestyle-collage__simple) {
  max-width: none;
  padding: 0;
}

.lifestyle-collage__simple {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}

@media screen and (min-width: 750px) {
  .lifestyle-collage__simple {
    padding: 0 5rem;
  }
}

.lifestyle-collage__simple .lifestyle-collage__item--main {
  flex: 0 0 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}

.lifestyle-collage__simple .lifestyle-collage__item--main .lifestyle-collage__img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 3 videos share the row and together span the full width (= image width) */
.lifestyle-collage__simple .lifestyle-collage__item--video {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}