/* ==========================================================================
   Gudinet — Responsive (Mobile First)
   اولویت: موبایل → تبلت → دسکتاپ
   ========================================================================== */

/* --- Base = Mobile (<768px) --- */
.grid-stats { grid-template-columns: repeat(2, 1fr); }
.grid-missions { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.navbar-links { display: none; }
.section-title { font-size: var(--fs-xl); }
.container { padding-inline: var(--space-4); }

.page-main {
  padding-bottom: calc(var(--bottom-nav-height) + var(--space-6) + env(safe-area-inset-bottom));
}

/* --- Bottom Navigation (Mobile only) --- */
.bottom-nav {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 100;
  display: flex; justify-content: space-around; align-items: center;
  height: var(--bottom-nav-height);
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--color-text-faint);
  flex: 1; padding-block: 6px; transition: color var(--transition-fast);
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.active { color: var(--color-primary); }

/* --- Hero (mobile) --- */
.hero { padding-top: var(--space-6); text-align: center; }
.hero h1 { font-size: var(--fs-2xl); }
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; }

/* ============ Tablet (≥768px) ============ */
@media (min-width: 768px) {
  .grid-stats { grid-template-columns: repeat(4, 1fr); }
  .grid-missions { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .section-title { font-size: var(--fs-2xl); }
  .hero h1 { font-size: var(--fs-3xl); }
  .hero-actions { flex-direction: row; justify-content: center; }
  .hero-actions .btn { width: auto; }
}

/* ============ Desktop (≥1024px) ============ */
@media (min-width: 1024px) {
  .navbar-links { display: flex; }
  .bottom-nav { display: none; }
  .page-main { padding-bottom: var(--space-8); }
  .grid-missions { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .hero { text-align: start; }
}

/* Mobile-only / desktop-only helpers */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 1024px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}