/**
 * Bloque: CTC - Novedades
 *
 * Listado de novedades del micrositio CTC. Depende de los tokens y
 * componentes de css/ctc-css-base/ctc-css-base.css (todo cuelga de `.ctc`).
 * Metodología: Desktop First.
 */

.ctc-novedades {
    --ctc-novedades-lateral: clamp(24px, 8.33vw, 120px);

    margin-top: 0 !important;
}

/* Contenedor de este bloque a 1280px (hero y listado), sin tocar el token global */
.ctc-novedades .ctc-contenedor {
    max-width: 1280px;
}

/* ===================== HERO ===================== */
.ctc-novedades__hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--ctc-color-fondo);
}

.ctc-novedades__hero-imagen {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 0;
    width: auto;
    height: 110%;
    max-width: none;
    transform: translateY(-50%);
    pointer-events: none;
}

.ctc-novedades__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.82) 52%, rgba(0, 0, 0, 0.18) 100%);
}

.ctc-novedades__hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 60px;
}

/* Misma línea de inicio que el contenido del hero de Home. */
.ctc-novedades .ctc-novedades__hero-inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--ctc-novedades-lateral);
}

/* Eyebrow rojo con línea, igual que en el resto del micrositio. */
.ctc-novedades__hero .ctc-eyebrow {
    color: var(--ctc-color-acento);
}

.ctc-novedades__hero-titulo {
    margin-top: 14px;
    color: var(--ctc-color-claro);
}

.ctc-novedades__hero-texto {
    max-width: 560px;
    margin-top: 18px;
    font-size: 18.5px;
    color: var(--ctc-color-claro-sec);
}

/* Por encima del overlay oscuro, para que el degradé se vea limpio
   igual que el filete del hero de Formación. */
.ctc-novedades__hero-filete {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

/* Buscador */
.ctc-novedades__buscador {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin-top: 34px;
    background: var(--ctc-color-claro);
    border-radius: var(--ctc-radius-md);
    padding: 8px 18px;
}

.ctc-novedades__buscador-icono {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.ctc-novedades__buscador-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--ctc-font-base);
    font-size: 15px;
    color: var(--ctc-color-oscuro);
    padding: 8px 0;
}

.ctc-novedades__buscador-input::placeholder {
    color: var(--ctc-color-texto-mute);
}

/* ===================== LISTADO ===================== */
.ctc-novedades__listado {
    border-bottom: none;
}

.ctc-novedades__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

/* ===================== TARJETA ===================== */
.ctc-novedades__card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border-radius: var(--ctc-radius-lg);
    transition: border-color var(--ctc-transition);
}

/* Hover estable: borde de acento, sin sombra ni desplazamiento. */
.ctc-novedades__card:hover {
    border-color: var(--ctc-color-acento);
}

/* Tarjeta oculta por búsqueda o fuera de la página actual */
.ctc-novedades__card[hidden] {
    display: none;
}

.ctc-novedades__card-media {
    position: relative;
    display: block;
    height: 210px;
    background: var(--ctc-color-fondo-suave);
    overflow: hidden;
}

.ctc-novedades__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ctc-novedades__card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ctc-color-texto-mute);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ctc-novedades__card-categoria {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    pointer-events: none;
}

.ctc-novedades__card-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}

.ctc-novedades__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ctc-novedades__card-titulo {
    display: block;
    font-weight: var(--ctc-font-weight-bold);
    font-size: var(--ctc-font-size-h3);
    line-height: 1.25;
    color: var(--ctc-color-oscuro);
    margin-bottom: 10px;
}

.ctc-novedades__card-extracto {
    display: block;
    font-size: var(--ctc-font-size-cuerpo-sm);
    line-height: 1.6;
    color: var(--ctc-color-texto-suave);
    margin-bottom: 20px;
}

/* "Leer más" en negro, la flecha en acento (reusa .ctc-link-accion) */
.ctc-novedades__card-cta {
    margin-top: auto;
    color: var(--ctc-color-oscuro);
}

.ctc-novedades__card-cta span {
    display: inline-block;
    color: var(--ctc-color-acento);
    transition: transform var(--ctc-transition);
}

.ctc-novedades__card:hover .ctc-novedades__card-cta {
    filter: none;
}

.ctc-novedades__card:hover .ctc-novedades__card-cta span {
    transform: translateX(4px);
}

/* ===================== ESTADO VACÍO ===================== */
.ctc-novedades__vacio {
    border: 1px dashed var(--ctc-color-borde);
    border-radius: var(--ctc-radius-lg);
    padding: 60px 40px;
    text-align: center;
}

.ctc-novedades__vacio-titulo {
    margin: 0 0 6px;
    font-family: var(--ctc-font-base);
    font-size: 18px;
    font-weight: var(--ctc-font-weight-semibold);
    color: var(--ctc-color-texto-sec);
}

.ctc-novedades__vacio-texto {
    margin: 0;
    font-family: var(--ctc-font-base);
    font-size: 14px;
    color: var(--ctc-color-texto-mute);
}

/* ===================== PAGINADO ===================== */
.ctc-novedades__paginado {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 58px;
}

.ctc-novedades__paginado:empty {
    display: none;
}

.ctc-novedades__pagina {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ctc-color-fondo);
    border: 1px solid var(--ctc-color-borde);
    border-radius: var(--ctc-radius-sm);
    font-family: var(--ctc-font-base);
    font-size: 14px;
    font-weight: var(--ctc-font-weight-semibold);
    color: var(--ctc-color-texto);
    cursor: pointer;
    transition: color var(--ctc-transition), border-color var(--ctc-transition), background-color var(--ctc-transition);
}

.ctc-novedades__pagina:hover:not(:disabled):not(.ctc-novedades__pagina--activa) {
    border-color: var(--ctc-color-acento);
    color: var(--ctc-color-acento);
}

.ctc-novedades__pagina--activa {
    background: var(--ctc-color-acento);
    border-color: var(--ctc-color-acento);
    color: var(--ctc-color-claro);
    cursor: default;
}

.ctc-novedades__pagina:disabled {
    color: #cccccc;
    cursor: not-allowed;
}

/* ===================== RESPONSIVE ===================== */
/* Tablet: 2 columnas */
@media (max-width: 63.9375rem) {
    .ctc-novedades__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .ctc-novedades__hero {
        min-height: 480px;
    }
}

@media (max-width: 37.4375rem) {
    .ctc-novedades__hero {
        min-height: 620px;
    }

    .ctc-novedades__hero-imagen {
        right: 50%;
        height: 100%;
        transform: translate(50%, -50%);
    }

    .ctc-novedades__hero-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.78) 52%, rgba(0, 0, 0, 0.12) 100%);
    }

    .ctc-novedades__hero-inner {
        justify-content: flex-end;
        padding-top: 48px;
        padding-bottom: 40px;
    }
}

.editor-styles-wrapper .ctc-novedades__hero-imagen {
    width: 100%;
    height: 100%;
    inset: 0;
    transform: none;
    background-image: url('../ctc-home/ctc-home-images/ctc-home-hero.jpg');
    background-position: right center;
    background-size: cover;
}

/* Móvil: 1 columna */
@media (max-width: 47.9375rem) {
    .ctc-novedades__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ctc-novedades__buscador {
        max-width: none;
    }
}