@charset "utf-8";

/* ==========================================================================
   TECHND WIDGET CALENDAR — ESTILOS DEL COMPONENTE
   --------------------------------------------------------------------------
   PROPÓSITO:
   Define la presentación visual del widget reutilizable de próximas sesiones
   de TechND. El componente conserva la estructura visual desarrollada para
   Training y muestra tarjetas con imagen, fecha, modalidad, horario y acciones.

   ALCANCE:
   - Todos los estilos quedan encapsulados bajo .widget-calendar-cards.
   - Las tarjetas utilizan clases propias .calendar-card* dentro del widget.
   - Se reutilizan variables y clases globales de la plantilla cuando corresponde.
   - Este archivo controla únicamente la presentación visual; la consulta,
     generación del HTML y datos de cada sesión permanecen en functions.php.

   INTEGRACIÓN:
   El archivo se carga desde /assets/plugins/widget-calendar/calendar.css y el
   HTML del componente se genera mediante widget_calendar().

   NOTA DE MANTENIMIENTO:
   Los comentarios de este archivo documentan la intención de cada bloque.
   No deben interpretarse como reglas adicionales ni modificar el comportamiento
   funcional del componente.
   ========================================================================== */

/* ===================== CONTENEDOR GENERAL Y ESPACIADO =====================
   Define el fondo y la separación principal del widget. El wrapper mantiene
   overflow visible porque algunos elementos decorativos de las tarjetas salen
   ligeramente de su caja visual. El ajuste de .row compensa el padding lateral
   aplicado a cada tarjeta para conservar la alineación con la retícula.
   ========================================================================== */

.widget-calendar-cards{position:relative;background:#f7f9fc;overflow:visible}
.widget-calendar-cards .sec-title{margin-bottom:34px}
.widget-calendar-cards .sec-title .sub-title{
    color:#094987;
}
.widget-calendar-cards .row{margin-left:-14px;margin-right:-14px;row-gap:12px}

/* ===================== TARJETA — ESTRUCTURA BASE =====================
   Configura cada resultado como una tarjeta flexible y define las variables
   visuales locales utilizadas por fecha, botones, enlaces y estados interactivos.
   .inner-box forma la caja blanca principal y su pseudo-elemento dibuja el borde
   exterior azul sin alterar las dimensiones internas del contenido.
   ========================================================================== */

.widget-calendar-cards .calendar-card{
    position:relative;
    display:flex;
    overflow:visible;
    padding-left:14px!important;
    padding-right:14px!important;
    margin-bottom:18px;
    --technd-training-blue:#83a5c6;
    --technd-training-deep:#094987;
}

.widget-calendar-cards .calendar-card .inner-box{
    position:relative;
    z-index:1;
    width:100%;
    min-height:100%;
    margin:6px 5px;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #e3e8ef!important;
    border-radius:0 0 12px 12px!important;
    overflow:visible!important;
    box-shadow:none!important;
}

.widget-calendar-cards .calendar-card .inner-box::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-6px;
    right:-5px;
    bottom:-6px;
    left:-5px;
    border:1px solid var(--technd-training-blue);
    border-radius:6px 6px 12px 12px;
    pointer-events:none;
}

/* ===================== TARJETA — IMAGEN Y ÁREA CLICABLE =====================
   Controla la zona visual superior de la tarjeta. La imagen mantiene relación
   16:9, usa object-fit:cover y recibe un degradado para conservar legibilidad
   sobre fotografía. Los enlaces superpuestos permiten que toda la zona visual
   conduzca al detalle de la sesión sin depender de pseudo-elementos de Oitech.
   ========================================================================== */

.widget-calendar-cards .calendar-card .image-box{
    position:relative;
    overflow:hidden;
    border-radius:0!important;
}

.widget-calendar-cards .calendar-card .image-box::before,
.widget-calendar-cards .calendar-card .image-box::after{display:none!important}

.widget-calendar-cards .calendar-card .image-box .image{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    margin-bottom:0;
    background:#0d223d;
    border-radius:0!important;
}

.widget-calendar-cards .calendar-card .image-box .image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(5,13,24,.46) 0%,rgba(5,13,24,.13) 45%,rgba(5,13,24,.38) 100%);
    pointer-events:none;
}

.widget-calendar-cards .calendar-card .image-box .image a::after{display:none!important}

.widget-calendar-cards .calendar-card .image-box .image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:0!important;
}

.widget-calendar-cards .calendar-card__full-image-link{
    position:absolute;
    z-index:9;
    inset:0;
    display:block;
    background:transparent;
    text-decoration:none;
    cursor:pointer;
}

.widget-calendar-cards .calendar-card__media-link{display:block;width:100%;height:100%}

/* ===================== TARJETA — IDENTIDAD, TÍTULO, TIPO Y FECHA =====================
   Coloca sobre la imagen la identidad TechND, el título visual, la etiqueta del
   tipo de contenido y el bloque de día/mes. Los z-index mantienen estos elementos
   por encima del degradado y del enlace completo de imagen. En hover la etiqueta
   de tipo se desplaza para dejar libre la esquina destinada al indicador visual.
   ========================================================================== */

.widget-calendar-cards .calendar-card__brand{
    position:absolute;
    z-index:3;
    left:22px;
    top:18px;
    color:#fff;
    font-family:var(--text-font);
    font-size:13px;
    line-height:1;
    font-weight:700;
    letter-spacing:.035em;
    text-shadow:0 1px 4px rgba(0,0,0,.45);
}

.widget-calendar-cards .calendar-card__image-title{
    position:absolute;
    z-index:3;
    left:22px;
    right:92px;
    top:47px;
    max-width:82%;
    color:#fff;
    font-family:var(--title-font);
    font-size:20px;
    line-height:1.18;
    font-weight:700;
    text-shadow:0 2px 6px rgba(0,0,0,.55);
}

.widget-calendar-cards .calendar-card__type{
    position:absolute;
    z-index:10;
    right:15px;
    top:15px;
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 9px;
    border-radius:999px;
    /*background:var(--technd-training-blue);*/
    color:#fff;
    background:var(--technd-training-deep);
    /*color:var(--technd-training-deep);*/
    font-size:10px;
    line-height:1;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:0 0 9px rgba(255,255,255,.38);
    transition:right .22s ease,transform .22s ease;
}

.widget-calendar-cards .calendar-card:hover .calendar-card__type{right:68px}

.widget-calendar-cards .calendar-card .image-box .date{
    left:16px;
    right:auto;
    top:auto;
    bottom:15px;
    width:68px;
    height:auto;
    min-height:0;
    padding:0;
    display:block;
    overflow:hidden;
    background:var(--technd-training-deep);
    /*background:var(--technd-training-blue);*/
    /*color:var(--technd-training-blue);*/
    color:var(--technd-training-deep);
    border-radius:7px;
    text-align:center;
    box-shadow:0 7px 20px rgba(0,0,0,.22);
    z-index:11;
}

.widget-calendar-cards .calendar-card .image-box .date > a{
    display:block;
    color:inherit;
    text-decoration:none;
}

.widget-calendar-cards .calendar-card .image-box .date::before{display:none}

.widget-calendar-cards .calendar-card .image-box .date b{
    display:block;
    padding:8px 5px 5px;
    background:#fff;
    color:var(--technd-training-deep);
    font-size:25px;
    line-height:27px;
    font-weight:700;
}

.widget-calendar-cards .calendar-card .image-box .date span{
    display:block;
    padding:6px 5px;
    /*background:var(--technd-training-blue);
    color:#fff;*/
    background:var(--technd-training-deep);
    color:#fff;
    font-size:11px;
    line-height:14px;
    font-weight:700;
    letter-spacing:.08em;
}

/* ===================== TARJETA — INFORMACIÓN DE LA SESIÓN =====================
   Reúne los datos que aparecen debajo de la imagen: modalidad, horario y título.
   El punto de modalidad reutiliza el color temático de la plantilla y el horario
   usa el azul profundo local del componente. La altura mínima del título mantiene
   una lectura uniforme entre tarjetas en escritorio.
   ========================================================================== */

.widget-calendar-cards .calendar-card .content-box{
    flex:1 1 auto;
    padding:22px 24px 24px;
    border:0!important;
}

.widget-calendar-cards .calendar-card .content-box .post-info{margin-bottom:8px}
.widget-calendar-cards .calendar-card .content-box .post-info li{color:#5e6873;font-weight:600}

.widget-calendar-cards .calendar-card .content-box .post-info li::before{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:7px;
    border-radius:50%;
    background:var(--theme-color2);
    vertical-align:1px;
}

.widget-calendar-cards .calendar-card__time{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:8px;
    color:#5e6873;
    font-size:13px;
    line-height:1.4;
    font-weight:600;
}

.widget-calendar-cards .calendar-card__time-icon{color:var(--technd-training-deep);font-size:15px;line-height:1}

.widget-calendar-cards .calendar-card .content-box .title{
    min-height:58px;
    margin:0;
    color:#0d223d;
    font-size:20px;
    line-height:1.28;
}

.widget-calendar-cards .calendar-card .content-box .title a{color:inherit;text-decoration:none}
.widget-calendar-cards .calendar-card .content-box .title a:hover{color:var(--technd-training-deep)}

/* ===================== TARJETA — ACCIONES =====================
   Define la franja inferior de la tarjeta y las dos acciones principales.
   El botón de registro conserva btn-style-one como base visual de TechND, mientras
   el enlace secundario ocupa el espacio disponible y mantiene el texto centrado.
   Esta zona permanece separada del contenido mediante fondo y borde superior.
   ========================================================================== */

.widget-calendar-cards .calendar-card .bottom-box{
    min-height:64px;
    padding:10px 18px;
    gap:12px;
    background:#f4f5f8;
    border-top:1px solid #edf1f5;
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:0 0 12px 12px;
}

.widget-calendar-cards .calendar-card__register.btn-style-one{
    flex:0 0 auto;
    padding:9px 13px;
    background:var(--technd-training-deep);
    color:#fff;
    font-size:10px;
    line-height:18px;
    letter-spacing:.04em;
    border-radius:3px;
}

.widget-calendar-cards .calendar-card__register.btn-style-one::before{background:#13344e}
.widget-calendar-cards .calendar-card__register.btn-style-one:hover{color:#fff}

.widget-calendar-cards .calendar-card .bottom-box .read-more{
    margin-left:auto;
    flex:1 1 135px;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--technd-training-deep);
    font-family:var(--title-font);
    font-size:14px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
    white-space:normal;
    overflow-wrap:break-word;
    text-align:center;
}

.widget-calendar-cards .calendar-card .bottom-box .read-more:hover{color:#13344e}

/* ===================== TARJETA — INDICADOR VISUAL DE ENLACE =====================
   Crea la pestaña que aparece en la esquina superior derecha durante hover/focus.
   El área queda recortada por un contenedor propio y se anima mediante transform,
   sin capturar eventos de puntero. El icono se dibuja con SVG embebido para que
   el indicador no dependa de una imagen externa ni de la fuente Font Awesome.
   ========================================================================== */

/* Pestaña del link: CSS puro, alineada al borde exterior real de la card. */
.widget-calendar-cards .calendar-card__outer-link-clip{
    position:absolute;
    z-index:20;
    top:0;
    right:14px;
    width:58px;
    height:54px;
    display:block;
    overflow:hidden;
    pointer-events:none;
    border-radius:0 6px 0 18px;
    background:transparent;
}

.widget-calendar-cards .calendar-card__outer-link-area{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0 6px 0 18px;
    background-color:#83a5c6;
    background-image:none;
    color:#fff;
    box-shadow:none;
    filter:none;
    opacity:1;
    transform:translate(100%,-100%);
    transition:transform .22s ease;
    will-change:transform;
    pointer-events:none;
}

/* No depender de la fuente Font Awesome: el icono se pinta desde este mismo style. */
.widget-calendar-cards .calendar-card__outer-link-area .fa{display:none!important}
.widget-calendar-cards .calendar-card__outer-link-area::before{
    content:"";
    display:block;
    width:22px;
    height:22px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:22px 22px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07.07l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07-.07l-2 2A5 5 0 0 0 12 20l1.15-1.15'/%3E%3C/svg%3E");
}

.widget-calendar-cards .calendar-card:hover .calendar-card__outer-link-area,
.widget-calendar-cards .calendar-card:focus-within .calendar-card__outer-link-area{transform:translate(-1px,1px)}

/* ===================== PIE DEL COMPONENTE =====================
   Reserva el bloque inferior para el enlace general hacia el calendario o listado
   completo de sesiones. La visibilidad del footer puede controlarse desde el HTML
   mediante utilidades globales sin cambiar las reglas internas del widget.
   ========================================================================== */

.widget-calendar-cards .calendar-cards__footer{margin-top:4px;padding-top:8px}
.widget-calendar-cards .calendar-cards__view-all{
    display:inline-block;
    color:var(--technd-training-deep);
    font-family:var(--title-font);
    font-size:15px;
    line-height:1.4;
    font-weight:700;
    text-decoration:none;
}
.widget-calendar-cards .calendar-cards__view-all:hover{color:#13344e;text-decoration:underline}

/* ===================== RESPONSIVE — TABLET Y ANCHOS INTERMEDIOS =====================
   Reduce el tamaño del título superpuesto y elimina la altura mínima fija del
   título de contenido cuando disminuye el ancho disponible. Estos ajustes evitan
   compresión de texto sin cambiar la estructura base de la tarjeta.
   ========================================================================== */

@media(max-width:1199.98px){
    .widget-calendar-cards .calendar-card__image-title{font-size:18px}
}

@media(max-width:991.98px){
    .widget-calendar-cards .calendar-card .content-box .title{min-height:0}
}

/* ===================== RESPONSIVE — MÓVIL =====================
   En móvil se reducen los espacios verticales, se ajusta la posición de textos
   sobre la imagen y la franja de acciones pasa a disposición vertical. El botón
   de registro ocupa todo el ancho y el enlace secundario se alinea a la izquierda
   para conservar legibilidad y una zona táctil clara.
   ========================================================================== */

@media(max-width:575.98px){
    .widget-calendar-cards{padding-top:38px!important;padding-bottom:20px!important}
    .widget-calendar-cards .calendar-card__brand{left:18px}
    .widget-calendar-cards .calendar-card__image-title{left:18px;right:85px;top:45px;max-width:78%;font-size:18px}
    .widget-calendar-cards .calendar-card .content-box{padding:20px}
    .widget-calendar-cards .calendar-card .bottom-box{align-items:flex-start;flex-direction:column;padding:14px 18px}
    .widget-calendar-cards .calendar-card__register.btn-style-one{width:100%}
    .widget-calendar-cards .calendar-card .bottom-box .read-more{margin-left:0;width:100%;flex-basis:auto;justify-content:flex-start;text-align:left}
}