/* ==========================================================================
   Hero da página de válvula
   Escuro como o hero da home. Copy à esquerda, foto à direita e a palavra
   fantasma da família no chão do palco, com a foto apoiada sobre ela.
   Mobile-first: no celular a foto entra logo depois do título.
   ========================================================================== */

.vhero {
    /* Tamanho da palavra fantasma: cabe na largura útil (--ghost-ratio vem do
       servidor, por família) e nunca passa do teto da escala de marca. */
    --ghost-size: min(var(--fs-ghost), calc((100cqw - 2 * var(--gutter)) / var(--ghost-ratio, 6)));

    position: relative;
    padding:
        calc(var(--header-h) + var(--header-top) + var(--space-4))
        var(--gutter)
        calc(var(--ghost-size) * 0.55 + var(--space-6));
    overflow: hidden;
    background: var(--co-deep);
    container-type: inline-size;
    isolation: isolate;
}

@supports not (container-type: inline-size) {
    .vhero {
        --ghost-size: min(var(--fs-ghost), calc((100vw - 2 * var(--gutter)) / var(--ghost-ratio, 6)));
    }
}

.vhero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(55% 45% at 78% 40%, rgba(var(--co-accent-rgb), 0.18), transparent 70%),
        radial-gradient(80% 70% at 0% 100%, rgba(var(--co-rgb), 0.9), transparent 70%),
        linear-gradient(180deg, var(--co-abyss) 0%, var(--co-deep) 55%, #07281B 100%);
}

/* Palavra fantasma: chão do palco, levemente cortada pela borda inferior. */
.vhero__ghost {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    translate: -50% 16%;      /* propriedade própria: o reveal mexe só em transform */
    font-family: var(--font-display);
    font-size: var(--ghost-size);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.8;
    white-space: nowrap;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.03);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
    pointer-events: none;
    user-select: none;
    --reveal-delay: 350ms;
}

.vhero__inner {
    display: grid;
    grid-template-areas:
        "crumbs"
        "code"
        "title"
        "media"
        "lead"
        "actions"
        "facts";
    gap: var(--space-5);
    width: min(100%, var(--shell));
    margin-inline: auto;
}

/* No celular os filhos da copy viram itens da grade para a foto entrar depois do título. */
.vhero__copy {
    display: contents;
}

/* --- Breadcrumb ------------------------------------------------------------------ */
.crumbs {
    grid-area: crumbs;
}

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-3);
}

.crumbs__list li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--co-accent);
}

.crumbs__list a {
    transition: color var(--dur-base) var(--ease-apple);
}

.crumbs__list a:hover {
    color: var(--text);
}

.crumbs__list [aria-current="page"] {
    color: var(--text-2);
}

/* --- Copy -------------------------------------------------------------------------- */
.vhero__code {
    grid-area: code;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-3);
    --reveal-delay: 80ms;
}

.vhero__code-sep {
    color: var(--co-accent);
}

.vhero__title {
    grid-area: title;
    --fs-title: clamp(2.75rem, 1rem + 5vw, 5.75rem);
}

.vhero__title .display-title__line:nth-child(1) { --reveal-delay: 150ms; }
.vhero__title .display-title__line:nth-child(2) { --reveal-delay: 230ms; }

.vhero__lead {
    grid-area: lead;
    max-width: 32rem;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text-2);
    --reveal-delay: 380ms;
}

.vhero__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    --reveal-delay: 460ms;
}

/* --- Foto -------------------------------------------------------------------------- */
.vhero__media {
    grid-area: media;
    justify-self: center;
    width: min(100%, 21rem);
    aspect-ratio: 960 / 1190;
    overflow: hidden;
    background: var(--photo-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    --reveal-delay: 300ms;
}

.vhero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Ficha rápida ------------------------------------------------------------------- */
.vhero__facts {
    grid-area: facts;
    display: grid;
    margin-top: var(--space-4);
    border-top: 1px solid var(--line);
    --reveal-delay: 560ms;
}

.vhero__fact {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}

.vhero__fact dt {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--text-3);
}

.vhero__fact dd {
    font-size: var(--fs-sm);
    color: var(--text);
}

/* --- Celular: ações de largura total, como no hero da home ---------------------------- */
@media (max-width: 767.98px) {
    .vhero__actions .btn {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .vhero__actions .btn--ghost {
        justify-content: center;
    }
}

/* --- Tablet ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .vhero__media {
        width: min(100%, 24rem);
    }

    .vhero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid var(--line);
    }

    .vhero__fact {
        grid-template-columns: none;
        gap: var(--space-1);
        padding: var(--space-4) var(--space-5) var(--space-4) 0;
        border-bottom: 0;
    }

    .vhero__fact + .vhero__fact {
        padding-left: var(--space-5);
        border-left: 1px solid var(--line);
    }
}

/* --- Desktop: copy à esquerda, foto à direita apoiada na palavra fantasma -------------- */
@media (min-width: 1024px) {
    .vhero {
        display: grid;
        align-items: end;
        min-height: min(100svh, 62rem);
    }

    .vhero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
        grid-template-areas:
            "crumbs crumbs"
            "copy   media"
            "facts  media";
        column-gap: clamp(var(--space-12), 7vw, 8rem);
        row-gap: var(--space-10);
        align-items: end;
    }

    .vhero__copy {
        grid-area: copy;
        display: grid;
        gap: var(--space-6);
        grid-template-areas:
            "code"
            "title"
            "lead"
            "actions";
    }

    .vhero__code {
        margin-top: 0;
    }

    .vhero__media {
        grid-row: 2 / span 2;
        align-self: end;
        width: 100%;
        /* Desce sobre a palavra fantasma: a válvula fica "de pé" no palco. */
        margin-bottom: calc(var(--ghost-size) * -0.3);
    }

    .vhero__facts {
        margin-top: 0;
    }
}