/* Ahmed Kadry – Case Studies — frontend */
.ak-cs,.ak-cs-modal{--navy:#0F2A53;--grey:#C3C3C7;--beige:#EDE7E0;--taupe:#A29386;--tpd:#7A6C60;--char:#313236;--paper:#F5F2EE}
html[lang^="en"] .ak-cs-ar{display:none!important}
html:not([lang^="en"]) .ak-cs-en{display:none!important}

.ak-cs{font-family:'Cairo','IBM Plex Sans',sans-serif;color:var(--char);overflow-x:clip;overflow-y:visible;background:var(--paper)}
.ak-cs--beige{background:var(--beige)}
.ak-cs *,.ak-cs-modal *{box-sizing:border-box;}
.ak-cs__in,.ak-cs__card,.ak-cs-pop,.ak-cs-rich,.ak-cs__short{overflow-wrap:anywhere;word-break:break-word}
.ak-cs__grid,.ak-cs-metrics{min-width:0}
.ak-cs__in{max-width:1280px;margin:auto;padding:clamp(56px,9vw,110px) 24px}
.ak-cs__eb{display:flex;align-items:center;gap:14px;color:var(--tpd);font:500 .8rem 'IBM Plex Sans',monospace;letter-spacing:.22em;margin-bottom:18px}
.ak-cs__eb::after{content:"";width:56px;height:1.5px;background:var(--taupe)}
.ak-cs__h{margin:0;font-weight:800;font-size:clamp(2rem,4.8vw,3.8rem);line-height:1.35;color:var(--navy)}
.ak-cs__hl{color:var(--tpd)}
.ak-cs__sub{margin:16px 0 0;max-width:760px;line-height:2;font-size:clamp(1rem,1.5vw,1.15rem);opacity:.78}
/* slider: سكرول عرضي — 3 كروت ديسكتوب / 2 تابلت / 1 موبايل */
.ak-cs__slider{margin-top:clamp(32px,5vw,64px)}
.ak-cs__grid{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 4px 12px;overscroll-behavior-x:contain}
.ak-cs__grid::-webkit-scrollbar{display:none}
.ak-cs__grid > .ak-cs__card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;scroll-snap-stop:always}
.ak-cs__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.ak-cs__nav[hidden]{display:none}
.ak-cs__arrow{width:48px;height:48px;flex:none;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,opacity .25s}
.ak-cs__arrow:hover{background:var(--navy);color:var(--beige)}
.ak-cs__arrow:disabled{opacity:.3;cursor:default;background:transparent;color:var(--navy)}
.ak-cs__arrow svg{width:20px;height:20px}
[dir=rtl] .ak-cs__arrow svg{transform:scaleX(-1)}
.ak-cs__dots{display:flex;align-items:center;gap:8px}
.ak-cs__dot{width:10px;height:10px;border-radius:999px;border:0;padding:0;background:var(--grey);cursor:pointer;transition:width .25s,background .25s}
.ak-cs__dot.is-on{width:28px;background:var(--navy)}

/* card — دوران من الإعدادات، الصورة عرض كامل، البادينج للنص فقط */
.ak-cs__card{position:relative;display:flex;flex-direction:column;gap:0;border-radius:var(--akcs-card-radius-d-tl,32px) var(--akcs-card-radius-d-tr,32px) var(--akcs-card-radius-d-br,32px) var(--akcs-card-radius-d-bl,32px);background:var(--akcs-cbg,#fff);border:1px solid rgba(195,195,199,.7);opacity:0;
  transition:box-shadow .35s,border-color .35s,transform .4s cubic-bezier(.2,.8,.2,1);overflow-x:clip;min-width:0}
.ak-cs__card:hover{transform:rotate(var(--akcs-card-rot-d,0deg));box-shadow:0 28px 56px rgba(15,42,83,.14)}
.ak-cs.is-in .ak-cs__card{animation:ak-cs-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.1s)}
@keyframes ak-cs-in{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}

.ak-cs__img{position:relative;overflow:hidden;border-radius:var(--akcs-img-radius-d-tl,0) var(--akcs-img-radius-d-tr,0) var(--akcs-img-radius-d-br,0) var(--akcs-img-radius-d-bl,0);width:100%;border:var(--akcs-img-border-w,0) solid var(--akcs-img-border-c,#000)}
.ak-cs__img-fade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,var(--paper) 100%);
}
.ak-cs__img img{width:100%;height:var(--akcs-img-height-d,auto);object-fit:contain;display:block;border-radius:inherit;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ak-cs__card:hover .ak-cs__img img{transform:rotate(var(--akcs-img-rot-d,0deg))}

/* المحتوى اللي تحت الصورة ياخذ البادينج الطبيعي */
.ak-cs__content{display:flex;flex-direction:column;gap:var(--akcs-card-gap-d,18px);padding:var(--akcs-card-pad-d,30px)}
.ak-cs__pill{align-self:flex-start;display:inline-block;padding:7px 18px;border-radius:999px;background:rgba(195,195,199,.45);color:var(--akcs-cp-c,#313236);font-size:var(--akcs-cp-d,14px);line-height:1.4}
.ak-cs__name{margin:0;font-weight:800;font-size:var(--akcs-cn-d,30px);line-height:1.3;color:var(--akcs-cn-c,#0F2A53)}
.ak-cs__short{margin:0;font-weight:400;font-size:var(--akcs-cs-d,16px);color:var(--akcs-cs-c,#313236);opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.ak-cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ak-cs-m{padding:12px 6px;border-radius:22px;background:rgba(195,195,199,.32);text-align:center}
.ak-cs-m small{display:block;color:var(--char);opacity:.7;font:400 .78rem 'IBM Plex Sans','Cairo',sans-serif;line-height:1.4;min-height:2.2em}
.ak-cs-m__v{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:4px;font:600 clamp(.95rem,1.4vw,1.15rem) 'IBM Plex Sans',sans-serif;white-space:nowrap}
.ak-cs-m__v .b{color:var(--navy)}
.ak-cs-m__v .a{color:var(--tpd);font-weight:700}
.ak-cs-arr{width:14px;height:14px;color:var(--tpd);flex:none}
[dir=rtl] .ak-cs-arr{transform:none}

.ak-cs__more{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;padding:13px 26px;border:0;background:var(--akcs-cta-bg,#0F2A53);color:var(--akcs-cta-c,#EDE7E0);font:800 var(--akcs-cta-d,18px) 'Cairo',sans-serif;border-radius:var(--akcs-cta-r,999px);cursor:pointer;text-decoration:none;transition:filter .25s}
.ak-cs__more:hover{filter:brightness(1.08)}
.ak-cs__more svg{width:20px;height:20px;transition:translate .25s}
[dir=rtl] .ak-cs__more svg{transform:scaleX(-1)}
.ak-cs__more:hover svg{translate:6px 0}
[dir=rtl] .ak-cs__more:hover svg{translate:-6px 0}
.ak-cs__more:focus-visible{outline:none}
.ak-cs__card:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(162,147,134,.5)}

/* modal */
.ak-cs-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Cairo','IBM Plex Sans',sans-serif;color:var(--char);overflow-x:hidden;overflow-y:auto}
.ak-cs-modal[hidden]{display:none}
.ak-cs-modal__bg{position:fixed;inset:0;background:rgba(7,15,34,.66);opacity:0;transition:opacity .3s}
/* ملحوظة: شلنا backdrop-filter:blur — كان بيجبر المتصفح يعيد رسم الشاشة كلها كل فريم وبيعلق الأجهزة الضعيفة */
.ak-cs-modal.is-open .ak-cs-modal__bg{opacity:1}
.ak-cs-modal__box{position:relative;width:min(900px,100%);max-height:min(90vh,100%);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border-radius:clamp(26px,3vw,40px);background:var(--paper);box-shadow:0 40px 90px rgba(0,0,0,.4);
  padding:var(--akcs-pad-d-t,48px) var(--akcs-pad-d-r,48px) var(--akcs-pad-d-b,48px) var(--akcs-pad-d-l,48px);opacity:0;transform:translateY(30px) scale(.97);transition:opacity .35s,transform .4s cubic-bezier(.2,.8,.2,1);outline:none}
.ak-cs-modal.is-open .ak-cs-modal__box{opacity:1;transform:none}
.ak-cs-modal__x{position:sticky;top:0;float:inline-end;margin:-8px -8px 0 0;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--navy);background:var(--paper);color:var(--navy);display:grid;place-items:center;cursor:pointer;z-index:2;transition:background .25s,color .25s,transform .35s}
[dir=rtl] .ak-cs-modal__x{margin:-8px 0 0 -8px}
.ak-cs-modal__x:hover{background:var(--navy);color:var(--beige);transform:rotate(90deg)}
.ak-cs-modal__x svg{width:20px;height:20px}
.ak-cs-modal__box{background:var(--akcs-pbg,var(--paper))}
/* تصفير هوامش المحتوى فقط — البوكس نفسه خارج الاستهداف عشان البادينج المتحكم فيه من الإعدادات يشتغل.
   القاعدة القديمة (.ak-cs-modal *{margin:0;padding:0}) كانت بنفس التحديدية لكن لاحقة في الملف فكانت بتمسح بادينج البوكس */
.ak-cs-modal__body :is(h1,h2,h3,h4,p,ul,ol,figure){margin:0 0 10px;padding:0}
.ak-cs-modal__body :is(ul,ol){padding-inline-start:22px}
.ak-cs-modal__body > :last-child{margin-bottom:0}
.ak-cs-pop{display:flex;flex-direction:column;gap:20px;clear:both;min-width:0}
.ak-cs-pop__t{font-weight:800;font-size:var(--akcs-pt-d,40px);line-height:1.3;color:var(--akcs-pt-c,#0F2A53);overflow-wrap:anywhere}
.ak-cs-pop__d{line-height:2;opacity:.85;font-size:var(--akcs-pd-d,17px);color:var(--akcs-pd-c,#313236);overflow-wrap:anywhere}
.ak-cs-modal .ak-cs__pill{align-self:flex-start;display:inline-block;padding:7px 18px;border-radius:999px;background:rgba(195,195,199,.5);font-size:.88rem}
.ak-cs-metrics.is-big{gap:14px}
.ak-cs-metrics.is-big .ak-cs-m{padding:18px 10px;background:#fff;border:1px solid rgba(195,195,199,.7)}
.ak-cs-metrics.is-big .ak-cs-m__v{font-size:clamp(1.25rem,2.6vw,1.9rem)}
.ak-cs-modal .ak-cs-m small{color:var(--char);opacity:.7;font:400 .82rem 'IBM Plex Sans','Cairo',sans-serif;display:block;text-align:center}
.ak-cs-modal .ak-cs-m{border-radius:22px;text-align:center}
.ak-cs-modal .ak-cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ak-cs-modal .ak-cs-m__v{display:flex;justify-content:center;align-items:center;gap:8px;font-family:'IBM Plex Sans',sans-serif;font-weight:600;white-space:nowrap}
.ak-cs-modal .ak-cs-m__v .b{color:var(--navy)}.ak-cs-modal .ak-cs-m__v .a{color:var(--tpd);font-weight:700}
.ak-cs-modal .ak-cs-arr{width:16px;height:16px;color:var(--tpd)}
.ak-cs-sec{padding-top:20px;border-top:1px solid rgba(195,195,199,.7);min-width:0}
.ak-cs-sec h4{margin-bottom:10px;font-weight:800;font-size:var(--akcs-ph-d,19px);color:var(--akcs-ph-c,#0F2A53);display:flex;align-items:center;gap:10px}
.ak-cs-sec h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--taupe)}
.ak-cs-rich p{line-height:2;margin-bottom:10px;opacity:.85}
.ak-cs-rich ul,.ak-cs-rich ol{padding-inline-start:22px;margin-bottom:10px;line-height:2}
.ak-cs-list{list-style:none;display:grid;gap:10px}
.ak-cs-list li{position:relative;padding-inline-start:30px;line-height:1.9;opacity:.88}
.ak-cs-list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:16px;height:16px;border-radius:50%;background:var(--taupe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.ak-cs-meta{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.ak-cs-meta__i{padding:16px 18px;border-radius:22px;background:rgba(195,195,199,.35)}
.ak-cs-meta__i small{display:block;margin-bottom:6px;color:var(--tpd);font:500 .78rem 'IBM Plex Sans','Cairo',sans-serif}
.ak-cs-meta__i strong{color:var(--navy);font-size:1.05rem}
.ak-cs-tags{display:flex;flex-wrap:wrap;gap:8px}
.ak-cs-tag{padding:5px 14px;border-radius:999px;background:var(--navy);color:var(--beige);font-size:.85rem}
.ak-cs-pop__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.ak-cs-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:var(--akcs-cta-r,999px);font-weight:800;text-decoration:none;font-size:var(--akcs-cta-d,18px);transition:transform .25s,background .25s,filter .25s}
.ak-cs-btn--p{background:var(--akcs-cta-bg,#0F2A53);color:var(--akcs-cta-c,#EDE7E0)}
.ak-cs-btn--g{border:1.5px solid var(--navy);color:var(--navy)}
.ak-cs-btn:hover{transform:translateY(-3px)}
.ak-cs-btn--g:hover{background:var(--navy);color:var(--beige)}
html.ak-cs-lock,html.ak-cs-lock body{overflow:hidden}

@media (max-width:1100px){.ak-cs__grid{gap:16px}.ak-cs__grid > .ak-cs__card{flex-basis:calc((100% - 16px)/2)}}
@media (max-width:700px){
  .ak-cs__in{padding-inline:16px}
  .ak-cs__grid{gap:16px}
  .ak-cs__grid > .ak-cs__card{flex-basis:100%}
  .ak-cs__pill{font-size:var(--akcs-cp-m,13px)}
  .ak-cs__name{font-size:var(--akcs-cn-m,22px)}
  .ak-cs__short{font-size:var(--akcs-cs-m,15px)}
  .ak-cs__more{font-size:var(--akcs-cta-m,16px);width:100%}
  /* البوب أب fullscreen على الموبايل فقط + سكرول طولي فقط */
  .ak-cs-modal{align-items:stretch;justify-content:stretch;padding:8px;overflow-x:hidden;overflow-y:auto}
  .ak-cs-modal__box{width:100%;height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);min-height:0;border-radius:20px;transform:translateY(60px);opacity:0;
    padding:var(--akcs-pad-m-t,20px) var(--akcs-pad-m-r,18px) var(--akcs-pad-m-b,20px) var(--akcs-pad-m-l,18px)}
  .ak-cs-modal.is-open .ak-cs-modal__box{transform:none;opacity:1}
  .ak-cs-pop__t{font-size:var(--akcs-pt-m,27px)}
  .ak-cs-pop__d{font-size:var(--akcs-pd-m,16px)}
  .ak-cs-sec h4{font-size:var(--akcs-ph-m,18px)}
  .ak-cs-btn{font-size:var(--akcs-cta-m,16px)}
  .ak-cs-modal .ak-cs-metrics{grid-template-columns:1fr}
  .ak-cs-modal .ak-cs-metrics .ak-cs-m{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
  .ak-cs-modal .ak-cs-m small{min-height:0;text-align:start}
  .ak-cs-meta{grid-template-columns:1fr}
  .ak-cs-btn{width:100%}
  /* قيم الموبايل للدوران والبادينج والاستدارة */
  .ak-cs__card:hover{transform:rotate(var(--akcs-card-rot-m,0deg))}
  .ak-cs__card:hover .ak-cs__img img{transform:rotate(var(--akcs-img-rot-m,0deg))}
  .ak-cs__card{border-radius:var(--akcs-card-radius-m-tl,24px) var(--akcs-card-radius-m-tr,24px) var(--akcs-card-radius-m-br,24px) var(--akcs-card-radius-m-bl,24px)}
  .ak-cs__img{border-radius:var(--akcs-img-radius-m-tl,0) var(--akcs-img-radius-m-tr,0) var(--akcs-img-radius-m-br,0) var(--akcs-img-radius-m-bl,0)}
  .ak-cs__content{padding:var(--akcs-card-pad-m,20px);gap:var(--akcs-card-gap-m,14px)}
  .ak-cs__img img{height:var(--akcs-img-height-m,auto)}
}
@media (max-width:420px){.ak-cs-metrics{grid-template-columns:1fr}.ak-cs-m{display:flex;justify-content:space-between;align-items:center;padding:12px 18px}.ak-cs-m small{min-height:0}}
@media (prefers-reduced-motion:reduce){.ak-cs *,.ak-cs-modal *{animation:none!important;transition:none!important}.ak-cs__card{opacity:1}.ak-cs-modal__box,.ak-cs-modal__bg{opacity:1;transform:none}}