/*
 * PORTAL DAS MARÉS — MOBILE RESPONSIVE OVERRIDES
 * Arquivo limpo UTF-8. Carregado APÓS todos os outros CSS.
 * Cobre: index.html (home), casa-cumaru, casa-raizes
 * ============================================================ */

/* ============================================================
   1. GLOBAL — Previne overflow horizontal em qualquer elemento
   ============================================================ */
@media (max-width: 768px) {
  html {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    position: relative !important;
  }
}

/* ============================================================
   2. LAYOUT — Container universal responsivo
   ============================================================ */
@media (max-width: 768px) {
  .container {
    width: 100% !important;
    padding: 0 1.25rem !important;
    box-sizing: border-box !important;
  }

  .nav-inner {
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   3. NAVBAR — Esconde links, mostra hambúrguer
   ============================================================ */
@media (max-width: 900px) {
  .navbar-maresias .nav-links,
  #navbar .nav-links {
    display: none !important;
  }

  .navbar-maresias .burger,
  #navbar .burger {
    display: flex !important;
  }

  .nav-cta-maresias,
  .nav-actions-desktop {
    display: none !important;
  }
}

/* ============================================================
   4. HOME — Botões flutuantes (WhatsApp + Instagram)
      Posicionados acima da sticky bar e sem sobrepor slider
   ============================================================ */
@media (max-width: 768px) {
  #wa-float {
    bottom: 80px !important;
    right: 1rem !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 8500 !important;
  }

  #ig-float {
    bottom: 136px !important;
    right: 1rem !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 8500 !important;
  }

  .wa-tooltip,
  .ig-tooltip {
    display: none !important;
  }

  #wa-float svg,
  #ig-float svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ============================================================
   5. HOME — Cards de propriedade (Cinema Cards)
      Stacked verticalmente, sem espaço em branco gigante
   ============================================================ */
@media (max-width: 900px) {
  .prop-card-cinema {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 1rem 2rem !important;
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
  }

  #propRaizes.prop-card-cinema {
    flex-direction: column !important;
  }

  .pcc-bg {
    flex: none !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  .pcc-content {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 1.75rem 1.25rem !important;
    justify-content: flex-start !important;
  }

  .pcc-name {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
    line-height: 1.1 !important;
    margin: 0.4rem 0 0.8rem !important;
  }

  .pcc-right {
    margin-top: 1rem !important;
  }

  .pcc-val {
    font-size: 1.6rem !important;
  }

  .btn-cinema {
    transform: none !important;
    opacity: 1 !important;
    padding: 0.8rem 1.5rem !important;
  }

  /* Slider dentro do card */
  .pcc-slider {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
}

/* ============================================================
   6. HOME — Tabela de comparação
      Horizontal scroll controlado, sem overflow da página
   ============================================================ */
@media (max-width: 768px) {
  .pm-compare-section {
    padding: 3rem 0 !important;
    overflow: hidden !important;
  }

  .pm-compare-section .container {
    padding: 0 1rem !important;
  }

  .pm-ct-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    margin: 1.5rem 0 !important;
    padding: 0 0 0.75rem !important;
    box-sizing: border-box !important;
    /* NUNCA usar margin negativa aqui — causa overflow da página */
  }

  .pm-ct {
    min-width: 380px !important;
    grid-template-columns: 105px 1fr 1fr !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
  }

  .pm-ct > div {
    padding: 10px 8px !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  .pm-ct-h {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  .pm-compare-btns {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 1rem !important;
    gap: 0.75rem !important;
  }

  .pm-compare-btns a {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    padding: 13px 20px !important;
    font-size: 0.88rem !important;
  }
}

/* ============================================================
   7. HOME — Seção de Distâncias
      Nomes completos, sem truncamento
   ============================================================ */
@media (max-width: 768px) {
  .distancias-section .container {
    padding: 0 1rem !important;
  }

  .dist-grid-container {
    padding: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dist-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .dist-item {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }

  .dist-item span {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    flex: 1 !important;
  }

  .dist-item .km,
  .dist-item strong {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: 0.5rem !important;
  }
}

/* ============================================================
   8. HOME — Seções gerais / Typography
   ============================================================ */
@media (max-width: 768px) {
  .hero-title-maresias {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    line-height: 1.05 !important;
  }

  .bv-grid {
    grid-template-columns: 1fr !important;
    padding: 0 1.25rem !important;
  }

  .bv-title {
    font-size: 1.8rem !important;
  }

  .dest-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 1.25rem !important;
    gap: 1rem !important;
  }

  .dest-title {
    font-size: 1.8rem !important;
  }

  .dif-container {
    grid-template-columns: 1fr !important;
    padding: 0 1.25rem !important;
  }

  .numbers-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 1.5rem 1rem !important;
  }

  .num-divider {
    display: none !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .cta-final-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.8rem !important;
    padding: 0 1.5rem !important;
  }

  .cta-final-btns .btn-primary,
  .cta-final-btns .btn-primary-outline {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
  }

  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
  }
}

@media (max-width: 600px) {
  .dest-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   9. PROPERTY PAGES (casa-cumaru, casa-raizes)
      Controla o header/hero e layout interno
   ============================================================ */
@media (max-width: 768px) {
  /* Header / Listing header */
  .listing-header {
    padding-top: 5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Título da propriedade */
  .listing-title,
  .prop-title,
  .property-name {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
  }

  /* Galeria / slider de fotos */
  .gallery-grid,
  .photo-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }

  .gallery-main,
  .photo-main {
    height: 260px !important;
  }

  .gallery-side {
    display: none !important;
  }

  /* Booking widget */
  .booking-widget,
  .price-card {
    position: static !important;
    width: 100% !important;
    margin: 1rem 0 !important;
  }

  .bw-dates {
    grid-template-columns: 1fr !important;
  }

  /* Content layout */
  .listing-layout,
  .content-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Amenidades */
  .amenities-list {
    grid-template-columns: 1fr !important;
  }

  /* Mapa e seção de localização */
  .map-section {
    padding: 2rem 0 !important;
  }

  /* Host info / sticky bar */
  .sticky-host-bar {
    padding: 0.7rem 1rem !important;
  }

  .shb-name {
    font-size: 0.85rem !important;
  }

  .shb-btn {
    padding: 0.6rem 1rem !important;
    font-size: 0.82rem !important;
  }

  /* Calendário/check-in */
  .calendar-container,
  .checkin-section {
    width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ============================================================
   10. SCARCITY BAR e elementos fixos
   ============================================================ */
@media (max-width: 768px) {
  .scarcity-bar {
    font-size: 0.58rem !important;
    padding: 0.4rem 0.8rem !important;
    letter-spacing: 0.1em !important;
    position: relative !important;
    width: 100% !important;
  }
}

/* ============================================================
   11. TYPOGRAPHY universal — quebra de palavras longas
   ============================================================ */
@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  p, span, li, a, td, th {
    overflow-wrap: break-word !important;mano
  }
}

/* ============================================================
   12. PADDING FIX FOR FLOATING WIDGETS
   Prevent text from being covered by the 'back to top' / chat widgets
   ============================================================ */
@media (max-width: 768px) {
  .layout-left, 
  .listing-about, 
  .listing-features, 
  .host-header {
    padding-right: 50px !important;
    box-sizing: border-box !important;
  }
}



/* Fix desktop wrapping for Distancias */
.dist-item {
  gap: 0.5rem;
  flex-wrap: nowrap !important;
}
.dist-item span {
  flex: 1;
  word-break: break-word;
}
.dist-item .km, .dist-item strong {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}