/* ==========================================================================
   Noticias — tarjetas de entradas
   Clase `tarjetas-blog` en el bloque Bucle de consulta.
   El fondo de cada tarjeta depende de la categoría de la entrada.
   ========================================================================== */

/* Rejilla ----------------------------------------------------------------- */

.tarjetas-blog .wp-block-post-template {
    gap: var(--wp--preset--spacing--40);
}

/* Todas las tarjetas de una fila con la misma altura */
.tarjetas-blog .wp-block-post {
    display: flex;
    margin: 0;
}

.tarjetas-blog .wp-block-post>.wp-block-group {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 160ms ease, transform 160ms ease,
        box-shadow 160ms ease;
}

.tarjetas-blog .wp-block-post>.wp-block-group:hover {
    border-color: var(--wp--preset--color--accent-1);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(23, 26, 46, 0.14);
}

/* Fondo según la categoría de la entrada -----------------------------------
   WordPress emite los colores de fondo como clases de preset con !important,
   por eso hace falta !important también aquí.
   Los tres tonos son claros: el texto conserva contraste AA en todos.        */

.tarjetas-blog .wp-block-post.category-institucional>.wp-block-group {
    background-color: var(--wp--preset--color--accent-4) !important;
}

.tarjetas-blog .wp-block-post.category-escuela>.wp-block-group {
    background-color: var(--wp--preset--color--accent-5) !important;
}

.tarjetas-blog .wp-block-post.category-actualidad>.wp-block-group {
    background-color: var(--wp--preset--color--base-2) !important;
}

/* Imagen destacada -------------------------------------------------------- */

.tarjetas-blog .wp-block-post-featured-image {
    margin: 0 0 var(--wp--preset--spacing--30);
    border-radius: 0.375rem;
    overflow: hidden;
}

.tarjetas-blog .wp-block-post-featured-image img {
    transition: transform 400ms ease;
}

.tarjetas-blog .wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Categoría como antetítulo ----------------------------------------------- */

.tarjetas-blog .wp-block-post-terms {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0 0 0.3rem;
}

.tarjetas-blog .wp-block-post-terms a {
    position: relative;
    z-index: 2;
    color: var(--wp--preset--color--accent-3);
    text-decoration: none;
}

.tarjetas-blog .wp-block-post-terms a:hover {
    text-decoration: underline;
}

/* Título ------------------------------------------------------------------ */

.tarjetas-blog .wp-block-post-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: left;
    text-wrap: balance;
    margin: 0 0 0.5rem;
}

.tarjetas-blog .wp-block-post-title a {
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
}

.tarjetas-blog .wp-block-post>.wp-block-group:hover .wp-block-post-title a {
    color: var(--wp--preset--color--accent-1);
}

/* Toda la tarjeta es pulsable */
.tarjetas-blog .wp-block-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Extracto ---------------------------------------------------------------- */

.tarjetas-blog .wp-block-post-excerpt {
    margin: 0;
}

.tarjetas-blog .wp-block-post-excerpt__excerpt {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.6;
    color: var(--wp--preset--color--contrast-2);
    margin: 0;
}

/* Fecha, anclada al pie de la tarjeta -------------------------------------
   En Tinta suave (6,7:1) y no en Gris azulado, que sobre estos fondos
   claros se queda en 3,4:1 y no alcanza el mínimo para texto pequeño.       */

.tarjetas-blog .wp-block-post-date {
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--wp--preset--color--contrast-2);
}

.tarjetas-blog .wp-block-post-date a {
    color: inherit;
    text-decoration: none;
}

/* Entrada fijada: borde Ámbar como distintivo ------------------------------ */

.tarjetas-blog .wp-block-post.sticky>.wp-block-group {
    border-color: var(--wp--preset--color--accent-2);
}

/* Paginación --------------------------------------------------------------- */

.tarjetas-blog .wp-block-query-pagination {
    margin-top: var(--wp--preset--spacing--60);
    padding-top: var(--wp--preset--spacing--40);
    border-top: 1px solid var(--wp--preset--color--accent-6);
    font-size: var(--wp--preset--font-size--small);
}

.tarjetas-blog .wp-block-query-pagination-numbers .page-numbers {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 0.25rem;
    color: var(--wp--preset--color--accent-1);
    text-decoration: none;
}

.tarjetas-blog .wp-block-query-pagination-numbers .page-numbers:hover {
    background: var(--wp--preset--color--base-2);
}

.tarjetas-blog .wp-block-query-pagination-numbers .page-numbers.current {
    background: var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--base);
}

/* Sin animación para quien la haya desactivado en su sistema --------------- */

@media (prefers-reduced-motion: reduce) {
    .tarjetas-blog .wp-block-post>.wp-block-group:hover {
        transform: none;
    }

    .tarjetas-blog .wp-block-post:hover .wp-block-post-featured-image img {
        transform: none;
    }
}