/* responsive.css — rules for the different screen sizes. */

/* large desktop: let the layout breathe */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}

/* laptop / small desktop */
@media (max-width: 1100px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid-offers { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* tablet: navbar collapses into the side menu */
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-actions { margin-inline-start: auto; }
  .menu-btn { display: inline-flex; }
  .nav-inner { gap: .75rem; }

  .about-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .service-card p { flex-basis: 100%; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout .section-head { position: static; margin-bottom: 1.5rem; }
  .contact-grid { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 28vw, 240px); }
  .gallery-item-main-floor { grid-column: span 2; grid-row: span 2; }
  .gallery-item-training-area { grid-column: span 2; }

  .hero::before, [dir="rtl"] .hero::before {
    background: linear-gradient(180deg, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, .88) 100%);
  }
}

@media (min-width: 961px) {
  .drawer, .drawer-overlay { display: none; }
}

/* phones */
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand-name { font-size: 1.05rem; }
  .brand-mark { width: 34px; height: 34px; }
  .lang-btn span { display: none; }              /* globe icon only; the aria-label keeps the name */
  .lang-btn { min-width: 44px; padding: 0; }

  .plans-grid, .plans-grid-offers { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 56vw; }
  .gallery-item-main-floor, .gallery-item-training-area { grid-column: auto; grid-row: auto; }
  .gallery-item-main-floor { grid-row: span 1; }

  .hero-slogan { padding-inline-start: 0; border-inline-start: 0; flex-basis: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .cta-panel { flex-direction: column; align-items: stretch; text-align: start; }
  .cta-panel .btn { width: 100%; }

  .lightbox-stage { padding: 72px 12px 24px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 16px; transform: none; }
  .modal-inner { padding: 20px; }
}

/* very small phones */
@media (max-width: 380px) {
  .brand-name { font-size: .95rem; }
  .plan-card { padding: 1.4rem 1.15rem; }
}

@media (max-width: 640px) {
  .map-frame { aspect-ratio: 4 / 5; min-height: 0; }
  .map-head .btn { width: 100%; }
}