/*====================================
  RESPONSIVE — Zroo Imóveis
  Breakpoints: 1200 · 992 · 768 · 576 · 375
  + Ajustes para telas de toque (hover: none)
====================================*/

/* As margens laterais escalam com a largura via --container-pad (clamp),
   reproduzindo o comportamento fluido do Figma. Abaixo, apenas ajustes de layout. */

/* ---- Telas de toque (celular/tablet sem mouse) ---- */
/* Controles que no desktop aparecem só no :hover precisam ficar
   sempre visíveis onde não há hover, senão o usuário não consegue usá-los. */
@media (hover: none) {
  .property-card__nav,
  .property-card__dots { opacity: 1; }

  /* Alvos de toque maiores para as setas do carrossel de fotos */
  .property-card__arrow { width: 34px; height: 34px; }
  .property-card__arrow .icon { width: 16px; height: 16px; }
}

/* ---- ≤ 1200px ---- */
@media (max-width: 1200px) {
  .nav__list { gap: var(--space-5); }
  .property-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Itens de conta (Entrar/Sair, Favoritos…) aparecem só no menu mobile;
   no desktop eles ficam no dropdown do avatar. */
.nav__list--acct { display: none; }

/* ---- ≤ 992px : ativa menu mobile ---- */
@media (max-width: 992px) {
  .nav-toggle { display: flex; }

  /* Mobile = um menu só: os itens de conta entram no hambúrguer e o avatar some
     (a função dele já está no menu). */
  .account { display: none; }
  .nav__list--acct {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }

  /* Ancora o dropdown ao "pill" do header, não à borda da tela */
  .header__inner { position: relative; }

  .nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0;
    margin: 0;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: 0.9rem 1rem; border-radius: var(--radius); }
  .nav__link::after { display: none; }
  .nav__link:hover { background: var(--surface-2); }

  /* hambúrguer -> X */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { min-height: 680px; }

  /* Imóveis: 3 -> 2 colunas */
  .property-grid { grid-template-columns: repeat(2, 1fr); }

  /* Seções de duas colunas viram uma coluna */
  .owners__inner,
  .brokers__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .owners__media { order: -1; }         /* imagem acima do texto */
  .owners__media img { aspect-ratio: 4 / 3; }

  /* Footer: marca em cima ocupando a linha, social ao lado */
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__social { grid-column: 1 / -1; }
}

/* ---- ≤ 768px ---- */
@media (max-width: 768px) {
  :root {
    --container: 100%;
    --container-pad: 1.25rem;
    --space-9: 4rem;
  }

  /* Respiro vertical menor entre seções no celular */
  .section { padding-block: var(--space-7); }

  .header__inner { padding-inline: 1.25rem; gap: var(--space-3); }
  .header__login span,
  .header__login { font-size: var(--fs-xs); }

  /* Mais respiro acima e abaixo do título (fonte menor p/ tudo caber no load) */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 4.25rem); padding-bottom: var(--space-7); }
  .hero__title { font-size: clamp(2rem, 9vw, 2.9rem); }
  .search-mode { margin-top: var(--space-7); }
  .search-card { max-width: 100%; }
  .hero__content { max-width: 100%; }
  .agent__avatar { width: 60px; height: 60px; }
  .agent__bubble { max-width: 180px; }

  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head--tight { flex-direction: row; align-items: center; }

  .owners__title,
  .brokers__title { font-size: var(--fs-2xl); }

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

/* ---- ≤ 576px ---- */
@media (max-width: 576px) {
  .header__login {
    width: 44px; height: 44px;
    padding: 0;
  }
  .header__login span { display: none; }

  .search-card__row,
  .search-card__row:last-child { grid-template-columns: 1fr; }
  .search-card__submit { width: 100%; border-radius: var(--radius-pill); }

  .hero__title { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  .search-mode { width: 100%; }
  .search-mode__btn { flex: 1; justify-content: center; }

  /* Imóveis: 2 -> 1 coluna */
  .property-grid { grid-template-columns: 1fr; }

  /* Bairros e artigos: um card por vez, deixando uma fatia do
     próximo à mostra (dica de que há mais para arrastar). */
  .city-card { flex-basis: 80%; }
  .post-card { flex-basis: 85%; }

  /* CRM: menos aperto em telas estreitas */
  .crm { padding: var(--space-5); }
  .crm-stats { gap: var(--space-2); }
  .crm-client__info span { font-size: 0.72rem; }

  .footer__inner { grid-template-columns: 1fr; }
}

/* ---- ≤ 375px ---- */
@media (max-width: 375px) {
  :root { --container-pad: 1rem; }
  .search-card { padding: var(--space-5); }
  .agent__avatar { width: 54px; height: 54px; }

  /* Empilha ações dos proprietários para não estourar a largura */
  .owners__actions { gap: var(--space-4); }
}

/* ============================================================
   Ajustes por ALTURA de tela (notebooks): compacta o hero para
   o card "Buscar imóvel" caber inteiro no load, sem rolar.
   Telas altas mantêm o layout amplo original.
   ============================================================ */
@media (max-height: 820px) and (min-width: 769px) {
  .hero {
    min-height: 0;                                   /* deixa o hero acompanhar o conteúdo */
    padding-top: calc(var(--header-h) + 2.75rem);    /* respiro acima do título */
    padding-bottom: var(--space-6);
  }
  .hero__title { font-size: 70px; margin: 0; } /* menor p/ caber com o respiro */
  .search-mode { margin-top: var(--space-6); }        /* respiro abaixo do título */
  .search-card { margin-top: var(--space-3); }
  .hero__tagline { margin-top: var(--space-3); }
}

/* Notebooks bem baixos (ex.: 1366×610 com barra de tarefas) */
@media (max-height: 680px) and (min-width: 769px) {
  .hero { padding-top: calc(var(--header-h) + 2rem); }
  .hero__title { font-size: clamp(1.8rem, 3.6vw, 50px); }
  .search-mode { margin-top: var(--space-5); }
}