/* ══════════════════════════════════════════════════════════════════════
   zl-dest-discovery.css — «اكتشف وجهات الجنوب»
   Editorial collage per the approved reference: four TALL full-bleed
   photographs cut as parallel slanted panels, one deep-sea gradient rising
   from the foot of each, centred type, outlined gold CTA.

   REWRITTEN CLEAN 2026-08-07. The previous slant used transform:skewX with a
   counter-skewed interior — six patch rounds left duplicate rules, and the
   taller panels exposed uncovered shear wedges and let text spill the edges.
   The slant is now a clip-path PARALLELOGRAM: no transform anywhere, so the
   photograph, the crops and the type all keep their natural axes — there is
   nothing to counter-rotate, nothing to overhang, nothing to shimmer.
   Isolated: zdd-* only. Logical props → RTL/LTR.
   ══════════════════════════════════════════════════════════════════════ */
#zlDestDiscovery {
  --zdd-sea: #0E2F3D; --zdd-petrol: #004F6C;
  --zdd-gold: #E6B563; --zdd-sand: #F6F2E9;
  --zdd-font: var(--zl-font, var(--font-arabic, 'IBM Plex Sans Arabic', 'Tajawal', sans-serif));
  --zdd-ease: cubic-bezier(.22, .61, .36, 1);
  /* horizontal run of each slanted edge; gutters between panels stay parallel */
  --zdd-slant: clamp(24px, 2.6vw, 42px);
  --zdd-gutter: clamp(14px, 1.5vw, 22px);
}
.zdd-sec { background: var(--zdd-sand); padding: clamp(46px, 6vw, 88px) 0; font-family: var(--zdd-font); }
.zdd-sec[hidden] { display: none; }
.zdd-wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ── head — centred, no eyebrow ──────────────────────────────────────── */
.zdd-head { text-align: start; margin-bottom: clamp(30px, 3.4vw, 52px); }   /* من اليمين لا الوسط (2026-08-09) */
.zdd-title { margin: 0; color: var(--zdd-sea); font-weight: 800; line-height: 1.2;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.012em; }
/* (2026-08-31 — طلب المالكة) «الوجهات» بذهب زل نفسه، مطابقة لكلمة «تجربتك».
   القياس السابق قائم: #E6B563 على #F6F2E9 = 1.69:1 والمطلوب 3.0 لنص كبير —
   ولهذا كانت بـ#8C6410 (4.76:1). الحل يجمع الاثنين: الهكس يبقى ذهب زل
   والكلمة تجلس على قاعدة داكنة فيُقاس التباين عليها. */
.zdd-title .zdd-hl {
  color: var(--zl-gold, #E6B563);
  background: #0B2A34;
  padding: .04em .3em;
  border-radius: .22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.zdd-rule { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 13px 0 15px; }
.zdd-rule i { width: 5px; height: 5px; background: var(--zdd-gold); transform: rotate(45deg); border-radius: 1px; }
.zdd-rule i:nth-child(2) { width: 7px; height: 7px; }
/* The owner's 2026-08-09 line is a full editorial sentence, not a four-word
   strapline: 30ch broke it into six ragged lines. Widened + given its own top
   margin so it reads as two calm lines on desktop and never gets clipped. */
.zdd-sub { margin: 14px 0 0; max-width: 68ch; color: #5c757e;   /* لا auto — تبقى محاذية لليمين مع الرأس */
  font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.85; text-wrap: pretty; }

/* ── stage — full-bleed, outer diagonals cropped by the screen ───────── */
.zdd-viewport { overflow: hidden; }   /* aligned with the page like every section —
   the edge-to-edge crop cut the outer panels and read as a mistake, not a design */
.zdd-track {
  display: flex; align-items: stretch;

}
/* ── panel — a clipped parallelogram, nothing transformed ────────────── */
.zdd-card {
  position: relative; display: block; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  height: clamp(480px, 40vw, 600px);
  text-decoration: none;
  background: var(--zdd-sea);   /* isolation dropped: no blend modes here, and the
     promoted layer it forced made some capture pipelines rasterize the clip empty */
  /* RTL lean: top edge starts after the slant, bottom edge ends before it */
  clip-path: polygon(var(--zdd-slant) 0, 100% 0, calc(100% - var(--zdd-slant)) 100%, 0 100%);
  /* neighbouring clips interlock; the visible gutter is the sand showing through */
  margin-inline-end: calc(var(--zdd-slant) * -1 + var(--zdd-gutter));
}
.zdd-card:last-child { margin-inline-end: 0; }
.zdd-card:focus-visible { outline: 3px solid var(--zdd-gold); outline-offset: -6px; }

/* photograph fills the panel — official local covers, naturally centred */
.zdd-c-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #123c4c;
  filter: saturate(1.08) contrast(1.02);   /* a touch of shared warmth across the four */
}

/* one tall deep-sea gradient — the text zone IS the photograph sinking */
.zdd-c-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(14,47,61,.97) 0%,  rgba(14,47,61,.9) 22%,
    rgba(14,47,61,.55) 42%, rgba(14,47,61,.16) 62%,
    rgba(14,47,61,0) 78%);
}

/* ── content — centred column resting on the gradient ────────────────── */
.zdd-c-body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* the side padding clears the slanted cuts so type never meets an edge */
  padding: 0 calc(var(--zdd-slant) * .8 + 14px) clamp(28px, 2.8vw, 44px);
  color: #fff;
}
.zdd-c-name {
  margin: 0 0 13px; color: #fff; font-weight: 800; line-height: 1.15;
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  text-shadow: 0 2px 16px rgba(4,20,27,.5);
}
.zdd-c-desc {
  /* 24ch fitted the old five-word line; the 2026-08-09 copy is a full sentence,
     so the measure widens rather than the sentence being cut. No clamp, no
     ellipsis — editorial copy is never truncated here. */
  margin: 0 0 16px; color: rgba(255,255,255,.92);
  font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.8; max-width: 32ch;
  text-shadow: 0 1px 10px rgba(4,20,27,.4);
}
.zdd-c-season {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 22px; color: var(--zdd-gold);
  font-size: .88rem; font-weight: 600; line-height: 1.5;
}
.zdd-c-season::before {
  content: ''; width: 6px; height: 6px; flex: 0 0 auto;
  background: currentColor; transform: rotate(45deg); border-radius: 1px;
}
.zdd-c-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 28px; border-radius: 100px;
  border: 1px solid rgba(230,181,99,.6);
  color: var(--zdd-gold); font-size: .95rem; font-weight: 700;
  transition: background .25s var(--zdd-ease), border-color .25s var(--zdd-ease);
}
.zdd-c-cta-ic { display: inline-flex; transition: transform .25s var(--zdd-ease); }
.zdd-c-cta-ic svg { width: 14px; height: 14px; }
.zdd-card:hover .zdd-c-cta { background: rgba(230,181,99,.14); border-color: var(--zdd-gold); }
.zdd-card:hover .zdd-c-cta-ic { transform: translateX(-4px); }
html:not([dir="rtl"]) .zdd-card:hover .zdd-c-cta-ic { transform: translateX(4px); }

/* ── dots (phone slider position) ────────────────────────────────────── */
.zdd-dots { display: none; }
.zdd-dot { width: 7px; height: 7px; border-radius: 100px; background: rgba(14,47,61,.18);
  transition: background .25s var(--zdd-ease), width .25s var(--zdd-ease); }
.zdd-dot.on { width: 20px; background: var(--zdd-gold); }

/* ── tablet — two per row, same language ─────────────────────────────── */
@media (max-width: 1024px) and (min-width: 681px) {
  .zdd-track { flex-wrap: wrap; row-gap: var(--zdd-gutter); }
  .zdd-card { flex: 1 1 40%; height: clamp(420px, 52vw, 520px); }
  .zdd-card:nth-child(2n) { margin-inline-end: 0; }
}

/* ── phone — one destination per swipe, quiet dots ───────────────────── */
@media (max-width: 680px) {
  .zdd-viewport { width: auto; margin-inline: 0; overflow: visible; }
  /* (2026-08-30 HOTFIX) The full-bleed scroller cancelled the wrapper's padding
     with a hard-coded 18px. At 390px that padding is clamp(16px,4vw,32px) = 16px,
     so the bleed overshot by 2px a side and the DOCUMENT gained 2px of sideways
     scroll. Tie the bleed to the same value the wrapper actually uses and the
     track spans exactly the viewport at every phone width — same edge-to-edge
     design, zero overflow. Desktop/tablet are outside this media block. */
  .zdd-track {
    margin-inline: calc(-1 * clamp(16px, 4vw, 32px));
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding: 4px clamp(16px, 4vw, 32px) 8px;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .zdd-track::-webkit-scrollbar { display: none; height: 0; }
  .zdd-card {
    flex: 0 0 88%; scroll-snap-align: center;
    height: clamp(500px, 132vw, 580px);
    /* the phone keeps the SAME slanted identity — a plain rounded box here read
       as a generic square card next to the desktop collage */
    --zdd-slant: 22px;
    border-radius: 0;
    margin-inline-end: 0;
  }
  .zdd-c-body { padding-inline: calc(22px + 12px); }
  .zdd-c-body { padding: 0 22px 24px; }
  .zdd-sub { font-size: .92rem; }
  .zdd-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
}

/* ── motion preferences ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .zdd-c-cta, .zdd-c-cta-ic, .zdd-dot { transition: none !important; }
  .zdd-card:hover .zdd-c-cta-ic { transform: none; }
}