/* ===========================================================
   CSS ORIGINAL
   =========================================================== */

.post {
    position:relative;
    padding-bottom:100%;
    background-color:var(--color-7);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    border-radius:20px;
    transition:all ease 0.3s;
    overflow:hidden;
}
.post:hover {
    transition:all ease 0.3s;
}
.post .content {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    margin:10px;
    background:rgba(199, 199, 199, 0.226);
    backdrop-filter: blur(13px);
    padding:10px;
    border-radius:20px;
    text-align:center;
}
.post .content .title {
    font-weight:bold;
    max-height:100px;
    overflow:hidden;
    display: block;
    -webkit-line-clamp: 2;
    display: box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    color:var(--text-color-7);
    word-break: normal;
    font-size:var(--mini-title-text-size);
}
.post .content .description {
    color:var(--text-color-9);
    max-height:100px;
    overflow:hidden;
    display: block;
    -webkit-line-clamp: 2;
    display: box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: normal;
    font-size:var(--paragraphe-text-size);
}
.post .heartSVG {
    position:absolute;
    top:6px;
    right:6.5px;
    width:40px;
    height:40px;
}
.post .heartSVG:focus,.post .heartSVG:active {
    outline:0;
}
.post .heart {
    transform-origin: top;
    transform: rotateX(0deg)  translateY(0);
    position:absolute;
    color:var(--text-color-7);
    top:45px;
    right:7px;
    width:37px;
    text-align:center;
    font-weight:bold;
    text-shadow: 0px 0px 8px #000000;
    opacity:1;
    transition: all 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.post *::selection {
    background-color:transparent;
}
.post .heart.hidden1 {
    opacity:0;
    transform: rotateX(-90deg) translateY(25px);
    transition: all 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.post .heart.hidden2 {
    opacity:0;
    transform: rotateX(90deg) translateY(-25px);
    transition: all 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.post .action {
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:all ease 0.5s;
}
.post:hover .action {
    max-height:70px;
    opacity:1;
    transition:all ease 0.5s;
}
.date-wrapper {
    position:relative;
}
.date-wrapper .date {
    position:absolute;
    top: 100%;
    left:0;
    right:0;
    text-align: center;
}
.date-wrapper .date .value {
    display:inline-block;
    background:rgba(255, 255, 255, 0.089);
    padding:0 40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color:var(--text-color-1);
    transform: perspective(1200px) rotateX(90deg);
    transform-origin: top;
    background-size:100% 400%;
    opacity:0.6;
    font-size:var(--paragraphe-text-size);
    transition:all ease 0.5s;
}
.date-wrapper:hover .date .value {
    opacity:1;
    transform: perspective(1200px) rotateX(0);
    background-size:100% 100%;
    transition:all ease 0.5s;
}

/* ===========================================================
   BADGE HUD ESQUINA SUPERIOR IZQUIERDA — VERSION MEJORADA
   =========================================================== */

.post .news-badge {
    position:absolute;
    top:8px;
    left:8px;

    /* Centrado perfecto */
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:60px;   /* antes 80px */
    height:22px;      /* antes 28px */

    padding:0 8px;    /* antes 10px */
    border-radius:5px;

    font-weight:700;
    font-size:0.65rem;   /* antes 0.75rem */
    text-transform:uppercase;
    letter-spacing:0.04em;

    color:#ffffff;
    z-index:6;
}

/* ===========================================================
   COLORES PASTEL POR CATEGORÍA
   =========================================================== */

/* Noticias → Azul pastel oscuro */
.badge-noticia {
    background:#5aaee0;
}

/* Eventos → Verde pastel oscuro */
.badge-evento {
    background:#6fd86f;
}

/* Comunidad → Naranja pastel oscuro */
.badge-comunidad {
    background:#e6a86d;
}

/* Equipo → Morado pastel oscuro */
.badge-equipo {
    background:#b48ae6;
}

/* Wiki → Amarillo pastel oscuro */
.badge-wiki {
    background:#e6d46a;
}