/* ==========================================================================
   COMPONENT: INNER PAGE HEADER (UNIVERSAL)
   ==========================================================================
   Estilos para o cabeçalho de páginas internas (com título, subtítulo e breadcrumbs).
   Utiliza variáveis CSS globais para integração com o sistema de temas e responsividade.
*/

/* --- 1. VARIÁVEIS LOCAIS (Herdam do Tema Global) --- */
.inner-header-universal {
    /* DIMINUÍDO DE 45vh PARA 35vh PARA FICAR MAIS COMPACTO */
    --hdr-height: 35vh; 
    --hdr-min-height: 280px; /* Reduzido de 350px */
    --hdr-accent: var(--color-primary, #b92027); 
    --hdr-overlay-gradient: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.9) 100%);
    --hdr-title-color: var(--color-text-inverted, #fff);
    --hdr-subtitle-color: rgba(255, 255, 255, 0.85);
    --hdr-breadcrumb-color: rgba(255,255,255,0.5);
    --hdr-breadcrumb-active-color: var(--hdr-accent);
}

/* --- 2. ESTRUTURA --- */
.inner-header-universal {
    height: var(--hdr-height);
    min-height: var(--hdr-min-height);
    overflow: hidden;
    margin-top: 0; 
    display: flex;
    align-items: center;
    background-color: var(--color-background-dark, #111);
}

/* --- 3. LAYERS --- */
.inner-bg-layer {
    position: absolute; inset: 0;
    /* Fundo 100% CSS (sem imagens com watermark) */
    background:
      radial-gradient(1200px 520px at 18% 22%, rgba(185, 32, 39, 0.22), transparent 60%),
      radial-gradient(900px 480px at 82% 35%, rgba(255, 255, 255, 0.08), transparent 55%),
      linear-gradient(120deg, rgba(8,12,24,0.85), rgba(0,0,0,0.78));
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    transform: scale(1.02);
    z-index: 0;
    animation: innerBgDrift 16s ease-in-out infinite;
}

@keyframes innerBgDrift {
    0%, 100% { transform: translate3d(0,0,0) scale(1.02); filter: saturate(115%); }
    50% { transform: translate3d(0,-6px,0) scale(1.04); filter: saturate(135%); }
}

.inner-overlay {
    position: absolute; inset: 0;
    background: var(--hdr-overlay-gradient);
    z-index: 1;
    backdrop-filter: blur(2px);
}

/* --- 4. TIPOGRAFIA --- */
.inner-title {
    color: var(--hdr-title-color);
    font-family: var(--font-heading, serif);
    font-weight: 800;
    /* Padrão mais próximo do hero da home */
    font-size: clamp(2.4rem, 5.2vw, 4.3rem);
    letter-spacing: -1px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    line-height: 1.2;
    transition: filter 0.35s ease, text-shadow 0.35s ease;
}

.inner-header-universal:hover .inner-title {
    filter: brightness(1.08) saturate(1.12);
    text-shadow:
      0 18px 50px rgba(0,0,0,0.70),
      0 0 22px rgba(185,32,39,0.22);
}

.inner-subtitle {
    color: var(--hdr-subtitle-color);
    font-family: var(--font-body, sans-serif);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 300;
    max-width: 700px;
    margin-left: auto; margin-right: auto;
    line-height: 1.6;
}

/* --- 5. DECORAÇÃO --- */
.inner-decor-line {
    width: 80px; height: 4px;
    background-color: var(--hdr-accent);
    border-radius: 2px;
    box-shadow: 0 0 15px var(--hdr-accent);
}

/* --- 6. BREADCRUMBS CUSTOM --- */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--hdr-breadcrumb-color);
    content: "•"; 
}
.breadcrumb-item.active {
    color: var(--hdr-breadcrumb-active-color) !important;
    font-weight: 700;
}

/* --- 7. ANIMAÇÕES (AOS Compatible) --- */
[data-aos="scale-x"] {
    transform: scaleX(0); transition-property: transform;
}
[data-aos="scale-x"].aos-animate {
    transform: scaleX(1);
}

/* --- 8. RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .inner-header-universal {
        /* Compensa a navbar fixa mobile */
        padding-top: 60px;
        --hdr-height: 30vh; /* Ainda menor no mobile */
    }
}