/* =========================================================
   BALLON ROSE — Styles responsives
   ========================================================= */

@media (max-width: 1080px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .events-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px){
  .main-nav{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 100px 36px 40px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    z-index: 999;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ color: var(--ink) !important; font-size: 1rem; }
  .nav-toggle{ display:flex; z-index: 1001; }
  .header-cta .btn-outline{ display:none; }

  .split, .split.reverse{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .split.reverse .split-media{ order: 0; }
  .service-row, .service-row.reverse{
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 30px;
  }
  .contact-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 720px){
  .section{ padding: 70px 0; }
  .section-tight{ padding: 50px 0; }
  .cards-grid{ grid-template-columns: 1fr; }
  .events-grid{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item.wide{ grid-column: span 2; }
  .footer-grid{ grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
  .footer-bottom{ flex-direction: column; text-align:center; }
  .form-row{ grid-template-columns: 1fr; }
  .timeline::before{ left: 8px; }
  .timeline-item{ grid-template-columns: 1fr; gap: 10px; }
  .timeline-item::after{ left: 4px; top: 4px; }
  .timeline-year{ text-align:left; }
  .hero{ min-height: 100vh; }
  .hero-actions .btn{ width:100%; }
  .hero-actions{ flex-direction:column; }
  .cookie-inner{ flex-direction: column; align-items: flex-start; }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn{ flex:1; }
}

@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .stat-item .stat-num{ font-size: 2rem; }
  .logo{ font-size: 1.25rem; }
}