/* =====================================================================
   responsive.css — أهل الله وخاصته
   طبقة تجاوب للأيباد والتابلت واللابتوب والشاشات الكبيرة.
   كل القواعد داخل media queries بحد أدنى (min-width)،
   لذلك نسخة الجوال (أقل من 768px) تبقى كما هي تمامًا.

   نقاط التوقف:
     ≥ 768px   تابلت / أيباد (عمودي)
     ≥ 1024px  أيباد أفقي / لابتوب
     ≥ 1440px  شاشات كبيرة
   ===================================================================== */

/* عناصر خاصة بالحاسوب: مخفية افتراضيًا (الجوال والتابلت) */
.desk-brand,
.desk-nav,
.desk-cta{ display:none; }


/* =====================================================================
   1) تابلت / أيباد  —  768px فأكثر
   ===================================================================== */
@media (min-width:768px){

  :root{
    --radius-lg:30px;
    --radius-md:20px;
  }

  body{ padding-bottom:104px; }

  .container{ max-width:720px; padding:0 32px; }

  /* ----- الرأس ----- */
  header.site-header{ padding-inline:32px; }
  header.site-header:not(:has(.brand-mini)){ padding-block:15px; }
  .icon-btn{ width:40px; height:40px; }
  .side-menu{ max-width:360px; }
  .side-menu-links a{ font-size:15.5px; padding:14px 14px; }

  /* ----- الشريط السفلي: يتحول إلى كبسولة عائمة في الوسط ----- */
  .bottom-nav{
    left:50%; right:auto;
    transform:translateX(-50%);
    width:min(580px, calc(100% - 48px));
    bottom:18px;
    border-radius:999px;
    padding:11px 22px 13px;
    border:1px solid rgba(166,131,66,.35);
    box-shadow:0 14px 34px rgba(12,26,20,.28);
  }
  .nav-item{ font-size:12px; gap:4px; }
  .nav-item .nav-ic{ font-size:19px; }

  /* ----- الصفحة الرئيسية: الغلاف ----- */
  .hero{ padding-top:64px; }
  .hero-logo{ width:190px; height:190px; margin-bottom:18px; }
  .logo-rosette{ width:290px; height:290px; }
  .logo-glow-wrap::before{ width:250px; height:250px; }
  .hero h1{ font-size:34px; white-space:normal; }
  .hero .tagline{ font-size:19px; max-width:460px; }
  .hero-badge{ font-size:14px; padding:8px 18px; }
  .hero-corner-orn{ width:150px; }
  .hero-quran{ width:640px; }
  .hero-wave{ height:56px; margin-top:80px; }
  section.intro{ margin-top:-96px; }
  header.site-header .brand-mini .calli{ height:54px; max-width:270px; }
  header.site-header{ height:76px; }

  .intro-card{ padding:42px 40px 36px; }
  .intro-card h2{ font-size:31px; }
  .intro-card p{ font-size:17px; max-width:520px; }

  /* ----- أقسام الصفحة الرئيسية ----- */
  section{ padding:58px 0 8px; }
  h2.section-title{ font-size:33px; margin-bottom:32px; }
  .section-sub{ font-size:15.5px; }
  .section-heading-deco h2{ font-size:33px; }
  .section-heading-deco .deco-bracket{ font-size:38px; }
  .eyebrow p{ font-size:14px; }
  .eyebrow span.line{ width:36px; }

  /* بطاقات "ماذا نقدم" : 4 أعمدة بدل عمودين */
  .why-grid{ grid-template-columns:repeat(4,1fr); }
  .why-card:nth-child(n){ border-bottom:0; border-left:1px solid #E6DCCF; }
  .why-card:nth-child(4n){ border-left:0; }
  .why-card{ padding:28px 14px; }
  .why-card h3{ font-size:16.5px; }
  .why-card p{ font-size:13.5px; }
  .why-card .card-icon{ font-size:32px; }

  /* بطاقات البرامج : 4 أعمدة */
  .grid-cards{ grid-template-columns:repeat(4,1fr); gap:14px; }
  .card{ padding:24px 14px; }
  .card h3{ font-size:17px; }
  .card p{ font-size:13px; min-height:48px; }
  .card .mini-btn{ font-size:14px; padding:11px 0; }
  .legend{ font-size:13.5px; }

  .whatif-panel{ padding:38px 36px; }
  .whatif-panel .wi-line{ font-size:23px; }

  .stats-wrap{ padding:38px 30px; }
  .stats-grid{ grid-template-columns:repeat(6,1fr); gap:20px 10px; }
  .stat-item .num{ font-size:28px; }
  .stat-item .lbl{ font-size:13px; }

  .mission-wrap p{ font-size:18px; max-width:560px; }

  section.join{ padding:68px 0; }
  .join h2{ font-size:36px; }
  .join .verse{ font-size:26px; }
  .join p.msg{ font-size:17.5px; }
  .join-orn{ width:520px; }

  .donate-wrap{ padding:38px 36px; }
  .donate-wrap h2{ font-size:28px; }
  .donate-wrap p.desc{ font-size:15px; }
  .sponsor-tier{ padding:18px 12px; }
  .sponsor-tier .st-label{ font-size:13px; }
  .sponsor-tier .st-price{ font-size:21px; }
  .bank-row{ font-size:14px; padding:12px 18px; }

  .gate-btn{ font-size:13.5px; padding:15px 8px; }
  .wide-card{ padding:22px; }
  .wide-card .w-text b{ font-size:16px; }
  .wide-card .w-text span{ font-size:13px; }

  .contact-wrap{ padding:38px 36px; }
  .contact-wrap p{ font-size:15px; }
  .phones{ flex-direction:row; justify-content:center; gap:34px; }
  .reveal-panel{ font-size:14px; }
  .reveal-panel a.wa-link{ font-size:14px; padding:11px 0; }

  footer.site-footer{ font-size:13px; }
  .site-footer .closing{ font-size:20px; }

  .section-title + .section-sub{ margin-top:-24px; }

  /* إصلاحات عامة تظهر على الشاشات الأكبر */
  .hero{ padding-inline:0; }                       /* الموجة تمتد لحافة الشاشة */
  .stats-wrap .section-sub{ color:#C9BBA4; }       /* وضوح النص على الخلفية الخضراء */
  .contact-wrap a.wa-link,
  .info-note a.wa-link{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:#25D366; color:var(--white); font-weight:700;
    border-radius:999px; padding:12px 28px; font-size:15px;
  }

  /* ----- الصفحات الداخلية ----- */
  .page-hero{ padding:48px 32px 56px; border-radius:0 0 40px 40px; }
  .page-hero .p-icon{ font-size:40px; }
  .page-hero h1{ font-size:38px; }
  .page-hero p{ font-size:16.5px; max-width:480px; }
  .status-banner{ max-width:520px; font-size:14px; padding:16px 22px; margin-top:-24px; }
  .header-title{ font-size:22px; }

  .level-list{
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:16px;
  }
  .level-card{ flex:0 1 calc(50% - 8px); padding:20px 22px; display:flex; flex-direction:column; }
  .level-card .level-actions{ margin-top:auto; }
  .level-card .level-desc{ flex:0 0 auto; }
  .level-name b{ font-size:16.5px; }
  .level-desc{ font-size:13.5px; }
  .btn-join{ font-size:14px; padding:12px 0; }
  .status-tag{ font-size:12.5px; }
  .info-note{ padding:26px 28px; font-size:15px; }
  .info-note b{ font-size:17px; }
}


/* =====================================================================
   2) أيباد أفقي / لابتوب  —  1024px فأكثر
   ===================================================================== */
@media (min-width:1024px){

  body{ padding-bottom:0; }
  .container{ max-width:1120px; padding:0 40px; }

  /* ----- الرأس يتحول إلى شريط تنقل كامل ----- */
  header.site-header{
    height:84px; padding-inline:max(40px, calc((100% - 1200px) / 2));
    gap:28px; justify-content:flex-start;
  }
  header.site-header.scrolled{ background:rgba(22,48,38,.86); }

  /* إخفاء عناصر الجوال */
  #menuBtn,
  header.site-header > a.icon-btn[aria-label="رجوع"],
  header.site-header > .header-title,
  header.site-header > a.icon-btn[aria-label="تواصل معنا"]{ display:none; }
  .bottom-nav{ display:none; }

  /* الشعار */
  .brand-mini{
    position:static; transform:none; order:1; flex-shrink:0;
  }
  header.site-header .brand-mini .calli{ height:58px; max-width:300px; }
  .desk-brand{
    order:1; display:flex; align-items:center; gap:12px; flex-shrink:0;
    color:var(--cream); font-family:'Aref Ruqaa','Amiri',serif; font-size:22px;
  }
  .desk-brand img{ width:46px; height:46px; object-fit:contain; }

  /* روابط التنقل */
  .desk-nav{
    order:2; flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  }
  .desk-nav a{
    color:#D9CDBA; font-size:15px; font-weight:700;
    padding:9px 14px; border-radius:999px;
    transition:background .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .desk-nav a:hover{ background:rgba(243,236,227,.09); color:var(--white); }
  .desk-nav a.active{ color:var(--gold-light); background:rgba(192,157,82,.12); }

  /* زر واتساب في الرأس */
  .desk-cta{
    order:3; display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
    background:linear-gradient(180deg, var(--gold-light), var(--gold));
    color:var(--green-deep); font-weight:800; font-size:14.5px;
    padding:11px 22px; border-radius:999px;
    transition:transform .15s ease, box-shadow .2s ease;
  }
  .desk-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(166,131,66,.35); }
  .desk-cta .isvg{ width:16px; height:16px; }

  /* ----- الغلاف ----- */
  .hero{ padding-top:84px; }
  .hero-logo{ width:230px; height:230px; margin-bottom:22px; }
  .logo-rosette{ width:360px; height:360px; }
  .logo-glow-wrap::before{ width:310px; height:310px; }
  .hero h1{ font-size:48px; margin:12px auto 10px; }
  .hero .tagline{ font-size:23px; max-width:640px; margin-bottom:24px; }
  .hero-badge{ font-size:15.5px; padding:10px 22px; }
  .hero-corner-orn{ width:210px; }
  .hero-quran{ width:900px; bottom:-50px; }
  .hero-wave{ height:78px; margin-top:96px; }
  section.intro{ margin-top:-124px; }

  .intro-card{ max-width:860px; margin-inline:auto; padding:54px 64px 46px; border-radius:34px; }
  .intro-card h2{ font-size:38px; margin-bottom:18px; }
  .intro-card p{ font-size:19.5px; max-width:660px; line-height:2.1; }
  .about-link{ font-size:15.5px; margin-top:16px; }

  /* ----- الأقسام ----- */
  section{ padding:76px 0 10px; }
  #why{ padding-top:80px; }
  h2.section-title{ font-size:40px; margin-bottom:40px; }
  .section-sub{ font-size:17px; margin-bottom:34px; }
  .section-heading-deco h2{ font-size:40px; }
  .section-heading-deco .deco-bracket{ font-size:48px; }
  .eyebrow p{ font-size:15px; }

  .why-grid{ border-radius:34px; }
  .why-card{ padding:38px 22px; }
  .why-card h3{ font-size:19px; margin-bottom:8px; }
  .why-card p{ font-size:15px; }
  .why-card .card-icon{ font-size:40px; margin-bottom:12px; }

  .grid-cards{ gap:20px; }
  .card{ padding:32px 20px 26px; border-radius:24px; transition:transform .25s ease, box-shadow .25s ease; }
  .card:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(30,59,49,.14); }
  .card .status-dot{ top:16px; left:16px; width:11px; height:11px; }
  .card-icon{ width:64px; height:64px; font-size:28px; margin-bottom:14px; }
  .card h3{ font-size:20px; }
  .card p{ font-size:14.5px; min-height:56px; margin-bottom:18px; }
  .card .mini-btn{ font-size:15px; padding:12px 0; }
  .card .soon-tag{ font-size:13px; padding:10px 18px; }
  .legend{ font-size:14.5px; }

  /* "ماذا لو بدأتِ اليوم" */
  .whatif-panel{ max-width:860px; margin-inline:auto; padding:50px 60px; }
  .whatif-panel .wi-line{ font-size:27px; margin-bottom:14px; }
  .btn{ font-size:16px; padding:15px 32px; }

  /* رحلتك معنا: خط زمني أفقي */
  .journey{
    display:grid; grid-template-columns:repeat(4,1fr);
    max-width:940px; margin-inline:auto;
  }
  .journey li{
    flex-direction:column; text-align:center; gap:14px; padding-bottom:0;
  }
  .journey li::before{
    right:50%; left:-50%; top:27px; bottom:auto; width:auto; height:2px;
    background:linear-gradient(to left, var(--gold), rgba(166,131,66,.25));
  }
  .j-num{ width:54px; height:54px; font-size:22px; position:relative; z-index:1; }
  .j-text{ font-size:19px; }
  .journey-note{ font-size:15.5px; margin-top:30px; }

  /* الإحصاءات */
  .stats-wrap{ padding:52px 44px; border-radius:34px; }
  .stats-wrap::before{ font-size:340px; left:-60px; top:-70px; }
  .stats-grid{ gap:20px 16px; }
  .stat-item .num{ font-size:40px; }
  .stat-item .lbl{ font-size:15px; margin-top:6px; }

  .mission-wrap p{ font-size:20px; max-width:760px; line-height:2.1; }

  section.join{ padding:92px 0; margin-top:60px; }
  .join h2{ font-size:46px; margin-bottom:20px; }
  .join .verse{ font-size:32px; }
  .join .verse-ref{ font-size:14px; }
  .join p.msg{ font-size:20px; }
  .join-orn{ width:700px; }

  /* التبرع */
  .donate-wrap{ max-width:900px; margin-inline:auto; padding:50px 56px; }
  .donate-wrap h2{ font-size:32px; }
  .donate-wrap p.desc{ font-size:16.5px; max-width:720px; margin-inline:auto; margin-bottom:26px; }
  .sponsor-tiers{ max-width:620px; margin-inline:auto; gap:16px; }
  .sponsor-tier{ padding:22px 14px; border-radius:18px; }
  .sponsor-tier .st-label{ font-size:14.5px; }
  .sponsor-tier .st-price{ font-size:26px; }
  .sponsor-tier .st-price small{ font-size:13px; }
  .donate-wrap .btn{ max-width:420px; margin-inline:auto; }
  .bank-list{ max-width:560px; margin-inline:auto; }
  .bank-row{ font-size:15.5px; }

  /* الانضمام للكادر */
  #cadre .container{ max-width:880px; }
  .section-sub{ max-width:780px; margin-inline:auto; }
  .section-title + .section-sub{ margin-top:-30px; }
  .gate-btn{ font-size:15.5px; padding:18px 10px; border-radius:16px; transition:background .2s ease; }
  .gate-btn:hover{ background:#E8DCC6; }
  .wide-card{ padding:26px 28px; transition:transform .25s ease, box-shadow .25s ease; }
  .wide-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(30,59,49,.12); }
  .wide-card .w-icon{ width:56px; height:56px; font-size:25px; }
  .wide-card .w-text b{ font-size:18px; }
  .wide-card .w-text span{ font-size:14.5px; }

  /* التواصل */
  .contact-wrap{ max-width:900px; margin-inline:auto; padding:50px 56px; border-radius:34px; }
  .contact-wrap p{ font-size:17px; }
  .phones span{ font-size:26px; }
  .phones{ gap:56px; margin-bottom:22px; }
  .contact-wrap .wa-link{ max-width:300px !important; font-size:15.5px; padding:13px 0; }

  footer.site-footer{ padding:56px 20px 36px; font-size:14px; }
  footer.site-footer .f-logo{ width:60px; }
  .site-footer .closing{ font-size:23px; }

  /* ----- الصفحات الداخلية ----- */
  .page-hero{ padding:66px 40px 80px; border-radius:0 0 54px 54px; }
  .page-hero .p-icon{ font-size:48px; margin-bottom:12px; }
  .page-hero h1{ font-size:48px; margin-bottom:12px; }
  .page-hero p{ font-size:19px; max-width:640px; }
  .status-banner{ max-width:620px; font-size:15.5px; padding:18px 26px; margin-top:-30px; }

  .level-list{ gap:20px; }
  .level-card{ flex:0 1 calc(50% - 10px); padding:26px 28px; border-radius:22px; transition:transform .25s ease, box-shadow .25s ease; }
  .level-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(30,59,49,.12); }
  .level-name .l-icon{ width:46px; height:46px; font-size:20px; }
  .level-name b{ font-size:19px; }
  .level-desc{ font-size:15px; padding-right:58px; margin-bottom:16px; }
  .status-tag{ font-size:13.5px; }
  .btn-join{ font-size:15px; padding:13px 0; transition:background .2s ease; }
  .btn-join:not(.disabled):hover{ background:var(--green-soft); }
  .info-note{ max-width:860px; margin-inline:auto; padding:34px 44px; font-size:16.5px; border-radius:26px; }
  .info-note b{ font-size:20px; }
  .reveal-panel{ font-size:15px; padding:16px 18px; }
}


/* =====================================================================
   3) شاشات كبيرة  —  1440px فأكثر
   ===================================================================== */
@media (min-width:1440px){
  html{ font-size:17px; }
  .container{ max-width:1240px; }
  .hero h1{ font-size:56px; }
  .hero .tagline{ font-size:26px; }
  .intro-card{ max-width:940px; }
  .stat-item .num{ font-size:46px; }
}


/* =====================================================================
   4) الأيباد بالوضع الأفقي (ارتفاع قصير) — تقليل الفراغات العمودية
   ===================================================================== */
@media (min-width:768px) and (max-height:820px) and (orientation:landscape){
  .hero{ padding-top:44px; }
  .hero-logo{ width:170px; height:170px; }
}


/* =====================================================================
   5) الشاشات التي تعمل باللمس: لا تأثيرات hover عالقة
   ===================================================================== */
@media (hover:none){
  .card:hover, .wide-card:hover, .level-card:hover, .desk-cta:hover{ transform:none; box-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  .card, .wide-card, .level-card, .desk-cta{ transition:none; }
}