/* ==========================================================================
   APAB ASBL — Responsive (Mobile / Tablette / Desktop)
   Paliers standards couverts :
     - 1280px+ : grand écran desktop (vérifié, contenu centré via .container,
       aucune adaptation supplémentaire nécessaire)
     - 1024px  : tablette paysage
     - 768px   : tablette portrait (bascule du menu en hamburger plein écran)
     - 540px   : mobile (base : grilles 1 colonne, polices réduites)
     - 480px   : petit mobile (affinages : espacements, boutons)
     - 320px   : très petit mobile (affinages finaux pour les écrans les plus étroits)
   ========================================================================== */

/* ---- Tablette (<= 1024px) ---- */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .split-block {
    grid-template-columns: 1fr 1fr;
  }

  .split-block__media {
    display: none;
  }

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

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

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

  .project-card {
    grid-template-columns: 220px 1fr;
  }
}

/* ---- Tablette portrait (<= 768px) ---- */
@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  .section {
    padding-block: var(--space-7);
  }

  .hero {
    min-height: 460px;
    text-align: center;
  }

  /* La légende texte des bannières placeholder est masquée sur mobile/tablette :
     le contenu réel (h1/p) y prend toute la hauteur disponible et ne doit pas
     être concurrencé visuellement par cette légende de développement. */
  .hero__media .image-placeholder span,
  .page-header__media .image-placeholder span {
    display: none;
  }

  .hero__media .image-placeholder__icon,
  .page-header__media .image-placeholder__icon {
    opacity: 0.5;
  }

  .hero__content {
    margin-inline: auto;
  }

  /* Navigation : transformation en menu mobile plein écran */
  .navbar {
    display: flex;
    justify-content: space-between;
  }

  .navbar__brand {
    justify-self: auto;
  }

  .hamburger {
    display: flex;
  }

  /* Sur mobile, .navbar__menu redevient une vraie boîte (plus de display:contents)
     afin de regrouper liste gauche + groupe droit dans un même panneau plein écran. */
  .navbar__menu {
    display: flex;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background-color: var(--color-white);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-5);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    z-index: 999;
  }

  .navbar__menu.is-open {
    transform: translateX(0);
  }

  .navbar__list--left,
  .navbar__list--right {
    grid-column: auto;
    justify-self: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .navbar__group--right {
    grid-column: auto;
    justify-self: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  .nav-link {
    display: block;
    text-align: center;
    padding: var(--space-3);
  }

  .navbar__actions {
    justify-content: center;
  }

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

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

  .split-block {
    grid-template-columns: 1fr;
  }

  .split-block__panel {
    padding: var(--space-6) var(--space-5);
  }

  .footer__newsletter-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer__newsletter-text {
    max-width: none;
  }

  .newsletter-form {
    width: 100%;
    justify-content: center;
  }

  .newsletter-form .form-control {
    min-width: 0;
    flex: 1;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }

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

  .social-icons {
    justify-content: center;
  }

  .project-card {
    grid-template-columns: 1fr;
  }

  .project-card__media {
    min-height: 200px;
  }

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

  /* Zones tactiles plus confortables (>= 44px) sur écrans tactiles */
  .gallery-filter {
    padding: var(--space-3) var(--space-5);
  }

  .social-icons__link {
    width: 42px;
    height: 42px;
  }
}

/* ---- Mobile (<= 540px) ---- */
@media (max-width: 540px) {
  .container {
    padding-inline: var(--space-4);
  }

  h1,
  .section__title {
    font-size: var(--fs-lg);
  }

  .hero__content h1 {
    font-size: var(--fs-xl);
  }

  .hero__content p {
    font-size: var(--fs-sm);
  }

  .btn {
    width: 100%;
  }

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

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

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

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

  .testimonial-card,
  .program-card,
  .resource-card,
  .partner-card {
    padding: var(--space-4);
  }
}

/* ---- Petit mobile (<= 480px) ---- */
@media (max-width: 480px) {
  .cta-row {
    gap: var(--space-3);
  }

  .stat__value {
    font-size: var(--fs-xl);
  }

  .donate-amount {
    padding: var(--space-2) var(--space-5);
  }

  .footer__newsletter-title {
    font-size: var(--fs-base);
  }
}

/* ---- Très petit mobile (<= 320px) ---- */
@media (max-width: 320px) {
  .container {
    padding-inline: var(--space-3);
  }

  .hero__content h1 {
    font-size: var(--fs-lg);
  }

  .page-header__content h1 {
    font-size: var(--fs-lg);
  }

  .error-page__code {
    font-size: 3rem;
  }

  .donate-amounts {
    gap: var(--space-2);
  }
}