/* ===== IN THE WILD — lifestyle band =========================================
   Added 2026-08-21. Sits directly beneath #product (Wake the Thunder).
   Uses the existing brand tokens from the main stylesheet — no new variables.
   ========================================================================= */

.wild {
  padding: clamp(52px, 7vw, 104px) 0 0;
}

.wild__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

.wild__tile {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--hair);
  background: var(--void-2);
  transition: transform .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}

.wild__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* rest state: pulled toward the site's dark, purple-leaning palette */
  filter: saturate(.82) contrast(1.03) brightness(.92);
  transform: scale(1.02);
  transition: filter .6s var(--ease), transform .9s var(--ease);
}

/* purple wash from the top, void gradient from the bottom for label legibility */
.wild__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(176, 38, 255, .16), transparent 40%),
    linear-gradient(0deg, rgba(6, 4, 10, .88) 2%, rgba(6, 4, 10, .28) 30%, transparent 55%);
  transition: opacity .6s var(--ease);
}

.wild__tile:hover,
.wild__tile:focus-within {
  transform: translateY(-6px);
  border-color: rgba(176, 38, 255, .5);
  box-shadow: 0 22px 60px -28px var(--acc-glow);
}

.wild__tile:hover img,
.wild__tile:focus-within img {
  filter: saturate(1.04) contrast(1.02) brightness(1);
  transform: scale(1);
}

.wild__tile:hover::before,
.wild__tile:focus-within::before { opacity: .68; }

.wild__label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
}

.wild__label i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  font-style: normal;
}

/* ---- tablet: 2 x 2 ---- */
@media (max-width: 1023px) {
  .wild__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- phone: swipeable strip, so the section stays short ---- */
@media (max-width: 639px) {
  .wild__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .wild__grid::-webkit-scrollbar { display: none; }
  .wild__tile { scroll-snap-align: center; }
}

/* ---- touch devices never hover: show the photography closer to full colour ---- */
@media (hover: none) {
  .wild__tile img { filter: saturate(.9) contrast(1.02) brightness(.9); transform: scale(1); }
  .wild__tile::before { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .wild__tile, .wild__tile img { transition: none; }
  .wild__tile:hover { transform: none; }
}