/* ---------------------------------------------------------------
   quartos.css — usado apenas nas páginas individuais de acomodação
   (suite-*.html, villas.html, chale.html).

   Fica separado do layout2.css de propósito: nada aqui altera a home,
   a galeria ou as demais telas. Os símbolos (--verde, --acao, --f-ui…)
   vêm do moderno.css, que é carregado antes.
   --------------------------------------------------------------- */

/* --- grade de fotos --------------------------------------------- */

/* a proporção vem do moderno.css (.picture-mini, 4:3); aqui só o
   espaçamento e o comportamento ao passar o mouse */
.gal-quarto .picture.picture-mini .bg {
    border-radius: var(--raio, 3px);
    box-shadow: var(--sombra-1);
    transition: transform .8s var(--curva), box-shadow .3s var(--curva);
}

/* o zoom em si vive no moderno.css, no pseudo-elemento de .bg.grow —
   aqui transformar o .bg de novo faria a foto escapar da moldura */
.gal-quarto .picture.picture-mini .bg:hover {
    box-shadow: var(--sombra-2);
}

/* --- barra de ações (Reservar / WhatsApp) ----------------------- */

.acoes-quarto {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 8px;
}

/* O RESERVAR (.btn-success) já vem vermelho do moderno.css, que trata
   .btn-success como "a ação principal da tela" em todo o site. Aqui só
   falta o WhatsApp ao lado, vazado, para não disputar a atenção. */
.acoes-quarto .btn-whats {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border: 1px solid #cfe4d4;
    border-radius: var(--raio);
    background: #fff;
    color: #12704a;
    font-family: var(--f-ui);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
}

.acoes-quarto .btn-whats i {
    font-size: 17px;
}

.acoes-quarto .btn-whats:hover,
.acoes-quarto .btn-whats:focus {
    background: #12704a;
    border-color: #12704a;
    color: #fff;
    text-decoration: none;
}

/* --- bloco de características ----------------------------------- */

/* na página de acomodações este bloco vem escondido e o h4 flutua ao
   lado do botão; aqui ele é conteúdo fixo, então volta ao fluxo normal */
.detalhes-quarto h4 {
    float: none;
    width: auto;
    margin: 0 0 22px;
    font-size: 26px;
}

/* Os seis quadros de resumo (metragem, camas, Wi-Fi) ficavam com alturas
   diferentes: o rodapé de cada um cresce com o texto, e "Wi-Fi grátis"
   ocupa duas linhas. Como são colunas flutuantes do Bootstrap 3, uma não
   sabe da altura da outra.

   Só existe UM .row dentro de outro .row em toda a página de acomodação
   (conferido) — é justamente este. Acima de 768px ele vira flex e as seis
   colunas passam a ter a mesma altura; abaixo disso elas empilham e o
   flex atrapalharia. */
@media only screen and (min-width: 768px) {
    .detalhes-quarto .row .row {
        display: flex;
        flex-wrap: wrap;
    }
    /* o .row do Bootstrap traz ::before e ::after com content — num
       container flex eles viram ITENS e entram na conta do wrap */
    .detalhes-quarto .row .row::before,
    .detalhes-quarto .row .row::after {
        display: none;
    }
}

.detalhes-quarto .row > [class*="col-"] > .panel {
    height: 100%;
    margin-bottom: 0;
    border-radius: var(--raio);
    border-color: var(--linha);
    box-shadow: none;
    transition: border-color .25s var(--curva), box-shadow .25s var(--curva);
}

.detalhes-quarto .panel:hover {
    border-color: #cfd8cf;
    box-shadow: var(--sombra-1);
}

.detalhes-quarto .panel .panel-body {
    font-family: var(--f-display);
    font-size: 30px;
    font-weight: 600;
    color: var(--verde);
    line-height: 1.1;
}

.detalhes-quarto .panel .panel-footer {
    background: var(--verde-palido);
    border-top-color: var(--linha);
    font-size: 13px;
    line-height: 1.4;
    color: var(--tinta-2);
}

/* --- navegação entre quartos ------------------------------------ */

.outros-quartos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.segment3 .container .block .outros-quartos .btn,
.outros-quartos .btn {
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: #fff;
    color: var(--verde);
    font-family: var(--f-ui);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .04em;
    text-decoration: none;
}

.outros-quartos .btn:hover,
.outros-quartos .btn:focus {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
    text-decoration: none;
}