/* ═══════════════════════════════════════════════════════════════════════════
   ZL WEEKEND — one section, two roles.

   EDITORIAL LEAD  : states the proposition. Part of the section shell.
   EXPERIENCE RAIL : bookable experiences only. The only carousel here.

   The lead used to be a fourth ~322px panel inside the rail, so it scrolled,
   paginated and sized exactly like a product. That told the customer it was a
   product. It is not: it has no price, no availability and nothing to book, so
   it now lives outside the track entirely and the arrows and dots address the
   three real experiences and nothing else.

   NO INVENTED ARTWORK. The project holds no approved ZL decorative asset —
   only colour, radius, spacing and shadow tokens — so this composition is
   typographic: hierarchy, negative space and one thin gold rule. A drawing
   invented for this component would be a new brand language, not ZL's.

   Gold is exactly one token: var(--zl-gold) #E6B563.
   ═══════════════════════════════════════════════════════════════════════════ */

.zws-sec {
  --zws-deep:   #0B2A34;
  --zws-deep-2: #123F4B;
  --zws-teal:   #14707E;
  --zws-teal-2: #0E5A66;
  --zws-gold:   var(--zl-gold, #E6B563);
  --zws-ink:    #ffffff;
  --zws-dim:    rgba(255, 255, 255, .66);
  --zws-hair:   rgba(255, 255, 255, .12);
  --zws-card:   #10333E;
  display: block;
  padding: 54px 0 60px;
}
.zws-sec[hidden] { display: none; }

.zws-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.zws-panel {
  position: relative;
  border-radius: 30px;
  padding: 40px 34px 30px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(20, 112, 126, .34) 0%, rgba(20, 112, 126, 0) 58%),
    linear-gradient(160deg, var(--zws-deep-2) 0%, var(--zws-deep) 62%);
  box-shadow: 0 26px 60px rgba(11, 42, 52, .28), 0 2px 0 rgba(255, 255, 255, .04) inset;
  overflow: hidden;
}

/* ── LAYOUT — deliberately asymmetric on desktop ──────────────────────────
   The lead takes a fixed, narrow column; the carousel takes whatever is left.
   That remainder is what makes ~2.6 cards visible: no forced overflow, no
   negative margins — the geometry simply does not divide evenly by three, and
   the half-card at the edge is the honest signal that the rail moves. */
.zws-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* ── EDITORIAL LEAD ─────────────────────────────────────────────────────── */
.zws-lead {
  padding-top: 4px;
  padding-inline-end: 6px;
}
/* the one gold accent: a short rule, not a badge and not a pill */
.zws-kicker {
  position: relative;
  margin: 0 0 18px;
  padding-top: 16px;
  color: var(--zws-gold);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
}
.zws-kicker::before {
  content: '';
  position: absolute; top: 0; inset-inline-start: 0;
  width: 40px; height: 2px;
  background: var(--zws-gold);
  border-radius: 2px;
}
.zws-title {
  margin: 0 0 14px;
  color: var(--zws-ink);
  font-size: clamp(1.95rem, 2.7vw, 2.55rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.zws-sub {
  margin: 0 0 26px;
  color: var(--zws-dim);
  font-size: .95rem;
  line-height: 1.85;
  max-width: 30ch;
}
/* Text link, not a product button: the lead must not carry card chrome. */
.zws-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 0 4px;
  border: 0; border-bottom: 1px solid rgba(230, 181, 99, .42);
  background: none;
  color: var(--zws-gold);
  font-family: inherit; font-size: .92rem; font-weight: 800;
  cursor: pointer;
  transition: gap .22s ease, border-color .22s ease;
}
.zws-cta:hover { gap: 14px; border-bottom-color: var(--zws-gold); }
.zws-cta svg { width: 15px; height: 15px; flex: none; }

/* ── CAROUSEL — experiences only ─────────────────────────────────────────── */
.zws-carousel { position: relative; min-width: 0; }

.zws-rail {
  display: flex;
  gap: 18px;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.zws-rail::-webkit-scrollbar { display: none; }
.zws-rail:focus-visible { outline: 2px solid var(--zws-gold); outline-offset: 4px; border-radius: 22px; }
.zws-stage { display: flex; gap: 18px; align-items: stretch; }

.zws-nav {
  position: absolute; top: 42%; transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(11, 42, 52, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.zws-nav:hover { background: rgba(11, 42, 52, .94); border-color: var(--zws-gold); transform: translateY(-50%) scale(1.06); }
.zws-nav[hidden] { display: none; }
.zws-nav--prev { inset-inline-start: -6px; }
.zws-nav--next { inset-inline-end: -6px; }
.zws-nav::before {
  content: ''; width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--zws-chev) center / contain no-repeat;
          mask: var(--zws-chev) center / contain no-repeat;
}
.zws-sec {
  --zws-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.zws-nav--next::before { transform: scaleX(-1); }
[dir="rtl"] .zws-nav--prev::before { transform: scaleX(-1); }
[dir="rtl"] .zws-nav--next::before { transform: none; }

/* ── EXPERIENCE CARD ─────────────────────────────────────────────────────── */
.zwx {
  flex: 0 0 330px; width: 330px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--zws-card);
  border: 1px solid var(--zws-hair);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.zwx:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); }

.zwx-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0d2b34; }
.zwx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zwx-badge {
  position: absolute; top: 12px; inset-inline-start: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(11, 42, 52, .86);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .74rem; font-weight: 700;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

.zwx-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 0; flex: 1 1 auto; }
.zwx-name {
  margin: 0;
  color: var(--zws-ink);
  font-size: 1.02rem; font-weight: 800; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zwx-region { display: inline-flex; align-items: center; gap: 6px; color: var(--zws-dim); font-size: .84rem; font-weight: 600; }
.zwx-region svg { width: 14px; height: 14px; flex: none; color: var(--zws-gold); }

.zwx-rule { height: 1px; background: var(--zws-hair); margin: 3px 0; }
.zwx-meta { display: flex; gap: 18px; }
.zwx-fact { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.zwx-fact svg { width: 15px; height: 15px; flex: none; color: var(--zws-gold); margin-top: 2px; }
.zwx-fact-tx { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.zwx-fact-k { color: var(--zws-dim); font-size: .72rem; font-weight: 600; }
.zwx-fact-v { color: var(--zws-ink); font-size: .82rem; font-weight: 700; }

.zwx-foot { padding: 12px 16px 16px; margin-top: auto; }
.zwx-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 11px; }
.zwx-price b { color: var(--zws-gold); font-size: 1.16rem; font-weight: 800; }
.zwx-price span { color: var(--zws-dim); font-size: .78rem; font-weight: 600; }

.zwx-book {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px;
  padding: 12px 16px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--zws-teal), var(--zws-teal-2));
  color: #fff;
  font-family: inherit; font-size: .92rem; font-weight: 800;
  cursor: pointer;
  transition: filter .16s ease;
}
.zwx-book:hover { filter: brightness(1.1); }
.zwx-book svg { width: 15px; height: 15px; flex: none; }

/* ── DOTS — three experiences, nothing else ──────────────────────────────── */
.zws-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 18px; }
.zws-dots[hidden] { display: none; }
.zws-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.zws-dot.on { width: 22px; background: var(--zws-gold); }

/* ── TABLET — lead becomes a compact header above the rail ───────────────── */
@media (max-width: 1024px) {
  .zws-panel { padding: 32px 26px 24px; border-radius: 26px; }
  .zws-layout { grid-template-columns: 1fr; gap: 24px; }
  .zws-lead { padding-inline-end: 0; max-width: 62ch; }
  .zws-title { font-size: clamp(1.75rem, 3.4vw, 2.2rem); }
  .zws-sub { max-width: 56ch; margin-bottom: 18px; }
  .zwx { flex-basis: 310px; width: 310px; }
  .zws-nav--prev { inset-inline-start: -4px; }
  .zws-nav--next { inset-inline-end: -4px; }
}

/* ── PHONE — compact editorial block, then a swipe rail ──────────────────── */
@media (max-width: 720px) {
  .zws-sec { padding: 34px 0 40px; }
  .zws-wrap { padding: 0 14px; }
  .zws-panel { padding: 26px 16px 20px; border-radius: 24px; }
  .zws-layout { gap: 20px; }
  .zws-lead { max-width: none; }
  .zws-title { font-size: 1.68rem; margin-bottom: 10px; }
  .zws-sub { font-size: .92rem; margin-bottom: 16px; max-width: none; }
  .zws-kicker { margin-bottom: 14px; }
  /* touch is the control here; arrows would only take space from the cards */
  .zws-nav { display: none !important; }
  /* the rail bleeds to the panel edge so the next card peeks */
  .zws-rail { margin-inline: -16px; padding-inline: 16px; gap: 14px; }
  .zws-stage { gap: 14px; }
  .zwx { flex-basis: 78vw; width: 78vw; max-width: 320px; }
  .zws-dots { margin-top: 14px; }
}