/* «قصص النجاح» (tools/case-studies-spec.md §5): the case page /work/<slug>/ and the /work/ cards. Linked only on those pages
   (site.css and its version stay as they are). Same tokens and dark navy cards as the home section «نتائج نفخر بها». */

/* ---------- the title area: the client's logo on a light tile (dark and transparent logos stay readable) ---------- */
.case-logo{display:inline-flex;align-items:center;justify-content:center;min-height:76px;padding:12px 20px;margin:0 0 22px;border-radius:20px;background:#fff;box-shadow:0 18px 40px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(14,22,51,.06)}
.case-logo img{width:auto;height:auto;max-width:min(220px,60vw);max-height:56px}
.case-hero h1{max-width:24ch}
/* a long word with no spaces (a link, an English name) wraps instead of being cut at the edge on phones */
.case-hero h1,.case-sum p,.case-card,.case-quote,.prose a{overflow-wrap:anywhere}

/* ---------- «باختصار» + the facts box + the results ---------- */
.case-top{padding:0 0 clamp(26px,4vw,46px)}
.case-sum{position:relative;max-width:920px;padding:22px clamp(18px,3vw,30px);border-radius:22px;background:rgba(22,33,74,.78);border:1px solid var(--line);border-inline-start:4px solid var(--c,var(--cyan))}
.case-sum .k,.case-res .k{margin:0 0 6px;font-family:"JetBrains Mono","Tajawal",ui-monospace,monospace;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--c,var(--cyan))}
.case-sum p{margin:0;font-size:clamp(1.06rem,1.45vw,1.24rem);line-height:1.95}
.case-sum p strong{color:var(--text-primary)}
.case-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,3vw,34px);align-items:start;margin-top:18px;padding:clamp(20px,3vw,32px);border-radius:26px;background:linear-gradient(165deg,#233f8c 0%,#16214a 70%);border:1px solid rgba(76,196,212,.3)}
.case-box:not(:has(.case-facts)),.case-box:not(:has(.case-res)){grid-template-columns:1fr}
.case-facts{margin:0;display:grid;gap:0}
.case-facts>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.case-facts>div:first-child{padding-top:0}
.case-facts>div:last-child{border-bottom:0;padding-bottom:0}
.case-facts dt{font-size:14px;font-weight:700;color:var(--text-secondary)}
.case-facts dd{margin:0;font-size:17px;line-height:1.7;overflow-wrap:anywhere}
.case-facts dd a{color:var(--text-primary);text-decoration-color:var(--c,var(--accent));text-decoration-thickness:2px;text-underline-offset:4px}
.case-facts dd a:hover{color:var(--c,var(--accent))}
.case-mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:10px}
.case-met{padding:16px 12px;border-radius:16px;background:rgba(8,12,34,.35);border:1px solid var(--line);text-align:center}
.case-met b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.1;color:var(--c,var(--cyan));unicode-bidi:isolate;overflow-wrap:anywhere}
.case-met span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--text-secondary)}
@media (max-width:820px){.case-box{grid-template-columns:1fr}}
@media (max-width:420px){.case-facts>div{grid-template-columns:72px minmax(0,1fr);gap:10px}.case-facts dd{font-size:16px}.case-mets{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- the story: screenshots, the gallery, the client's words ---------- */
.prose .fig img{box-shadow:0 22px 50px -30px rgba(0,0,0,.9)}
.prose .blk.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.prose .blk.gallery .fig{margin:0}
@media (max-width:560px){.prose .blk.gallery{grid-template-columns:1fr}}
.case-quote{position:relative;margin:2.2em 0;padding:clamp(22px,3vw,32px);padding-inline-start:clamp(26px,4vw,40px);border-radius:24px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.case-quote::before{content:"”";position:absolute;inset-inline-end:18px;top:-18px;font-family:var(--f-display);font-size:9rem;line-height:1;color:var(--c,var(--cyan));opacity:.22;pointer-events:none}
.case-quote blockquote{margin:0;border:0;padding:0}
.case-quote blockquote p{margin:0;font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.9;color:var(--text-primary)}
.case-quote figcaption{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:15px;color:var(--text-secondary)}
.case-quote figcaption b{color:var(--text-primary);font-size:16px}
.case-empty{color:var(--text-secondary)}

/* ---------- /work/: a card per case ---------- */
.case-list{padding-top:0}
.case-list .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.case-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,36px);border-radius:26px;background:var(--panel);border:1px solid var(--line);transition:transform .5s var(--ease-out),border-color .4s var(--ease-out)}
.case-card.first{background:linear-gradient(165deg,#233f8c 0%,#16214a 70%);border-color:rgba(76,196,212,.3)}
.case-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.case-card:focus-within{border-color:var(--c)}
.case-card .top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:30px}
.case-card .cat{font-size:14px;font-weight:700;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.case-card .lg{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:7px 14px;border-radius:14px;background:#fff}
.case-card .lg img{width:auto;height:auto;max-height:36px;max-width:140px}
.case-card h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.35;text-wrap:balance}
.case-card h2 a{color:var(--text-primary);text-decoration:none}
.case-card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
.case-card h2 a:focus-visible{outline:none}
.case-card h2 a:focus-visible::after{outline:3px solid var(--accent);outline-offset:3px}
.case-card .meta{margin:0;font-size:15px;line-height:1.75;color:var(--text-secondary)}
.case-card .meta b{color:var(--text-primary);font-weight:700}
.case-card .meta a{position:relative;z-index:1;color:inherit;text-decoration-color:var(--c)}
.case-card .d{margin:0;font-size:17px;line-height:1.85;color:var(--text-secondary)}
.case-card .d strong{color:var(--text-primary)}
.case-card .case-mets{margin-top:auto;grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr))}
.case-card .case-met{padding:12px 10px}
.case-card .case-met b{font-size:clamp(1.55rem,2.4vw,2rem);color:var(--c)}
.case-card .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--c)}
.case-card .go svg{width:18px;height:18px}
@media (max-width:860px){.case-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.case-card{transition:none}.case-card:hover{transform:none}}