/* =====================================================================
   HERO EXPANSIVO — a foto cresce conforme a pessoa rola
   =====================================================================

   Como funciona: o <section> tem altura de 260vh (o "trilho"), e dentro
   dele um palco com position:sticky que gruda em 100dvh. Enquanto a
   pessoa rola os 160vh de folga, o JS escreve o progresso 0->1 na
   variável --p, e todo o resto (tamanho da foto, opacidade do fundo,
   afastamento das palavras) é calculado a partir dela em CSS puro.

   DECISÃO IMPORTANTE: o componente original do 21st.dev sequestra a
   rolagem (preventDefault no wheel + window.scrollTo(0,0) forçado até
   terminar a expansão). Isso quebra o scroll do celular, o teclado e o
   botão "fim" da página. Aqui NÃO se sequestra nada: a rolagem é a
   nativa do navegador, o efeito só lê a posição. Mesmo visual, sem o
   preço.

   PARA REVERTER: apague este arquivo e o hero-expand.js, tire a função
   pousada_heroexpand_enqueue() do functions.php, e restaure o
   template-parts/hero.php do backup .bak-heroexpand-*.
   ===================================================================== */

.heroex {
    --p: 0;                 /* progresso da expansão, 0 a 1 — escrito pelo JS */
    --trilho: 260vh;
    position: relative;
    height: var(--trilho);
    background: var(--nai-primary-dark, #1E3D29);
}

/* O palco gruda na tela enquanto o trilho rola por baixo */
.heroex__palco {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    place-items: center;
}

/* ---------- fundo: a pousada vista de longe ---------- */

.heroex__fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.heroex__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* some aos poucos para dar lugar à foto que cresce, mas nunca
       totalmente: um fundo preto puro no fim do efeito fica morto */
    opacity: calc(1 - var(--p) * 0.72);
    transform: scale(calc(1 + var(--p) * 0.08));
    will-change: opacity, transform;
}

/* Véu leve. O véu antigo do tema era 0.85/0.75 de verde e apagava a
   foto inteira — aqui fica só o suficiente para o texto branco ter
   contraste legível por cima. */
.heroex__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(12, 22, 16, 0.55) 0%,
        rgba(12, 22, 16, 0.28) 38%,
        rgba(12, 22, 16, 0.62) 100%
    );
}

/* ---------- a foto que cresce ---------- */

.heroex__midia {
    position: relative;
    z-index: 2;
    margin: 0;
    /* 340px -> ~1500px de largura, 440px -> ~820px de altura.
       O min() segura nas bordas da tela em qualquer monitor. */
    width: min(calc(340px + var(--p) * 1160px), 94vw);
    height: min(calc(440px + var(--p) * 380px), 84dvh);
    border-radius: calc(1.5rem - var(--p) * 0.75rem);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, calc(0.45 - var(--p) * 0.2));
    will-change: width, height;
}

.heroex__midia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Escurecimento da foto de dentro.
   Não é uma lâmina uniforme: é um gradiente que escurece o topo (onde o
   título passa) e sobretudo a base (onde entram subtítulo, botão e
   itens). Sem isso, com uma foto clara — o telhado de telha da pousada,
   por exemplo — o texto branco e o destaque bege simplesmente somem.
   A parte do meio fica quase limpa, que é onde a foto precisa aparecer. */
.heroex__midia::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(8, 16, 11, 0.52) 0%,
            rgba(8, 16, 11, 0.16) 34%,
            rgba(8, 16, 11, 0.40) 62%,
            rgba(8, 16, 11, 0.80) 100%
        ),
        rgba(10, 18, 13, calc(0.34 - var(--p) * 0.26));
    pointer-events: none;
}

/* ---------- título que se abre em dois ---------- */

.heroex__titulo {
    position: absolute;
    z-index: 3;
    inset-inline: 0;
    /* Começa centralizado e SOBE conforme a foto abre. Sem isso o título
       fica parado no meio e colide com o bloco de subtítulo/botão que
       entra no fim da expansão — os dois textos se sobrepõem. */
    top: calc(50% - var(--p) * 13vh);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    text-align: center;
    pointer-events: none;
    padding-inline: 1rem;
}

.heroex__palavra {
    font-family: var(--nai-font-heading, Georgia, serif);
    font-weight: 700;
    line-height: 1.05;
    font-size: clamp(2.1rem, 6vw, 4.6rem);
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    will-change: transform;
}

/* As duas linhas deslizam para lados opostos conforme a foto cresce —
   é o que dá a sensação de que a imagem "abriu" o título ao meio */
.heroex__palavra--a { transform: translateX(calc(var(--p) * -17vw)); }
.heroex__palavra--b {
    transform: translateX(calc(var(--p) * 17vw));
    color: var(--nai-accent, #D4A574);
}

/* ---------- dica de rolagem ---------- */

.heroex__dica {
    position: absolute;
    z-index: 3;
    bottom: 2.2rem;
    inset-inline: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* some rápido: já cumpriu o papel assim que a pessoa rolou um pouco */
    opacity: calc(1 - var(--p) * 2.2);
    pointer-events: none;
}

.heroex__dica svg {
    display: block;
    margin: 0.4rem auto 0;
    animation: heroex-pula 2s ease-in-out infinite;
}

@keyframes heroex-pula {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* ---------- conteúdo que aparece com a foto aberta ---------- */

.heroex__conteudo {
    position: absolute;
    z-index: 4;
    inset-inline: 0;
    /* A foto aberta ocupa 84dvh centralizados, ou seja, sua borda de
       baixo cai em ~92dvh. Em 7vh o bloco encostava nessa borda e a
       última linha de itens saía cortada; 13vh o mantém dentro da foto,
       em cima do trecho escuro do gradiente. */
    bottom: clamp(3rem, 13vh, 8rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
    padding-inline: 1.25rem;
    /* só entra na reta final da expansão (de p=0.72 a p=1) */
    opacity: clamp(0, calc((var(--p) - 0.72) * 3.6), 1);
    transform: translateY(calc((1 - clamp(0, (var(--p) - 0.72) * 3.6, 1)) * 18px));
    transition: opacity .25s linear, transform .25s ease-out;
}

/* Enquanto invisível não pode roubar clique do que está atrás */
.heroex:not(.is-aberto) .heroex__conteudo { pointer-events: none; }

.heroex__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.85rem;
}

.heroex__sub {
    max-width: 46ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.heroex__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.heroex__itens {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.heroex__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- sem a segunda foto ---------- */

/* Se imagem_expand não resolver para um arquivo existente, o PHP marca
   esta classe: vira um hero normal de uma tela, com a foto de fundo e o
   texto por cima. Melhor do que um palco de 260vh sem nada crescendo. */
.heroex--estatico {
    --p: 1;
    height: 100dvh;
}
.heroex--estatico .heroex__palco { position: relative; }
.heroex--estatico .heroex__fundo img { opacity: 1; transform: none; }
.heroex--estatico .heroex__palavra--a,
.heroex--estatico .heroex__palavra--b { transform: none; }
.heroex--estatico .heroex__conteudo { opacity: 1; transform: none; }

/* ---------- celular ---------- */

@media (max-width: 767px) {
    .heroex { --trilho: 210vh; }

    .heroex__midia {
        width: min(calc(260px + var(--p) * 220px), 92vw);
        height: min(calc(360px + var(--p) * 220px), 70dvh);
    }

    /* no celular 17vw quase não afasta nada; aqui precisa de mais */
    .heroex__palavra--a { transform: translateX(calc(var(--p) * -26vw)); }
    .heroex__palavra--b { transform: translateX(calc(var(--p) * 26vw)); }

    .heroex__conteudo { gap: 0.85rem; }
    .heroex__ctas .nai-btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ---------- quem pediu menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
    /* entrega o estado final de cara e devolve a página ao tamanho
       normal: sem trilho de 260vh, sem nada se mexendo com a rolagem */
    .heroex {
        --p: 1;
        height: 100dvh;
    }
    .heroex__palco { position: relative; }
    .heroex__fundo img { transform: none; }
    .heroex__dica { display: none; }
    .heroex__conteudo { opacity: 1; transform: none; }
    .heroex__midia { will-change: auto; }
}