/*
 * home.css
 * Estilos específicos da página inicial (front-page.php).
 *
 * Organização:
 * 1. Hero (vídeo)
 * 2. Lightbox do vídeo
 * 3. Notícias em destaque (1 principal + 2 secundárias)
 * 4. Banners de destaque
 * 5. Notícias por categoria
 *
 * Convenções:
 * - Prefixo de seção: s-home__
 * - Prefixo de componente compartilhado: c-
 * - Sem !important
 * - Todos os valores de cor via design tokens de tokens.css
 * - Layout responsivo mobile-first com breakpoints via custom properties ou media queries
 */


/* ==========================================================================
   1. Hero — Vídeo YouTube
   ========================================================================== */

.s-home__hero {
    /*
     * Degradê CSS que replica o fundo do Figma:
     * Eixo diagonal (135deg), de azul escuro (navy) no canto superior esquerdo
     * até azul médio (cyan-dark) no canto inferior direito.
     * Ajuste os stops conforme o design token correto após confirmar tokens.css.
     */
    background: linear-gradient(
        135deg,
        var(--color-navy, #0d2a4e) 0%,
        var(--color-primary, #1a6fae) 55%,
        var(--color-cyan, #2fb8c8) 100%
    );
    padding-block: var(--space-10, 2.5rem);
}

.s-home__hero .l-container {
    display: flex;
    justify-content: center;
}

/* Player: área clicável que contém thumbnail + botão play */
.s-home__hero-player {
    position: relative;
    width: 100%;
    max-width: 720px;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    background-color: var(--color-navy, #0d2a4e);
}

.s-home__hero-player:focus-visible {
    outline: 3px solid var(--color-focus, #fff);
    outline-offset: 4px;
}

/* Thumbnail do vídeo — ocupa todo o player */
.s-home__hero-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.s-home__hero-player:hover .s-home__hero-thumb,
.s-home__hero-player:focus-visible .s-home__hero-thumb {
    transform: scale(1.03);
    filter: brightness(0.85);
}

/* Botão play centralizado */
.s-home__hero-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-white, #fff);
}

.s-home__hero-play svg {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
    transition: transform 0.2s ease;
}

.s-home__hero-player:hover .s-home__hero-play svg {
    transform: scale(1.1);
}


/* ==========================================================================
   2. Lightbox do vídeo
   ========================================================================== */

.c-video-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* hidden nativo: display none até JS remover o atributo */
.c-video-lightbox[hidden] {
    display: none;
}

/* Backdrop escuro */
.c-video-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.82);
    cursor: pointer;
}

/* Wrapper interno — fica sobre o backdrop */
.c-video-lightbox__inner {
    position: relative;
    width: min(90vw, 960px);
    z-index: 1;
}

/* Botão fechar */
.c-video-lightbox__fechar {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: transparent;
    border: none;
    color: var(--color-white, #fff);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 0;
}

.c-video-lightbox__fechar svg {
    width: 28px;
    height: 28px;
}

.c-video-lightbox__fechar:focus-visible {
    outline: 2px solid var(--color-white, #fff);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Wrapper do iframe — mantém proporção 16:9 */
.c-video-lightbox__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.c-video-lightbox__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* ==========================================================================
   3. Notícias em destaque
   ========================================================================== */

.s-home__destaques {
    padding-block: var(--space-10, 2.5rem);
    background-color: var(--color-bg, #f4f6f8);
}

/* Grid principal: coluna esquerda (principal) + coluna direita (secundárias) */
.s-home__destaques-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4, 1rem);
}

@media (min-width: 768px) {
    .s-home__destaques-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

/* Coluna direita empilha 2 cards */
.s-home__destaques-secundarios {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-4, 1rem);
}

/* --- Card base --- */
.s-home__card {
    position: relative;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background-color: var(--color-navy, #0d2a4e);
}

.s-home__card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--color-white, #fff);
}

.s-home__card--principal {
    aspect-ratio: 585 / 532;
    min-height: unset;
}

.s-home__card--secundario {
    min-height: 180px;
}

/* Foto de capa — cobre todo o card */
.s-home__card-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay escuro gradiente na parte inferior */
.s-home__card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-5, 1.25rem);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%
    );
    gap: var(--space-1, 0.25rem);
}

/* Badge de categoria — cor de fundo padrão (fallback para categorias sem cor definida) */
.s-home__card-categoria {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-sm, 4px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-white, #fff);
    background-color: var(--color-primary);
    margin-bottom: var(--space-1, 0.25rem);
}

/* Cores por categoria — mesmo padrão de noticias.css */
.s-home__card-categoria--institucional        { background-color: var(--color-editoria-institucional); }
.s-home__card-categoria--40-anos              { background-color: var(--color-editoria-40anos); }
.s-home__card-categoria--associados           { background-color: var(--color-editoria-associados); }
.s-home__card-categoria--femipa-energia       { background-color: var(--color-editoria-energia); }
.s-home__card-categoria--cursos-e-capacitacao { background-color: var(--color-editoria-cursos); }
.s-home__card-categoria--seminario-femipa     { background-color: var(--color-primary); }
.s-home__card-categoria--conferencia-da-saude { background-color: var(--color-primary); }

/* Data */
.s-home__card-data {
    font-size: var(--text-xs, 0.75rem);
    color: rgba(255, 255, 255, 0.8);
}

/* Título */
.s-home__card-titulo {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-bold, 700);
    line-height: 1.3;
    color: var(--color-white, #fff);
}

.s-home__card--secundario .s-home__card-titulo {
    font-size: var(--text-base, 1rem);
}

/* Hover nos cards */
.s-home__card-link:hover .s-home__card-foto {
    transform: scale(1.03);
    transition: transform 0.35s ease;
}

/* Rodapé da seção — link "Ver todas as notícias" */
.s-home__destaques-rodape {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4, 1rem);
}

/* c-link-seta: componente de link com seta, já usado em outras partes do tema */
.c-link-seta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--color-primary, #1a6fae);
    text-decoration: none;
}

.c-link-seta::after {
    content: "→";
}

.c-link-seta:hover {
    text-decoration: underline;
}


/* ==========================================================================
   4. Banners de destaque
   ========================================================================== */

.s-home__banners {
    padding-block: var(--space-8, 2rem);
    background-color: var(--color-bg-alt, #e8eef4);
}

.s-home__banners-grid {
    display: grid;
    gap: var(--space-4, 1rem);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .s-home__banners-grid--dois {
        grid-template-columns: 1fr 1fr;
    }
}

.s-home__banner {
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    line-height: 0; /* Remove espaço extra abaixo da imagem */
}

.s-home__banner-link {
    display: block;
}

.s-home__banner-imagem {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 16px);
    transition: filter 0.25s ease;
}

.s-home__banner-link:hover .s-home__banner-imagem {
    filter: brightness(0.92);
}


/* ==========================================================================
   5. Notícias por categoria
   — Layout e espaçamento do wrapper da seção.
   — Cabeçalho, cards e botão "Mais notícias" são cobertos por noticias.css.
   ========================================================================== */

.s-home__categorias {
    padding-block: var(--space-10, 2.5rem);
}