/* ==========================================================================
   Hero Wrapper - Imagem de fundo fixa (parallax)
   
   ── COMO FUNCIONA ────────────────────────────────────────────────────
   
   A imagem de fundo é definida via CSS custom property --hero-bg-image
   no .hero-wrapper (setada pelo JS quando vem do admin).
   
   Se --hero-bg-image não for definida, usa a imagem default (hardcoded).
   Se definida como "none", entra no modo "sem imagem" → cor sólida.
   
   O overlay escuro (::after) SEMPRE fica sobre a imagem, garantindo
   contraste para o texto independente da imagem que o usuário subir.
   ========================================================================== */

.hero-wrapper {
    position: relative;
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
}

/* ── Imagem de fundo fixa (parallax) ──
   Usa a custom property --hero-bg-image quando disponível.
   Fallback: imagem hardcoded padrão.
*/
.hero-wrapper::before {
    content: '';
    position: fixed;
    inset: -1px;
    background-image: var(--hero-bg-image, url('../pics/hero-foto.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

/* ── Overlay escuro fixo ──
   Sempre renderiza POR CIMA da imagem, garantindo legibilidade do texto.
   A opacidade pode ser ajustada futuramente via variável.
*/
.hero-wrapper::after {
    content: '';
    position: fixed;
    inset: -1px;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: -1;
}

/* ── Modo "sem imagem" ──
   Quando o wrapper tem a classe .hero-no-image, esconde a imagem e o overlay,
   e o fundo vem de uma cor sólida no próprio .hero.
*/
.hero-wrapper.hero-no-image::before,
.hero-wrapper.hero-no-image::after {
    display: none;
}

/* ==========================================================================
   Hero Section Styles
   ========================================================================== */

.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: transparent;
    transition: background-color 0.5s ease;
}

/* Quando não há imagem, aplica cor sólida */
.hero-no-image .hero {
    background-color: var(--color-dark, #2C2C2C);
}

.hero-overlay {
    display: none;
}

/* ==========================================================================
   Hero Content
   ========================================================================== */

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-white);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -90px;
}

.hero-names {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: 15px;
}

.hero-names .name {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1;
}

.hero-names .ampersand {
    font-family: var(--font-script);
    font-size: clamp(3rem, 9vw, 6rem);
    color: var(--color-white);
}

/* Wrapper que agrupa o & com um dos nomes no mobile.
   No desktop usa display: contents para ser invisível ao layout
   (mantém o flex de .hero-names funcionando exatamente como antes). */
.hero-names .name-group {
    display: contents;
}

.hero-divider {
    width: 150px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: -30px;
    margin-bottom: 25px;
}

.hero-phrase {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 2vw, 1.25rem);
    font-weight: 300;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    opacity: 0.9;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Mantém " — Fonte" sempre na mesma linha (evita quebra entre
   nome da fonte e número, ex: "Provérbios" / "16:3"). */
.hero-phrase-source {
    white-space: nowrap;
}

.hero-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hero-date .date {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-white);
}

.hero-date .location {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-white);
    opacity: 0.75;
}

/* ==========================================================================
   Scroll Indicator - desaparece ao rolar
   ========================================================================== */

.scroll-indicator {
    position: absolute;
    bottom: var(--space-2xl);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    pointer-events: none;
}

.scroll-indicator.hidden {
    opacity: 0;
    visibility: hidden;
}

.scroll-indicator span {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-white);
    opacity: 0.8;
}

.scroll-arrow {
    width: 1px;
    height: 35px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
    position: relative;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

/* Faixa intermediária: a fonte dos nomes encolhe via clamp() mas o -30px
   original continua puxando agressivo, fazendo a linha colar nos nomes.
   Suaviza para -20px. */
@media (max-width: 1144px) {
    .hero-divider {
        margin-top: -20px;
    }
}

/* Viewport "achatada" (zoom alto no desktop ou janela curta):
   o margin-top:-90px do hero-content empurra o título por baixo da
   navbar, e o scroll-indicator no bottom é alcançado pela cidade.
   Em viewport baixa: zera o margin negativo e dá padding pra respirar. */
@media (max-height: 700px) {
    .hero-content {
        margin-top: 0;
        padding-top: var(--space-2xl);
        padding-bottom: calc(var(--space-3xl) + 40px);
    }

    .scroll-indicator {
        bottom: var(--space-md);
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .hero-wrapper::before,
    .hero-wrapper::after {
        position: fixed;
        inset: auto;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100lvh;
    }

    .hero {
        min-height: 0;
    }

    .hero-names {
        gap: var(--space-lg);
    }
    
    .hero-content {
        padding: var(--space-lg);
    }
    
    .hero-phrase {
        white-space: normal;
        text-align: center;
        max-width: 90%;
    }
    
    .hero-divider {
        width: 100px;
        margin-top: -12px;
    }
}

@media (max-width: 480px) {
    .hero-names {
        flex-direction: column;
        gap: var(--space-xs);
    }
    /* Cancela o display: contents no mobile — agora cada .name-group
       vira uma "linha" do flex column, mantendo o & junto do nome certo. */
    .hero-names .name-group {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: var(--space-lg);
    }
    /* O glyph cursivo do & (Great Vibes) tem advance-width assimétrico —
       sobra espaço visual à direita do glyph. Empurro com margin-right
       extra para o "& Carol" parecer ter respiro adequado. */
    .hero-names .name-group .ampersand {
        margin-right: var(--space-xs);
    }
    /* No desktop o divider tem margin-top: -30px (puxa pra cima do "Adriel & Carol"
       em uma linha só). No mobile com nomes em coluna, esse -30px enfia o traço
       por cima do segundo nome. Zerar resolve. */
    .hero-divider {
        margin-top: 0;
    }
}