/* =============================================================================
   TARJETA PRINCIPAL (componente includes/public/components/card-principal2.php)

   Una sola hoja para todas las tarjetas de este tipo (Convenios, Reconocimientos, etc.).
   Antes cada tarjeta imprimía su propio <style> con un nombre de clase aleatorio, de modo
   que un cambio no se reflejaba en las demás y el CSS no aparecía en ningún archivo.

   Los valores que varían de una tarjeta a otra (ancho, colores, alto de la imagen...) llegan
   como variables CSS en el atributo style de <article>; si no llegan, valen los de abajo.
   Para cambiar el aspecto de TODAS las tarjetas, se edita este archivo.
   ============================================================================= */

.cpl-card-principal2 {
    --cp-width: 300px;
    --cp-height: 420px;
    --cp-border-color: #858585;
    --cp-bg-color: #ffffff;
    --cp-gap: 0px;
    --cp-image-height: 300px;
    --cp-image-fit: cover;
    --cp-content-padding: 20px 14px 14px;
    --cp-content-gap: 10px;
    --cp-etiqueta-color: #D6001C;
    --cp-title-color: #242424;
    --cp-subtitle-color: #8E8E8E;

    width: var(--cp-width);
    height: var(--cp-height);
    border: 1.5px solid var(--cp-border-color);
    border-radius: 16px;
    overflow: hidden;
    background: var(--cp-bg-color);
    display: flex;
    flex-direction: column;
    gap: var(--cp-gap);
    padding: 0;
}

/* Imagen */
.cpl-card-principal2 .cpl-card-principal__image {
    width: 100%;
    height: 210px;
    flex: 0 0 var(--cp-image-height);
    object-fit: var(--cp-image-fit);
    display: block;
    background: #efefef;
}

/* Imagen con fondo difuminado de sí misma (opción $imageBlur): se ve completa y no deja franjas grises */
.cpl-card-principal2 .cpl-card-principal__media {
    position: relative;
    width: 100%;
    height: var(--cp-image-height);
    flex: 0 0 var(--cp-image-height);
    overflow: hidden;
    background: #efefef;
}

.cpl-card-principal2 .cpl-card-principal__media::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: var(--media-bg) center / cover no-repeat;
    filter: blur(20px) saturate(1.15);
    opacity: .85;
}

.cpl-card-principal2 .cpl-card-principal__media .cpl-card-principal__image {
    position: relative;
    height: 100% !important;
    flex: none !important;
    background: transparent;
}

/* Si los bordes de la imagen son lisos (logo de fondo blanco o de un color), el fondo se rellena liso
   con ese color en vez de difuminarse; lo decide assets/js/card-principal.js */
.cpl-card-principal2 .cpl-card-principal__media[data-fondo="solido"] {
    background: var(--media-solid, #ffffff);
}

.cpl-card-principal2 .cpl-card-principal__media[data-fondo="solido"]::before {
    display: none;
}

/* Contenido */
.cpl-card-principal2 .cpl-card-principal__content {
    width: 100%;
    padding: var(--cp-content-padding);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--cp-content-gap);
    flex: 1 1 auto;
}

.cpl-card-principal2 .cpl-card-principal__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-etiqueta-color);
    margin-bottom: 0;
}

.cpl-card-principal2 .cpl-card-principal__etiqueta-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    display: inline-block;
}

.cpl-card-principal2 .cpl-card-principal__etiqueta svg {
    color: currentColor;
    flex-shrink: 0;
}

.cpl-card-principal2 .cpl-card-principal__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    width: 100%;
    height: 2.7em;
    min-height: 2.7em;
    max-height: 2.7em;
    color: var(--cp-title-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.cpl-card-principal2 .cpl-card-principal__subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cp-subtitle-color);
    height: 2.9em;
    min-height: 2.9em;
    max-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Botones */
.cpl-card-principal2 .cpl-card-principal__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.cpl-card-principal2 .cpl-card-principal__actions > a,
.cpl-card-principal2 .cpl-card-principal__actions > button,
.cpl-card-principal2 .cpl-card-principal__actions > form > button {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
}

.cpl-card-principal2 .cpl-card-principal__actions > form {
    margin: 0;
    display: flex;
    width: 100%;
}

.cpl-card-principal2 .cpl-card-principal__actions .btn-terciario__icon {
    width: 24px;
    height: 22px;
    flex: 0 0 24px;
    mask-size: 78% 78% !important;
    -webkit-mask-size: 78% 78% !important;
}