/* ═══════════════════════════════════════════════════════
   LAYOUT — Grid system, containers, utilities, responsive
   ═══════════════════════════════════════════════════════ */

/* ──────────────── CONTAINERS ──────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container-narrow {
  max-width: var(--max-narrow);
}
.container-form {
  max-width: var(--max-form);
}

/* ──────────────── SECTIONS ──────────────── */

.section {
  padding: var(--sp-16) var(--sp-5);
}
.section-sm {
  padding: var(--sp-10) var(--sp-5);
}
.section-card {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ──────────────── GRID ──────────────── */

.grid {
  display: grid;
  gap: var(--sp-3);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Layout-specific grids */
.grid-kpi {
  grid-template-columns: repeat(3, 1fr);
}
.grid-presets {
  grid-template-columns: repeat(5, 1fr);
}
.grid-admin {
  grid-template-columns: 1.4fr 1fr;
}

/* ──────────────── FLEX UTILITIES ──────────────── */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

/* ──────────────── SPACING UTILITIES ──────────────── */

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* ──────────────── TEXT UTILITIES ──────────────── */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-gold { color: var(--gold); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-mono { font-family: 'SF Mono', 'Fira Code', monospace; }

/* ──────────────── DISPLAY ──────────────── */

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* ──────────────── OVERFLOW ──────────────── */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ──────────────── ADMIN LAYOUT ──────────────── */

.layout-admin {
  display: flex;
  height: 100%;
}
.layout-admin-main {
  flex: 1;
  padding: var(--sp-5);
  overflow-y: auto;
}

/* ──────────────── DONATE LAYOUT ──────────────── */

.layout-donate {
  display: flex;
  gap: var(--sp-8);
}
.layout-donate-form {
  flex: 1;
}
.layout-donate-side {
  width: 250px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════ */

/* ── Large (≤900px) — Tablets ── */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }
  .grid-admin { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  .sidebar { display: none; }
  .sidebar-mobile { display: flex; }
  .layout-admin { flex-direction: column; }

  .layout-donate { flex-direction: column; }
  .layout-donate-side { width: 100%; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

  .hide-tablet { display: none; }
  .table-wide { display: none; }

  .navbar-links .hide-mobile { display: none; }
  .navbar-toggle { display: flex; }

  .section { padding: var(--sp-12) var(--sp-4); }
  .section-heading { margin-bottom: var(--sp-10); }
}

/* ── Medium (≤600px) — Phones landscape ── */
@media (max-width: 600px) {
  :root {
    --nav-h: 48px;
  }

  .container { padding: 0 var(--sp-4); }
  .section { padding: var(--sp-10) var(--sp-4); }

  .navbar { padding: 10px var(--sp-4); }
  .navbar-logo { font-size: 0.74rem; letter-spacing: 1.5px; }
  .navbar-link { font-size: 0.58rem; letter-spacing: 1.2px; }

  .hero { min-height: 68vh; }
  .hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn { width: 100%; max-width: 260px; }

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

  .heading-display.heading-xl { font-size: 1.5rem; }

  .card { padding: var(--sp-4); }
  .stat-card { padding: var(--sp-5) var(--sp-3); }
  .stat-number { font-size: 1.3rem; }

  .btn { padding: 11px 24px; font-size: 0.62rem; }
  .btn-lg { padding: 13px 32px; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ── Small (≤380px) — Phones portrait narrow ── */
@media (max-width: 380px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-kpi { grid-template-columns: 1fr; }
}

/* ──────────────── PAGE TRANSITIONS ──────────────── */

.page {
  animation: fadeIn 0.3s var(--ease);
}