/* ============================================================
   NoorAlFajr — Responsive (Mobile-First)
   ============================================================ */

/* ─── Breakpoints: sm=480, md=768, lg=1024, xl=1280 ─── */

/* Mobile: hide desktop nav elements */
.desktop-only { display: none; }
.mobile-only  { display: block; }

@media (min-width: 480px) {
  .sm\:hidden { display: none; }
  .sm\:block  { display: block; }
}

@media (min-width: 768px) {
  .desktop-only { display: block; }
  .mobile-only  { display: none;  }
  .md\:grid-2   { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3   { grid-template-columns: repeat(3, 1fr); }
  .md\:flex     { display: flex; }
}

@media (min-width: 1024px) {
  .site-main { padding-left: var(--space-6); }
}

/* ─── Mobile Header ─── */
@media (max-width: 1023px) {
  .site-sidebar { display: none; }
  .nav-hamburger { display: flex; }
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: var(--space-2);
}
.nav-hamburger span {
  width: 22px; height: 2px;
  background: var(--gray-600);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

/* Slide-out mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0; left: -100%; bottom: 0;
  width: min(300px, 85vw);
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-modal);
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  transition: left var(--transition-normal);
  box-shadow: var(--shadow-2xl);
}
.mobile-drawer.open { left: 0; }
.mobile-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--z-modal) - 1);
  backdrop-filter: blur(4px);
}
.mobile-drawer-overlay.open { display: block; }

/* ─── Prayer Grid ─── */
.prayer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 767px) {
  .prayer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 379px) {
  .prayer-grid { grid-template-columns: 1fr; }
}

/* ─── Surah Grid ─── */
.surah-grid { display: flex; flex-direction: column; gap: var(--space-2); }

/* ─── Feature Grid ─── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 767px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
}
@media (max-width: 479px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Names Grid ─── */
.names-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}
@media (max-width: 479px) {
  .names-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Fluid Containers ─── */
@media (max-width: 479px) {
  .container { padding-inline: var(--space-3); }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  .stat-card { padding: var(--space-4); }
  .tasbeeh-counter-circle { width: 160px; height: 160px; }
  .tasbeeh-count { font-size: var(--text-4xl); }
  .compass-wrapper { width: 250px; height: 250px; }
}

/* ─── Tablet adjustments ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-main { padding-inline: var(--space-6); }
  .prayer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Touch improvements ─── */
@media (hover: none) {
  .card-hover:active { transform: translateY(-4px); }
  .surah-card:hover  { transform: none; }
  .surah-card:active { background: var(--primary-50); }
  .btn:hover         { transform: none; }
  .btn:active        { transform: scale(0.97); }
}

/* ─── Large screen enhancements ─── */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-8); }
  .site-main { padding-top: calc(var(--header-h) + var(--space-8)); }
}