/**




 * Venus FM - Category Grids




 * Hoja de estilos unificada.




 *




 * Antes vivía repartida en 3 bloques <style> inline dentro del PHP:




 *   1) vfm_render_custom_page_grid()          -> .vfm-page-grid / .vfm-page-card*




 *   2) vfm_generate_grid_html()               -> .vfm-shortcode-grid / .vfm-sc-*




 *   3) vfm_render_artist_profile_shortcode()  -> .vfm-artist-header*




 *




 * Se encola una sola vez por página vía wp_enqueue_style() en




 * includes/assets.php, en vez de imprimirse de nuevo en cada shortcode.




 */









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




   1) Grillas personalizadas de páginas [grid-NOMBRE]




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









.vfm-page-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));




    gap: 20px;




    margin-bottom: 40px;




    font-family: 'Montserrat', sans-serif;




    width: 100%;




}









.vfm-page-card {




    position: relative;




    border-radius: 12px;




    overflow: hidden;




    background-color: #141414;




    display: flex;




    flex-direction: column;




    text-decoration: none;




    box-shadow: 0 4px 15px rgba(0,0,0,0.4);




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




}









.vfm-page-card:hover {




    transform: translateY(-5px);




    box-shadow: 0 8px 25px rgba(0,0,0,0.6);




}









.vfm-page-card:hover .vfm-page-card-img { transform: scale(1.05); }









.vfm-page-card-img-wrapper {




    width: 100%;




    aspect-ratio: 1 / 1;




    overflow: hidden;




    background: #000;




}









.vfm-page-card-img {




    width: 100%;




    height: 100%;




    object-fit: cover;




    transition: transform 0.4s ease;




}









.vfm-page-card-title {




    padding: 14px 16px;




    margin: 0;




    font-size: 1rem;




    font-weight: 800;




    color: #ffffff;




    text-align: center;




}









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




   2) Grilla de noticias compartida (categoría / etiqueta / últimas / artista)




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









.vfm-shortcode-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));




    gap: 20px;




    margin-bottom: 40px;




    font-family: 'Montserrat', sans-serif;




    width: 100%;




}









.vfm-sc-card {




    position: relative;




    border-radius: 12px;




    overflow: hidden;




    background-color: #141414;




    display: flex;




    flex-direction: column;




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




    text-decoration: none;




    box-shadow: 0 4px 15px rgba(0,0,0,0.4);




    height: 100%;




}









.vfm-sc-card:hover {




    transform: translateY(-5px);




    box-shadow: 0 8px 25px rgba(0,0,0,0.6);




}









.vfm-sc-card:hover .vfm-sc-image {




    transform: scale(1.05);




}









.vfm-sc-link-overlay {




    position: absolute;




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




    z-index: 5;




}









.vfm-sc-image-wrapper {




    width: 100%;




    aspect-ratio: 16 / 9;




    overflow: hidden;




    position: relative;




}









.vfm-sc-image {




    width: 100%;




    height: 100%;




    object-fit: cover;




    transition: transform 0.4s ease;




}









.vfm-sc-categories {




    position: absolute;




    top: 15px;




    left: 15px;




    display: flex;




    flex-wrap: wrap;




    gap: 6px;




    z-index: 6; /* por encima de .vfm-sc-link-overlay (z-index: 5) para que sea cliqueable */




}









.vfm-sc-cat-tag {




    position: relative;




    display: inline-block;




    background-color: #00bcd4;




    color: #ffffff;




    font-size: 10px;




    font-weight: 800;




    padding: 4px 8px;




    border-radius: 4px;




    text-transform: uppercase;




    letter-spacing: 0.5px;




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




    text-decoration: none;




    cursor: pointer;




    transition: background-color 0.2s ease;




}









.vfm-sc-cat-tag:hover,




.vfm-sc-cat-tag:focus {




    background-color: #0097a7;




    color: #ffffff;




}









.vfm-sc-content {




    padding: 20px;




    display: flex;




    flex-direction: column;




    flex-grow: 1;




    justify-content: space-between;




}









.vfm-sc-title {




    font-size: 1.1rem;




    font-weight: 900;




    line-height: 1.3;




    margin: 0 0 10px 0;




    color: #ffffff;




}









.vfm-sc-excerpt {




    font-size: 0.85rem;




    color: #b0b0b0;




    margin: 0 0 15px 0;




    line-height: 1.4;




    font-weight: 400;




}









.vfm-sc-meta {




    display: flex;




    align-items: center;




    gap: 10px;




    border-top: 1px solid rgba(255,255,255,0.1);




    padding-top: 12px;




    margin-top: auto;




}









.vfm-sc-date {




    font-size: 0.75rem;




    color: #888888;




    font-weight: 600;




    margin: 0;




}









.vfm-sc-updated {




    color: #00bcd4;




}









@media (max-width: 600px) {




    .vfm-shortcode-grid {




        grid-template-columns: 1fr;




    }




    .vfm-sc-image-wrapper {




        aspect-ratio: 4 / 3;




    }




}









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




   3) Portada de artista [vfm_artist_profile]




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









.vfm-artist-header {




    position: relative;




    display: flex;




    align-items: flex-start;




    gap: 28px;




    border-radius: 16px;




    margin-bottom: 30px;




    padding: 26px;




    background-color: #141414;




    font-family: 'Montserrat', sans-serif;




}









.vfm-artist-header-photo {




    position: relative;




    flex: 0 0 220px;




    width: 220px;




    aspect-ratio: 3 / 4;




    border-radius: 12px;




    overflow: hidden;




    background-color: #000;




}









.vfm-artist-header-photo-bg {




    position: absolute;




    top: -10px; left: -10px; right: -10px; bottom: -10px;




    background-image: var(--vfm-artist-img);




    background-size: cover;




    background-position: center;




    filter: brightness(0.45) blur(16px);




}









.vfm-artist-header-photo img {




    position: absolute;




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




    object-fit: contain;




    object-position: center;




    z-index: 1;




}









.vfm-artist-header-content {




    flex: 1;




    min-width: 0;




    padding-top: 4px;




}









.vfm-artist-header-eyebrow {




    display: inline-block;




    background-color: #00bcd4;




    color: #fff;




    font-size: 11px;




    font-weight: 800;




    letter-spacing: 0.5px;




    text-transform: uppercase;




    padding: 4px 10px;




    border-radius: 4px;




    margin-bottom: 12px;




}









.vfm-artist-header-name {




    color: #ffffff;




    font-size: 2rem;




    font-weight: 900;




    margin: 0 0 6px 0;




    line-height: 1.1;




}









.vfm-artist-header-count {




    color: #999999;




    font-size: 0.9rem;




    font-weight: 600;




    margin: 0 0 16px 0;




}









.vfm-artist-header-nacimiento {




    color: #dddddd;




    font-size: 0.92rem;




    font-weight: 600;




    margin: 0 0 12px 0;




}









.vfm-artist-header-nacimiento strong {




    color: #00bcd4;




    font-weight: 800;




}









.vfm-artist-header-bio {




    color: #cccccc;




    font-size: 0.95rem;




    font-weight: 400;




    line-height: 1.6;




    margin: 0;




}









@media (max-width: 700px) {




    .vfm-artist-header { flex-direction: column; align-items: center; text-align: center; padding: 20px; }




    .vfm-artist-header-photo { width: 180px; flex-basis: auto; }




    .vfm-artist-header-name { font-size: 1.4rem; }




}









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




   4) Cabecera de categoría [vfm_category_header] (plantilla de Archivo)




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









.vfm-category-header {




    border-radius: 16px;




    margin-bottom: 30px;




    padding: 26px 30px;




    background-color: #141414;




    font-family: 'Montserrat', sans-serif;




}









.vfm-category-header-eyebrow {




    display: inline-block;




    background-color: #00bcd4;




    color: #fff;




    font-size: 11px;




    font-weight: 800;




    letter-spacing: 0.5px;




    text-transform: uppercase;




    padding: 4px 10px;




    border-radius: 4px;




    margin-bottom: 12px;




}









.vfm-category-header-name {




    color: #ffffff;




    font-size: 2rem;




    font-weight: 900;




    margin: 0 0 6px 0;




    line-height: 1.1;




}









.vfm-category-header-count {




    color: #999999;




    font-size: 0.9rem;




    font-weight: 600;




    margin: 0 0 14px 0;




}









.vfm-category-header-desc {




    color: #cccccc;




    font-size: 0.95rem;




    font-weight: 400;




    line-height: 1.6;




    margin: 0;




    max-width: 800px;




}









@media (max-width: 700px) {




    .vfm-category-header { padding: 20px; text-align: center; }




    .vfm-category-header-name { font-size: 1.4rem; }




    .vfm-category-header-desc { max-width: 100%; }




}









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




   5) Post destacado de categoría [vfm_category_featured]




   (el más reciente: imagen grande + título + bajada + autor + fecha)




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









.vfm-category-featured {




    position: relative;




    display: flex;




    align-items: center;




    gap: 40px;




    margin-bottom: 30px;




    padding: 26px 30px;




    border-radius: 16px;




    background-color: #141414;




    font-family: 'Montserrat', sans-serif;




}









.vfm-category-featured-content {




    flex: 1 1 50%;




    min-width: 0;




}









.vfm-category-featured-title {




    color: #ffffff;




    font-size: 2rem;




    font-weight: 900;




    line-height: 1.15;




    margin: 0 0 14px 0;




}









.vfm-category-featured-excerpt {




    color: #cccccc;




    font-size: 1rem;




    font-weight: 400;




    line-height: 1.6;




    margin: 0 0 18px 0;




}









.vfm-category-featured-meta {




    display: flex;




    align-items: center;




    gap: 14px;




    margin: 0;




    font-size: 0.82rem;




    font-weight: 700;




}









.vfm-category-featured-author {




    color: #999999;




    text-transform: uppercase;




    letter-spacing: 0.4px;




}









.vfm-category-featured-date {




    color: #999999;




}









.vfm-category-featured-image-wrapper {




    flex: 0 0 46%;




    max-width: 46%;




    aspect-ratio: 16 / 9;




    border-radius: 12px;




    overflow: hidden;




    background-color: #000;




}









.vfm-category-featured-image {




    width: 100%;




    height: 100%;




    object-fit: cover;




    display: block;




    transition: transform 0.3s ease;




}









.vfm-category-featured:hover .vfm-category-featured-image {




    transform: scale(1.03);




}









@media (max-width: 800px) {




    .vfm-category-featured {




        flex-direction: column;




        align-items: stretch;




        gap: 20px;




        padding: 20px;




    }




    .vfm-category-featured-image-wrapper {




        flex: none;




        max-width: 100%;




        order: -1;




    }




    .vfm-category-featured-title {




        font-size: 1.5rem;




    }




}









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




   6) Paginación de categoría (dentro de [vfm_category_auto])




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









.vfm-category-pagination {




    display: flex;




    flex-wrap: wrap;




    align-items: center;




    justify-content: center;




    gap: 8px;




    margin: 40px 0 10px 0;




    font-family: 'Montserrat', sans-serif;




}









.vfm-category-pagination .page-numbers {




    display: inline-flex;




    align-items: center;




    justify-content: center;




    min-width: 38px;




    height: 38px;




    padding: 0 12px;




    border-radius: 8px;




    background-color: #141414;




    color: #cccccc;




    font-size: 0.85rem;




    font-weight: 700;




    text-decoration: none;




    transition: background-color 0.2s ease, color 0.2s ease;




}









.vfm-category-pagination a.page-numbers:hover {




    background-color: #00bcd4;




    color: #000000;




}









.vfm-category-pagination .page-numbers.current {




    background-color: #00bcd4;




    color: #000000;




}









.vfm-category-pagination .page-numbers.dots {




    background: none;




    color: #666666;




}









@media (max-width: 500px) {




    .vfm-category-pagination .page-numbers {




        min-width: 32px;




        height: 32px;




        padding: 0 8px;




        font-size: 0.78rem;




    }




}









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




   7) Destacado de últimas noticias [vfm_latest_featured]




   (imagen grande a la izquierda, título+bajada a la derecha — estilo




   Los40. Una sola tarjeta unificada, igual que .vfm-sc-card: overflow




   hidden en el contenedor padre para que imagen y texto queden pegados




   sin espacio entre ellos, en vez de dos bloques separados. Reemplazo




   estático de [vfm_latest_posts]: sin JS, sin carrusel. El resto de las




   noticias usa la grilla compartida .vfm-shortcode-grid / .vfm-sc-* de




   la sección 2.)




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









.vfm-latest-featured {




    position: relative;




    display: flex;




    align-items: stretch;




    margin-bottom: 40px;




    border-radius: 16px;




    overflow: hidden;




    background-color: #141414;




    box-shadow: 0 4px 15px rgba(0,0,0,0.4);




    font-family: 'Montserrat', sans-serif;




    text-decoration: none;




    transition: box-shadow 0.3s ease;




}









.vfm-latest-featured:hover {




    box-shadow: 0 8px 25px rgba(0,0,0,0.6);




}









.vfm-latest-featured-image-wrapper {




    flex: 0 0 58%;




    max-width: 58%;




    aspect-ratio: 16 / 9;




    overflow: hidden;




    background-color: #000;




}









.vfm-latest-featured-image {




    width: 100%;




    height: 100%;




    object-fit: cover;




    display: block;




    transition: transform 0.4s ease;




}









.vfm-latest-featured:hover .vfm-latest-featured-image {




    transform: scale(1.05);




}









.vfm-latest-featured-content {




    flex: 1;




    min-width: 0;




    display: flex;




    flex-direction: column;




    justify-content: center;




    padding: 28px 30px;




}









.vfm-latest-featured-title {




    color: #ffffff;




    font-size: 1.7rem;




    font-weight: 900;




    line-height: 1.2;




    margin: 0 0 14px 0;




}









.vfm-latest-featured-excerpt {




    color: #cccccc;




    font-size: 0.95rem;




    font-weight: 400;




    line-height: 1.6;




    margin: 0 0 18px 0;




}









.vfm-latest-featured-meta {




    display: flex;




    align-items: center;




    gap: 10px;




    margin: 0;




    font-size: 0.75rem;




    font-weight: 700;




    border-top: 1px solid rgba(255,255,255,0.1);




    padding-top: 12px;




}









.vfm-latest-featured-author {




    color: #999999;




    text-transform: uppercase;




    letter-spacing: 0.4px;




}









.vfm-latest-featured-date {




    color: #888888;




}









/* Tablet: la columna de texto se achica, bajamos un poco el título */




@media (max-width: 900px) {




    .vfm-latest-featured-title {




        font-size: 1.4rem;




    }




    .vfm-latest-featured-content {




        padding: 20px 22px;




    }




}









/* Mobile: se apila igual que .vfm-sc-card, imagen arriba (4:3, más




   cuadrada para no alargar demasiado la tarjeta) y texto abajo, pegados




   dentro del mismo contenedor con overflow hidden. */




@media (max-width: 600px) {




    .vfm-latest-featured {




        flex-direction: column;




    }




    .vfm-latest-featured-image-wrapper {




        flex: none;




        max-width: 100%;




        aspect-ratio: 4 / 3;




    }




    .vfm-latest-featured-content {




        padding: 18px 20px;




    }




    .vfm-latest-featured-title {




        font-size: 1.2rem;




        margin: 0 0 10px 0;




    }




    .vfm-latest-featured-excerpt {




        font-size: 0.88rem;




        margin: 0 0 14px 0;




    }




}