/* ============================================================
   PHAINO PREPARATORY SCHOOL
   responsive.css | Mobile-first breakpoints
   ============================================================ */

/* ============================
   TABLET — max 1024px
   ============================ */
@media (max-width: 1024px) {

  :root {
    --nav-height: 70px;
  }

  .nav-links,
  .nav-cta .btn:not(.btn-primary) { display: none; }

  .hamburger { display: flex; }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

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

  .split-section {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .split-image img { height: 380px; }

  .timeline-track {
    flex-direction: column;
    gap: var(--space-6);
  }

  .timeline-track::before {
    top: 36px;
    left: 36px;
    right: auto;
    bottom: 36px;
    width: 2px;
    height: auto;
  }

  .timeline-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .timeline-step-num { margin-bottom: 0; }

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

  .trust-bar-inner { gap: var(--space-6); }

  .top-bar-motto { display: none; }

  .form-grid { grid-template-columns: 1fr; }
}

/* ============================
   TABLET PORTRAIT — max 768px
   ============================ */
@media (max-width: 768px) {

  .section { padding-block: var(--space-16); }
  .section-sm { padding-block: var(--space-12); }

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

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links { justify-content: center; }

  .trust-bar-inner { flex-direction: column; gap: var(--space-4); }

  .cta-buttons { flex-direction: column; align-items: center; }

  .top-bar { display: none; }

  #main-nav { top: 0; }
  #main-nav.scrolled-top { top: 0; }

  .page-hero { height: clamp(280px, 50vw, 400px); }

  .quick-info-bar { margin-top: var(--space-8); border-radius: var(--radius-xl); }

  .filter-tabs { gap: var(--space-2); }
  .filter-tab { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

  .testimonial-card {
    padding: var(--space-8);
  }

  .verse-block {
    padding: var(--space-8) var(--space-6);
  }

  .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; }

  .modal-overlay { align-items: flex-end; padding: 0; }

  .download-card { flex-direction: column; text-align: center; }

  .staff-card .staff-avatar { height: 240px; }

  .newsletter-form { flex-direction: column; }

  .phase-tabs { flex-direction: column; }
  .phase-tab { flex: none; text-align: left; }

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

  .container { padding-inline: var(--space-4); }

  .section-subtitle { padding-inline: var(--space-4); }

  .split-image img { height: 280px; }
}

/* ============================
   MOBILE — max 480px
   ============================ */
@media (max-width: 480px) {

  :root {
    --nav-height: 64px;
  }

  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .quick-info-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }

  .quick-info-item { padding: var(--space-3); }
  .quick-info-icon { width: 40px; height: 40px; }

  .btn { padding: 0.65rem 1.25rem; font-size: var(--text-xs); }
  .btn-lg { padding: 0.75rem 1.5rem; font-size: var(--text-sm); }
  .btn-xl { padding: 0.85rem 1.75rem; font-size: var(--text-base); }

  .hero-title { font-size: clamp(1.75rem, 8vw, 2.5rem); }

  .feature-card { padding: var(--space-6); }

  .gallery-grid { grid-template-columns: 1fr; }

  .lightbox-nav { display: none; }

  .floating-widgets {
    bottom: var(--space-4);
    right: var(--space-4);
  }

  .floating-btn { width: 48px; height: 48px; }
  .floating-btn svg { width: 22px; height: 22px; }

  .testimonial-card { padding: var(--space-6) var(--space-5); }
  .testimonial-card::before { font-size: 5rem; top: -10px; }

  .stat-number { font-size: clamp(2rem, 6vw, 2.5rem); }

  .page-hero h1 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .page-hero p { font-size: var(--text-base); }

  .breadcrumb { font-size: var(--text-xs); }

  .verse-block { padding: var(--space-8) var(--space-5); }
  .verse-block::before { font-size: 6rem; }

  .accordion-trigger { padding: var(--space-4); }
  .accordion-question { font-size: var(--text-sm); }

  .modal-header { padding: var(--space-6) var(--space-5) var(--space-4); }
  .modal-body { padding: var(--space-5); }
  .modal-footer { padding: var(--space-4) var(--space-5); flex-wrap: wrap; }

  .timeline-step-num { width: 56px; height: 56px; font-size: var(--text-base); flex-shrink: 0; }

  .footer-brand .footer-logo { height: 52px; }

  .staff-card .staff-avatar { height: 260px; }

  .news-card-image { height: 180px; }

  .cta-section { padding: var(--space-16) 0; }

  .section-header { margin-bottom: var(--space-8); }

  .form-group + .form-group { margin-top: var(--space-2); }

  .top-bar { display: none; }
}

/* ============================
   SMALL MOBILE — max 360px
   ============================ */
@media (max-width: 360px) {

  html { font-size: 14px; }

  .nav-brand-text { display: none; }

  .quick-info-grid { grid-template-columns: 1fr; }

  .filter-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .filter-tab { flex-shrink: 0; }

  .cta-buttons .btn { width: 100%; }

  .slider-controls { gap: var(--space-2); }
}

/* ============================
   LARGE DESKTOP — min 1400px
   ============================ */
@media (min-width: 1400px) {

  :root {
    --container-max: 1360px;
  }

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

/* ============================
   PRINT STYLES
   ============================ */
@media print {

  #loading-screen,
  #main-nav,
  .top-bar,
  .floating-widgets,
  .page-progress,
  .mobile-drawer,
  .drawer-overlay { display: none !important; }

  body { background: #fff; }

  .page-view { display: block !important; }

  .hero-section,
  .page-hero { height: auto; min-height: 0; }

  a { text-decoration: underline; }
}

/* ============================
   REDUCED MOTION
   ============================ */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================
   HIGH CONTRAST MODE
   ============================ */
@media (forced-colors: active) {

  .btn {
    border: 2px solid ButtonText;
  }

  .card,
  .feature-card,
  .value-card {
    border: 1px solid ButtonText;
  }
}