/* ============================================================
   responsive.css — Ajustes por breakpoint
   Abordagem Mobile First: o CSS base já é mobile;
   aqui progressivamente melhoramos para telas maiores,
   com alguns ajustes específicos para telas menores.
   Breakpoints: Mobile <600 · Tablet 600–1023 · Desktop 1024+ · Large 1440+
   ============================================================ */

/* =========================================================
   TABLET E ABAIXO  (< 1024px)
   ========================================================= */
@media (max-width: 1023px) {
  /* Header: navegação vira drawer */
  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-overlay);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-4);
    width: min(320px, 82vw);
    padding: calc(var(--header-h) + 24px) var(--space-4) var(--space-4);
    background: var(--paper);
    box-shadow: -8px 0 32px rgba(20, 37, 43, 0.16);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    overflow-y: auto;
  }

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

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
  }

  .nav__link {
    font-size: 18px;
  }

  .header__cta {
    width: 100%;
  }

  .header__cta .btn {
    width: 100%;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hero em coluna única.
     Conteúdo (título + subtítulo + CTA de WhatsApp) vem PRIMEIRO,
     para o botão de ação ficar visível já na primeira dobra no mobile.
     A imagem entra logo abaixo. */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero__content {
    order: 0;
  }

  .hero__media {
    order: 1;
    max-width: 440px;
    margin-inline: auto;
  }

  .hero__title {
    max-width: 100%;
  }

  /* Passos: 2 colunas */
  .steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-card:not(:last-child)::after {
    display: none;
  }

  /* Blocos de duas colunas viram uma */
  .about-procedure__grid,
  .about-doctor__grid,
  .location__grid {
    grid-template-columns: 1fr;
  }

  .about-procedure__media,
  .about-doctor__media {
    max-width: 480px;
    margin-inline: auto;
  }
}

/* =========================================================
   TABLET (600px – 1023px) — refinamentos
   ========================================================= */
@media (min-width: 600px) and (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   MOBILE  (< 600px)
   ========================================================= */
@media (max-width: 599px) {
  /* Passos em coluna única (timeline vertical) */
  .steps__grid {
    grid-template-columns: 1fr;
  }

  /* Estatísticas empilhadas */
  .stats {
    gap: var(--space-3);
  }

  .stat + .stat {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    width: 100%;
  }

  /* Ações do hero em bloco */
  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__floating-card {
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
  }

  .hero__figure {
    margin-bottom: 28px;
  }

  /* Rodapé em coluna única */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Botão voltar ao topo sobe um pouco para não colidir */
  .back-to-top {
    bottom: calc(clamp(16px, 3vw, 28px) + 68px);
  }

  .final-cta .btn--lg {
    width: 100%;
  }
}

/* =========================================================
   DESKTOP GRANDE  (>= 1440px)
   ========================================================= */
@media (min-width: 1440px) {
  :root {
    --container-max: 1240px;
  }

  h1 {
    font-size: 56px;
  }
}

/* =========================================================
   Telas muito baixas em altura (paisagem em celular)
   ========================================================= */
@media (max-height: 480px) and (orientation: landscape) {
  .nav {
    padding-top: 88px;
  }
}