/* ============================================================
   Hero das páginas internas — papel claro, título grande, fatos
   curtos à direita no desktop e uma foto larga opcional embaixo.
   ============================================================ */

/* O header é fixo e flutua: o respiro de cima desconta a altura dele. */
.page-hero {
    padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem));
    padding-bottom: clamp(3rem, 7vw, 5rem);
    color: var(--fg);
}

.page-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg-soft);
    transition: color var(--dur-fast) var(--ease-apple);
}
.page-hero__back svg { width: 16px; height: 16px; }
.page-hero__back:hover { color: var(--brand); }

.page-hero__main {
    display: grid;
    gap: var(--space-10);
}

/* O título vem do admin (nome de cliente, nome de serviço, título de
   post). No celular, o piso dos tokens (52px / 44px) não deixa palavra
   longa caber: "TERRAPLANAGEM" mede 6,3em, "DESENVOLVIMENTO" 7em. Então
   o tamanho sai da largura útil dividida por 7,2em — qualquer palavra de
   até ~15 letras cabe inteira — e o token volta a valer a partir de
   ~430px. "anywhere" é só a rede: quebra quando nem assim a palavra cabe. */
.page-hero__title {
    --hero-fit: calc((100vw - 2 * var(--gutter)) / 7.2);
    margin-top: var(--space-5);
    overflow-wrap: anywhere;
}
.page-hero__title--lg { font-size: min(var(--fs-5xl), var(--hero-fit)); line-height: 0.9; }
.page-hero__title--md { font-size: min(var(--fs-4xl), var(--hero-fit)); }

.page-hero__lead { margin-top: var(--space-6); }

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
    margin-top: var(--space-8);
}

/* ── Fatos ───────────────────────────────────────────────── */

.page-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--fg-line);
}

.page-hero__fact { display: grid; gap: var(--space-1); }
.page-hero__fact dt { color: var(--fg-muted); }
.page-hero__fact dd {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.35;
}

/* ── Foto ────────────────────────────────────────────────── */

.page-hero__media {
    overflow: hidden;
    margin: clamp(2.5rem, 6vw, 4rem) 0 0;
    border-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
}

.page-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 720px) {
    .page-hero__media { aspect-ratio: 21 / 9; }
}

@media (min-width: 1024px) {
    .page-hero__main--facts {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        align-items: end;
        column-gap: var(--space-16);
    }

    .page-hero__facts {
        grid-template-columns: 1fr;
        padding-top: 0;
        padding-left: var(--space-6);
        border-top: 0;
        border-left: 1px solid var(--fg-line);
    }
}