/*
 * Layout de página (header, footer, hero, grillas). `tokens.css` trae los
 * valores; este archivo solo los usa. Sin build, sin nesting — CSS plano
 * que cualquier navegador de los últimos años entiende.
 */

/* — Header — */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.site-header__logo {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.site-header__wordmark span {
  color: var(--clay);
}

.site-header__search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  max-width: 420px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
  overflow: hidden;
}

.site-header__search input {
  flex: 1;
  border: none;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  outline: none;
  min-width: 0;
}

.site-header__search button {
  border: none;
  background: var(--ink);
  color: var(--paper);
  width: 36px;
  height: 36px;
  margin: 3px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.site-header__nav {
  flex: 0 0 auto;
}

.site-header__fav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
}

.site-header__fav-link:hover {
  background: var(--surface);
}

@media (max-width: 640px) {
  .site-header__search {
    max-width: none;
  }
}

/* — Hero (home) — */
.hero {
  position: relative;
  padding-block: var(--space-8) var(--space-7);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 420px;
  background: var(--dusk-sky);
  opacity: 0.08;
  filter: blur(60px);
  pointer-events: none;
}

/*
 * En escritorio ancho, `.hero__inner` (max-width 640px) dejaba toda la
 * mitad derecha del hero en blanco (tarea "calidad visual" #7, visto en
 * `final-home-1440.png`). `.hero__visual` es un SVG inline (cero bytes de
 * red: no puede convertirse en el elemento LCP ni competir con él, a
 * diferencia de sumar fotos reales) con la silueta de unas casas al
 * atardecer — la misma paleta y el mismo concepto de "atardecer de
 * Barquisimeto" que ya insinuaba `--dusk-sky`/`.hero::before`, ahora hecho
 * imagen en vez de solo un resplandor difuso de fondo.
 */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  align-items: center;
  gap: var(--space-7);
}

.hero__inner {
  position: relative;
}

.hero__visual {
  position: relative;
}

.hero__visual svg {
  width: 100%;
  height: auto;
  max-height: 380px;
}

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

  .hero__visual {
    display: none;
  }
}

.hero__title {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.hero__subtitle {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-lg);
  max-width: 46ch;
}

.hero__form {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  padding: var(--space-2);
}

.hero__form textarea {
  flex: 1;
  border: none;
  resize: none;
  font: inherit;
  padding: var(--space-3) var(--space-3);
  min-height: 3rem;
  outline: none;
}

.hero__form button {
  align-self: flex-end;
}

.hero__hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* — Chips de categoría — */
.chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-5);
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

/* Las píldoras del chip-row (categorías de home) y del chip-filter (abajo)
   comparten el mismo problema si no se fija aquí: dentro de un flex row sin
   `white-space: nowrap`, un item puede encogerse por debajo del ancho de su
   texto y el texto envuelve a dos líneas en vez de dejar que el contenedor
   scrollee horizontal (visto en las capturas: "3+ habitaciones", "Cerca de
   colegios, supermercado" partidos en dos líneas en vez de una píldora).
   `flex: 0 0 auto` + `white-space: nowrap` fuerza a cada píldora a su ancho
   natural de una sola línea; el overflow-x del contenedor hace el resto. */
.chip-row > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* — Grilla de tarjetas — */
.section {
  padding-block: var(--space-6);
}

.section__heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
}

/*
 * `auto-fill` + `minmax(240px, 1fr)` en vez de columnas fijas
 * (`repeat(4,1fr)`, luego 3, 2, 1 por media query): con pocos resultados —
 * el caso más visible es `/buscar` con la mitad de la pantalla ocupada por
 * el mapa — una grilla de columnas fijas igual reserva las 4 columnas del
 * breakpoint de escritorio aunque solo haya 1 tarjeta, y esa tarjeta termina
 * angosta (~150px, el ancho de una sola columna en un contenedor ya
 * reducido por el mapa) con un hueco vacío al lado en vez de crecer (visto
 * en QA final, spec §8: capturas `buscar-pildoras-filtradas.png`,
 * `final-buscar-frase1-1440.png`). `auto-fill` calcula cuántas columnas de
 * al menos 240px entran en el ancho real disponible — que es angosto junto
 * al mapa en /buscar y ancho en /, /agente — y `1fr` reparte el sobrante
 * entre ellas, así que la tarjeta ocupa todo el espacio que tiene sin
 * quedar angosta ni depender de breakpoints fijos por viewport.
 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5) var(--space-4);
}

/*
 * Por debajo de 640px, `minmax(240px, 1fr)` nunca entra más de 1 columna de
 * todos modos (240×2 + el gap no cabe en un viewport angosto) — así que aquí
 * el `auto-fill` no aporta nada, solo trae consigo un bug real de Chrome:
 * medido con `Emulation.setDeviceMetricsOverride` a un `deviceScaleFactor`
 * fraccionario (1.75, el que usa el propio Lighthouse móvil por defecto —
 * "Moto G Power"), el motor de grid recalculaba el alto de la segunda
 * tarjeta en un segundo pase de layout — un layout shift real (CLS
 * ≈0,23 en /buscar, spec §8) que no aparece con un `devicePixelRatio`
 * entero (1 o 2), solo con uno fraccionario. Con una sola columna, un
 * `flex` en columna hace exactamente lo mismo (una tarjeta por fila) sin
 * ese cálculo de grid de por medio.
 */
@media (max-width: 640px) {
  .grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
}

.empty-state {
  text-align: center;
  padding-block: var(--space-8);
  color: var(--ink-muted);
}

.empty-state h2 {
  font-size: var(--text-lg);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

/* — Barra de resultados (/buscar) — */
.results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.results-bar__count {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--dusk-wash);
  color: var(--dusk);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
}

.chip-filter a {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(61, 47, 99, 0.14);
  font-size: 0.7rem;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-6);
}

/* — Detalle de inmueble — */
/*
 * Galería adaptada al número de fotos (tarea "calidad visual" #4, estilo
 * Airbnb): antes la grilla era siempre "1 grande + hasta 4 chicas" (2fr 1fr
 * 1fr, 2 filas) sin importar cuántas fotos hubiera un inmueble — con menos
 * de 5 quedaban celdas vacías (hueco blanco, visto en QA final en
 * `final-inmueble-*.png`). `[data-count]` (puesto por el `@php` de
 * inmueble.blade.php, topado en 5) define una composición distinta para
 * cada caso; solo el de 5 fotos es la grilla original.
 */
.gallery-wrap {
  position: relative;
}

.gallery {
  display: grid;
  gap: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gallery__item {
  border: none;
  padding: 0;
  cursor: zoom-in;
  background: none;
  display: block;
}

.gallery__item--vacio {
  background: var(--surface);
  aspect-ratio: 16 / 7;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery[data-count='1'] {
  grid-template-columns: 1fr;
  grid-template-rows: 420px;
}

.gallery[data-count='2'] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 420px;
}

.gallery[data-count='3'] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 210px);
}

.gallery[data-count='3'] > :first-child {
  grid-row: span 2;
}

.gallery[data-count='4'] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, 140px);
}

.gallery[data-count='4'] > :first-child {
  grid-row: span 3;
}

.gallery[data-count='5'] {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 210px);
}

.gallery[data-count='5'] > :first-child {
  grid-row: span 2;
}

.gallery-todas {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  background: var(--paper);
}

@media (max-width: 780px) {
  .gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }

  .gallery > :not(:first-child) {
    display: none;
  }

  /*
   * Sin `grid-template-rows` fijo en móvil, el alto de la única foto
   * visible dependía del tamaño intrínseco de la imagen — desconocido hasta
   * que termina de bajar, así que la página saltaba al llegar (CLS medido
   * por Lighthouse en QA final, spec §8: /inmueble en 81 móvil). El
   * `aspect-ratio` reserva ese alto desde el primer layout, con el `width`/
   * `height` del HTML como respaldo si el navegador no soporta la propiedad.
   */
  .gallery img {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .gallery-todas {
    right: var(--space-3);
    bottom: var(--space-3);
  }
}

.detail-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-6);
}

@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

.detail-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.detail-price {
  font-size: var(--text-xl);
}

.share-btn svg {
  display: block;
}

.detail-map {
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-3);
  background: var(--surface);
}

.detail-map__caption {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
  border-block: 1px solid var(--line);
  padding-block: var(--space-5);
  margin-block: var(--space-5);
}

.detail-facts dt {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.detail-facts dd {
  margin: 0;
  font-weight: 700;
}

.amenity-list,
.nearby-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-3) 0 var(--space-6);
  list-style: none;
}

.agent-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: calc(64px + var(--space-4));
}

.agent-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.agent-card__name {
  font-size: var(--text-lg);
  margin-top: var(--space-3);
}

.agent-card__badge {
  margin-top: var(--space-1);
}

.agent-card .btn-primary {
  width: 100%;
  margin-top: var(--space-4);
}

.agent-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--dusk);
  font-weight: 600;
  font-size: var(--text-sm);
}

.agent-card__link svg {
  transition: transform 0.15s ease;
}

.agent-card__link:hover,
.agent-card__link:focus-visible {
  text-decoration: underline;
}

.agent-card__link:hover svg,
.agent-card__link:focus-visible svg {
  transform: translateX(2px);
}

/* — Perfil de agente — */
.agent-hero {
  display: flex;
  gap: var(--space-5);
  /* `flex-start`, no `center`: con el formulario "Contactar al agente"
     dentro de `.agent-hero__body` (tarea "calidad visual" #6) esa columna
     es mucho más alta que la foto — con `align-items: center` la foto
     terminaba flotando a la mitad del bloque, lejos del nombre, en vez de
     quedar arriba junto a él (visto en QA final en /agente). */
  align-items: flex-start;
  padding-block: var(--space-7);
}

.agent-hero__body {
  /* Sin tope, el formulario se estiraba al ancho completo del container
     (~1080px): campos de texto y botones larguísimos, nada parecido a un
     formulario real (visto en QA final en /agente). 560px es un ancho de
     lectura/formulario cómodo, igual de angosto que la tarjeta del agente
     en /inmueble. */
  max-width: 560px;
}

.agent-hero__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  /* Alinea ópticamente el círculo de la foto con la línea base del <h1>
     de al lado en vez de con el techo de la caja de texto. */
  margin-top: var(--space-1);
}

.agent-hero__name {
  font-size: var(--text-2xl);
}

.agent-hero__bio {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  max-width: 60ch;
}

/* — Footer — */
.site-footer {
  margin-top: var(--space-8);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-7);
}

@media (max-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

.site-footer__brand {
  font-weight: 800;
  font-size: var(--text-lg);
}

.site-footer__tagline {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  max-width: 42ch;
}

.site-footer__heading {
  font-size: var(--text-xs);
  text-transform: none;
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
}

.site-footer__grid a {
  display: block;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
}

.site-footer__bottom {
  border-top: 1px solid var(--line-strong);
  padding-block: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-footer__homly {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.site-footer__homly img {
  height: 24px;
  width: auto;
}