/* ============================================================
   RESPONSIVE.CSS — Media Queries OUH Haiti
   ============================================================ */

/* ── Wide (> 1440px) ── */
@media (min-width: 1440px) {
  :root {
    --container-max: 1360px;
  }

  .hero-quote {
    font-size: 4rem;
  }

  .section-title {
    font-size: var(--text-5xl);
  }
}

/* ── Desktop (1024–1440px) — base styles apply ── */

/* Polices agrandies (+50 %) : la barre horizontale ne tient plus sous ~1260px
   → bascule en menu hamburger pour éviter tout débordement. */
@media (max-width: 1260px) {
  .hamburger  { display: flex; }
  .navbar-nav { display: none; }
  .navbar-cta { display: none; }
}

/* ── Tablet (768–1024px) ── */
@media (max-width: 1024px) {
  :root {
    --navbar-height: 70px;
  }

  .hamburger { display: flex; }
  .navbar-nav { display: none; }
  .navbar-cta { display: none; }

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

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

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

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

  .library-grid.reverse .library-image { order: 0; }
  .library-grid.reverse .library-content { order: 0; }

  .section-title { font-size: var(--text-3xl); }

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

  .page-hero { height: 320px; }
  .page-hero-title { font-size: var(--text-4xl); }
}

/* ── Mobile L (480–768px) ── */
@media (max-width: 768px) {
  :root {
    --navbar-height: 64px;
  }

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

  .hamburger { display: flex; }
  .navbar-nav { display: none; }
  .navbar-cta { display: none; }

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

  .section-title { font-size: var(--text-3xl); }
  .section-subtitle { font-size: var(--text-base); }

  /* Grids → 1 column */
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

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

  /* Hero */
  .hero { min-height: 580px; }
  .hero-slide { padding: var(--space-6); }
  .hero-quote { font-size: clamp(1.5rem, 5vw, 2rem); }
  .hero-sub { font-size: var(--text-base); }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 300px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .stat-number { font-size: var(--text-4xl); }

  /* Team cards */
  .team-card { height: auto; }
  .team-card-inner { transform: none !important; }
  .team-card-front {
    display: none;
  }
  .team-card-back {
    position: relative;
    transform: none;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
  }
  .team-card-back .team-card-name { margin-top: 0; }

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

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

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

  /* Testimonial */
  .testimonial-card {
    padding: var(--space-6);
  }

  .testimonial-text { font-size: var(--text-lg); }

  /* Testimonial quote mark */
  .testimonial-quote-mark { font-size: 5rem; }

  /* About */
  .about-grid,
  .library-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  .about-title { font-size: var(--text-3xl); }
  .about-text { font-size: var(--text-base); }

  /* Page hero */
  .page-hero { height: 240px; }
  .page-hero-title { font-size: var(--text-3xl); }

  /* CTA */
  .cta-title { font-size: var(--text-3xl); }

  /* Partners */
  .partner-logo { min-width: 130px; padding: var(--space-3) var(--space-4); }

  /* Modal */
  .modal { padding: var(--space-6); }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }

  /* Back to top & toast */
  #back-to-top { bottom: var(--space-4); right: var(--space-4); }
  #toast-container { right: var(--space-4); bottom: var(--space-4); left: var(--space-4); }
  .toast { max-width: 100%; }

  /* Article card */
  .article-card-footer { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  /* Breadcrumb */
  .breadcrumb { flex-wrap: wrap; }

  .btn-lg { padding: 0.875rem 1.75rem; font-size: var(--text-base); }
}

/* ── Mobile S (< 480px) ── */
@media (max-width: 480px) {
  :root {
    --navbar-height: 60px;
  }

  .section-title { font-size: var(--text-2xl); }

  .hero-quote { font-size: 1.5rem; }
  .hero-tagline { font-size: 0.65rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .stat-number { font-size: var(--text-3xl); }
  .stat-label { font-size: var(--text-sm); }

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

  .testimonial-text { font-size: var(--text-base); }

  .cta-title { font-size: var(--text-2xl); }

  .page-hero { height: 200px; }
  .page-hero-title { font-size: var(--text-2xl); }

  .footer-socials { gap: var(--space-2); }

  .navbar-logo-text { display: none; }
}

/* ── Touch devices — improve tap targets ── */
@media (hover: none) and (pointer: coarse) {
  .nav-link { padding: var(--space-3) var(--space-3); }
  .btn { min-height: 44px; }
  .footer-social-link { width: 44px; height: 44px; }
  .hero-dot { width: 12px; height: 12px; padding: 4px; }

  /* Remove hover flip on mobile for team cards */
  .team-card { height: auto; perspective: none; }
  .team-card-inner { transform: none !important; transform-style: flat; }
  .team-card-front { display: none; }
  .team-card-back {
    position: relative;
    transform: none;
    border-radius: var(--radius-xl);
  }
}

/* ── Print ── */
@media print {
  .navbar, .footer, .hero-dots, .hero-scroll, #back-to-top, #page-loader {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}