/* ============================================================
   KITCHENS WE'VE SHIPPED — full-screen panel + bento grid
   (6 unique tile sizes) + hi-res hover-grow.
   Hover transitions are driven by cc-tile-zoom.js (CSS-only
   transitions get clobbered by competing !important rules).
   ============================================================ */

/* The wrapping section becomes a full-viewport panel — content centered */
.gallery-strip {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 4vh !important;
  padding-bottom: 4vh !important;
}
.gallery-strip-label {
  align-self: center;
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: 0.18em;
  margin-bottom: clamp(20px, 3vh, 40px);
}
/* Neutralise the heavy left/right padding when the floating grid is in use */
.gallery-strip:has(.grid-floating) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* ----- BENTO GRID — 6 tiles, each a unique size -----
   12-column grid for granular control. Tile sizes range
   from "hero" (largest) down to "small". */
.gallery-strip-grid.grid-bento.grid-floating {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-auto-rows: minmax(80px, 1fr) !important;
  grid-auto-flow: dense;
  gap: clamp(10px, 1.4vw, 22px) !important;
  width: 100% !important;
  max-width: min(1700px, 94vw) !important;
  margin: 0 auto !important;
  padding: 2vh 3vw !important;
  box-sizing: border-box;
  perspective: 1400px;
}

/* 4-tile bento layout — 12×7 grid, fits cleanly with no gaps.
   Each tile a unique size and shape. */
.grid-bento.tiles-4 .size-1 { grid-column: span 7; grid-row: span 5; }   /* HERO — biggest */
.grid-bento.tiles-4 .size-2 { grid-column: span 5; grid-row: span 3; }   /* xl */
.grid-bento.tiles-4 .size-3 { grid-column: span 5; grid-row: span 2; }   /* lg short */
.grid-bento.tiles-4 .size-4 { grid-column: span 12; grid-row: span 2; }  /* wide bottom band */

/* ----- COMMON TILE STYLING ----- */
/* IMPORTANT: do NOT set `transform` here. cc-tile-zoom.js applies the
   inline transform during hover; if we set a base transform with
   !important here we end up fighting our own inline. The base "rest"
   state is implicit (no transform) and JS sets explicit transform on
   hover-in and reverts on hover-out. */
.gallery-strip-grid.grid-floating .tile {
  position: relative;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  cursor: zoom-in !important;
  border-radius: 6px;
  overflow: hidden !important;
  z-index: 1;
  transform-origin: center center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  transition: box-shadow 1200ms cubic-bezier(0.05, 0.95, 0.18, 1);
  will-change: transform;
}
/* Neutralise the parallax translateY on these tiles — we drive the
   transform entirely via JS for hover, no parallax wobble. */
.gallery-strip-grid.grid-floating .tile { --parallax-y: 0px !important; }

/* Hi-res image stacked on top of the thumb bg */
.gallery-strip-grid.grid-floating .tile .tile-hi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2400ms ease;
}
.gallery-strip-grid.grid-floating .tile.is-zooming .tile-hi {
  opacity: 1;
}

.gallery-strip-grid.grid-floating .tile .tile-caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  color: #f5efd5;
  font-size: clamp(10px, 0.82vw, 13px);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 2200ms ease, transform 2200ms ease;
  pointer-events: none;
}
.gallery-strip-grid.grid-floating .tile.is-zooming .tile-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Hover state styling — visual cues only; the actual transform
   animation is applied via inline style by cc-tile-zoom.js so we
   can guarantee transition timing wins over competing rules. */
.gallery-strip-grid.grid-floating .tile.is-zooming {
  z-index: 50 !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.32);
}

/* Remove any old cursor / hover scale rules that other stylesheets
   might assert — we drive them entirely via JS now. */
.gallery-strip-grid.grid-floating .tile:hover { cursor: zoom-in !important; }

/* Suppress any detail-circle UI that might leak in */
.gallery-strip-grid.grid-floating .tile .cc-dc-wrap,
.gallery-strip-grid.grid-floating .tile .cc-detail-circle { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .gallery-strip-grid.grid-floating .tile,
  .gallery-strip-grid.grid-floating .tile .tile-hi,
  .gallery-strip-grid.grid-floating .tile .tile-caption {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  /* Stack the bento on small screens — keep size-1 prominent */
  .gallery-strip-grid.grid-bento.grid-floating {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .grid-bento.tiles-4 .size-1 { grid-column: span 6; grid-row: span 3; }
  .grid-bento.tiles-4 .size-2 { grid-column: span 3; grid-row: span 2; }
  .grid-bento.tiles-4 .size-3 { grid-column: span 3; grid-row: span 2; }
  .grid-bento.tiles-4 .size-4 { grid-column: span 6; grid-row: span 2; }
}

/* ===========================================================
   PER-STYLE TREATMENTS — REMOVED.
   The mode picker (atelier / editorial / cinematic) NOW SWAPS
   the actual photos via cc-tile-zoom.js (data-{mode}-bg/full
   attributes on each tile). No CSS filter tinting — we no longer
   apply a sepia/contrast/dark-gradient filter on top of the
   photos because each mode has its own real photographs.

   The only thing we keep is a subtle section-level background
   tint so the page tone shifts to match each mode. The PHOTOS
   themselves are not filtered. They're the real content swap.
   =========================================================== */

html[data-hero-style="atelier"] .gallery-strip {
  background: radial-gradient(ellipse at center top, #f4ead3 0%, #ede4cc 70%, #e3d8ba 100%);
}
html[data-hero-style="editorial"] .gallery-strip {
  background: linear-gradient(180deg, #fafaf6 0%, #f1ecdc 100%);
}
html[data-hero-style="cinematic"] .gallery-strip {
  background: linear-gradient(180deg, #0e0c0a 0%, #1a1610 60%, #211b13 100%);
}
html[data-hero-style="cinematic"] .gallery-strip-label {
  color: #d6b985;
}
html[data-hero-style="cinematic"] .gallery-strip-grid.grid-floating .tile {
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(214,185,133,0.06);
}

.gallery-strip {
  transition: background 1400ms ease;
}
.grid-floating .tile {
  transition: box-shadow 1200ms cubic-bezier(0.05, 0.95, 0.18, 1);
}