/* ============================================================
   responsive.css — طبقة التجاوب الموحدة الاحترافية
   تغطي: كل الهواتف (صغير/كبير/نوتش) + التابلت + اللابتوب +
   الشاشات الكبيرة + الأجهزة القابلة للطي + الوضع الأفقي
   تُحمَّل AFTER كل ملفات style.css (الأساسي + الثيمات الستة)
   RTL-first — تعمل مع .nav القديم ومع .site-header للثيمات
   ============================================================ */

/* ---------- 0) أساسيات تمنع 99% من مشاكل الموبايل ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  /* احترام النتوء (نوتش) في آيفون والأجهزة الحديثة */
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}
img,video,iframe,svg,canvas{max-width:100%;height:auto}
img,video{object-fit:cover}
/* أي عنصر عريض لا يكسر الشاشة */
section,header,footer,div,main,article,aside{max-width:100vw}
table{max-width:100%}
/* منع التمرير الأفقي من الظلال والعناصر المطلقة */
.hero,.hero-grid,.serv-sec,.why-sec,.site-header,.site-footer{overflow-x:clip}

/* حاويات مرنة لكل الأنظمة (القديم + الثيمات) */
.container{
  width:min(1200px,100% - 2rem);
  margin-inline:auto;
  padding-inline:max(1rem, env(safe-area-inset-right,0));
}

/* ---------- 1) طباعة مرنة Fluid Typography ---------- */
:root{
  --fs-h1:clamp(1.7rem,4.5vw + 1rem,3.4rem);
  --fs-h2:clamp(1.35rem,3vw + .8rem,2.3rem);
  --fs-h3:clamp(1.02rem,1.6vw + .7rem,1.3rem);
  --fs-body:clamp(.92rem,.6vw + .8rem,1.05rem);
  --gap:clamp(.7rem,2vw,1.4rem);
  --pad-sec:clamp(2.2rem,6vw,4.5rem);
}
body{font-size:var(--fs-body)}
h1,.hero h1,.hero-text h1,.page-hero h1{font-size:var(--fs-h1);line-height:1.5;overflow-wrap:break-word;text-wrap:balance}
h2,.sec-head h2,.xhead h2{font-size:var(--fs-h2);line-height:1.6;text-wrap:balance}
h3{font-size:var(--fs-h3)}
p,li,.rich{overflow-wrap:break-word;word-break:break-word}

/* ارتفاع البطل يحترم شريط المتصفح في الجوال */
.hero{min-height:100svh}
@supports (min-height:100dvh){.hero{min-height:92dvh}}

/* ---------- 2) شبكات ذكية تسقط تلقائياً (لا تعتمد على breakpoint واحد) ---------- */
/* الثيمات الستة + التصميم القديم */
.svc-grid,.why-grid,.xgallery,.xtestis,.xpages,
.gallery,.grid,.g2,.g3,.g4,.stats,
.foot-grid,.f-grid,.about-grid,.hero-grid,
.contact-grid,.about,.xblock .grid{
  min-width:0;
}
/* تحويل أي شبكة ثابتة الأعمدة إلى auto-fit عند الشاشات المتوسطة فأصغر */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(3,1fr) !important}
  .why-grid{grid-template-columns:repeat(3,1fr) !important;gap:1.2rem}
  .xgallery,.gallery{grid-template-columns:repeat(3,1fr) !important}
  .xtestis,.xpages{grid-template-columns:repeat(2,1fr) !important}
}

/* ---------- 3) شاشات كبيرة جداً (تلفاز/مونيتور عريض) ---------- */
@media (min-width:1400px){
  .container{width:min(1320px,100% - 3rem)}
  .hero-text h1{font-size:clamp(2.6rem,4vw,4rem)}
  .doc-img{max-width:480px}
  .xgallery,.gallery{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 4) لابتوب صغير / تابلت أفقي (1024 – 1199) ---------- */
@media (max-width:1199px){
  .hero-grid{ gap:1.2rem}
  .doc-img{max-width:380px;height:480px}
  .hero-media{min-height:480px}
  .about-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .about-stats{flex-direction:row;flex-wrap:wrap}
}

/* ---------- 5) تابلت (768 – 1023): القائمة + تكديس البطل ---------- */
@media (max-width:1023px){
  /* قوائم الثيمات الستة تتحول لبرجر */
  .main-links{
    position:absolute;top:calc(100% + 8px);right:1rem;left:1rem;
    background:#fff;flex-direction:column;align-items:stretch;
    padding:1.1rem;border-radius:18px;text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
    display:none;z-index:200;gap:.2rem;max-height:70vh;overflow:auto;
  }
  .main-links a{color:#101828 !important;padding:.75rem .5rem;border-bottom:1px solid #eef0f4;font-size:1rem}
  .main-links a:last-child{border-bottom:none}
  .main-links.open{display:flex}
  .burger{display:flex !important;align-items:center;justify-content:center}

  /* القائمة القديمة (header.php) */
  nav.links{display:none;position:absolute;top:100%;right:0;left:0;background:#0a1628;flex-direction:column;padding:1rem;border-bottom:2px solid #c9a24b;align-items:stretch;text-align:center;z-index:200}
  nav.links.open{display:flex}
  nav.links a{padding:.7rem 0;border-bottom:1px solid #ffffff14;white-space:normal}
  header.nav .burger{display:block}

  .hero-grid{grid-template-columns:1fr !important}
  .hero-text{order:-1;padding-bottom:0}
  .hero-media{min-height:400px}
  .doc-img{height:400px;max-width:340px}
  .hero{padding-top:110px}
  .hero-statue,.hand-note,.why-hand{display:none !important}

  .about-grid{grid-template-columns:1fr !important;text-align:center}
  .about-photo{min-height:300px;max-width:600px;margin:0 auto;width:100%}
  .about-stats{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .foot-grid{grid-template-columns:1fr 1fr !important;gap:1.4rem}

  /* التصميم القديم */
  .about,.contact-grid{grid-template-columns:1fr !important}
  .stats{grid-template-columns:repeat(2,1fr) !important}
  .f-grid{grid-template-columns:1fr 1fr !important}
  .lawyer-card{grid-template-columns:1fr !important}
  .lawyer-photo{min-height:320px}
}

/* ---------- 6) تابلت عمودي / هواتف كبيرة (600 – 767) ---------- */
@media (max-width:767px){
  .container{width:min(100% - 1.5rem,100%)}
  section.block{padding:var(--pad-sec) 0}
  .serv-sec,.xblock{padding:2.4rem 0}
  .hero{padding-top:100px;min-height:88svh}
  .hero-feats{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .feat span:last-child{font-size:.72rem}
  .hero-btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
  .hero-btns .btn-gold,.hero-btns .btn-play{flex:1 1 220px;justify-content:center}

  .svc-grid{grid-template-columns:repeat(2,1fr) !important;gap:.8rem}
  .svc-card{padding:1.1rem .7rem}
  .why-grid{grid-template-columns:repeat(2,1fr) !important}
  .why-item + .why-item{border-inline-start:none}
  .xgallery,.gallery{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
  .xgallery img,.xgallery video,.gallery img,.gallery video{height:150px}
  .xtestis,.xpages{grid-template-columns:1fr !important}
  .foot-grid{grid-template-columns:1fr !important;text-align:center}
  .f-brand .brand-mark{margin:0 auto .5rem}
  .socials{justify-content:center}
  .foot-copy{flex-direction:column;text-align:center;gap:.4rem}
  .f-grid{grid-template-columns:1fr !important;text-align:center}

  /* القديم */
  .g3,.g4,.g2{grid-template-columns:1fr 1fr !important}
  .hero-stats{gap:.6rem}
  .hstat{min-width:130px;padding:.6rem 1rem;flex:1}
  .page-wrap{padding:1.4rem;margin-top:-1.2rem}
  .contact-grid{gap:1rem}
  form.contact,.info-card{padding:1.3rem}
  .video-frame video,.video-frame iframe{min-height:240px}

  /* أزرار عائمة تحترم النوتش */
  .float-wa{bottom:calc(18px + env(safe-area-inset-bottom,0));left:calc(16px + env(safe-area-inset-left,0));width:54px;height:54px;font-size:1.6rem}
  .to-top{bottom:calc(18px + env(safe-area-inset-bottom,0));right:calc(16px + env(safe-area-inset-right,0))}
  .pwa-banner{bottom:calc(82px + env(safe-area-inset-bottom,0));right:.7rem;left:.7rem}
}

/* ---------- 7) هواتف (480 – 599) ---------- */
@media (max-width:599px){
  .header-in{min-height:62px;gap:.6rem}
  .brand-txt b{font-size:.86rem !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
  .brand-txt small{font-size:.64rem !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
  .brand-mark{width:38px !important;height:38px !important}
  .brand-logo{width:38px !important;height:38px !important}
  .btn-book{padding:0 .9rem !important;font-size:.76rem !important;height:40px}
  .btn-gold{height:48px;padding:0 1.4rem;font-size:.9rem}
  .hero-badge{font-size:.76rem;padding:.3rem .9rem}
  .hero-text h1{font-size:clamp(1.6rem,8vw,2.2rem)}
  .hero-spec{font-size:1rem}
  .hero-l1{font-size:.86rem}
  .hero-feats{grid-template-columns:1fr 1fr;max-width:100%}
  .feat + .feat{border-inline-start:none}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn-gold{width:100%}
  .hero-media{min-height:320px}
  .doc-img{height:320px;max-width:280px}
  .law-books{display:none !important}
  .sec-head h2{flex-wrap:wrap}
  .sec-head h2 i{width:34px}
  .about-photo{min-height:240px;border-radius:18px}
  .xvideo{border-radius:14px}
  .faq-q{font-size:.92rem;padding:.95rem 1rem}
  .marquee{font-size:.8rem}

  /* القديم */
  .nav-inner{padding:.65rem 0}
  .brand{font-size:1.02rem}
  .brand small{max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .g3,.g4,.g2{grid-template-columns:1fr !important}
  .stats{grid-template-columns:1fr 1fr !important;padding:1.4rem;gap:.7rem}
  .stat b{font-size:1.5rem}
  .gallery{grid-template-columns:1fr 1fr !important}
  .gallery img,.gallery video{height:130px}
  .card{padding:1.2rem}
  .lawyer-info{padding:1.3rem}
  .map iframe{height:260px}
  .announce{font-size:.78rem}
}

/* ---------- 8) هواتف صغيرة جداً / قابلة للطي (≤ 379px: iPhone SE / Fold مغلق) ---------- */
@media (max-width:379px){
  .container{width:min(100% - 1rem,100%)}
  html{font-size:15px}
  .header-in{min-height:58px}
  .brand-txt b{max-width:38vw}
  .btn-book{font-size:.7rem !important;padding:0 .7rem !important;height:38px}
  .burger{width:40px !important;height:40px !important;font-size:1.1rem !important}
  .hero{padding-top:92px}
  .hero-text h1{font-size:clamp(1.4rem,9vw,1.9rem)}
  .svc-grid{grid-template-columns:1fr 1fr !important;gap:.55rem}
  .svc-card{padding:.9rem .5rem;border-radius:14px}
  .svc-card h3{font-size:.82rem}
  .svc-card p{font-size:.7rem}
  .svc-ic{width:44px;height:44px}
  .why-grid{grid-template-columns:1fr 1fr !important;gap:.8rem}
  .why-item{font-size:.76rem}
  .xgallery,.gallery{grid-template-columns:1fr 1fr !important;gap:.45rem}
  .xgallery img,.xgallery video,.gallery img,.gallery video{height:110px;border-radius:10px}
  .hero-stats{flex-direction:column}
  .hstat{min-width:0;width:100%}
  .stats{grid-template-columns:1fr 1fr !important;padding:1rem;gap:.5rem}
  .stat b{font-size:1.3rem}
  .float-wa{width:50px;height:50px;font-size:1.5rem}
  .to-top{width:42px;height:42px}
  .pwa-banner{padding:.8rem;gap:.6rem}
  .pwa-app-icon{width:44px;height:44px;font-size:1.4rem}
  .foot-grid,.f-grid{gap:1rem}
  .page-wrap{padding:1rem;border-radius:16px}
  .lawyer-meta span{font-size:.72rem}
  .card img{height:150px}
}

/* ---------- 9) الوضع الأفقي للهواتف (ارتفاع قصير) ---------- */
@media (max-height:500px) and (orientation:landscape){
  .hero{padding-top:86px;min-height:auto}
  .hero-media{min-height:260px}
  .doc-img{height:260px;max-width:240px}
  .hero-grid{grid-template-columns:1fr 1fr !important}
  .hero-text{order:0}
  .main-links{max-height:80vh}
  .hero-wave svg{height:40px !important}
  .float-wa{display:flex}
}

/* ---------- 10) تابلت بدقة (iPad / Galaxy Tab) ---------- */
@media (min-width:768px) and (max-width:1023px){
  .svc-grid{grid-template-columns:repeat(3,1fr) !important}
  .xgallery,.gallery{grid-template-columns:repeat(3,1fr) !important}
  .xtestis,.xpages{grid-template-columns:repeat(2,1fr) !important}
  .hero-feats{grid-template-columns:repeat(3,1fr);max-width:620px}
  .hero-btns{flex-direction:row}
  .foot-grid{grid-template-columns:1fr 1fr !important;text-align:right}
}
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  .hero-grid{grid-template-columns:1fr !important}
  .about-grid{grid-template-columns:1fr !important}
}
@media (min-width:768px) and (max-width:1023px) and (orientation:landscape){
  .hero-grid{grid-template-columns:1fr 1fr !important}
  .hero-text{order:0;text-align:right}
  .hero-text .hero-btns{justify-content:flex-start}
}

/* ---------- 11) لمس: أهداف لمس مريحة + منع زوم iOS ---------- */
@media (pointer:coarse){
  a,button,.btn,.btn-gold,.btn-book,.faq-q,.main-links a,nav.links a{min-height:44px}
  .main-links a,.faq-q{display:flex;align-items:center}
  .faq-q{justify-content:space-between}
  input,select,textarea,button{font-size:16px !important} /* يمنع الزوم التلقائي في سفاري */
  .socials a{width:44px;height:44px}
}
input,select,textarea{font-size:16px} /* قاعدة عامة ضد زوم iOS */
@media (min-width:1024px){
  input,select,textarea{font-size:1rem}
}

/* ---------- 12) جداول ونماذج وصفحات داخلية ---------- */
.table-wrap,.panel,.page-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{display:table}
@media (max-width:767px){
  table{font-size:.82rem}
  th,td{padding:.5rem .4rem}
  .page-hero{padding:2.2rem 1rem}
  .map iframe{height:240px}
  .video-frame video,.video-frame iframe{min-height:220px}
  /* أي جدول إداري يتحول لبطاقات قابلة للتمرير */
  .panel table,.page-wrap table{display:block;overflow-x:auto;white-space:nowrap}
  .panel table thead,.page-wrap table thead{white-space:nowrap}
}

/* ---------- 13) بانر التثبيت PWA + إعلانات ---------- */
.pwa-banner{max-width:min(560px,calc(100vw - 1.4rem))}
@media (max-width:480px){
  .pwa-banner{flex-direction:row;font-size:.85rem}
  .pwa-banner .row .btn{flex:1;justify-content:center}
}
.announce,.marquee div{overflow-wrap:anywhere}

/* ---------- 14) صور البطل والخلفيات للأجهزة الضعيفة ---------- */
@media (max-width:640px){
  .hero-bg,.hero-bgimg img{opacity:.28}
  .hero::before,.hero::after{width:46px;opacity:.25}
  .justice-mark{font-size:3rem}
  .about-visual{min-height:260px}
  .about-visual .big{font-size:5rem}
  .exp-badge{bottom:10px;right:10px;padding:.5rem .9rem;font-size:.8rem}
}

/* ---------- 15) تقليل الحركة + تباين + طباعة ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}
@media print{
  .site-header,header.nav,.float-wa,.to-top,.pwa-banner,.burger,.hero-btns,.marquee{display:none !important}
  body{background:#fff}
}

/* ---------- 16) إصلاحات دقيقة لأجهزة معروفة ---------- */
/* iPhone SE / 5S */
@media (width:320px), (max-width:320px){
  .svc-grid{grid-template-columns:1fr 1fr !important}
  .brand-txt small{display:none} /* توفير مساحة */
}
/* Galaxy Fold مفتوح / تابلت صغير */
@media (min-width:600px) and (max-width:700px){
  .svc-grid{grid-template-columns:repeat(3,1fr) !important}
  .xgallery,.gallery{grid-template-columns:repeat(3,1fr) !important}
}
/* Surface Duo / شاشات مزدوجة */
@media (min-width:540px) and (max-width:540px){
  .hero-grid{grid-template-columns:1fr !important}
}