/**


 * Public Styles for YTI&W Feed RSS


 *


 * Suporte Completo: Magazine, Grid (Cards), List, Carousel, Masonry e Bento Grid.


 * Inclui proteção "Image Shield", "Logo Smart Fit" e correção de visibilidade no modo Small.


 *


 * @link       https://developers.yassutaro.com/


 * @since      1.1.0


 * @version    1.8.8 (Grid Small Fix)


 */





/* =========================================


   1. VARIÁVEIS E RESET LOCAL


   ========================================= */


.ytiw-rss-wrapper {


    /* Paleta de Cores Padrão (Pode ser sobrescrita via PHP/Inline) */


    --ytiw-primary: #2c3e50;


    --ytiw-secondary: #7f8c8d;


    --ytiw-accent: #2980b9;


    --ytiw-bg-meta: #f5f5f5;


    --ytiw-border: #e1e1e1;


    --ytiw-text: #333333;


    --ytiw-text-light: #777777;


    


    /* Configurações de Layout */


    --ytiw-gap: 30px; 


    --ytiw-radius: 8px;


    --ytiw-shadow: 0 4px 6px rgba(0,0,0,0.05);


    --ytiw-shadow-hover: 0 8px 15px rgba(0,0,0,0.1);


    


    /* Filtros de Imagem */


    --ytiw-img-brightness: 100%;


    --ytiw-img-blur: 0px;


    


    /* Masonry Específico */


    --ytiw-masonry-cell-h: 220px; 


    


    /* Tipografia Base */


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


    line-height: 1.5;


    max-width: 100%;


    margin: 0 auto;


    width: 100%;


}





/* Reset de Box Model dentro do Wrapper para evitar conflitos com temas */


.ytiw-rss-wrapper *, 


.ytiw-rss-wrapper *::before, 


.ytiw-rss-wrapper *::after { 


    box-sizing: border-box; 


}





.ytiw-rss-wrapper a { 


    text-decoration: none; 


    box-shadow: none; 


    transition: all 0.2s ease; 


}





.ytiw-rss-wrapper img { 


    max-width: 100%; 


    height: auto; 


    display: block; /* Remove espaço extra abaixo da imagem */


    border: none;


}





/* =========================================


   2. IMAGE SHIELD & LOGO SMART FIT


   ========================================= 


   Essencial para manter o layout alinhado se a imagem falhar (404) 


   e para exibir logos corretamente quando usadas como fallback.


*/


.ytiw-rss-thumb,


.ytiw-rss-thumb-card {


    background-color: #f0f0f1; /* Placeholder visual */


    position: relative;


    overflow: hidden; 


}





/* Proteção contra texto ALT deformado (Image Shield) */


.ytiw-rss-thumb img,


.ytiw-rss-thumb-card img {


    color: transparent !important; 


    text-indent: 100%; 


    white-space: nowrap; 


    overflow: hidden;


    position: relative;


}





/**


 * LOGO FALLBACK STYLING (Google Favicons)


 * Detecta se a imagem é um ícone do Google e ajusta o layout


 * para "encapsular" a logo (contain) em vez de esticá-la (cover).


 */


.ytiw-rss-thumb img[src*="google.com/s2/favicons"],


.ytiw-rss-thumb-card img[src*="google.com/s2/favicons"] {


    object-fit: contain !important; /* Não corta a logo */


    padding: 25px !important;       /* Espaço de respiro generoso */


    background-color: #ffffff;      /* Fundo branco limpo para logos */


    width: 100%;


    height: 100%;


    /* Remove blur de logos para mantê-las nítidas, ignorando config do usuário */


    filter: brightness(var(--ytiw-img-brightness)) blur(0px) !important;


}





/* Camada de fallback (placeholder cinza se imagem não carregar) */


.ytiw-rss-thumb img::after,


.ytiw-rss-thumb-card img::after {


    content: ""; 


    display: block;


    position: absolute;


    top: 0; left: 0; width: 100%; height: 100%;


    background-color: #f0f0f1;


    pointer-events: none;


}





/* =========================================


   3. SISTEMA DE GRID GERAL


   ========================================= */


.ytiw-rss-grid {


    display: grid;


    grid-template-columns: 1fr; /* Mobile First: 1 Coluna */


    gap: var(--ytiw-gap);


    width: 100%;


}





/* Tablet e Desktop */


@media (min-width: 768px) {


    .ytiw-rss-grid.ytiw-cols-2 { grid-template-columns: repeat(2, 1fr); }


    .ytiw-rss-grid.ytiw-cols-3 { grid-template-columns: repeat(3, 1fr); }


    .ytiw-rss-grid.ytiw-cols-4 { grid-template-columns: repeat(4, 1fr); }


    .ytiw-rss-grid.ytiw-cols-1 { grid-template-columns: 1fr; }


}





/* =========================================


   4. COMPONENTES COMUNS (Title, Meta, Source)


   ========================================= */


.ytiw-rss-item {


    display: flex;


    flex-direction: column;


    margin-bottom: 0; /* O Grid cuida do gap */


    position: relative;


    width: 100%;


}





/* Título */


.ytiw-rss-title {


    margin: 0 0 10px 0 !important;


    padding: 0;


    font-size: 1.1rem;


    line-height: 1.4;


    font-weight: 700;


    word-wrap: break-word;


}


.ytiw-rss-title a { color: var(--ytiw-primary); }


.ytiw-rss-title a:hover { color: var(--ytiw-accent); }





/* Fonte (Badge ou Texto) */


.ytiw-rss-source { margin-bottom: 8px; }


.ytiw-source-name {


    font-size: 0.75rem;


    text-transform: uppercase;


    letter-spacing: 0.5px;


    color: var(--ytiw-secondary);


    font-weight: 600;


}


.ytiw-source-badge {


    background: var(--ytiw-primary);


    color: #fff;


    padding: 2px 6px;


    border-radius: 3px;


    font-size: 0.7rem;


    font-weight: 700;


    display: inline-block;


}





/* Metadados (Data, Autor) */


.ytiw-rss-meta {


    background: var(--ytiw-bg-meta);


    padding: 4px 10px;


    border-radius: 4px;


    font-size: 0.75rem;


    color: var(--ytiw-text-light);


    margin-bottom: 12px;


    display: inline-block;


    width: fit-content;


    line-height: 1.2;


}


.ytiw-rss-meta-inline {


    font-size: 0.75rem;


    color: var(--ytiw-text-light);


    margin-bottom: 8px;


    display: flex;


    flex-wrap: wrap;


    gap: 10px;


    align-items: center;


}


.ytiw-sep { opacity: 0.5; font-size: 0.8em; }





/* Corpo (Resumo) */


.ytiw-rss-excerpt {


    font-size: 0.95rem;


    line-height: 1.6;


    color: var(--ytiw-text);


}





/* =========================================


   5. LAYOUT: MAGAZINE / LIST (Clássico)


   ========================================= */


/* Container Flex Horizontal */


.ytiw-rss-body {


    display: flex;


    gap: 20px;


    align-items: flex-start;


}





/* Thumbnail Pequena Fixa */


.ytiw-rss-thumb { 


    flex: 0 0 90px; 


    position: relative;


    /* Ajustes para evitar overflow */


    min-width: 90px;


}


.ytiw-rss-thumb img {


    width: 90px; 


    height: 90px;


    object-fit: cover;


    border-radius: var(--ytiw-radius);


    /* Filtros Globais */


    filter: brightness(var(--ytiw-img-brightness)) blur(var(--ytiw-img-blur));


}





/* Estilo Lista com Borda */


.ytiw-layout-list .ytiw-rss-item.list-style {


    border-bottom: 1px solid var(--ytiw-border);


    padding-bottom: 20px;


    margin-bottom: 20px;


}


.ytiw-layout-list .ytiw-rss-item.list-style:last-child { 


    border-bottom: none; 


    padding-bottom: 0;


    margin-bottom: 0;


}


.ytiw-list-content { flex: 1; min-width: 0; /* Evita quebra de flex */ }





/* =========================================


   6. LAYOUT: GRID (Cards)


   ========================================= */


.ytiw-layout-grid .ytiw-rss-item.card-style {


    background: #fff;


    border: 1px solid var(--ytiw-border);


    border-radius: var(--ytiw-radius);


    overflow: hidden;


    transition: transform 0.2s ease, box-shadow 0.2s ease;


    height: 100%; /* Garante altura igual */


    display: flex;


    flex-direction: column;


}





.ytiw-layout-grid .ytiw-rss-item.card-style:hover {


    transform: translateY(-3px);


    box-shadow: var(--ytiw-shadow-hover);


    border-color: var(--ytiw-accent);


}





.ytiw-rss-thumb-card {


    width: 100%;


    position: relative;


    padding-top: 56.25%; /* Aspect Ratio 16:9 */


    overflow: hidden;


}





.ytiw-rss-thumb-card img {


    position: absolute;


    top: 0; left: 0;


    width: 100%;


    height: 100%;


    object-fit: cover;


    transition: transform 0.3s ease;


    filter: brightness(var(--ytiw-img-brightness)) blur(var(--ytiw-img-blur));


}


.ytiw-layout-grid .ytiw-rss-item.card-style:hover .ytiw-rss-thumb-card img {


    transform: scale(1.05);


}





/* Content wrapper do card */


.ytiw-card-content { 


    padding: 15px; 


    flex: 1; /* Empurra o footer se houver */


    display: flex;


    flex-direction: column;


}





.ytiw-layout-grid .ytiw-rss-title { font-size: 1rem; margin-bottom: 8px; }





/* Grid Meta adjustment */


.ytiw-layout-grid .ytiw-rss-meta-inline {


    margin-bottom: 10px;


    background: transparent;


    padding: 0;


    flex-direction: column; 


    align-items: flex-start; 


    gap: 5px; 


}





/* =========================================


   7. MODIFICADOR: SIZE SMALL (Compacto)


   ========================================= */


.ytiw-rss-wrapper.ytiw-size-small {


    --ytiw-gap: 15px;


    --ytiw-masonry-cell-h: 140px; 


}





/* Ajustes Gerais Small */


.ytiw-rss-wrapper.ytiw-size-small .ytiw-rss-item { margin-bottom: 10px; }


.ytiw-rss-wrapper.ytiw-size-small .ytiw-rss-title {


    font-size: 0.95rem;


    line-height: 1.3;


    margin-bottom: 5px !important;


}


.ytiw-rss-wrapper.ytiw-size-small .ytiw-source-name { font-size: 0.65rem; margin-bottom: 2px; }


.ytiw-rss-wrapper.ytiw-size-small .ytiw-rss-meta { 


    font-size: 0.7rem; 


    padding: 2px 6px; 


    margin-bottom: 6px; 


}


.ytiw-rss-wrapper.ytiw-size-small .ytiw-rss-body { gap: 12px; }





/* Thumb Small (Lista/Magazine) */


.ytiw-rss-wrapper.ytiw-size-small:not(.ytiw-layout-masonry) .ytiw-rss-thumb { 


    flex: 0 0 60px; 


    min-width: 60px;


}


.ytiw-rss-wrapper.ytiw-size-small:not(.ytiw-layout-masonry) .ytiw-rss-thumb img { width: 60px; height: 60px; border-radius: 4px; }





/* Correção CRÍTICA: Resumo visível em Small (se ativado nas opções), com fonte reduzida */


.ytiw-rss-wrapper.ytiw-size-small .ytiw-rss-excerpt { 


    font-size: 0.85rem; 


    line-height: 1.4; 


    margin-top: 5px;


}





/* Thumb Small (Grid) 


   CORREÇÃO V1.8.8: Remoção de espaço no seletor, pois 'wrapper' e 'layout-grid' 


   são classes do mesmo elemento. 


*/


.ytiw-rss-wrapper.ytiw-size-small.ytiw-layout-grid .ytiw-rss-thumb-card { 


    padding-top: 50%; /* Imagem mais baixa/compacta */


} 


.ytiw-rss-wrapper.ytiw-size-small.ytiw-layout-grid .ytiw-card-content { 


    padding: 10px; /* Padding interno reduzido */


}


/* Reforço para título no Grid Small */


.ytiw-rss-wrapper.ytiw-size-small.ytiw-layout-grid .ytiw-rss-title {


    font-size: 0.9rem;


}








/* =========================================


   8. LAYOUT: MASONRY / BENTO GRID (Hero + Side)


   ========================================= */


.ytiw-layout-masonry .ytiw-rss-grid {


    display: grid;


    gap: var(--ytiw-gap) !important;


    width: 100%;


    /* Mobile: Pilha simples vertical */


    grid-template-columns: 1fr;


    grid-auto-rows: var(--ytiw-masonry-cell-h);


}





/* Desktop Grid (768px+) - Lógica Bento */


@media (min-width: 768px) {


    .ytiw-layout-masonry .ytiw-rss-grid {


        /* Coluna 1 (Hero) = 2fr, Coluna 2 (Side) = 1fr */


        grid-template-columns: 2fr 1fr;


        /* Duas linhas de altura fixa */


        grid-template-rows: repeat(2, var(--ytiw-masonry-cell-h));


    }





    /* Item 1: HERO -> Ocupa Coluna 1 inteira e 2 Linhas */


    .ytiw-layout-masonry .masonry-card:nth-child(1) {


        grid-column: 1 / 2;


        grid-row: 1 / 3; 


    }





    /* Item 2: Topo Direita */


    .ytiw-layout-masonry .masonry-card:nth-child(2) {


        grid-column: 2 / 3;


        grid-row: 1 / 2;


    }





    /* Item 3: Baixo Direita */


    .ytiw-layout-masonry .masonry-card:nth-child(3) {


        grid-column: 2 / 3;


        grid-row: 2 / 3;


    }





    /* Excedentes ocultos (Limite rígido de 3 itens para Bento) */


    .ytiw-layout-masonry .masonry-card:nth-child(n+4) {


        display: none;


    }


}





/* Estilo do Card Masonry */


.ytiw-layout-masonry .masonry-card {


    position: relative;


    background: #000;


    border-radius: var(--ytiw-radius);


    overflow: hidden;


    margin-bottom: 0;


    width: 100%;


    height: 100%;


    border: none;


}





.ytiw-layout-masonry .ytiw-masonry-link {


    display: block;


    width: 100%;


    height: 100%;


    position: relative;


    color: #fff;


    text-decoration: none;


}





/* Imagem Full Cover Masonry */


.ytiw-layout-masonry .ytiw-rss-thumb {


    position: absolute;


    inset: 0;


    z-index: 1;


    margin: 0;


    padding: 0;


    width: 100% !important;


    height: 100% !important;


    flex: none; /* Override flex */


    background: #000;


}





.ytiw-layout-masonry .ytiw-rss-thumb img {


    width: 100% !important;


    height: 100% !important;


    object-fit: cover;


    border-radius: 0;


    transition: transform 0.5s ease;


    filter: brightness(var(--ytiw-img-brightness)) blur(var(--ytiw-img-blur));


}





.ytiw-layout-masonry .masonry-card:hover .ytiw-rss-thumb img {


    transform: scale(1.1);


}





/* Fallback se imagem falhar */


.ytiw-no-image-placeholder {


    position: absolute; inset: 0;


    background: linear-gradient(135deg, #2c3e50, #34495e);


}





/* Gradiente de Leitura */


.ytiw-overlay-gradient {


    position: absolute;


    bottom: 0; left: 0; width: 100%; height: 90%;


    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);


    z-index: 2;


    pointer-events: none;


}





/* Conteúdo Overlay */


.ytiw-layout-masonry .ytiw-rss-body {


    position: absolute;


    bottom: 0; left: 0; width: 100%;


    padding: 20px;


    z-index: 3;


    display: flex;


    flex-direction: column;


    justify-content: flex-end;


    gap: 8px;


    text-align: left;


}





/* Títulos Masonry */


.ytiw-layout-masonry .ytiw-rss-title {


    color: #fff !important;


    text-shadow: 0 2px 4px rgba(0,0,0,0.8);


    margin-bottom: 4px !important;


    font-size: 1.1rem;


}





/* Ajustes Específicos para os Itens Laterais (Menores) */


.ytiw-layout-masonry .masonry-card:not(:first-child) .ytiw-rss-title {


    font-size: 0.95rem;


    line-height: 1.3;


}





/* Badge Colorida no Masonry */


.ytiw-layout-masonry .ytiw-source-badge {


    background: var(--ytiw-accent);


    color: #fff;


    align-self: flex-start;


    margin-bottom: 4px;


    box-shadow: 0 2px 4px rgba(0,0,0,0.3);


}





/* Meta Masonry */


.ytiw-layout-masonry .ytiw-rss-meta {


    background: transparent;


    padding: 0;


    color: rgba(255,255,255,0.8);


    font-size: 0.75rem;


    margin-bottom: 0;


}





/* Resumo (Excerpt) apenas no Hero Desktop */


.ytiw-layout-masonry .ytiw-rss-excerpt { display: none; }





@media (min-width: 768px) {


    .ytiw-layout-masonry .masonry-card:nth-child(1) .ytiw-rss-excerpt {


        display: block;


        color: rgba(255,255,255,0.95);


        font-size: 1rem;


        margin-top: 8px;


        line-height: 1.5;


        text-shadow: 0 1px 2px rgba(0,0,0,0.8);


        max-width: 90%;


    }


    


    .ytiw-layout-masonry .masonry-card:nth-child(1) .ytiw-rss-title {


        font-size: 1.8rem;


        line-height: 1.2;


    }


}





/* Masonry + Small Mode */


.ytiw-rss-wrapper.ytiw-size-small.ytiw-layout-masonry .ytiw-rss-body { padding: 12px; }


@media (min-width: 768px) {


    .ytiw-rss-wrapper.ytiw-size-small.ytiw-layout-masonry .masonry-card:nth-child(1) .ytiw-rss-title { font-size: 1.3rem; }


    .ytiw-rss-wrapper.ytiw-size-small.ytiw-layout-masonry .masonry-card:nth-child(1) .ytiw-rss-excerpt { display: none; }


}





/* =========================================


   9. AJUSTES RESPONSIVOS FINAIS


   ========================================= */


@media (max-width: 480px) {


    .ytiw-rss-grid { gap: 15px; }


    .ytiw-rss-thumb { flex: 0 0 70px; min-width: 70px; }


    .ytiw-rss-thumb img { width: 70px; height: 70px; }


    .ytiw-rss-title { font-size: 1rem; }


    


    /* Masonry Mobile */


    .ytiw-layout-masonry .ytiw-rss-title { font-size: 1rem; }


    .ytiw-layout-masonry .ytiw-rss-body { padding: 15px; }


}