/* ============================================================================
   estadia-express - property.css
   Design System V3 - Fase 5: Pagina do imovel

   Escopo: a moldura e a tipografia de body.__page_apartment. Os cartoes de
   imoveis semelhantes sao do cards.css; o campo de datas do painel de reserva
   e do search.css. Aqui cuidamos do fundo, da medida, da galeria, do titulo,
   das secoes e do painel de reserva.

   Direcao visual (derivada da Hero):
   - a pagina inteira sobre o canvas; o painel de reserva e que vira papel;
   - hierarquia por tamanho e espaco, nao por peso e caixa;
   - hairline no lugar de sombra e borda grossa.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. A PAGINA
   Era a ultima pagina ainda sobre branco puro. A relacao estava invertida:
   fundo branco com o painel de reserva em canvas. Trocamos os papeis.
   ---------------------------------------------------------------------------- */
body.__page_apartment{ background:var(--eex-canvas); color:var(--eex-text); }
body.__page_apartment #mainblock,
body.__page_apartment #maincontent,
body.__page_apartment .appDetails{ background:transparent; }

/* ----------------------------------------------------------------------------
   2. A MEDIDA
   O container do Bootstrap trava em 1140px e ignora a goteira do DS. Passamos
   para a medida do sistema, igual ao resto do site.
   ---------------------------------------------------------------------------- */
body.__page_apartment .appDetails > .container{
  max-width:var(--eex-maxw);
  width:100%;
  padding-left:var(--eex-gutter);
  padding-right:var(--eex-gutter);
}

/* ----------------------------------------------------------------------------
   3. A GALERIA
   A faixa de fotos ja sangra de ponta a ponta e isso esta certo. O problema
   eram os 45 marcadores azuis (#007AFF, fora da paleta) empilhados embaixo:
   com 45 fotos nenhum marcador informa nada, so polui. As setas ja dao a
   navegacao e o arrasto funciona. Some a poeira, fica a foto.
   ---------------------------------------------------------------------------- */
body.__page_apartment .appDetails > .container-fluid{
  margin-bottom:var(--eex-s7) !important;
  border-bottom:1px solid var(--eex-hairline);
}
body.__page_apartment .appDetails .swiper-pagination{ display:none !important; }

/* As setas ganham a mesma pele discreta do resto do sistema. */
body.__page_apartment .appDetails .swiper-button-prev,
body.__page_apartment .appDetails .swiper-button-next{
  width:44px; height:44px;
  border-radius:var(--eex-r-pill);
  background:var(--eex-surface);
  border:1px solid var(--eex-hairline);
  color:var(--eex-ink);
  transition:transform .3s var(--eex-ease), border-color .3s var(--eex-ease);
}
body.__page_apartment .appDetails .swiper-button-prev:hover,
body.__page_apartment .appDetails .swiper-button-next:hover{
  transform:scale(1.06);
  border-color:var(--eex-ink);
}
body.__page_apartment .appDetails .swiper-button-prev::after,
body.__page_apartment .appDetails .swiper-button-next::after{ font-size:15px; }

/* 3.1 GRADE "1 GRANDE + 4 PEQUENAS" (DESIGN.md 12, D-037/D-038)
   O Swiper nativo continua no DOM, intocado -- so some quando o JS
   confirma que a grade nova montou com sucesso (classe condicional no
   body, nunca oculto incondicionalmente, ver property.js ensureGallery()).
   Layout por data-eex-photo-count: o caso padrao (>=5 fotos) e a base
   abaixo; N=1..4 colapsam via os blocos seguintes. */
body.__page_apartment.eex-gallery-ready .appDetails > .container-fluid{
  display:none !important;
}
.eex-gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:6px;
  aspect-ratio:2.2 / 1;
  border-radius:var(--eex-r-md);
  overflow:hidden;
  margin-bottom:var(--eex-s7);
}
.eex-gallery-cell{
  position:relative;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:var(--eex-hairline);
  cursor:pointer;
  overflow:hidden;
}
.eex-gallery-cell--main{ grid-column:1 / 3; grid-row:1 / 3; }
.eex-gallery-cell img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--eex-d3) var(--eex-ease-out);
}
.eex-gallery-cell:hover img,
.eex-gallery-cell:focus-visible img{ transform:scale(1.03); }
.eex-gallery-more-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,18,16,.55);
  color:#FFFFFF;
  font-family:var(--eex-font-ui);
  font-weight:var(--eex-w-semi);
  font-size:var(--eex-fs-h4);
}

/* Colapso por contagem (DESIGN.md 12.6) */
.eex-gallery-grid[data-eex-photo-count="1"]{ grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:16 / 9; }
.eex-gallery-grid[data-eex-photo-count="1"] .eex-gallery-cell--main{ grid-column:1; grid-row:1; }

.eex-gallery-grid[data-eex-photo-count="2"]{ grid-template-columns:1fr 1fr; grid-template-rows:1fr; aspect-ratio:16 / 6; }
.eex-gallery-grid[data-eex-photo-count="2"] .eex-gallery-cell--main{ grid-column:auto; grid-row:auto; }

.eex-gallery-grid[data-eex-photo-count="3"]{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.eex-gallery-grid[data-eex-photo-count="3"] .eex-gallery-cell--main{ grid-column:1; grid-row:1 / 3; }

.eex-gallery-grid[data-eex-photo-count="4"]{ grid-template-columns:2fr 1fr; grid-template-rows:repeat(3, 1fr); }
.eex-gallery-grid[data-eex-photo-count="4"] .eex-gallery-cell--main{ grid-column:1; grid-row:1 / 4; }

@media (max-width:767px){
  .eex-gallery-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
    aspect-ratio:4 / 3 !important;
  }
  .eex-gallery-grid .eex-gallery-cell{ display:none; }
  .eex-gallery-grid--multi .eex-gallery-cell--main::after{
    content:"Ver todas as fotos";
    position:absolute;
    left:var(--eex-s4);
    bottom:var(--eex-s4);
    padding:var(--eex-s2) var(--eex-s4);
    border-radius:var(--eex-r-pill);
    background:rgba(20,18,16,.7);
    color:#FFFFFF;
    font-family:var(--eex-font-ui);
    font-size:var(--eex-fs-micro);
    font-weight:var(--eex-w-semi);
    letter-spacing:var(--eex-track-micro);
    text-transform:uppercase;
  }
  .eex-gallery-grid .eex-gallery-cell--main{
    display:block !important;
    grid-column:1 !important;
    grid-row:1 !important;
  }
}

/* 3.2 LIGHTBOX (DESIGN.md 12.2/12.5) -- modal proprio, sem lib externa.
   Mesmo vocabulario das setas do Swiper acima (pilula 44px, --eex-surface,
   hairline, hover scale 1.06), duplicado aqui de proposito (mesma
   convencao de duplicar em vez de abstrair ja usada entre .eex-whatsapp-cta
   e #panelBook .btn-primary). Sem overflow:hidden em html/body -- ja
   quebrou position:sticky uma vez (AT-QA-027/D-015); o modal cobre a
   viewport inteira, o scroll de fundo fica visualmente irrelevante. */
.eex-gallery-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(20,18,16,.92);
}
.eex-gallery-modal.is-open{ display:flex; }
.eex-gallery-modal__img{
  max-width:88vw;
  max-height:82vh;
  object-fit:contain;
}
.eex-gallery-modal__close,
.eex-gallery-modal__prev,
.eex-gallery-modal__next{
  position:absolute;
  width:44px; height:44px;
  border-radius:var(--eex-r-pill);
  background:var(--eex-surface);
  border:1px solid var(--eex-hairline);
  color:var(--eex-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:transform .3s var(--eex-ease), border-color .3s var(--eex-ease);
}
.eex-gallery-modal__close:hover,
.eex-gallery-modal__prev:hover,
.eex-gallery-modal__next:hover{
  transform:scale(1.06);
  border-color:var(--eex-ink);
}
.eex-gallery-modal__close{ top:24px; right:24px; }
.eex-gallery-modal__prev{ left:24px; top:50%; transform:translateY(-50%); }
.eex-gallery-modal__prev:hover{ transform:translateY(-50%) scale(1.06); }
.eex-gallery-modal__next{ right:24px; top:50%; transform:translateY(-50%); }
.eex-gallery-modal__next:hover{ transform:translateY(-50%) scale(1.06); }
.eex-gallery-modal__counter{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  color:#FFFFFF;
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-small);
  letter-spacing:var(--eex-track-micro);
}
@media (max-width:767px){
  .eex-gallery-modal__prev,
  .eex-gallery-modal__next{ width:38px; height:38px; }
  .eex-gallery-modal__prev{ left:10px; }
  .eex-gallery-modal__next{ right:10px; }
  .eex-gallery-modal__close{ top:12px; right:12px; }
}

/* ----------------------------------------------------------------------------
   4. O CABECALHO DO IMOVEL
   O nome do imovel e o maior compromisso da pagina e estava em 22px, menor
   que os titulos das secoes. Sobe para a escala de titulo do DS.
   ---------------------------------------------------------------------------- */
body.__page_apartment #buildingDesc h1{
  font-family:var(--eex-font-display);
  /* !important porque o legacy.css ainda tem uma regra global
     "#maincontent h1" com teto de 2.2rem e !important. Essa regra se
     dissolve na Fase 7; aqui so a neutralizamos dentro da pagina. */
  font-size:var(--eex-fs-h2) !important;
  font-weight:400;
  line-height:var(--eex-lh-title);
  letter-spacing:var(--eex-track-title);
  color:var(--eex-ink) !important;
  margin:0 0 var(--eex-s3);
}
body.__page_apartment #buildingDesc h4{ margin:0; }
body.__page_apartment #buildingDesc h4 .list-inline{ margin:0; padding:0; }
body.__page_apartment #buildingDesc h4 li{
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-small);
  letter-spacing:var(--eex-track-micro);
  text-transform:uppercase;
  color:var(--eex-stone);
}
body.__page_apartment #buildingDesc h4 .fa-map-marker{ color:var(--eex-accent); margin-right:var(--eex-s2); }

/* Os selos de quarto/pessoas/cama/banheiro eram pilulas cinza-chumbo, o
   elemento mais pesado da dobra. Viram etiquetas de contorno. */
body.__page_apartment .row.text-muted.h4 .label{
  display:inline-flex;
  align-items:center;
  gap:var(--eex-s2);
  background:transparent !important;
  border:1px solid var(--eex-hairline);
  border-radius:var(--eex-r-pill);
  color:var(--eex-ink) !important;
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-small);
  font-weight:400;
  letter-spacing:.02em;
  padding:var(--eex-s2) var(--eex-s4);
  margin:0 var(--eex-s2) var(--eex-s2) 0;
}
body.__page_apartment .row.text-muted.h4 .label i{ color:var(--eex-stone); }

/* ----------------------------------------------------------------------------
   5. AS SECOES
   Sete blocos (Camas, Regras, Amenities, Localizacao, Arredores, Avaliacoes)
   com titulos em Open Sans 24px/700 preto puro. Viram titulos do DS, com uma
   hairline que separa sem pesar e respiro generoso entre blocos.
   ---------------------------------------------------------------------------- */
body.__page_apartment #details_full > .row{ margin-bottom:var(--eex-s7); }
body.__page_apartment #details_full h3{
  font-family:var(--eex-font-display);
  font-size:var(--eex-fs-h3);
  font-weight:400;
  line-height:var(--eex-lh-title);
  letter-spacing:var(--eex-track-title);
  color:var(--eex-ink);
  margin:0 0 var(--eex-s4);
  padding-bottom:var(--eex-s3);
  border-bottom:1px solid var(--eex-hairline);
}

body.__page_apartment .buildingDescription,
body.__page_apartment #details_full p{
  font-size:var(--eex-fs-body);
  line-height:var(--eex-lh-body);
  color:var(--eex-text-2);
  max-width:var(--eex-maxw-text, 68ch);
}

/* Os "sim/nao" das regras eram pilulas cinza; viram marcas discretas. */
body.__page_apartment #houseRules .label{
  white-space:nowrap;
  margin-left:var(--eex-s2);
  vertical-align:middle;
  background:transparent !important;
  border:1px solid var(--eex-hairline);
  border-radius:var(--eex-r-sm);
  color:var(--eex-stone) !important;
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-micro);
  font-weight:400;
  letter-spacing:var(--eex-track-micro);
  text-transform:uppercase;
  padding:2px var(--eex-s2);
}

/* O quadro de camas era uma caixa com raio grande; vira papel com hairline. */
body.__page_apartment #beds .col-xs-12 > div{
  background:var(--eex-surface);
  border:1px solid var(--eex-hairline);
  border-radius:var(--eex-r-md);
}

/* Comodidades (#amenitiesCol "da acomodacao", #amenitiesBuilding "dos
   arredores"): a marcacao nativa ja e uma lista em duas colunas
   (ul.row > li.col-sm-6 > p), confirmada ao vivo antes desta regra
   (DESIGN.md 4.6) -- so falta o acabamento do DS. Dois itens do desenho
   original ficam de fora, registrados, nao implementados: (a) icone por
   comodidade -- a marcacao nao tem nenhum icone nem atributo que
   identifique o tipo, so texto livre; mapear texto->icone via CSS seria
   frageis e arriscaria icone errado, exigiria JS com uma tabela de
   equivalencia; (b) botao "Exibir todas as N" -- a lista ja renderiza
   sempre inteira (sem truncar), nao ha nada para expandir hoje. */
body.__page_apartment #amenitiesCol,
body.__page_apartment #amenitiesBuilding{
  margin:0 !important;
}
body.__page_apartment #amenitiesCol li,
body.__page_apartment #amenitiesBuilding li{
  padding:var(--eex-s2) 0;
  border-bottom:1px solid var(--eex-hairline-2);
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-body);
  color:var(--eex-text-2);
}
body.__page_apartment #amenitiesCol li p,
body.__page_apartment #amenitiesBuilding li p{
  margin:0;
}

/* ----------------------------------------------------------------------------
   6. O PAINEL DE RESERVA
   Tres defeitos reais aqui, nao so estetica:
   a) .sticky-panel vinha com overflow:auto e produzia uma barra de rolagem
      horizontal visivel embaixo do painel;
   b) o topo grudava em 110px fixos, sem relacao com a altura real do header
      (89px, publicada em --eex-header-h pelo header.js);
   c) o painel usava canvas sobre fundo branco - a relacao invertida.
   ---------------------------------------------------------------------------- */
body.__page_apartment .sticky-panel{
  overflow:visible;
  overflow-x:visible;
  /* A plataforma escreve style="position:sticky!important;top:110px!important"
     direto no elemento. Inline com !important nao perde para folha nenhuma,
     entao quem limpa esse top e o property.js; a regra abaixo so assume
     depois disso, mantendo o painel de acordo com a altura real do header. */
  top:calc(var(--eex-header-h) + var(--eex-s5)) !important;
}
body.__page_apartment .booking-apt-panel{
  background:var(--eex-surface);
  border:1px solid var(--eex-hairline);
  border-radius:var(--eex-r-md);
  box-shadow:none;
  overflow:hidden;
}
/* O search.js marca este painel com .eex-searchband e o search.css pinta a
   faixa de busca com canvas !important. Na home e nos resultados isso esta
   certo: a faixa fica sobre papel. Aqui a relacao e a inversa - a pagina e
   canvas e o painel e o papel -, entao reafirmamos a superficie. */
body.__page_apartment .booking-apt-panel.eex-searchband{ background:var(--eex-surface) !important; }

body.__page_apartment .booking-apt-header{
  border-bottom:1px solid var(--eex-hairline);
  background:transparent;
}
body.__page_apartment .price-night .priceValue{
  font-family:var(--eex-font-display);
  font-size:var(--eex-fs-fact);
  font-weight:400;
  line-height:1.1;
  color:var(--eex-ink);
}
body.__page_apartment .price-night .priceValue small{
  display:block;
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-micro);
  letter-spacing:var(--eex-track-micro);
  text-transform:uppercase;
  color:var(--eex-stone);
}
/* A segunda coluna do cabecalho do painel (preco por mes) vem vazia neste
   inventario e so abria um buraco ao lado do preco. Some quando nao tem texto. */
body.__page_apartment .booking-apt-header .price-month:empty{ display:none; }

/* --- Vindas do legacy.css (bloco original 60, retirado de la nesta fase).
   A lista de seletores e reproduzida na integra, inclusive #livechat e
   .btn-block.text-center, para nao alterar o comportamento atual. --- */
body.__page_apartment .panel-body.booking-apt .btn-contact-me,
body.__page_apartment .booking-apt .btn-contact-me,
body.__page_apartment .panel-body.booking-apt .cta-chat,
body.__page_apartment .booking-apt .cta-chat,
body.__page_apartment .panel-body.booking-apt #livechat,
body.__page_apartment .booking-apt #livechat,
body.__page_apartment .panel-body.booking-apt .btn-block.text-center{ display:none !important; }
body.__page_apartment .booking-apt-panel .panel-body.booking-apt::after{
  content:"Selecione as datas para reservar";
  display:block;
  text-align:center;
  color:var(--eex-stone);
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-small);
  padding:var(--eex-s4) 0;
}
body.__page_apartment .booking-apt-panel .panel-body.booking-apt:has(.bookbutton)::after{ display:none !important; }

/* O CTA "Reservar" era o unico elemento do painel sem nenhuma regra do
   DS -- link/div nativos do Bootstrap, sem token de cor, tipografia ou
   raio. Mesma receita do botao primario ja usada em checkout.css (raio
   --eex-r-sm, nao pill -- ver DESIGN.md 5.2/5.4, mesma resposta por
   consistencia). #panelBook escopa: os dois unicos .btn-primary da
   pagina inteira estao dentro dele (o link real oculto e o div visivel
   que o usuario clica). */
body.__page_apartment #panelBook .btn-primary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:18px 30px;
  border:1px solid transparent;
  border-radius:var(--eex-r-sm);
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-micro);
  font-weight:var(--eex-w-semi);
  line-height:1;
  letter-spacing:var(--eex-track-cta);
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  background:var(--eex-ink);
  color:var(--eex-text-invert);
  box-shadow:none;
  transition:background-color var(--eex-d2) var(--eex-ease),
             transform var(--eex-d2) var(--eex-ease),
             box-shadow var(--eex-d2) var(--eex-ease);
}
body.__page_apartment #panelBook .btn-primary:hover{
  background:var(--eex-ink-2);
  color:var(--eex-text-invert);
  transform:translateY(-1px);
  box-shadow:var(--eex-e2);
}

/* "Resumo da reserva" (#subtotal_area): a Stays ja renderiza a quebra
   de preco em linhas separadas (subtotal, Total, taxas) -- confirmado
   ao vivo com datas reais selecionadas antes de escrever esta regra
   (DESIGN.md 4.2). So falta o acabamento tipografico do DS; nenhum
   valor e calculado ou inventado aqui. */
body.__page_apartment #subtotal_area{
  font-family:var(--eex-font-ui);
}
body.__page_apartment #subtotal_area .row{
  font-size:var(--eex-fs-small);
  color:var(--eex-text-2);
}
body.__page_apartment #subtotal_area .row .h4{
  font-family:var(--eex-font-display);
  font-size:var(--eex-fs-h4);
  font-weight:400;
  color:var(--eex-ink);
}
body.__page_apartment #subtotal_area hr{
  border:0;
  border-top:1px solid var(--eex-hairline);
  margin:var(--eex-s4) 0;
}

/* CTA secundario "Reservar pelo WhatsApp" (injetado por property.js,
   DESIGN.md 4.4/5.6) -- outline, mesma hierarquia visual que o par
   cheio+outline ja usado no resto do site (.eex-btn--primary +
   .eex-btn--ghost, ds.css). */
body.__page_apartment #panelBook .eex-whatsapp-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:var(--eex-s3);
  padding:16px 30px;
  border:1px solid var(--eex-hairline);
  border-radius:var(--eex-r-sm);
  background:var(--eex-surface);
  color:var(--eex-ink);
  font-family:var(--eex-font-ui);
  font-size:var(--eex-fs-micro);
  font-weight:var(--eex-w-semi);
  line-height:1;
  letter-spacing:var(--eex-track-cta);
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:border-color var(--eex-d2) var(--eex-ease),
             transform var(--eex-d2) var(--eex-ease),
             box-shadow var(--eex-d2) var(--eex-ease);
}
body.__page_apartment #panelBook .eex-whatsapp-cta:hover{
  border-color:var(--eex-ink);
  color:var(--eex-ink);
  transform:translateY(-1px);
  box-shadow:var(--eex-e2);
}
body.__page_apartment #panelBook .eex-whatsapp-cta svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
}

/* ----------------------------------------------------------------------------
   7. OS SEMELHANTES
   O titulo da faixa estava em 14px, menor que o corpo do texto.
   ---------------------------------------------------------------------------- */
body.__page_apartment .similarsTitle a{
  font-family:var(--eex-font-display);
  font-size:var(--eex-fs-h3);
  font-weight:400;
  letter-spacing:var(--eex-track-title);
  color:var(--eex-ink);
  text-decoration:none;
}
body.__page_apartment .similarsTitle hr{
  border:0;
  height:1px;
  background:var(--eex-hairline);
  margin:var(--eex-s3) 0 0;
}

/* ----------------------------------------------------------------------------
   8. MOBILE
   Abaixo de md o painel de reserva vem antes do texto (order-1) e nao precisa
   grudar: ele ja esta no topo.
   ---------------------------------------------------------------------------- */
@media (max-width:991px){
  body.__page_apartment .sticky-panel{ position:static; }
  body.__page_apartment #details_full > .row{ margin-bottom:var(--eex-s6); }
}
@media (max-width:767px){
  body.__page_apartment .appDetails > .container-fluid{ margin-bottom:var(--eex-s6) !important; }
  body.__page_apartment #details_full > .row{ margin-bottom:var(--eex-s5); }
}

/* ----------------------------------------------------------------------------
   9. IMPRESSAO
   ---------------------------------------------------------------------------- */
@media print{
  body.__page_apartment{ background:#fff; }
  body.__page_apartment #panelBook,
  body.__page_apartment #appSimilars,
  body.__page_apartment .appDetails > .container-fluid{ display:none !important; }
}