/**



 * Public Styles for YTI&W Feed RSS



 *



 * Suporte a Layouts: Magazine, Grid (Cards) e List.



 *



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



 * @since      1.1.0



 */







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



   Variáveis e Reset Local



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



.ytiw-rss-wrapper {



    --ytiw-primary: #2c3e50;



    --ytiw-secondary: #7f8c8d;



    --ytiw-accent: #2980b9;



    --ytiw-bg-meta: #f5f5f5;



    --ytiw-border: #e1e1e1;



    --ytiw-gap: 30px;



    



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



    max-width: 100%;



    margin: 0 auto;



}







.ytiw-rss-wrapper * { box-sizing: border-box; }



.ytiw-rss-wrapper a { text-decoration: none; box-shadow: none; transition: color 0.2s ease; }



.ytiw-rss-wrapper img { max-width: 100%; height: auto; }







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



   Sistema de Grid (Responsivo)



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



.ytiw-rss-grid {



    display: grid;



    grid-template-columns: 1fr; /* Mobile first */



    gap: var(--ytiw-gap);



}







/* Tablet e Desktop */



@media (min-width: 768px) {



    /* Magazine: 2 Colunas */



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



    



    /* Grid/Card: 3 Colunas */



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



    



    /* List: 1 Coluna */



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



}







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



   Estilo Comum (Magazine e Geral)



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



.ytiw-rss-item {



    display: flex;



    flex-direction: column;



    margin-bottom: 20px;



}







.ytiw-rss-title {



    margin: 0 0 10px 0 !important;



    padding: 0;



    font-size: 1.1rem;



    line-height: 1.4;



    font-weight: 700;



}



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



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







.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-rss-meta {



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



    padding: 4px 10px;



    border-radius: 4px;



    font-size: 0.75rem;



    color: #666;



    margin-bottom: 12px;



    display: inline-block;



    width: fit-content;



}







/* Corpo Padrão (Magazine/List) */



.ytiw-rss-body {



    display: flex;



    gap: 20px;



    align-items: flex-start;



}



.ytiw-rss-thumb { flex: 0 0 90px; }



.ytiw-rss-thumb img {



    width: 90px; height: 90px;



    object-fit: cover;



    border-radius: 8px;



}



.ytiw-rss-excerpt {



    font-size: 0.9rem;



    line-height: 1.6;



    color: #555;



}







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



   Estilo Específico: GRID (Cartões)



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



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



    background: #fff;



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



    border-radius: 8px;



    overflow: hidden;



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



    height: 100%; /* Igualar altura */



}







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



    transform: translateY(-3px);



    box-shadow: 0 5px 15px rgba(0,0,0,0.08);



}







.ytiw-rss-thumb-card img {



    width: 100%;



    height: 160px; /* Altura fixa para o topo do card */



    object-fit: cover;



    display: block;



}







.ytiw-card-content {



    padding: 15px;



}







/* Ajustes Grid */



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



.ytiw-layout-grid .ytiw-rss-meta { margin-bottom: 10px; background: transparent; padding: 0; }







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



   Estilo Específico: LIST (Lista Simples)



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



.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;



}







.ytiw-list-content {



    flex: 1;



}







.ytiw-rss-meta-inline {



    font-size: 0.75rem;



    color: #888;



    margin-bottom: 8px;



    display: flex;



    gap: 10px;



    align-items: center;



}







.ytiw-source-badge {



    background: var(--ytiw-primary);



    color: #fff;



    padding: 2px 6px;



    border-radius: 3px;



    font-size: 0.7rem;



}







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



   Estilo Específico: SIZE (SMALL) - NOVO!



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







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



    --ytiw-gap: 15px; /* Reduz o gap do grid */



}







/* Redução geral de margens */



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



    margin-bottom: 15px;



}







/* Títulos */



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



    font-size: 1rem; /* De 1.1rem para 1.0rem */



    line-height: 1.3;



    margin-bottom: 5px !important;



}







/* Meta-dados e Fonte */



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



    font-size: 0.7rem; /* Levemente menor */



    margin-bottom: 3px;



}







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



    font-size: 0.7rem; 



    padding: 2px 8px; /* Menos padding */



    margin-bottom: 8px;



}







/* Corpo e Imagem (List/Magazine) */



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



    gap: 15px; /* Reduz o gap entre imagem e texto */



}



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



    flex: 0 0 70px; /* De 90px para 70px */



}



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



    width: 70px; height: 70px;



    border-radius: 6px;



}







/* Excerpt/Resumo */



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



    font-size: 0.85rem; /* Levemente menor */



    line-height: 1.5;



}







/* Ajustes Específicos para GRID SMALL */



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



    height: 120px; /* Altura da imagem no topo do card */



}



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



    padding: 10px; /* Reduz o padding interno do card */



}







/* Ajustes Específicos para LIST SMALL */



.ytiw-rss-wrapper.ytiw-size-small .ytiw-layout-list .ytiw-rss-item.list-style {



    padding-bottom: 15px;



    margin-bottom: 15px;



}