/* ============================================
   Pages – shared responsive (breakpoints: xs default, sm 480+, md 768+, lg 1024+, xl 1280+)
   ============================================ */

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1023px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .child-progress-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-content {
    padding: 16px;
  }
}

@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 479px) {
  .header-title {
    font-size: clamp(1rem, 5vw, 1.25rem);
  }

  .header-subtitle {
    font-size: 12px;
  }
}

/* Animate progress bars on load */
.progress-bar {
  animation: barGrow 1s ease-out both;
}
@keyframes barGrow {
  from { width: 0 !important; }
}

/* Staggered card animations */
.stat-card {
  animation: fadeUp 0.5s ease both;
}
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }

.child-card {
  animation: fadeUp 0.5s ease both;
}
.child-card:nth-child(2) { animation-delay: 0.1s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.widget-card, .quick-links-card {
  animation: fadeUp 0.5s ease 0.2s both;
}