/* ==========================================================================
   ROCHA IMOBILIÁRIA — COMPLEMENTO DE ESTILO: CATÁLOGO, IMÓVEL, CATÁLOGOS E PÁGINAS
   --------------------------------------------------------------------------
   Carregado só nas páginas de imóveis, catálogos e institucionais (via @push('styles')).
   Usa as variáveis (--brand, --accent, --radius...) definidas em site.css.
   Índice
     1. Filtros: lista de comodidades rolável
     2. Página do imóvel: título, texto e faixa de miniaturas
     3. Preço e abas dos formulários
     4. Cartão do corretor
     5. Tour 3D: estado de carregamento
     6. Catálogos temáticos
     7. Páginas institucionais
   ========================================================================== */


/* 1. FILTROS ----------------------------------------------------------------
   A lista de comodidades pode ser longa: limita a altura e deixa rolar. */
.amenity-filter { max-height: 220px; overflow-y: auto; padding-right: .25rem; }

/* O select "Ordenar por" fica fora do painel; garante largura confortável. */
#f_sort { min-width: 10.5rem; }


/* 2. PÁGINA DO IMÓVEL -------------------------------------------------------- */

/* Título principal do anúncio: fonte de exibição, com quebra equilibrada. */
.property-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 .5rem; text-wrap: balance; }

/* Descrição curta em destaque, com uma barra de latão à esquerda. */
.property-lead { border-left: 4px solid var(--accent); padding-left: 1rem; color: var(--brand); font-size: 1.15rem; }

/* Descrição completa: leitura confortável (linha não muito longa, bom espaçamento). */
.property-text { max-width: 72ch; line-height: 1.8; color: #2a3532; }

/* Faixa de miniaturas abaixo da galeria: rolagem lateral com "encaixe" de cada foto. */
.thumb-strip {
    display: flex; gap: .5rem; margin-top: .5rem; overflow-x: auto; padding-bottom: .4rem;
    scroll-snap-type: x proximity; scrollbar-width: thin;
}
.thumb-strip__item {
    flex: 0 0 auto; width: 92px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent;
    border-radius: var(--radius-sm); overflow: hidden; background: var(--stone-200); cursor: zoom-in;
    scroll-snap-align: start; transition: border-color .15s, transform .15s;
}
.thumb-strip__item:hover, .thumb-strip__item:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.thumb-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* 3. PREÇO E FORMULÁRIOS ------------------------------------------------------ */

/* Segundo valor (ex.: aluguel quando o imóvel também é à venda): um pouco menor. */
.price-box__value--sm { font-size: clamp(1.4rem, 3vw, 1.8rem); }

/* Cartão dos formulários: sem preenchimento extra do .form-card e com borda superior de latão. */
.p-form { padding: 1.25rem; border-top: 4px solid var(--accent); }

/* Abas "Tenho interesse" / "Agendar visita" em formato de pílulas. */
.p-tabs { background: var(--stone-100); border-radius: var(--radius-sm); padding: .25rem; gap: .25rem; }
.p-tabs .nav-link { color: var(--ink); font-weight: 650; font-size: .9rem; border-radius: calc(var(--radius-sm) - 2px); padding: .55rem .5rem; }
.p-tabs .nav-link.active { background: var(--brand); color: #fff; }
.p-tabs .nav-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }


/* 4. CARTÃO DO CORRETOR ------------------------------------------------------- */
.agent-card { background: #fff; border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.agent-card a { color: var(--brand); text-decoration: none; font-weight: 600; }
.agent-card a:hover { color: var(--accent-dark); }
/* Foto redonda do corretor; sem foto, mostra a inicial do nome sobre fundo de marca. */
.agent-card__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.agent-card__photo--blank { display: grid; place-items: center; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }


/* 5. TOUR 3D: ESTADO DE CARREGAMENTO -------------------------------------------
   O estilo principal do tour está em site.css; aqui só o aviso "Carregando modelo…"
   que fica atrás do <model-viewer> até o arquivo .glb terminar de baixar. */
.tour__loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem;
    color: #cfdad7; font-size: .95rem; pointer-events: none; transition: opacity .4s;
}
.tour__loading.is-hidden { opacity: 0; }
/* O modelo ocupa toda a área e fica acima do aviso. */
.tour__stage model-viewer { position: relative; z-index: 1; }
.tour__hint { z-index: 2; }
/* Em tela cheia o palco preenche a tela inteira. */
.tour__stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }


/* 6. CATÁLOGOS TEMÁTICOS ------------------------------------------------------- */

/* Capa de catálogo na listagem: mais alta que na página inicial e com chamada "Ver imóveis". */
.catalog-tile { min-height: 280px; }
.catalog-tile__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-weight: 650; color: var(--accent); }
.catalog-tile:hover .catalog-tile__cta i { transform: translateX(4px); }
.catalog-tile__cta i { transition: transform .2s; }

/* Topo da página de um catálogo: usa a capa como fundo, escurecida para manter o texto legível. */
.catalog-banner { position: relative; isolation: isolate; background-size: cover; background-position: center; }
.catalog-banner::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--brand-dark) 15%, color-mix(in srgb, var(--brand) 55%, transparent)), var(--cover, none) center / cover no-repeat;
}
.mw-60 { max-width: 60ch; }


/* 7. PÁGINAS INSTITUCIONAIS ---------------------------------------------------- */
.page-article { background: #fff; border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--shadow-sm); }
.page-article a { color: var(--brand); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.page-article blockquote { border-left: 4px solid var(--accent); margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem; color: var(--stone-500); font-style: italic; }