/* =================================================================
 * responsive.css — mobile-first breakpoints (loaded LAST)
 * ============================================================== */

/* ---- DESKTOP DOWN ---- */
@media (max-width: 1040px) {
  :root { --fs-4xl: 3rem; --fs-3xl: 2.25rem; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- TABLET ---- */
@media (max-width: 900px) {
  :root { --fs-4xl: 2.6rem; --fs-3xl: 2rem; --space-9: 4.5rem; --space-8: 3.5rem; }

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

  .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__media { max-width: 460px; margin-inline: auto; width: 100%; }

  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split--rev .split__media { order: 0; }

  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__media { max-height: 240px; }

  .cols-sidebar, .cols-media { grid-template-columns: 1fr; gap: var(--space-6); }
  .cols-list { columns: 1; }

  .doc-single__grid { grid-template-columns: 1fr; }
  .doc-aside { position: static; }
  .doc-clinic-card { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- NAV → DRAWER (collapse early so the horizontal menu never crowds) ---- */
@media (max-width: 1040px) {
  .nav__toggle { display: block; }
  /* Header CTA + desktop flags live in the full-page menu on mobile,
   * so hide them in the bar (avoids the doubled "Onlayn Növbə" button). */
  .nav__actions { display: none; }
  /* Full-page menu */
  .nav__menu {
    position: fixed; inset: var(--header-height) 0 0 0; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: var(--space-6) var(--container-pad) var(--space-7);
    transform: translateX(100%); transition: transform var(--transition); overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .nav__link { padding: 0.95rem var(--space-4); font-size: var(--fs-xl); border-radius: var(--radius-md); }
  /* dark links on the white drawer (header-bar links are white on navy) */
  .nav__menu .nav__link { color: var(--color-ink); }
  .nav__menu .nav__link:hover, .nav__menu .nav__link[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-700); }
  .nav__extra { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
  .nav__extra .btn { justify-content: center; }
  .lang-switch { align-self: flex-start; }
}

/* ---- MOBILE ---- */
@media (max-width: 680px) {
  :root { --fs-4xl: 2.15rem; --fs-3xl: 1.75rem; --fs-2xl: 1.5rem; --container-pad: 1rem; --space-9: 3.5rem; --space-8: 3rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  /* Klinika + Məlumat side by side to keep the footer short */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .hero__actions .btn { flex: 1; }
  .hero-info { grid-template-columns: 1fr; }
  .hero-info__col { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .hero-info__col:last-child { border-bottom: 0; }
  .hero-info-wrap { margin-top: -44px; }

  .cta-band { padding: var(--space-7) var(--space-5); }
  .stats-band { padding: var(--space-6); }
  .form-card { padding: var(--space-5); }
}

@media (max-width: 400px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ---- PRINT ---- */
@media print {
  .site-header, .site-footer, .nav__toggle, .cta-band, .video-poster { display: none !important; }
  body { color: #000; }
  .page-hero { background: #fff; color: #000; }
  .page-hero h1, .page-hero p { color: #000; }
}