/* ══════════════════════════════════════════════════════════════════════
   zl-destination-page.css — DESTINATION STORY PAGE
   ONE stylesheet for every region; nothing here is region-specific.
   Scoped under .zl-dest-page / zdp-* so it cannot reach any other page.

   REWRITTEN CLEAN 2026-08-07. The previous file styled a page made of feature
   grids — four circular icons, two weather boxes, four trip cards. Those rules
   are GONE, not overridden: .zdp-why*, .zdp-when*, .zdp-plan*, .zdp-subs* no
   longer exist because the elements no longer exist.

   The rule that shapes everything below: form follows function. A story gets
   prose and photographs, a scenario gets a number and a line, a bookable
   experience gets a card, facts get a hairline strip. Only ONE section on this
   page is allowed to use cards.
   ══════════════════════════════════════════════════════════════════════ */
.zl-dest-page {
  --zdp-sea:#0E2F3D; --zdp-petrol:#004F6C; --zdp-cyan:#00ABC7;
  --zdp-gold:#E6B563; --zdp-sand:#F6F2E9;
  --zdp-ink:#48606a; --zdp-line:#e7ddcc;
  --zdp-font:var(--zl-font, var(--font-arabic, 'IBM Plex Sans Arabic', 'Tajawal', sans-serif));
  --zdp-ease:cubic-bezier(.22,.61,.36,1);
  margin:0; background:#fff; font-family:var(--zdp-font); color:var(--zdp-sea);
}
.zdp-wrap { max-width:1160px; margin-inline:auto; padding-inline:clamp(18px,4vw,36px); }
.zdp-sec  { padding:clamp(52px,7vw,110px) 0; }
.zdp-sec-sand { background:var(--zdp-sand); }
.zdp-h2 { margin:0; color:var(--zdp-sea); font-weight:800; line-height:1.2;
  font-size:clamp(1.55rem,3vw,2.4rem); letter-spacing:-.014em; }
.zdp-h2-sub { margin:10px 0 0; color:var(--zdp-ink); font-size:clamp(.92rem,1.05vw,1.02rem); line-height:1.75; }

/* ══ 1 · HERO ═══════════════════════════════════════════════════════════ */
.zdp-hero {
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  min-height:clamp(540px,70vh,650px);
  background:var(--zdp-sea);
  padding-top:calc(var(--zl-header-h, 72px) + 16px);
}
.zdp-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* the gradient reads the TEXT side only — it never turns half the hero into a
   solid petrol slab (the brief is explicit about this) */
.zdp-hero-veil {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(14,47,61,.92) 0%, rgba(14,47,61,.62) 26%,
                            rgba(14,47,61,.18) 50%, rgba(14,47,61,0) 72%),
    linear-gradient(to left, rgba(14,47,61,.42) 0%, rgba(14,47,61,0) 55%);
}
html:not([dir="rtl"]) .zdp-hero-veil {
  background:
    linear-gradient(to top, rgba(14,47,61,.92) 0%, rgba(14,47,61,.62) 26%,
                            rgba(14,47,61,.18) 50%, rgba(14,47,61,0) 72%),
    linear-gradient(to right, rgba(14,47,61,.42) 0%, rgba(14,47,61,0) 55%);
}
.zdp-hero-body {
  position:relative; z-index:2; width:100%;
  max-width:1160px; margin-inline:auto;
  padding:0 clamp(18px,4vw,36px) clamp(38px,4.4vw,64px);
  color:#fff;
}
.zdp-crumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.8rem; color:rgba(255,255,255,.72); margin-bottom:18px; }
.zdp-crumb a { color:rgba(255,255,255,.72); text-decoration:none; }
.zdp-crumb a:hover { color:var(--zdp-gold); }
.zdp-name { margin:0 0 14px; font-weight:800; line-height:1.08;
  font-size:clamp(2.4rem,6vw,4.2rem); letter-spacing:-.022em;
  text-shadow:0 2px 24px rgba(2,20,28,.45); }
.zdp-tagline { margin:0 0 12px; max-width:34ch;
  font-size:clamp(1.02rem,1.5vw,1.3rem); line-height:1.6; color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(2,20,28,.4); }
.zdp-season { display:inline-flex; align-items:center; gap:9px; margin:0 0 28px;
  color:var(--zdp-gold); font-size:.9rem; font-weight:600; }
.zdp-season::before { content:''; width:6px; height:6px; background:currentColor;
  transform:rotate(45deg); border-radius:1px; flex:0 0 auto; }
.zdp-cta { display:inline-flex; align-items:center; gap:10px;
  background:var(--zdp-gold); color:var(--zdp-sea);
  padding:14px 30px; border-radius:100px; text-decoration:none;
  font-weight:700; font-size:1rem; transition:filter .2s var(--zdp-ease); }
.zdp-cta svg { width:16px; height:16px; transition:transform .22s var(--zdp-ease); }
.zdp-cta:hover { filter:brightness(1.06); }
.zdp-cta:hover svg { transform:translateX(-4px); }
html:not([dir="rtl"]) .zdp-cta:hover svg { transform:translateX(4px); }

/* CLOSE — on every size. It was phones-only and the owner found no way back
   on desktop; the breadcrumb alone was not read as an exit. */
.zdp-close {
  position:absolute; z-index:5;
  top:calc(var(--zl-header-h, 72px) + 16px); inset-inline-start:clamp(18px,4vw,36px);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.34); background:rgba(10,32,44,.5); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .22s var(--zdp-ease), border-color .22s var(--zdp-ease);
}
.zdp-close:hover { background:rgba(10,32,44,.75); border-color:var(--zdp-gold); }
.zdp-close svg { width:19px; height:19px; }

/* ══ 2 · STORY — asymmetric mosaic, deliberately not a card row ═════════ */
.zdp-story-grid {
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(22px,3vw,48px); align-items:start;
  margin-top:clamp(26px,3vw,44px);
}
.zdp-story-lead { grid-row:span 2; margin:0; }
.zdp-story-lead img {
  width:100%; height:100%; min-height:clamp(340px,42vw,540px);
  object-fit:cover; display:block; border-radius:4px;
}
.zdp-story-text { display:flex; flex-direction:column; }
.zdp-lead { margin:0 0 clamp(20px,2.4vw,32px); color:var(--zdp-sea);
  font-size:clamp(1.04rem,1.35vw,1.22rem); line-height:1.95; font-weight:500; }
/* two quiet facts — a label and a line, no icon, no box */
.zdp-notes { display:flex; flex-direction:column; gap:clamp(16px,1.8vw,24px); }
.zdp-note { padding-inline-start:16px; border-inline-start:2px solid var(--zdp-gold); }
.zdp-note h3 { margin:0 0 5px; font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:var(--zdp-petrol); }
.zdp-note p  { margin:0; font-size:.94rem; line-height:1.8; color:var(--zdp-ink); }
/* the aside breaks the symmetry: a smaller frame with its own caption */
.zdp-story-aside { margin:clamp(20px,2.4vw,32px) 0 0; }
.zdp-story-aside img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:4px; }
.zdp-story-aside figcaption { margin-top:12px; font-size:.88rem; line-height:1.8; color:var(--zdp-ink); }
/* no third photograph for this region → the aside reads as a pull quote instead
   of an image frame (never the hero photo repeated) */
.zdp-story-aside.zdp-aside-quote { border-inline-start:2px solid var(--zdp-gold); padding-inline-start:clamp(14px,1.6vw,20px); }
.zdp-story-aside.zdp-aside-quote figcaption { margin-top:0; font-size:clamp(.98rem,1.15vw,1.08rem); line-height:1.9; color:var(--zdp-sea); font-weight:500; }

/* ══ 3 · PATHS — numbered scenes on deep sea ═══════════════════════════ */
.zdp-paths { background:var(--zdp-sea); color:#fff; }
.zdp-h2-light { color:#fff; }
.zdp-paths-list { display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,52px); margin-top:clamp(30px,3.4vw,52px); }
.zdp-path { position:relative; padding-top:22px; border-top:1px solid rgba(230,181,99,.32); }
/* a wide crop of the region — the visual element the brief asks for, and the
   thing that stops three columns of text reading as a feature row */
.zdp-path-ph { display:block; margin-bottom:18px; overflow:hidden; border-radius:3px; }
.zdp-path-ph img { width:100%; aspect-ratio:16/7; object-fit:cover; display:block;
  filter:saturate(.92) brightness(.86); transition:filter .35s var(--zdp-ease); }
.zdp-path:hover .zdp-path-ph img { filter:saturate(1) brightness(1); }
.zdp-path-n { position:absolute; top:-1px; inset-inline-start:0;
  font-size:.82rem; font-weight:700; letter-spacing:.1em; color:var(--zdp-gold); }
.zdp-path-t h3 { margin:0 0 10px; color:#fff; font-weight:800; line-height:1.28;
  font-size:clamp(1.12rem,1.5vw,1.38rem); }
.zdp-path-t p  { margin:0; color:rgba(255,255,255,.78); font-size:.94rem; line-height:1.85; }

/* ══ 4 · EXPERIENCES — the only cards; the grid follows the real count ══ */
.zdp-exp-grid { display:grid; gap:clamp(16px,1.9vw,24px);
  margin:clamp(28px,3.2vw,44px) 0 clamp(26px,3vw,38px); }
.zdp-exp-grid.zdp-n4 { grid-template-columns:repeat(4,1fr); }
.zdp-exp-grid.zdp-n3 { grid-template-columns:repeat(3,1fr); }
.zdp-exp-grid.zdp-n2 { grid-template-columns:repeat(2,1fr); max-width:840px; }
/* one experience becomes a wide feature — never a lone small card in an empty
   four-column grid (an explicit rejection in the brief) */
.zdp-exp-grid.zdp-n1 { grid-template-columns:1fr; max-width:720px; }
.zdp-exp-grid.zdp-n1 .zdp-exp { display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; }
.zdp-exp-grid.zdp-n1 .zdp-exp-ph { height:100%; }
.zdp-exp-grid.zdp-n1 .zdp-exp-img { aspect-ratio:auto; height:100%; }
.zdp-exp-grid.zdp-n1 .zdp-exp-b { justify-content:center; padding:clamp(20px,2.4vw,30px); }

.zdp-exp { display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--zdp-line); border-radius:8px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:box-shadow .28s var(--zdp-ease), border-color .28s var(--zdp-ease); }
.zdp-exp:hover { box-shadow:0 18px 40px -26px rgba(14,47,61,.45); border-color:#dccfb6; }
.zdp-exp-ph { display:block; overflow:hidden; background:var(--zdp-sand); }
.zdp-exp-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .55s var(--zdp-ease); }
.zdp-exp:hover .zdp-exp-img { transform:scale(1.035); }
.zdp-exp-b { display:flex; flex-direction:column; gap:7px; padding:15px 16px 17px; }
.zdp-exp-meta { font-size:.76rem; font-weight:600; color:#7b8f97; letter-spacing:.01em; }
.zdp-exp-name { font-size:.98rem; font-weight:700; line-height:1.45; color:var(--zdp-sea);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.zdp-exp-host { font-size:.82rem; color:var(--zdp-petrol); font-weight:600; }
/* one honest inclusion, stated quietly — never a badge row */
.zdp-exp-inc { font-size:.78rem; color:#7b8f97; }
.zdp-exp-foot { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:6px; padding-top:11px; border-top:1px solid var(--zdp-line); }
.zdp-exp-foot b  { font-size:.9rem; font-weight:800; color:var(--zdp-sea); }
.zdp-exp-foot em { font-style:normal; font-size:.82rem; font-weight:700; color:var(--zdp-gold); }

/* ══ buttons ═══════════════════════════════════════════════════════════ */
.zdp-btn { display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:100px; text-decoration:none;
  font-weight:700; font-size:.98rem; transition:background .22s var(--zdp-ease),
  color .22s var(--zdp-ease), filter .22s var(--zdp-ease); }
.zdp-btn-line { background:transparent; color:var(--zdp-petrol); border:1.5px solid var(--zdp-petrol); }
.zdp-btn-line:hover { background:var(--zdp-petrol); color:#fff; }
.zdp-btn-gold { background:var(--zdp-gold); color:var(--zdp-sea); padding:16px 40px; font-size:1.04rem; }
.zdp-btn-gold:hover { filter:brightness(1.06); }

/* ══ 5 · MAP ═══════════════════════════════════════════════════════════ */
.zdp-map { margin-top:clamp(24px,2.8vw,36px); border-radius:8px; overflow:hidden;
  border:1px solid var(--zdp-line); background:var(--zdp-sand); }
#zdpMapEl { display:block; width:100%; height:clamp(340px,44vh,470px); }
.zdp-pin span { display:block; width:14px; height:14px; border-radius:50%;
  background:var(--zdp-gold); border:2.5px solid #fff; box-shadow:0 2px 8px rgba(14,47,61,.42); }
.zdp-map .leaflet-popup-content { margin:0; font-family:var(--zdp-font); }
.zdp-pop { width:186px; }
.zdp-pop img { width:100%; height:104px; object-fit:cover; display:block; }
.zdp-pop strong { display:block; padding:10px 12px 6px; font-size:.86rem; line-height:1.5; color:var(--zdp-sea); }
.zdp-pop a { display:block; padding:0 12px 12px; font-size:.82rem; font-weight:700; color:var(--zdp-gold); text-decoration:none; }

/* ══ 6 · BEFORE YOU GO — hairline strip, no boxes ══════════════════════ */
.zdp-before-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; }
.zdp-now { display:flex; align-items:baseline; gap:10px; }
.zdp-now-t { font-size:1.05rem; font-weight:800; color:var(--zdp-petrol); }
.zdp-now-c { font-size:.88rem; color:var(--zdp-ink); }
.zdp-now-s { font-size:.74rem; color:#8b9ba2; }
.zdp-before-grid { display:grid; grid-template-columns:repeat(5,1fr);
  margin-top:clamp(20px,2.2vw,30px); border-top:1px solid var(--zdp-line); }
/* dividers only — the facts are separated by hairlines, not by cards */
.zdp-fact { padding:clamp(18px,1.9vw,24px) clamp(14px,1.6vw,22px);
  border-inline-start:1px solid var(--zdp-line); }
.zdp-fact:first-child { border-inline-start:0; padding-inline-start:0; }
.zdp-fact-k { display:block; margin-bottom:8px; font-size:.76rem; font-weight:700;
  letter-spacing:.04em; color:#7b8f97; }
.zdp-fact-v { display:block; font-size:1.02rem; font-weight:600; line-height:1.7; color:var(--zdp-sea); }

/* ══ 7 · FINAL ═════════════════════════════════════════════════════════ */
.zdp-final { position:relative; overflow:hidden; display:flex; align-items:center;
  justify-content:center; text-align:center; min-height:clamp(380px,44vh,480px);
  background:var(--zdp-sea); }
.zdp-final-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.zdp-final-veil { position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,47,61,.9) 0%, rgba(14,47,61,.72) 50%, rgba(14,47,61,.58) 100%); }
.zdp-final-body { position:relative; z-index:2; padding:0 24px; color:#fff; }
.zdp-final-body h2 { margin:0 0 30px; font-weight:800; line-height:1.16;
  font-size:clamp(1.8rem,3.8vw,3rem); text-shadow:0 2px 18px rgba(2,20,28,.4); }
.zdp-back { display:block; margin-top:18px; color:rgba(255,255,255,.82);
  font-size:.92rem; font-weight:600; text-decoration:none; }
.zdp-back:hover { color:var(--zdp-gold); }

/* unknown slug */
.zdp-missing { max-width:520px; margin:24vh auto; text-align:center; padding-inline:24px; }
.zdp-missing p { color:var(--zdp-ink); font-size:1.05rem; margin:0 0 22px; }

/* ══ TABLET ════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .zdp-exp-grid.zdp-n4, .zdp-exp-grid.zdp-n3 { grid-template-columns:repeat(2,1fr); }
  .zdp-paths-list { grid-template-columns:1fr; gap:26px; }
  .zdp-before-grid { grid-template-columns:repeat(3,1fr); }
  .zdp-fact:nth-child(3n+1) { border-inline-start:0; padding-inline-start:0; }
  .zdp-fact:nth-child(n+4) { border-top:1px solid var(--zdp-line); }
}
@media (max-width:900px) {
  /* the mosaic becomes a vertical story — never a squeezed collage */
  .zdp-story-grid { grid-template-columns:1fr; }
  .zdp-story-lead { grid-row:auto; }
  .zdp-story-lead img { min-height:clamp(260px,52vw,380px); }
  .zdp-story-aside { margin-top:4px; }
}

/* ══ PHONE ═════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
  .zdp-hero { min-height:clamp(520px,78vh,620px); }
  .zdp-name { font-size:clamp(2.1rem,10vw,2.8rem); }
  .zdp-tagline { font-size:1rem; max-width:26ch; }
  .zdp-cta, .zdp-btn { width:100%; }
  /* 40px reads better against a phone hero, but the tap target must stay ≥44 —
     ::after extends the hit area without changing the visual circle */
  .zdp-close { position:fixed; top:calc(var(--zl-header-h, 72px) + 12px); width:40px; height:40px; }
  .zdp-close::after { content:""; position:absolute; inset:-4px; border-radius:50%; }
  .zdp-exp-grid.zdp-n4, .zdp-exp-grid.zdp-n3, .zdp-exp-grid.zdp-n2 { grid-template-columns:1fr; }
  .zdp-exp-grid.zdp-n1 .zdp-exp { grid-template-columns:1fr; }
  .zdp-exp-grid.zdp-n1 .zdp-exp-img { aspect-ratio:16/11; height:auto; }
  /* facts stack two-up with hairlines — still no boxes */
  .zdp-before-grid { grid-template-columns:repeat(2,1fr); }
  .zdp-fact { padding-inline:0; border-inline-start:0; }
  .zdp-fact:nth-child(even) { padding-inline-start:16px; border-inline-start:1px solid var(--zdp-line); }
  .zdp-fact:nth-child(n+3) { border-top:1px solid var(--zdp-line); }
  #zdpMapEl { height:clamp(300px,52vw,380px); }
}

@media (prefers-reduced-motion: reduce) {
  .zdp-cta, .zdp-cta svg, .zdp-btn, .zdp-exp, .zdp-exp-img { transition:none !important; }
  .zdp-cta:hover svg, .zdp-exp:hover .zdp-exp-img { transform:none; }
}