/* ══════════════════════════════════════════════════════════════════════
   zl-south-worlds.css — «الجنوب كما يستحق أن يُعاش»

   An editorial chapter, not a product grid: three full-bleed photo panels,
   one per world of the south. The photo IS the panel — no white body, no
   badge, no price, no card chrome borrowed from «مختارات زل».
   Isolated under .zsw-* / #zlSouthWorlds. Logical properties throughout, so
   RTL and LTR both read correctly and the CTA arrow flips with the document.
   Desktop 3-up · tablet 2 + 1 full-width · mobile stacked (never a slider).
   ══════════════════════════════════════════════════════════════════════ */
#zlSouthWorlds {
  --zsw-deep:#0E2F3D; --zsw-sea:#004F6C; --zsw-cyan:#00ABC7;
  --zsw-gold:#E6B563; --zsw-sand:#F6F2E9;
  --zsw-font:var(--zl-font,var(--font-arabic,'IBM Plex Sans Arabic','Tajawal',sans-serif));
  --zsw-ease:cubic-bezier(.22,.61,.36,1);
}
.zsw-sec { background:var(--zsw-sand); padding:clamp(46px,5.6vw,86px) 0;
  font-family:var(--zsw-font); position:relative; }
.zsw-sec[hidden] { display:none; }
.zsw-wrap { max-width:1400px; margin:0 auto; padding-inline:clamp(16px,3.6vw,34px); }

/* ── Head: centred title + the owner's sub-line (content update 2026-08-09).
      No eyebrow, no divider — the 2026-08-07 decoration purge still stands. ── */
.zsw-head { text-align:start; margin-bottom:clamp(24px,2.6vw,38px); }   /* من اليمين لا الوسط (2026-08-09) */
.zsw-title { margin:0; color:var(--zsw-deep); font-size:clamp(1.65rem,3.4vw,2.7rem);
  font-weight:800; line-height:1.22; letter-spacing:-.012em; text-wrap:balance; }
/* (2026-08-31 — طلب المالكة) الكلمة المميّزة بذهب زل نفسه #E6B563، لون كلمة «زل».
   القياس: الذهب على الرمل = 1.69:1، وهو دون حدّ AA للعناوين (3:1) — ولهذا كانت
   الكلمة سابقاً بـ#8C6410 (4.76:1) بعد جولة الوصول P1. الهوية تُحفظ والقراءة
   تُحفظ معاً بإسناد الكلمة وحدها إلى قاعدة داكنة: الهكس يبقى ذهب زل تماماً،
   والتباين يُقاس عليها لا على الرمل. */
.zsw-title .zsw-hl {
  color: var(--zl-gold, #E6B563);
  background: #0B2A34;
  padding: .04em .3em;
  border-radius: .22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.zsw-sub { margin:13px 0 0; max-width:70ch; color:#5c757e;   /* لا auto — محاذية لليمين مع الرأس */
  font-size:clamp(.97rem,1.05vw,1.08rem); line-height:1.85; text-wrap:pretty; }

/* ── The panels ───────────────────────────────────────────────────────────
   Normally three. A panel whose world has no bookable experience is hidden by
   zl-south-worlds.js (no card may land on «0 تجربة»), and data-n lets the row
   re-flow instead of leaving a gap. */
.zsw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,1.6vw,24px); }
.zsw-grid[data-n="2"] { grid-template-columns:repeat(2,1fr); }
.zsw-grid[data-n="1"] { grid-template-columns:minmax(0,760px); justify-content:center; }
.zsw-panel[hidden] { display:none; }

.zsw-panel {
  position:relative; display:block; overflow:hidden; isolation:isolate;
  height:clamp(520px,40vw,600px);
  border-radius:clamp(24px,2vw,30px);
  background:var(--zsw-deep);            /* never an empty light box while loading */
  text-decoration:none; color:#fff;
  box-shadow:0 12px 30px -22px rgba(14,47,61,.5);
}
.zsw-panel:focus-visible { outline:3px solid var(--zsw-gold); outline-offset:3px; }

/* The photo covers the whole panel. The site-wide img.zl-fx fade (opacity:0 until
   a resized variant answers) would leave these panels empty — opt out by
   specificity, exactly like «مختارات زل» does. */
#zlSouthWorlds .zsw-img, #zlSouthWorlds .zsw-img.zl-fx { opacity:1; }
.zsw-img { position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:var(--zsw-pos,center);
  filter:saturate(1.04) contrast(1.02);
  transition:transform .8s var(--zsw-ease); will-change:transform; }
.zsw-panel:hover .zsw-img { transform:scale(1.03); }   /* spec cap: 1.03 */

/* Petrol gradient — strong only where the copy sits, gone before mid-photo.
   Never black, never a full-frame blur. The faint top wash only tames very
   bright skies so all three panels read as one family. */
.zsw-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(8,40,54,.95) 0%, rgba(8,40,54,.88) 13%, rgba(9,44,60,.60) 30%,
      rgba(10,48,64,.26) 45%, rgba(11,52,70,.07) 60%, rgba(11,52,70,0) 72%),
    linear-gradient(to bottom, rgba(14,47,61,.20) 0%, rgba(14,47,61,0) 34%);
  opacity:.94; transition:opacity .34s var(--zsw-ease); }
.zsw-panel:hover .zsw-veil { opacity:1; }

/* ── Copy block: title → line → CTA, in the lower third ───────────────── */
.zsw-body { position:absolute; z-index:2; inset-inline:0; bottom:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:clamp(28px,2.4vw,36px); text-align:start; }
.zsw-h { display:block; font-size:clamp(1.25rem,1.5vw,1.6rem); font-weight:700;
  line-height:1.35; color:#fff; text-shadow:0 2px 14px rgba(6,26,34,.45); }
/* The 2-line clamp fitted the old six-word line. The 2026-08-09 copy is a full
   sentence, and editorial text is never cut here — clamp/overflow removed and
   the measure widened, so all three panels show their sentence in full. */
.zsw-p { display:block; margin:0; max-width:42ch;
  font-size:clamp(.93rem,.95vw,1.02rem); font-weight:400; line-height:1.75;
  color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(6,26,34,.4);
  text-wrap:pretty; }

/* CTA — an editorial link, not a button: gold text, small chevron, hairline. */
.zsw-cta { display:inline-flex; align-items:center; gap:8px; margin-top:7px;
  padding-bottom:6px; position:relative;
  color:var(--zsw-gold); font-size:clamp(.92rem,.95vw,1rem); font-weight:700;
  letter-spacing:.005em; }
.zsw-cta::after { content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:100%; height:1px; background:rgba(230,181,99,.45);
  transform:scaleX(.34); transform-origin:right;          /* RTL: grows from the start edge */
  transition:transform .38s var(--zsw-ease), background-color .38s var(--zsw-ease); }
[dir="ltr"] .zsw-cta::after { transform-origin:left; }
.zsw-panel:hover .zsw-cta::after,
.zsw-panel:focus-visible .zsw-cta::after { transform:scaleX(1); background:rgba(230,181,99,.85); }
.zsw-cta svg { width:16px; height:16px; flex:0 0 auto;
  transition:transform .38s var(--zsw-ease); }
.zsw-panel:hover .zsw-cta svg { transform:translateX(-4px); }         /* RTL: forward = left */
[dir="ltr"] .zsw-cta svg { transform:scaleX(-1); }
[dir="ltr"] .zsw-panel:hover .zsw-cta svg { transform:scaleX(-1) translateX(-4px); }

/* (dunes divider deleted 2026-08-07 — owner: no decorative transitions) */

/* ── Tablet: two panels, then one full-width ─────────────────────────── */
@media (max-width:1024px) {
  .zsw-grid { grid-template-columns:repeat(2,1fr); gap:18px; }
  .zsw-panel { height:clamp(430px,52vw,520px); }
  .zsw-panel:nth-child(3) { grid-column:1 / -1; height:clamp(380px,40vw,440px); }
  .zsw-panel:nth-child(3) .zsw-body { max-width:min(560px,72%); }
}

/* ── Mobile: stacked, one per row. No carousel, no horizontal drag.
   Cut at 767px, not 768px: an iPad portrait (768) belongs to the tablet
   layout above (two panels + one full-width), not to the phone stack. ── */
@media (max-width:767px) {
  .zsw-sec { padding:clamp(38px,9vw,56px) 0; }
  .zsw-wrap { padding-inline:clamp(16px,4.6vw,20px); }
  .zsw-grid { grid-template-columns:1fr; gap:16px; }
  .zsw-panel, .zsw-panel:nth-child(3) { height:clamp(400px,116vw,480px); grid-column:auto; }
  .zsw-panel:nth-child(3) .zsw-body { max-width:none; }
  .zsw-body { padding:24px 22px 26px; gap:8px; }
  .zsw-h { font-size:1.3rem; }
  .zsw-p { font-size:.95rem; max-width:34ch; }
  .zsw-sub { font-size:.95rem; line-height:1.8; }
  .zsw-cta::after { transform:scaleX(1); background:rgba(230,181,99,.7); }  /* no hover on touch */
}

/* ── Motion / contrast preferences ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .zsw-img, .zsw-cta::after, .zsw-cta svg, .zsw-veil { transition:none; }
  .zsw-panel:hover .zsw-img { transform:none; }
}