/* 04-hero.css
 * Estilos do componente de Hero (base)
 * Criado por Agência Federal
 * https://agencia.federal.gov.br
 */

.af-hero {
    position: relative;

    /* ↓ ainda menor */
    min-height: clamp(180px, 18vw, 260px);

    display: flex;
    align-items: flex-end;

    background:
        radial-gradient(1200px 600px at 20% 20%, rgba(212, 175, 55, .10), transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .70));
    overflow: hidden;
}

.af-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .20)),
        url("") center/cover no-repeat;
    opacity: .95;
}

.af-hero .af-container {
    position: relative;

    /* ↓ padding menor e responsivo (antes: 56px 0) */
    padding: clamp(28px, 4vw, 46px) 0;
}

.af-hero h1 {
    margin: 0 0 10px 0;
    font-size: clamp(34px, 5vw, 54px);
    letter-spacing: .02em;
}

.af-hero p {
    margin: 0 0 18px 0;
    color: var(--af-muted);
    max-width: 680px;
}

/* botão base usado no hero */
.af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: var(--af-white);
}

.af-btn:hover {
    border-color: rgba(212, 175, 55, .55);
    text-decoration: none;
}

/* =========================================================
   FIX — Texto do HERO base sempre legível
   (evita herdar #111 das páginas brancas)
   ========================================================= */

.af-hero,
.af-hero .af-container {
    color: var(--af-white);
}

.af-hero h1 {
    color: var(--af-white);
    text-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.af-hero p {
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

/* você está usando esse kicker no category.php */
.af-hero .af-hero-kicker {
    color: rgba(255, 255, 255, .72);
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 8px;
}

/* opcional: reduz um pouco o “apagão” do overlay */
.af-hero::before {
    opacity: .78;
    /* antes .95 */
}

.af-hero {
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5);
}

.af-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, .28));
}