/* =====================================================================
   QUARTOS — a tela de reservas que deita conforme a pessoa rola
   =====================================================================

   Adaptação do "Container Scroll Animation" (21st.dev / Aceternity) para
   a seção #acomodacoes. O título sobe um pouco e a tela entra inclinada
   20deg e deita até ficar reta.

   O QUE SE VÊ NA TELA: a seção deixa de ser três cartões lado a lado e
   vira a página de escolha de quarto de um site de reservas — foto à
   esquerda, informações no meio, preço e botão à direita, uma linha por
   quarto. A moldura é o aparelho: bezel escuro, barra de navegador com
   o endereço do próprio site.

   COMO FUNCIONA: o JS (quartos-scroll.js) escreve um número de 0 a 1 na
   variável --p da seção e injeta a barra do navegador. Todo o resto é
   CSS. Nenhum template do tema foi criado ou editado — a própria
   .nai-acomodacoes__grid virou o aparelho.

   DECISÃO: no celular a tela fica, mas SEM a rotação e com os quartos
   voltando ao formato de cartão empilhado. Lista horizontal em 390px de
   largura espreme a foto a ponto de não se ver o quarto.

   DECISÃO: o tilt de mouse por cartão do depth.css fica desligado aqui.
   Linha de lista que se inclina sozinha ao passar o mouse parece defeito;
   no lugar dele, a linha inteira acende.

   PARA REVERTER: apague este arquivo e o quartos-scroll.js, e tire a
   função pousada_quartos_enqueue() do functions.php.
   ===================================================================== */

.nai-acomodacoes {
    --p: 0;                      /* progresso da rolagem, 0 a 1 — do JS */
    --bezel: clamp(0.5rem, 0.9vw, 0.75rem);
    --tela-raio: 18px;
    --barra-alt: 2.75rem;
    --tela-fundo: #FBFAF7;
    --linha: rgba(30, 61, 41, 0.10);
}

/* A perspectiva mora no container: é ela que dá o ponto de fuga. */
.nai-acomodacoes .nai-container {
    perspective: 1000px;
}

/* ---------- o título que sobe ---------- */

.nai-acomodacoes .nai-section__header {
    transform: translateY(calc(var(--p) * -48px));
    will-change: transform;
}

/* =====================================================================
   O APARELHO
   ===================================================================== */

.nai-acomodacoes__grid {
    position: relative;
    display: grid !important;
    /* !important: o child style.css força 2 e 3 colunas em media queries
       com !important. Aqui é sempre uma coluna — é uma lista. */
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: var(--bezel);
    border-radius: calc(var(--tela-raio) + var(--bezel));

    /* bezel: quase preto, com um leve tom da casa. Preto puro fica duro
       sobre o creme da seção; verde claro não lê como aparelho. */
    background: linear-gradient(170deg, #23342A 0%, #101B14 55%, #0A120D 100%);

    /* fio de luz na borda, como a quina de um aparelho pegando luz */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        0 9px 20px rgba(0, 0, 0, 0.26),
        0 37px 37px rgba(0, 0, 0, 0.22),
        0 84px 50px rgba(0, 0, 0, 0.12),
        0 149px 60px rgba(0, 0, 0, 0.04);

    transform:
        rotateX(calc((1 - var(--p)) * 20deg))
        scale(calc(1.05 - var(--p) * 0.05));
    will-change: transform;
}

/* A tela acesa por baixo de tudo. Pseudo-elemento com position:absolute
   não vira item de grid, então não ocupa linha nenhuma. */
.nai-acomodacoes__grid::before {
    content: "";
    position: absolute;
    inset: var(--bezel);
    border-radius: var(--tela-raio);
    background: var(--tela-fundo);
    z-index: 0;
}

/* ---------- barra do navegador (injetada pelo JS) ---------- */

.quartos-barra {
    position: relative;
    z-index: 1;
    height: var(--barra-alt);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.875rem;
    background: #ECE8E0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--tela-raio) var(--tela-raio) 0 0;
}

/* os três pontinhos, desenhados com box-shadow para não precisar de
   três elementos */
.quartos-barra__pontos {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF5F57;
    box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
    margin-right: 32px;
}

.quartos-barra__url {
    flex: 1 1 auto;
    max-width: 24rem;
    margin: 0 auto;
    padding: 0.25rem 0.75rem;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    font-family: var(--nai-font-body, system-ui, sans-serif);
    font-size: 0.75rem;
    color: var(--nai-gray-500, #6B7280);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   OS QUARTOS COMO LISTA DE RESERVA
   ===================================================================== */

.nai-acomodacoes__item {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 1.25rem;
    align-items: center;

    /* a linha não é mais um cartão: o cartão agora é a tela inteira */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--linha);
    transition: background-color .25s ease;
}

.nai-acomodacoes__item:last-child {
    border-bottom: 0;
}

/* A linha inteira acende no hover — comportamento de lista, não de
   cartão solto. Substitui o tilt de mouse do depth.css. */
@media (hover: hover) and (pointer: fine) {
    .nai-acomodacoes__item:hover {
        background-color: rgba(45, 90, 61, 0.045);
    }
    /* desliga o tilt herdado e o brilho que segue o cursor */
    .nai-acomodacoes__item.is-tilting {
        transform: none !important;
        box-shadow: none !important;
    }
    .nai-acomodacoes__item.is-tilting::after {
        opacity: 0 !important;
    }
    .nai-acomodacoes__item.is-tilting .nai-card__image,
    .nai-acomodacoes__item.is-tilting .nai-card__badge {
        transform: none !important;
    }
}

/* ---------- foto ---------- */

/* min-width:0 nos dois: item de grid tem min-width auto por padrão e
   estoura a coluna quando o conteúdo é mais largo — foi o que fez a foto
   invadir a coluna do texto e cortar o início dos títulos. */
.nai-acomodacoes__item > * {
    min-width: 0;
}

.nai-acomodacoes__item .nai-card__image {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 8.5rem;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

.nai-acomodacoes__item .nai-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nai-acomodacoes__item .nai-card__badge {
    top: 0.625rem;
    left: 0.625rem;
}

/* ---------- miolo: informação à esquerda, preço à direita ---------- */

/* A coluna do preço é posicionada, não é coluna de grid.
   TENTATIVA QUE FALHOU, para ninguém repetir: com grid de duas colunas e
   `grid-row: 1 / -1` no bloco do preço, o `-1` aponta para a última linha
   do grid EXPLÍCITO — que aqui não existe — então o bloco caía na linha 1
   junto com o título e esticava aquela linha para 86px, abrindo um vão de
   50px entre o título e as informações. Posicionamento absoluto não
   depende de quantos filhos o cartão tem (nem todo quarto traz descrição
   ou amenidades). */
.nai-acomodacoes__item .nai-card__content {
    position: relative;
    display: block;
    padding: 0 12.25rem 0 0;
    min-height: 6rem;
}

.nai-acomodacoes__item .nai-card__title {
    margin: 0 0 0.375rem;
    font-size: 1.25rem;
}

.nai-acomodacoes__item .nai-card__desc {
    margin: 0.5rem 0 0.5rem;
    font-size: 0.9375rem;
}

/* A linha de reserva é mais baixa que o cartão antigo: o texto não pode
   ficar boiando em espaço vazio. Estes três blocos vinham com margens
   pensadas para o formato vertical. */
.nai-acomodacoes__item .nai-card__meta {
    margin: 0;
}

.nai-acomodacoes__item .nai-card__amenidades {
    margin: 0;
    gap: 0.375rem;
}

/* a coluna da direita ocupa a altura toda da linha */
.nai-acomodacoes__item .nai-card__footer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 11rem;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.625rem;

    margin: 0;
    padding: 0 0 0 1.25rem;
    border-top: 0;
    border-left: 1px solid var(--linha);
    text-align: right;
}

/* o botão vira CTA cheio: numa página de reserva o botão da direita é o
   que a pessoa procura. Texto não mudou — continua "Consultar". */
.nai-acomodacoes__item .nai-card__footer .nai-btn {
    width: 100%;
    justify-content: center;
    background: var(--nai-primary, #2D5A3D);
    border-color: var(--nai-primary, #2D5A3D);
    color: #FFFFFF;
}

.nai-acomodacoes__item .nai-card__footer .nai-btn:hover {
    background: var(--nai-primary-dark, #1E3D29);
    border-color: var(--nai-primary-dark, #1E3D29);
    color: #FFFFFF;
}

/* =====================================================================
   CELULAR — a tela fica, a lista volta a ser cartão
   ===================================================================== */

@media (max-width: 768px) {
    .nai-acomodacoes {
        --bezel: 0.5rem;
        --tela-raio: 14px;
        --barra-alt: 2.25rem;
    }

    .nai-acomodacoes .nai-container { perspective: none; }
    .nai-acomodacoes .nai-section__header { transform: none; }

    .nai-acomodacoes__grid {
        transform: scale(calc(0.985 + var(--p) * 0.015));
        gap: 0 !important;
    }

    /* endereço não cabe; ficam só os pontinhos */
    .quartos-barra__url { display: none; }

    /* volta ao empilhado: foto em cima, texto embaixo */
    .nai-acomodacoes__item {
        display: block;
        padding: 0.875rem;
    }

    .nai-acomodacoes__item .nai-card__image {
        height: auto;
        min-height: 0;
        margin-bottom: 0.875rem;
    }

    .nai-acomodacoes__item .nai-card__image img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .nai-acomodacoes__item .nai-card__content {
        display: block;
        position: static;
        padding: 0;
        min-height: 0;
    }

    .nai-acomodacoes__item .nai-card__footer {
        position: static;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0 0;
        margin-top: 0.75rem;
        border-left: 0;
        border-top: 1px solid var(--linha);
        text-align: left;
    }

    .nai-acomodacoes__item .nai-card__footer .nai-btn {
        width: auto;
    }
}

/* =====================================================================
   ACESSIBILIDADE E REDE DE SEGURANÇA
   ===================================================================== */

/* Quem pediu menos movimento recebe o estado final: tela reta. */
@media (prefers-reduced-motion: reduce) {
    .nai-acomodacoes__grid,
    .nai-acomodacoes .nai-section__header {
        transform: none !important;
    }
}

/* Se o JS não rodar, --p fica em 0 e a tela ficaria inclinada para
   sempre. Sem a classe .tem-js, tudo reto. */
.nai-acomodacoes:not(.tem-js) .nai-acomodacoes__grid,
.nai-acomodacoes:not(.tem-js) .nai-section__header {
    transform: none;
}