/* ============================================================================
   TELEMÓVEL — até 809px
   ============================================================================
   SÓ existe aqui o que é específico de telemóvel. Tudo o resto vem dos ficheiros
   base (estado desktop) e do tablet.css.

   Para mudar o telemóvel, mexe só neste ficheiro.

   Carrega POR ÚLTIMO — por isso ganha sobre o tablet.css nos ecrãs pequenos,
   sem precisar de !important nem de seletores mais específicos.
   ============================================================================ */

@media (max-width: 809px) {

  /* ---------- 1. Tokens ---------- */
  :root {
    --grid-margin: 20px;
  }

  /* ---------- 2. Layout ---------- */
  .section { padding-block: var(--space-6); }

  /* ---------- 3. Header / nav ---------- */
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }

  /* ---------- 4. Hero ---------- */
  /* Aqui o .hero__actions empilha os 3 botões e o cartão de pesquisa fica em
     2 colunas + botão — muito mais alto que a linha única do desktop. */
  .hero-viewport { min-height: clamp(860px, 100svh, 940px); }

  .hero__inner { top: 0; }
  .hero__logo { width: clamp(300px, 65vw, 420px); }
  .hero__actions { gap: var(--space-2); margin-top: var(--space-3); }

  .eyebrow + h1,
  .eyebrow + h2 { margin-top: calc(0.1em + 8px); }

  .hero-search__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-search__submit { grid-column: 1 / -1; }

  #home-first-section { padding-top: calc(var(--space-6) + 110px); }

  /* ---------- 5. Grelha de viaturas ---------- */
  .vcard-grid { grid-template-columns: minmax(0, 1fr); }

  /* ---------- 6. Slider Novidades ---------- */
  /* Nada de propósito — ver nota em tablet.css. */

  /* ---------- 7. Filtros (gaveta) ---------- */
  /* position: static anula o sticky herdado do desktop — sem isto o painel
     colava-se ao topo dentro da gaveta. */
  .filters {
    display: none;
    position: static;
    flex-direction: column;
    align-items: stretch;
  }
  .filters.is-open { display: flex; }
  .filters__break { display: none; }
  .filters__drawer-toggle {
    display: inline-flex;
    margin-bottom: var(--space-3);
  }
  .field { min-width: 0; }

  /* ---------- 8. Páginas interiores ---------- */
  .about-teaser { grid-template-columns: minmax(0, 1fr); }
  .testimonial-grid { grid-template-columns: minmax(0, 1fr); }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .split-content { grid-template-columns: minmax(0, 1fr); }
  .form__row--2 { grid-template-columns: minmax(0, 1fr); }
  .ficha-layout { grid-template-columns: minmax(0, 1fr); }

  /* ---------- 9. Footer ---------- */
  .footer__grid { grid-template-columns: minmax(0, 1fr); }

  /* ---------- 10. Flutuantes ---------- */
  .sticky-cta { display: flex; }
  body.has-sticky-cta .whatsapp-float { display: none; }
}