/*
 * WENTZ IMOVEIS V3 - FLUID RESPONSIVE OVERRIDES
 * Carregar este arquivo por ultimo no HTML para ajustar tamanhos sem quebrar layouts existentes.
 */

:root {
  /* Mapa (menor no mobile para melhor UX) */
  --fluid-map-h: clamp(340px, 50vh, 560px);

  /* Cards da galeria (mais estreitos no mobile, 260px = 81% de 320px) */
  --fluid-card-w: clamp(260px, 85vw, 340px);
  --fluid-card-img-h: clamp(160px, 22vh, 240px);

  /* Thumbnails (44px minimo = WCAG 2.5.5 + iOS HIG touch target) */
  --fluid-thumb: clamp(44px, 6.5vw, 72px);

  /* Itens da bandeja de cidade */
  --fluid-tray-item-w: clamp(140px, 42vw, 190px);
  --fluid-tray-img-h: clamp(100px, 16vh, 140px);

  /* NOVO: imagem da lista de busca (responsiva) */
  --fluid-search-img-h: clamp(140px, 28vw, 200px);

  /* Beneficios */
  --fluid-benefits-pad-y: clamp(56px, 8vw, 100px);
  --fluid-benefits-pad-x: clamp(16px, 4vw, 20px);
  --fluid-benefits-title: clamp(28px, 4.5vw, 42px);
  --fluid-benefits-subtitle: clamp(16px, 2.5vw, 20px);
  --fluid-benefit-icon: clamp(40px, 7vw, 56px);
}

/* ==================== MAPA ==================== */
/* DESKTOP: altura fixa para estabilidade do Leaflet */
@media (min-width: 769px) {
  #hyper-map {
    height: 600px !important;
    min-height: 600px;
  }
}

/* MOBILE/TABLET: altura fluida */
@media (max-width: 768px) {
  #hyper-map {
    height: var(--fluid-map-h);
  }
}

/* ==================== GALERIA (CARDS) ==================== */
.property-card {
  min-width: var(--fluid-card-w);
  max-width: var(--fluid-card-w);
}

.property-card .property-image-container {
  height: var(--fluid-card-img-h);
  max-height: var(--fluid-card-img-h);
  overflow: hidden;
}

.property-image-container img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

/* ==================== BANDEJA DE CIDADE (MAPA) ==================== */
.city-tray-item {
  min-width: var(--fluid-tray-item-w);
  max-width: var(--fluid-tray-item-w);
}

.city-tray-item-image {
  height: var(--fluid-tray-img-h);
}

/* ==================== THUMBNAILS (MODAIS E BANDEJAS) ==================== */
.property-tray-thumbnails img,
.property-details-thumbnails img,
.photo-gallery-thumbnails img {
  width: var(--fluid-thumb);
  height: var(--fluid-thumb);
}

/* ==================== ANTI-OVERFLOW (TEXTOS LONGOS) ==================== */
.property-card-content,
.city-tray-item-info,
.property-tray-info,
.property-details-info {
  min-width: 0;
}

.property-description,
.property-address,
.property-tray-description,
.property-tray-address,
.property-tray-city,
.property-details-description p,
.property-details-address,
.property-details-city {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==================== BENEFICIOS ==================== */
.benefits-section {
  padding: var(--fluid-benefits-pad-y) var(--fluid-benefits-pad-x);
}

.benefits-section .section-title h2 {
  font-size: var(--fluid-benefits-title);
}

.benefits-section .section-title p {
  font-size: var(--fluid-benefits-subtitle);
}

.benefits-section .benefit-icon {
  font-size: var(--fluid-benefit-icon);
}

/* Ajuste suave do padding do card sem mexer no sistema de camadas */
.benefit-card {
  padding: clamp(24px, 4vw, 40px) clamp(20px, 3.5vw, 32px);
}

/* ==================== LISTA DE BUSCA (SEARCH RESULTS) ==================== */
.search-result-image {
  height: var(--fluid-search-img-h) !important;
  min-height: 140px !important;
  max-height: var(--fluid-search-img-h) !important;
  overflow: hidden !important;
}

.search-result-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 140px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ==================== THUMBNAILS RESPONSIVAS NO MOBILE ==================== */
/* Garantir que miniaturas nao quebrem linha e usem scroll horizontal */
@media (max-width: 768px) {
  .property-tray-thumbnails,
  .property-details-thumbnails,
  .photo-gallery-thumbnails {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }

  .property-tray-thumbnails img,
  .property-details-thumbnails img,
  .photo-gallery-thumbnails img {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ==================== CITY TRAY MOBILE (FALLBACK SE ABRIR) ==================== */
/* Forcar cards quase fullwidth e botao X tocavel */
@media (max-width: 1024px) {
  .city-tray-item {
    min-width: calc(100vw - 6rem) !important;
    max-width: calc(100vw - 6rem) !important;
  }
  
  .city-tray-item-image {
    height: var(--fluid-tray-img-h) !important;
    max-height: var(--fluid-tray-img-h) !important;
  }
  
  .city-tray-item-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
  }
  
  .city-tray-close {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.3rem !important;
  }
  
  .city-tray-carousel {
    scroll-snap-type: x mandatory;
  }
  
  .city-tray-item {
    scroll-snap-align: center;
  }
}

@media (max-width: 480px) {
  .city-tray-item {
    min-width: calc(100vw - 4rem) !important;
    max-width: calc(100vw - 4rem) !important;
  }
}