/* Horizontal cinematic club-zone gallery */
.zones {
  overflow: hidden;
  padding-right: 0;
}

.zones > h2 {
  padding-right: 6vw;
}

.zones .zone-grid {
  display: flex;
  gap: clamp(14px, 1.5vw, 24px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 6vw 42px 0;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  counter-reset: zone-card;
  overscroll-behavior-x: contain;
}

.zones .zone-grid::-webkit-scrollbar {display:none}
.zones .zone-grid.is-dragging {cursor:grabbing;scroll-snap-type:none}
.zones .zone-grid.is-dragging * {cursor:grabbing}
.zones .zone-grid img {-webkit-user-drag:none;pointer-events:none}

.zones .zone {
  --depth: 1;
  position: relative;
  flex: 0 0 min(68vw, 980px);
  height: min(68vh, 650px);
  min-height: 520px;
  overflow: hidden;
  color: #fff;
  scroll-snap-align: start;
  counter-increment: zone-card;
  isolation: isolate;
  transform: scale(calc(.94 + var(--depth) * .06));
  transform-origin: center;
  opacity: calc(.55 + var(--depth) * .45);
  transition: transform .18s linear, opacity .18s linear;
}

.zones .zone:nth-child(even) {flex-basis:min(52vw,760px)}

.zones .zone img {
  width: 112%;
  height: 100%;
  margin-left: -6%;
  object-fit: cover;
  transform: translateX(calc((1 - var(--depth)) * -3%)) scale(1.035);
  filter:saturate(calc(.72 + var(--depth) * .32));
  transition:transform .18s linear,filter .3s ease;
  will-change:transform;
}

.zones .zone::before {
  content:"0" counter(zone-card);
  position:absolute;
  z-index:3;
  top:30px;
  left:34px;
  font-family:Prata,serif;
  font-size:clamp(38px,4vw,64px);
  line-height:1;
  color:rgba(255,255,255,.92);
}

.zones .zone::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(12,14,13,.14),transparent 36%),linear-gradient(0deg,rgba(12,14,13,.88),transparent 68%);
  pointer-events:none;
}

.zones .zone > div {
  position:absolute;
  z-index:3;
  left:clamp(28px,4vw,62px);
  right:clamp(28px,4vw,62px);
  bottom:clamp(30px,5vw,62px);
  transform:translateY(calc((1 - var(--depth)) * 24px));
  transition:transform .18s linear;
}

.zones .zone h3 {font-size:clamp(34px,4vw,60px);margin-bottom:12px}
.zones .zone p {max-width:520px;font-size:14px;line-height:1.6;opacity:.8}
.zones .zone .arrow {right:28px;top:28px;transition:background .3s,color .3s,transform .3s}
.zones .zone:hover .arrow {background:#d7a364;color:#202522;border-color:#d7a364;transform:rotate(45deg)}

.zone-gallery-ui {
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 6vw 0 0;
}

.zone-gallery-hint {font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.zone-gallery-track {height:1px;background:rgba(32,37,34,.22);flex:1;overflow:hidden}
.zone-gallery-progress {display:block;width:100%;height:100%;background:#c88a48;transform:scaleX(0);transform-origin:left;transition:transform .12s linear}
.zone-gallery-count {font-family:Prata,serif;font-size:18px;white-space:nowrap}
.zone-gallery-count b {color:#c88a48;font-weight:400}

@media(max-width:900px) {
  .zones .zone {flex-basis:82vw;height:570px;min-height:0}
  .zones .zone:nth-child(even) {flex-basis:72vw}
}

@media(max-width:620px) {
  .zones .zone-grid {gap:10px;padding-bottom:28px}
  .zones .zone,.zones .zone:nth-child(even) {flex-basis:86vw;height:470px}
  .zones .zone::before {top:22px;left:22px;font-size:34px}
  .zones .zone > div {left:24px;right:24px;bottom:25px;transform:none}
  .zones .zone h3 {font-size:30px}
  .zone-gallery-ui {gap:14px}
  .zone-gallery-hint {display:none}
}

@media(prefers-reduced-motion:reduce) {
  .zones .zone,.zones .zone img,.zones .zone > div,.zone-gallery-progress {transition:none}
}