/* ============================================================
   FRONT PAGE - CLS FIXES AND PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* Anti-CLS: Imagens hero com aspect-ratio fixo antes de carregar.
   NOTA: NÃO incluir .rede-cover aqui — ele é position:absolute (fundo do card)
   e forçar position:relative quebra o layout, escondendo o avatar. */
.manchete-lead-media,
.video-media,
.edicao-cover,
.card-image {
    position: relative;
    overflow: hidden;
    background: var(--color-background-alt);
    opacity: 1;
    will-change: transform;
    contain: layout;
}

/* Garantir aspect-ratio explícito para imagens hero */
.manchete-lead-media {
    aspect-ratio: 16 / 9;
    min-height: 200px;
    opacity: 1;
}

.video-media {
    aspect-ratio: 16 / 9;
    min-height: 180px;
    opacity: 1;
}

.edicao-cover {
    aspect-ratio: 3 / 4;
    min-height: 300px;
    opacity: 1;
}

/* .rede-cover é position:absolute e já herda o aspect-ratio do .rede-card (3/4).
   Não aplicar aspect-ratio/min-height aqui para não quebrar o card da Rede. */

/* Cards com transform estável para evitar movimento durante carregamento */
.manchete-rail article,
.videos-grid a,
.edicoes-grid a,
.rede-track a,
.posts-grid .card {
    transform: translateY(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

/* Anúncios e widgets com altura reservada */
.ad-zone,
.widget,
.side-ad,
.side-newsletter,
.side-pauta {
    min-height: 90px;
    background: var(--color-background-alt);
    position: relative;
    overflow: hidden;
}

/* PWA prompt com display adequado para evitar CLS */
.pwa-prompt {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 400px;
    margin: 0 auto;
    background: var(--povo-black, #0A0A0A);
    border: 2px solid var(--povo-lime, #CCFF00);
    border-radius: 16px;
    padding: 16px;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease;
    /* Garantir que não cause layout shift */
    opacity: 0;
    transform: translateY(100px);
    visibility: hidden;
    display: none;
    /* Usar transform em vez de top/left para melhor performance */
    will-change: transform, opacity;
}

/* Estado visível */
.pwa-prompt[style*="display: block"],
.pwa-prompt.style[display="block"],
body[data-pwa-prompt="true"] .pwa-prompt {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    display: block !important;
}

@keyframes slideUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Melhorar performance de imagens */
img {
    image-rendering: optimizeQuality;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edge;
    image-rendering: crisp-edges;
}

/* Forçar dimensións nas imagens do slider de vídeos */
.videos-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Garantir que widgets laterais não causem CLS */
.ultimas-side,
.ultimas-side > div {
    position: sticky;
    top: 100px;
    height: fit-content;
    contain: layout style;
}

/* Formulários dentro de widgets */
.widget form {
    contain: layout;
}

/* Anúncios no header */
.ad-zone.leaderboard {
    min-height: 90px;
    background: var(--color-background-alt);
}

/* Melhorar animações dos cards */
.card, .video-card, .edicao-card, .rede-card {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* Evitar espaços em branco extra que causam CLS */
.hero-stats .stat-item,
.videos-grid,
.edicoes-grid {
    contain: layout;
}

/* Melhorar carregamento das imagens do carrossel */
.videos-track,
.rede-track {
    contain: layout;
    will-change: scroll-position;
}

/* Garantir que placeholders tenham dimensões e background.
   NOTA: .rede-cover não precisa de ::before — é position:absolute dentro do
   .rede-card (que já tem aspect-ratio 3/4). Pseudo-elemento sem content é no-op. */
.card-image-placeholder,
.edicao-cover::before,
.manchete-lead-media::before,
.video-media::before {
    aspect-ratio: 16 / 9;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-alt);
    opacity: 1;
    will-change: opacity;
}

/* Reduzir animações para melhor performance */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Anti-flicker: garantir que elementos ocultos não causem layout shift */
[hidden], .hidden {
    display: none !important;
}

/* NOTA: Não esconder imagens lazy com opacity:0 — isso causava o "piscamento"
   (imagens aparecem e somem). Deixamos as imagens visíveis por padrão. */

/* Anti-flicker: Garantir que imagens hero não causem piscamento */
.manchete-lead-media img,
.manchete-rail img,
.video-media img,
.edicao-cover img,
.rede-cover img,
.card-image img,
.archive-card-image img {
    opacity: 1 !important;
    transition: none !important;
    background: var(--color-background-alt);
    will-change: transform;
    contain: layout;
}

/* Rede: garantir que o avatar fique SEMPRE visível acima do cover absoluto.
   O .rede-avatar precisa de z-index explícito para não ser coberto pelo
   .rede-cover (z-index: -1) em contextos de stacking das animações. */
.rede-avatar {
    position: relative;
    z-index: 2;
}
.rede-avatar img {
    opacity: 1 !important;
    visibility: visible !important;
}
.rede-name,
.rede-area {
    position: relative;
    z-index: 2;
}

/* Garantir que imagens preloadadas sejam usadas corretamente */
.manchete-lead-media img[loading="eager"] {
    will-change: transform;
    transition: transform 0.3s ease;
}

/* Desativar View Transitions para evitar InvalidStateError */
::view-transition-group(*),
::view-transition(*),
::view-transition-image-pair(*) {
    animation: none !important;
    display: none !important;
}

/* Garantir que imagens sem dimensões não causem layout shift */
img:not([width]):not([height]) {
    width: 100%;
    height: auto;
}

/* Garantir que placeholders de SVG tenham background */
img[src^="data:image/svg+xml"] {
    background: var(--color-background-alt);
}

/* Garantir que placeholders tenham dimensões e background.
   NOTA: .rede-cover::before é no-op (sem content), e o cover é position:absolute. */
.card-image-placeholder,
.edicao-cover::before,
.manchete-lead-media::before,
.video-media::before {
    background: var(--color-background-alt) !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Preload hint para imagens críticas */
.manchete-lead-media img,
.hero-post-image img {
    image-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Melhorar interações do botão do menu mobile */
.mobile-menu-toggle {
    contain: layout;
}

/* Garantir que overlays não causem CLS */
.search-overlay,
.mobile-nav-overlay {
    contain: layout;
    backface-visibility: hidden;
}