/* ===== HERO COLLAGE — GRID (8 units), edge-bleed, row drift ===== */

.hero-collage {
  --gap: 24px;
  padding: clamp(16px, 3vw, 32px);
  overflow: hidden; /* show half tiles at edges, but clip overflow */
}

/* 8 unit grid */
.hero-collage__grid {
  --cols: 8;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  grid-auto-rows: 140px;                 /* row height; tweak 80–96px */
  position: relative;

  /* math for edge bleed */
  --unit: calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  --edge-bleed: calc((var(--unit) / 2) + (var(--gap) / 2));
  width: calc(100% + (var(--edge-bleed) * 2));
  transform: translateX(calc(var(--edge-bleed) * -1));
}

/* tiles */
.hero-tile {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,.05);

  /* stagger offset (set by [data-row]) + row drift (animated) */
  --baseX: 0px;
  --scrollX: 0px;
  transform: translate3d(calc(var(--baseX) + var(--scrollX)), 0, 0);
}

/* images = 1 unit */
.hero-tile--image { grid-column: span 1; }
.hero-tile--image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* words = 2 units; pad so text never clips */
.hero-tile--word {
  grid-column: span 2;
  display: grid; place-items: center;
  background: #fff;
  padding: clamp(10px, 1.6vw, 22px);
  white-space: nowrap; /* keeps “We” compact */
}
/* Inner wrapper carries the reveal transforms/opacity */
.hero-tile__inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

/* Move word styling to the inner so padding/background don’t affect the tile transform */
.hero-tile__inner--word {
  display: grid;
  place-items: center;
  background: #fff;
  padding: clamp(10px, 1.6vw, 22px);
  white-space: nowrap;
}
.hero-word {
  margin: 0;
  line-height: .95;
  font-weight: 800;
	font-family:'gotham', sans-serif;
  font-size: clamp(1.9rem, 5.6vw, 4.2rem);
  letter-spacing: -0.02em;
  text-align: center;
}

/* ---------- Row staggering (via data-row set by JS) ---------- */
.hero-tile[data-row="2"],
.hero-tile[data-row="4"],
.hero-tile[data-row="6"],
.hero-tile[data-row="8"] { --baseX: var(--gap); }                 /* push right */
.hero-tile[data-row="3"],
.hero-tile[data-row="5"],
.hero-tile[data-row="7"],
.hero-tile[data-row="9"] { --baseX: calc(var(--gap) * -1); }      /* pull left */

/* ---------- Alternating row drift (entire row moves one way) ---------- */
@property --scrollX { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@keyframes rowRight { from { --scrollX: 0px; } to { --scrollX: 56px; } }
@keyframes rowLeft  { from { --scrollX: 0px; } to { --scrollX: -56px; } }

.hero-tile[data-row="1"] { animation: rowRight 18s linear infinite alternate; }
.hero-tile[data-row="2"] { animation: rowLeft  18s linear infinite alternate; }
.hero-tile[data-row="3"] { animation: rowRight 18s linear infinite alternate; }
.hero-tile[data-row="4"] { animation: rowLeft  18s linear infinite alternate; }
.hero-tile[data-row="5"] { animation: rowRight 18s linear infinite alternate; }
.hero-tile[data-row="6"] { animation: rowLeft  18s linear infinite alternate; }
.hero-tile[data-row="7"] { animation: rowRight 18s linear infinite alternate; }
.hero-tile[data-row="8"] { animation: rowLeft  18s linear infinite alternate; }
/* (rows beyond 8 will naturally repeat if JS keeps counting) */

/* NO per-tile desync — keeps a row moving together */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-tile { animation: none !important; transform: none !important; }
}

/* Mobile: simple 2-up; cancel bleed/drift */
@media (max-width: 640px) {
  .hero-collage__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 106px;
    gap: 16px;
    width: 100%; transform: none;
  }
  .hero-tile { --baseX:0; --scrollX:0; transform:none !important; animation:none !important; }
  .hero-tile--word { grid-column: span 2; white-space: normal; }
  .hero-word { font-size: clamp(1.8rem, 10vw, 2.6rem); }
}