/* =========================================================
   وقف تبجيل — responsive.css
   منهجية Mobile First: main.css يحتوي القاعدة المخصَّصة للجوال،
   وهذا الملف يوسّعها تدريجيًا للشاشات الأكبر عبر min-width فقط.
   لا توجد أي قواعد max-width في هذا الملف؛ التصميم يُبنى من
   الأصغر إلى الأكبر بدون كسر أي مقاس.
   ========================================================= */

/* =========================================================
   480px وأكبر — جوال كبير (iPhone Plus/Pro Max وما شابه)
   ========================================================= */
@media (min-width: 480px){
  :root{ --container-padding: 24px; }

  .impact-grid{ grid-template-columns: repeat(2, 1fr); }
  .board-grid{ grid-template-columns: repeat(2, 1fr); }
  .btn-label-full{ display: inline; }
  .btn-label-short{ display: none; }
}

/* =========================================================
   768px وأكبر — تابلت
   ========================================================= */
@media (min-width: 768px){
  :root{ --container-padding: 32px; }

  .site-header{ padding: 16px 0; }
  .site-header.solid{ padding: 12px 0; }
  .brand .mark{ width: 48px; height: 48px; }

  /* الهيدر يتحول لصف أفقي كامل بدون قائمة منسدلة على الشاشات الأكبر */
  .nav-toggle{ display: none; }
  .nav-links{
    position: static; inset: auto; top: auto;
    background: transparent; backdrop-filter: none;
    flex-direction: row; align-items: center; gap: 26px;
    padding: 0; transform: none; opacity: 1; pointer-events: auto;
    overflow: visible;
  }
  .nav-links a{
    font-size: 14.5px; font-weight: 500; padding: 4px 0; border-bottom: none;
    min-height: auto; position: relative;
    color: #fff;
  }
  .nav-links a:hover{ color: var(--color-primary-light); }
  .site-header.solid .nav-links a{ color: var(--color-text); }
  .site-header.solid .nav-links a:hover{ color: var(--color-primary); }
  .nav-links a::after{
    content: ''; position: absolute; right: 0; bottom: -3px; width: 0; height: 2px;
    background: var(--color-primary-light); transition: width var(--transition-fast);
  }
  .nav-links a:hover::after{ width: 100%; }
  .header-cta .btn{ width: auto; }

  .hero-grid{ flex-direction: row; align-items: center; gap: var(--space-xl); }
  .hero-grid > *{ flex: 1; min-width: 0; }
  .hero h1{ line-height: 1.28; }
  .scroll-cue{
    display: flex; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255,255,255,.55); font-family: var(--font-utility); font-size: 11.5px; z-index: 2;
  }
  .scroll-cue .line{ width: 1px; height: 26px; background: linear-gradient(rgba(255,255,255,.7), transparent); position: relative; overflow: hidden; }
  .scroll-cue .line::after{ content: ''; position: absolute; top: -100%; right: 0; width: 100%; height: 100%; background: var(--color-primary-light); animation: cue 1.8s infinite; }
  @keyframes cue{ 0%{ top: -100%; } 100%{ top: 100%; } }

  .trust-strip .container{ flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 18px; }

  .relation-grid{ flex-direction: row; }
  .relation-card{ flex: 1; }

  .about-grid{ display: flex; flex-direction: row; gap: var(--space-xl); align-items: flex-start; }
  .about-grid > *{ flex: 1; min-width: 0; }
  .pillars{ margin-top: 0; }

  .why-grid{ flex-direction: row; flex-wrap: wrap; }
  .why-item{ flex: 1 1 calc(33.333% - 10px); min-width: 220px; }

  .spend-list{ flex-direction: row; flex-wrap: wrap; }
  .spend-item{ flex: 1 1 calc(50% - 6px); }

  .impact-grid{ grid-template-columns: repeat(3, 1fr); }

  .founders-list{ flex-direction: row; }
  .founder-card{ flex: 1; }
  .board-grid{ grid-template-columns: repeat(3, 1fr); }

  .contact-list{ max-width: 560px; margin-inline: auto; }
  .bank-card, .support-card{ max-width: 560px; margin-inline: auto; }
  .support-card{ margin-top: var(--space-lg); }

  .footer-columns{ flex-direction: row; flex-wrap: wrap; gap: var(--space-lg); }
  .footer-col{ flex: 1 1 40%; }

  .footer-bottom{ flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}

/* =========================================================
   1024px وأكبر — كمبيوتر / تابلت أفقي
   ========================================================= */
@media (min-width: 1024px){
  :root{ --container-padding: 40px; --fs-body: 15.5px; }

  .nav-links{ gap: 32px; }
  .nav-links a{ font-size: 15px; }

  .hero{ padding-top: 130px; }
  .hero-grid{ gap: 60px; }

  .why-item{ flex: 1 1 calc(33.333% - 16px); }

  .impact-grid{ grid-template-columns: repeat(5, 1fr); }

  .investment-panel{ display: flex; align-items: center; padding: 46px; }
  .investment-headline{ text-align: center; max-width: 640px; margin-inline: auto; }

  .board-grid{ grid-template-columns: repeat(5, 1fr); }

  .float-actions{ bottom: calc(26px + env(safe-area-inset-bottom, 0px)); left: 26px; }
  .float-btn{ width: 56px; height: 56px; }
}

/* =========================================================
   1280px وأكبر — شاشات كبيرة
   ========================================================= */
@media (min-width: 1280px){
  :root{ --container-width: 1200px; }

  .hero h1{ line-height: 1.25; }
}