/* ===========================================================
   MKHAZN — zone modal + image lightbox
   =========================================================== */

/* ---------- shared lightbox ---------- */
.lb{
  position:fixed;inset:0;height:100dvh;z-index:200;display:none;
  background:rgba(4,4,5,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.lb.is-open{display:block;animation:lbIn .28s var(--ease-out) both}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(56px,8vh,90px) clamp(16px,6vw,96px)}
/* fixed frame: every photo gets the same box, whatever its own ratio */
.lb__frame{
  width:min(1180px,100%);aspect-ratio:3/2;max-height:100%;
  background:#0a0a0b;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;
  position:relative;box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:lbZoom .32s var(--ease-out) both;
}
.lb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
@keyframes lbZoom{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.lb__btn{
  position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out);z-index:5;
}
.lb__btn:hover{background:rgba(255,255,255,.2)}
.lb__btn:active{transform:scale(.94)}
.lb__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb__close{inset-block-start:16px;inset-inline-end:16px}
.lb__prev{inset-block-start:50%;transform:translateY(-50%);inset-inline-start:16px}
.lb__next{inset-block-start:50%;transform:translateY(-50%);inset-inline-end:16px}
.lb__prev:active,.lb__next:active{transform:translateY(-50%) scale(.94)}
.lb__bar{
  position:absolute;inset-block-end:18px;inset-inline:0;display:flex;justify-content:center;gap:.9rem;align-items:center;
  color:rgba(255,255,255,.8);font-size:.88rem;font-weight:600;
}
.lb__count{direction:ltr;unicode-bidi:isolate;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.25rem .8rem;font-variant-numeric:tabular-nums}
.lb__cap{max-width:52ch;text-align:center;color:rgba(255,255,255,.72);font-weight:500}
@media (max-width:720px){
  .lb__stage{padding:62px 12px 104px}
  .lb__frame{aspect-ratio:3/4;width:100%}
  .lb__btn{width:44px;height:44px}
  .lb__cap{display:none}
  /* على الموبايل: الأسهم تحت جنب العدّاد مش فوق الصورة */
  .lb__prev,.lb__next{inset-block-start:auto;inset-block-end:18px;transform:none}
  .lb__prev{inset-inline-start:auto;inset-inline-end:calc(50% + 46px)}
  .lb__next{inset-inline-end:auto;inset-inline-start:calc(50% + 46px)}
  .lb__prev:active,.lb__next:active{transform:scale(.93)}
  .lb__bar{inset-block-end:28px}
}
body.lb-lock{overflow:hidden}

/* ---------- zone teaser card ---------- */
.zone--link{cursor:pointer;text-align:start;padding:0;border:1px solid var(--line-dark);background:var(--ink-2);
  color:#fff;font:inherit;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--d-mid) var(--ease-out),box-shadow var(--d-mid) var(--ease-out),border-color var(--d-mid)}
.zone--link:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.34);border-color:rgba(232,200,122,.35)}
.zone__cover{position:relative;overflow:hidden;background:#000}
.zone__cover img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 900ms var(--ease-out)}
.zone--link:hover .zone__cover img{transform:scale(1.06)}
.zone__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 45%)}
.zone__shots{
  position:absolute;inset-block-end:10px;inset-inline-start:12px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:.24rem .75rem;font-size:.76rem;font-weight:600;
}
.zone__shots svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.zone__cta{
  margin-top:1.1rem;display:inline-flex;align-items:center;gap:.45rem;color:var(--gold-1);
  font-weight:700;font-size:.95rem;
}
.zone__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  transition:transform var(--d-fast) var(--ease-out)}
.zone--link:hover .zone__cta svg{transform:translateX(-4px)}

/* ---------- zone modal ---------- */
.zmodal{position:fixed;inset:0;height:100dvh;z-index:150;display:none}
.zmodal.is-open{display:block}
.zmodal__scrim{position:absolute;inset:0;background:rgba(3,3,4,.72);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);animation:lbIn .25s var(--ease-out) both}
.zmodal__panel{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(50%,-50%);
  width:min(1000px,94vw);max-height:min(90vh,90dvh);overflow:auto;overscroll-behavior:contain;
  background:var(--ink-2);color:#fff;border:1px solid var(--line-dark);border-radius:var(--r-xl);
  box-shadow:0 40px 110px rgba(0,0,0,.6);animation:zmIn .34s var(--ease-out) both;
}
@keyframes zmIn{from{opacity:0;transform:translate(50%,-46%) scale(.97)}to{opacity:1;transform:translate(50%,-50%) scale(1)}}
.zmodal__head{position:relative}
.zmodal__hero{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
.zmodal__head::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink-2) 2%,rgba(0,0,0,.35) 60%,transparent)}
.zmodal__title{position:absolute;inset-block-end:0;inset-inline:0;padding:clamp(18px,3vw,30px);z-index:2}
.zmodal__title h3{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;direction:ltr;unicode-bidi:isolate;text-align:right}
.zmodal__close{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background var(--d-fast)}
.zmodal__close:hover{background:rgba(0,0,0,.8)}
.zmodal__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zmodal__body{padding:clamp(18px,3vw,32px)}
.zmodal__grid[hidden]{display:none}
.zmodal__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1.8rem}
.zmodal__grid button{padding:0;border:0;background:#000;border-radius:12px;overflow:hidden;cursor:zoom-in;display:block}
.zmodal__grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out),opacity .3s}
.zmodal__grid button:hover img{transform:scale(1.07);opacity:.88}
.zmodal__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:var(--r-md);overflow:hidden;margin-bottom:1.6rem}
.zmodal__fact{background:var(--ink-3);padding:1.1rem 1.2rem}
.zmodal__fact span{display:block;color:var(--muted-dark);font-size:.86rem;margin-bottom:.25rem}
.zmodal__fact b{font-size:1.05rem;font-weight:700}
.zmodal__actions{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:820px){
  .zmodal__grid{grid-template-columns:repeat(3,1fr)}
  .zmodal__facts{grid-template-columns:1fr}
  .zmodal__hero{aspect-ratio:16/9}
}
@media (max-width:520px){.zmodal__grid{grid-template-columns:repeat(2,1fr)}}