/*
 * Style.css for YTI&W Related Posts Module
 *
 * Estilos frontend para o grid de posts relacionados.
 * Versão Blindada (Flexbox Force) - v1.2
 * Author: Yassutaro TI & Web
 * License: GPL-2.0+
 */

.ytiw-related-posts-wrap {
    /* Variáveis Padrão (Fallback) - Serão sobrescritas pelo JS no modo Smart */
    --ytiw-rel-bg: #fff;
    --ytiw-rel-border: #e5e5e5;
    --ytiw-rel-text: #333;
    --ytiw-rel-meta: #777;
    --ytiw-rel-hover: #2271b1;

    margin: 40px 0;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}

.ytiw-related-posts-wrap * {
    box-sizing: border-box;
}

/* Título da Seção */
.ytiw-related-title {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ytiw-rel-border);
    color: var(--ytiw-rel-text);
    line-height: 1.3;
}

/* LAYOUT FLEXBOX BLINDADO 
   Usa !important para garantir que o tema não quebre o alinhamento
*/
.ytiw-related-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Card do Post */
.ytiw-related-item {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    background: var(--ytiw-rel-bg);
    border: 1px solid var(--ytiw-rel-border);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    
    /* LARGURA CALCULADA: 3 Colunas */
    /* 33.333% menos a compensação do gap (aprox 14px para gap de 20px) */
    flex: 0 0 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
    width: calc(33.333% - 14px) !important;
    
    margin: 0 !important; /* Remove margens externas que o tema possa colocar em links */
}

.ytiw-related-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    border-color: var(--ytiw-rel-hover);
}

/* Thumbnail */
.ytiw-related-thumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* Garante retângulo perfeito */
    height: auto;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--ytiw-rel-border);
    margin: 0 !important;
}

.ytiw-related-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.ytiw-related-item:hover .ytiw-related-thumb img {
    transform: scale(1.05);
}

/* Placeholder */
.ytiw-related-thumb-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ytiw-rel-border);
}

.ytiw-related-thumb-placeholder .dashicons {
    font-size: 32px;
    color: #ccc;
    width: 32px;
    height: 32px;
}

/* Conteúdo */
.ytiw-related-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ytiw-related-date {
    font-size: 0.85em;
    color: var(--ytiw-rel-meta);
    margin-bottom: 8px !important;
    display: block;
    line-height: 1;
}

.ytiw-related-item-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1em;
    line-height: 1.4;
    color: var(--ytiw-rel-text);
    font-weight: 600;
    transition: color 0.2s ease;
    
    /* Limita título a 3 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ytiw-related-item:hover .ytiw-related-item-title {
    color: var(--ytiw-rel-hover);
}

/* --- RESPONSIVIDADE (MEDIA QUERIES) --- */

/* Tablet (Menor que 900px): 2 Colunas */
@media (max-width: 900px) {
    .ytiw-related-item {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
    }
}

/* Mobile (Menor que 600px): 1 Coluna */
@media (max-width: 600px) {
    .ytiw-related-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important; /* Espaço entre cards no mobile */
    }
    
    .ytiw-related-thumb, 
    .ytiw-related-thumb-placeholder {
        height: 180px !important; 
        aspect-ratio: auto !important;
    }
}