/* ASLS.AI case-study pages (/work/, /work/<id>/) — 2026-10-15, revised 2026-10-17.
   Loaded after home.css and reuses its tokens (dark/light), .nav, .btn, .card, .chip, .kicker, .amb, .foot.
   Mobile-first, RTL-first with logical properties. CSP-safe: no inline styles are needed by the markup.
   2026-10-17: Arabic typography pass for Thmanyah Sans — body text >= 1.9, leads >= 1.8, headings >= 1.35,
   no negative letter-spacing, balanced headings / pretty paragraphs (no single-word last lines);
   /work/ rebuilt as «أعمالنا»: featured panels, filter chips, balanced grid.
   2026-10-19 (QA round 3): two-tier hero title (name / description), roomier card and hero line-heights,
   readable small text (--c-faint, darker light-mode chips), lightbox counter clear of the close button in RTL,
   EN chips fit at 320, filtered results centred in balanced rows. */

/* small secondary text (captions, breadcrumb, counts): home.css --faint is ~2.9:1 in light / 3.8:1 in dark,
   too low for 13–15px text; --c-faint keeps it quieter than --mute and above 4.5:1 in both themes.
   Light theme: the turquoise text colour (--tq-ink #087d98, 4.0–4.5:1 for the 12–14px chips, kickers, labels and
   counts) is a deeper turquoise of the same hue inside the page content (5.5–6.2:1); header and footer keep the
   homepage colour. */
.case-page{--wrap:var(--max);--c-faint:rgba(234,245,248,.56);line-height:1.85}
@media (prefers-color-scheme:light){
  .case-page{--c-faint:rgba(6,35,42,.65)}
  .case-page main{--tq-ink:#08686c}
}
.c-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.case-page .nav{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.case-page .nav-links a[aria-current="page"]{color:var(--ink)}
/* home.css skips rendering the footer off-screen (content-visibility:auto); these pages are short enough to
   paint it normally, which also keeps full-page captures, print and find-in-page complete */
.case-page .foot{content-visibility:visible;contain-intrinsic-size:none}

/* ---------- Arabic typography (applies to every element on these pages) ---------- */
.case-page :is(h1,h2,h3,h4){letter-spacing:0;line-height:1.4;text-wrap:balance}
.case-page p{text-wrap:pretty}
.case-page :is(li,dd,dt,summary){text-wrap:balance}
/* short blurbs (<= 4 lines): balance every line, so a break on desktop still reads as a tidy block on phones */
.case-page :is(.w-lead,.w-spot-desc,.w-spot-result,.card-body p,.c-result,.c-body .c-lead,.c-cta-in>p,.c-badge-band p,figcaption,.c-note,.lb-cap,.foot-brand p){text-wrap:balance}
html[lang="ar"] .case-page :is(.kicker,.c-label,.foot-col b,.chip,.w-flag){letter-spacing:0}
.case-page .card h3,.case-page .card h2{line-height:1.75}   /* ink gap: «المهني» dots over «الملك» was 1.5px at 1.45–1.6 */
.case-page .card-body p{line-height:1.9}
.case-page .foot-brand p{line-height:1.9}
.case-page .chip{line-height:1.7}

/* breadcrumb */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 22px;padding:0;font-size:13.5px;color:var(--c-faint)}
.crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.55}
.crumbs a{color:var(--mute);transition:color .2s}
.crumbs a:hover{color:var(--tq-ink)}
.crumbs [aria-current]{color:var(--c-faint)}

/* ---------- hero ---------- */
.c-hero{padding:clamp(104px,13vw,168px) 0 clamp(32px,4.5vw,56px);--ax:82%;--ay:18%;--bx:12%;--by:92%}
.c-hero .chip{margin-bottom:16px}
.c-hero h1{font-size:clamp(30px,4.6vw,62px);line-height:1.45;max-width:22ch}
.c-hero h1 strong{font-weight:700}
/* two-tier case title (build_cases.py hero_h1): the work's name, then its description on the next line */
.c-h1-name{display:block;font-size:min(1em,8vw)}             /* steps down below 375px */
.c-h1-name--lat{white-space:nowrap}                           /* «GESCO Content Studio» never splits */
.c-h1-name--long{font-size:min(1em,7.2vw)}
.c-h1-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.c-h1-sub{display:block;max-width:34ch;margin-top:.22em;font-size:clamp(21px,.56em,35px);font-weight:500;line-height:1.6}
html[lang="en"] .c-hero h1.c-h1{max-width:24ch}
html[lang="en"] .c-h1-sub{line-height:1.35;max-width:36ch}
.c-result{margin:18px 0 0;color:var(--mute);font-size:clamp(17px,1.7vw,21px);line-height:1.85;max-width:56ch}
.c-badge-pill{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:5px 14px 5px 12px;border-radius:999px;border:1px solid rgba(27,164,169,.55);background:var(--tq-soft);color:var(--tq-ink);font-size:14px;font-weight:700;line-height:1.9}
.c-badge-pill svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.c-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.c-svcs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.c-svcs li,.c-year{border:1px solid var(--line);background:var(--glass-2);border-radius:999px;padding:4px 14px;font-size:14px;color:var(--mute);line-height:1.8}
.c-year b{color:var(--ink);font-weight:700}
.c-live{width:100%;margin-top:8px}

/* key visual: full-bleed */
.c-key{margin:0;background:#03090b;border-block:1px solid var(--line);overflow:hidden}
.c-key img{width:100%;height:auto;max-height:min(90vh,1000px);object-fit:cover;object-position:50% 40%}

/* ---------- summary ---------- */
.c-summary{padding:clamp(40px,6vw,84px) 0 clamp(20px,3vw,40px)}
.c-sum-grid{display:grid;gap:22px}
.c-sum-box{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);border-inline-start:3px solid var(--tq);border-radius:20px;padding:clamp(22px,3vw,38px);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.c-sum-box::after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(27,164,169,.22),transparent 70%);pointer-events:none}
.c-label{margin:0 0 12px;color:var(--tq-ink);font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.c-sum-box p{position:relative;margin:0;font-size:clamp(17px,1.45vw,19.5px);line-height:2}
.c-facts{margin:0;display:grid;align-content:start}
.c-facts>div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.c-facts>div:last-child{border-bottom:1px solid var(--line)}
.c-facts dt{color:var(--tq-ink);font-weight:700;font-size:14px;line-height:1.9}
.c-facts dd{margin:0;color:var(--mute);font-size:15px;line-height:1.9}
.c-facts ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.c-facts li{position:relative;padding-inline-start:16px}
.c-facts li::before{content:"";position:absolute;inset-inline-start:0;top:.9em;width:7px;height:2px;background:var(--tq);transform:skewX(-35deg)}
.c-facts a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--tq);overflow-wrap:anywhere}
.c-facts a:hover{color:var(--tq-ink)}

/* ---------- challenge / solution / result ---------- */
.c-story{padding:clamp(40px,6vw,84px) 0}
.c-story--alt{background:linear-gradient(180deg,transparent,var(--bg-2) 14%,var(--bg-2) 86%,transparent)}
.c-copy{display:grid;gap:10px 48px;margin-bottom:clamp(26px,3.6vw,46px)}
.c-num{margin:0 0 4px;font-size:clamp(52px,6.4vw,88px);line-height:1;font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--tq)}
.c-title h2{font-size:clamp(30px,3.8vw,50px);line-height:1.38}
.c-body{max-width:66ch}
.c-body p{margin:0 0 16px;color:var(--mute);font-size:16.5px;line-height:1.95}
.c-body .c-lead{color:var(--ink);font-size:clamp(19px,1.75vw,23px);font-weight:500;line-height:1.85}
#result .c-lead{color:var(--tq-ink);font-weight:700}
.c-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px!important;padding:12px 14px;border-radius:12px;background:var(--glass-2);border:1px dashed var(--line);font-size:14px!important;color:var(--c-faint)!important;line-height:1.9!important}
.c-note svg{width:18px;height:18px;flex:none;margin-top:5px;stroke:var(--tq-ink);fill:none;stroke-width:1.8;stroke-linecap:round}

/* figures */
.c-figs{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,22px)}
.fig{margin:0;display:flex;flex-direction:column;min-width:0}
.zoom{position:relative;display:block;flex:1;border-radius:16px;overflow:hidden;border:1px solid var(--glass-line);background:var(--panel-2);box-shadow:var(--shadow);cursor:zoom-in}
.zoom img{width:100%;height:auto;transition:transform .8s var(--ease)}
.zoom:hover img{transform:scale(1.02)}
.zoom-i{position:absolute;inset-block-start:12px;inset-inline-end:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(4,17,21,.72);border:1px solid rgba(255,255,255,.16);opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s}
.zoom-i svg{width:16px;height:16px;stroke:#eaf5f8;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zoom:hover .zoom-i,.zoom:focus-visible .zoom-i{opacity:1;transform:none}
@media (hover:none){.zoom-i{opacity:.85;transform:none}}
.fig figcaption,.m-fig figcaption{margin-top:10px;color:var(--c-faint);font-size:14px;line-height:1.9}
.fig.is-t .zoom{max-width:380px;margin-inline:auto;width:100%}
.fig.is-t figcaption{text-align:center}

/* official brand assets (VALORREX): always on the brand's black */
.fig--brand .brand-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,6vw,96px);padding:clamp(34px,6vw,72px) 24px;border-radius:16px;background:#070707;border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.fig--brand .ba-0{height:clamp(30px,4.4vw,56px);width:auto}
.fig--brand .ba-1{height:clamp(46px,6.4vw,84px);width:auto}

/* badge band */
.c-badge-band{display:flex;align-items:center;gap:18px;margin-block:clamp(10px,2vw,24px);padding-block:22px;border-block:1px solid var(--line)}
.c-badge-ico{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:16px;background:var(--tq-soft);border:1px solid rgba(27,164,169,.45)}
.c-badge-ico svg{width:30px;height:30px;stroke:var(--tq-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c-badge-band h2{font-size:clamp(20px,2.2vw,26px)}
.c-badge-band p{margin:4px 0 0;color:var(--mute);font-size:15.5px;line-height:1.9}

/* section heads */
.c-sec-head{margin-bottom:clamp(22px,3vw,38px)}
.c-sec-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.38}
.c-sec-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.c-sec-head .more{color:var(--tq-ink);font-weight:700;font-size:15px}

/* AI / team */
.c-ai{padding:clamp(56px,8vw,110px) 0;--ax:10%;--ay:30%;--bx:90%;--by:80%;--mx:auto;--my:auto}
.c-split{display:grid;gap:16px}
.c-card{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);padding:clamp(22px,3vw,34px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);--cx:50%;--cy:50%;transition:border-color .3s}
.c-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(380px circle at var(--cx) var(--cy),rgba(27,164,169,.14),transparent 45%);opacity:0;transition:opacity .3s}
.c-card:hover{border-color:rgba(27,164,169,.5)}
.c-card:hover::before{opacity:1}
.c-card-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:var(--tq-soft);margin-bottom:18px}
.c-card-ico svg{width:26px;height:26px;stroke:var(--tq-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c-card--team .c-card-ico{background:var(--glass-2);border:1px solid var(--line)}
.c-card--team .c-card-ico svg{stroke:var(--ink)}
.c-card h3{font-size:clamp(19px,1.8vw,23px);line-height:1.45}
.c-card p{position:relative;margin:10px 0 0;color:var(--mute);font-size:16px;line-height:1.95}

/* more gallery */
.c-more{padding:clamp(40px,6vw,90px) 0}
.c-more-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
.m-fig{margin:0;min-width:0}
.m-fig .zoom{aspect-ratio:3/2}
.m-fig .zoom img{height:100%;object-fit:cover}
.c-more-grid--1{max-width:960px}
.c-more-grid--1 .m-fig .zoom{aspect-ratio:auto}

/* FAQ */
.c-faq{padding:clamp(56px,8vw,104px) 0}
.c-faq-in{display:grid;gap:10px 60px}
.c-q{border-top:1px solid var(--line)}
.c-q:last-child{border-bottom:1px solid var(--line)}
.c-q summary{position:relative;list-style:none;cursor:pointer;padding:20px 0;padding-inline-end:44px;font-size:clamp(17px,1.5vw,19px);font-weight:700;line-height:1.7}
.c-q summary::-webkit-details-marker{display:none}
.c-q summary::after{content:"";position:absolute;inset-inline-end:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--tq-ink),var(--tq-ink)) center/14px 2px no-repeat,linear-gradient(var(--tq-ink),var(--tq-ink)) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.c-q[open] summary::after{transform:rotate(45deg)}
.c-q summary:hover{color:var(--tq-ink)}
.c-q p{margin:0 0 22px;color:var(--mute);font-size:16px;line-height:1.95;max-width:70ch}

/* related + works grid (shared card) */
.c-related{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--line)}
.w-grid{--wg:clamp(16px,2vw,26px);display:grid;gap:var(--wg)}
.w-card{display:flex;flex-direction:column;text-decoration:none}
.w-card .card-media{aspect-ratio:16/10;background:linear-gradient(140deg,#0b242b,#041115)}
.w-card .card-media img{object-position:50% 30%}
.w-card .card-body{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.w-card h2,.w-card h3{font-size:clamp(18px,1.6vw,21px)}
/* no line clamp: the result line is the card's point, and English runs longer than Arabic (it was cut with «…») */
.w-card .card-more{margin-top:auto;padding-top:14px}

/* ---------- works index «أعمالنا» ---------- */
.w-hero{padding-bottom:clamp(30px,4vw,52px)}
.w-hero-in{display:grid;gap:12px clamp(32px,6vw,96px)}
.w-hero .kicker{margin-bottom:6px}
.w-hero h1{font-size:clamp(52px,8.6vw,124px);line-height:1.3;max-width:none;white-space:nowrap}
.w-hero h1::after{content:".";color:var(--tq)}
.w-lead{margin:0;color:var(--mute);font-size:clamp(17px,1.6vw,20px);line-height:1.9;max-width:50ch}
.w-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:18px 0 0;color:var(--c-faint);font-size:14.5px;line-height:1.9}
.w-count b{color:var(--tq-ink);font-size:30px;line-height:1}
.w-count span{text-wrap:balance}

.w-all{padding:clamp(6px,1.5vw,16px) 0 clamp(60px,8vw,110px)}
.w-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-block:18px;margin-bottom:clamp(22px,3vw,36px);border-block:1px solid var(--line)}
.w-bar-title{font-size:clamp(20px,2vw,24px)}
.w-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.w-chip{-webkit-appearance:none;appearance:none;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:42px;margin:0;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:var(--glass-2);color:var(--mute);font-size:15px;font-weight:700;line-height:1.7;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.w-chip b{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--tq-soft);color:var(--tq-ink);font-size:12.5px;line-height:1}
.w-chip:hover{border-color:var(--tq);color:var(--ink)}
.w-chip[aria-pressed="true"]{background:var(--tq);border-color:var(--tq);color:#041115}
.w-chip[aria-pressed="true"] b{background:rgba(4,17,21,.16);color:#041115}
.w-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.w-item[hidden]{display:none!important}
.w-set[data-filter="all"] .w-dup,.w-set:not([data-filter="all"]) .w-spot{display:none}
.w-item.is-in,.w-spot-item.is-in{animation:wIn .5s var(--ease) both}
@keyframes wIn{from{opacity:0;transform:translateY(12px)}}

/* featured panels */
.w-spot{display:grid;gap:clamp(16px,2vw,26px);margin-bottom:clamp(16px,2vw,26px)}
.w-spot-item{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s}
.w-spot-item:hover{border-color:rgba(27,164,169,.55)}
.w-spot-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,#0b242b,#041115)}
.w-spot-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.w-spot-item:hover .w-spot-media img{transform:scale(1.025)}
.w-spot-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.8vw,40px)}
.w-spot-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.w-spot-top .chip{margin:0}
.w-flag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);padding:4px 11px;border-radius:999px;border:1px solid rgba(27,164,169,.55);line-height:1.7}
.w-flag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tq);box-shadow:0 0 10px rgba(27,164,169,.9)}
.w-spot-body h3{font-size:clamp(23px,2.2vw,31px);line-height:1.45}
.w-spot-body h3 a{color:inherit;text-decoration:none;transition:color .2s}
.w-spot-body h3 a:hover{color:var(--tq-ink)}
.w-spot-desc{margin:14px 0 0;color:var(--ink);font-size:clamp(16.5px,1.35vw,18px);line-height:1.95;max-width:52ch}
.w-spot-result{position:relative;margin:12px 0 0;padding-inline-start:16px;color:var(--mute);font-size:15.5px;line-height:1.9;max-width:52ch}
.w-spot-result::before{content:"";position:absolute;inset-inline-start:0;top:.45em;bottom:.45em;width:3px;border-radius:2px;background:var(--tq)}
.w-spot-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.w-spot-tags li{border:1px solid var(--line);background:var(--glass-2);border-radius:999px;padding:3px 13px;font-size:13.5px;color:var(--mute);line-height:1.8}
.w-spot-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:26px}

/* CTA band */
.c-cta{padding:clamp(40px,6vw,80px) 0 clamp(70px,9vw,120px);--ax:20%;--ay:50%;--bx:85%;--by:40%;--mx:6%;--my:-10%}
.c-cta-in{position:relative;overflow:hidden;padding:clamp(24px,5vw,64px);border-radius:28px;background:linear-gradient(140deg,var(--glass),var(--glass-2));box-shadow:0 0 0 1px var(--glass-line),var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.c-cta-in::before{content:"";position:absolute;inset:auto 10% -1px;height:1px;background:linear-gradient(90deg,transparent,var(--tq),transparent);box-shadow:0 0 28px rgba(27,164,169,.7)}
.c-cta h2{font-size:clamp(30px,4.4vw,60px);line-height:1.38}
.c-cta-in>p:not(.kicker){margin:16px 0 0;color:var(--mute);max-width:52ch;font-size:17px;line-height:1.9}
.c-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- lightbox (built by case.js) ---------- */
.lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(2,8,10,.985);color:#eaf5f8;overflow:hidden}
.lb::backdrop{background:rgba(2,8,10,.9)}
.lb[open]{display:grid;grid-template-rows:1fr auto;place-items:center}
.lb-stage{display:grid;place-items:center;width:100%;height:100%;padding:64px 16px 8px;min-height:0}
.lb-stage img{max-width:min(94vw,1600px);max-height:calc(100dvh - 160px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lb-cap{margin:0;padding:10px 20px 22px;max-width:80ch;text-align:center;color:rgba(234,245,248,.78);font-size:14.5px;line-height:1.85}
.lb-btn{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(4,17,21,.7);color:#eaf5f8;font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.lb-btn:hover{border-color:var(--tq);color:var(--tq-hi)}
.lb-close{top:14px;inset-inline-end:14px}
.lb-prev,.lb-next{top:50%;margin-top:-23px}
.lb-prev{inset-inline-start:14px}
.lb-next{inset-inline-end:14px}
/* the counter is dir=ltr (so «1 / 7» reads right), which made inset-inline-start resolve to the left and put it
   under the RTL close button: place it physically, on the side opposite the close button */
.lb-count{position:absolute;top:24px;left:22px;font-size:13px;color:rgba(234,245,248,.6)}
html[dir="rtl"] .lb-count{left:auto;right:22px}
.lb-open{overflow:hidden}

/* ---------- tablet+ ---------- */
@media (min-width:600px){
  .w-grid--idx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1000px){
  .w-filter{display:flex;flex-wrap:wrap;width:auto}
}
@media (min-width:640px){
  .c-live{width:auto;margin-top:0;margin-inline-start:auto}
  .c-more-grid--2,.c-more-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-split{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .c-sum-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
  .c-copy{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
  .c-figs{grid-template-columns:repeat(12,minmax(0,1fr))}
  .sp-3{grid-column:span 3}.sp-4{grid-column:span 4}.sp-5{grid-column:span 5}.sp-6{grid-column:span 6}
  .sp-7{grid-column:span 7}.sp-8{grid-column:span 8}.sp-12{grid-column:span 12}
  .fig.is-t.sp-5:only-child{grid-column:4 / span 6}
  .fig.is-s.sp-8:only-child{grid-column:3 / span 8}
  .fig--fill .zoom{min-height:260px}
  .fig--fill .zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .fig--fill.is-t .zoom{max-width:none}
  .fig--fill.is-t figcaption{text-align:start}
  .c-story--side .c-story-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center}
  .c-story--side .c-copy{display:block;margin-bottom:0}
  .c-story--side .c-figs{grid-template-columns:minmax(0,1fr)}
  .c-story--side .c-title{margin-bottom:18px}
  .c-story--side.c-story--w .c-story-in{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .c-story--side.c-story--s .c-story-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .c-story--flip .c-figs{order:-1}
  .c-more-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .w-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-faq-in{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}
  .w-hero-in{grid-template-columns:auto minmax(0,1fr);align-items:end}
  .w-hero-aside{padding-bottom:clamp(8px,1.6vw,26px)}
}
@media (min-width:860px){
  .w-spot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1180px){
  .w-grid--idx{grid-template-columns:repeat(4,minmax(0,1fr))}
  .w-grid--idx .card-body{padding:16px 18px 20px}
  .w-grid--idx .w-card h3{font-size:18.5px}
}
/* filtered results (2026-10-19): small sets sat in the start half of the grid («هويات»: 2 cards, half a row empty;
   «منصات»: 4 + 1). With a filter on, the cards flow in centred rows, and case.js sets data-n (the number shown)
   so 3, 5 and 6 results use three columns (3 / 3+2 / 3+3) and 2 results sit side by side in the middle. */
@media (min-width:600px){
  .w-set:not([data-filter="all"]) .w-grid--idx{--cols:2;display:flex;flex-wrap:wrap;justify-content:center}
  .w-set:not([data-filter="all"]) .w-grid--idx>.w-card{width:calc((100% - (var(--cols) - 1) * var(--wg)) / var(--cols))}
}
@media (min-width:1000px){
  .w-set:is([data-n="3"],[data-n="5"],[data-n="6"]):not([data-filter="all"]) .w-grid--idx{--cols:3}
}
@media (min-width:1180px){
  .w-set:not([data-filter="all"]) .w-grid--idx{--cols:4}
  .w-set:is([data-n="1"],[data-n="2"],[data-n="3"],[data-n="5"],[data-n="6"]):not([data-filter="all"]) .w-grid--idx{--cols:3}
}
@media (max-width:899px){
  .c-figs .fig+.fig{margin-top:6px}
  .fig.is-t .zoom{max-width:320px}
}
@media (max-width:760px){
  .c-facts>div{grid-template-columns:96px 1fr}
  .c-key img{max-height:none}
  .lb-prev,.lb-next{top:auto;bottom:16px;margin-top:0}
  .lb-stage{padding-bottom:8px}
  .lb-cap{padding:8px 72px 28px;font-size:13.5px;min-height:92px}
}
@media (max-width:599px){
  .w-bar{align-items:flex-start}
  .w-chip{min-height:42px;font-size:14.5px;padding-inline:10px}
  .w-spot-actions .btn{flex:1 1 auto}
}
/* the narrowest phones: «Websites & stores 7» (EN) was 8px wider than its pill at 320 */
@media (max-width:359px){
  .w-chip{padding-inline:8px;gap:6px;font-size:14px}
  .w-chip b{min-width:22px;padding:0 5px}
}
@media (prefers-reduced-motion:reduce){
  .zoom img,.c-q summary::after,.w-spot-media img{transition:none}
  .w-item.is-in,.w-spot-item.is-in{animation:none}
}