/* =========================================================
   PROIECTE EUROPENE
   Page Class: proiecte-blog
   ========================================================= */


/* =========================================================
   GRID
   ========================================================= */

.proiecte-blog .blog-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   CARD
   ========================================================= */

.proiecte-blog .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    /*
     * Primul background = interiorul alb.
     * Al doilea background = borderul normal.
     */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(#e1e5e9, #e1e5e9) border-box;

    border: 1.5px solid transparent;
    border-radius: 14px;

    /* FARA UMBRA */
    box-shadow: none !important;

    transition:
        transform 0.22s ease,
        background 0.22s ease;
}


/* =========================================================
   HOVER CARD
   ========================================================= */

.proiecte-blog .blog-item:hover {

    /*
     * Stroke gradient din paleta LTEG:
     * mov + verde + galben
     */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(
            135deg,
            #7b1fff 0%,
            #20c997 40%,
            #ffd700 72%,
            #7b1fff 100%
        ) border-box;

    border: 1.5px solid transparent;

    /* Nicio umbra nici la hover */
    box-shadow: none !important;

    /* Mi?care foarte discreta */
    transform: translateY(-2px);
}


/* =========================================================
   IMAGINE
   ========================================================= */

.proiecte-blog .blog-item .item-image {
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    aspect-ratio: 16 / 9;
}


.proiecte-blog .blog-item .item-image a {
    display: block;

    width: 100%;
    height: 100%;
}


.proiecte-blog .blog-item .item-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    margin: 0;

    transition: transform 0.3s ease;
}


/* Zoom foarte fin */
.proiecte-blog .blog-item:hover .item-image img {
    transform: scale(1.025);
}


/* =========================================================
   CORP CARD
   ========================================================= */

.proiecte-blog .blog-item .article-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    padding: 20px 24px 22px;

    background: #ffffff;
}


/* =========================================================
   TITLU
   ========================================================= */

.proiecte-blog .blog-item .article-header,
.proiecte-blog .blog-item .page-header {
    margin: 0;
    padding: 0;

    border: 0;
}


.proiecte-blog .blog-item h2 {
    margin: 0;
    padding: 0;

    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
}


.proiecte-blog .blog-item h2 a {
    color: #11212d;

    text-decoration: none;

    transition: color 0.2s ease;
}


/* Titlu la hover */
.proiecte-blog .blog-item:hover h2 a {
    color: #7b1fff;
}


/* =========================================================
   ASCUNDEM ELEMENTELE PE CARE NU LE VREM
   ========================================================= */

.proiecte-blog .article-introtext,
.proiecte-blog .readmore,
.proiecte-blog .readmore-wrapper,
.proiecte-blog .article-info,
.proiecte-blog .article-info-wrap,
.proiecte-blog .article-info-term,
.proiecte-blog .tags,
.proiecte-blog .featured-article-badge {
    display: none !important;
}


/* =========================================================
   TABLETA
   ========================================================= */

@media (max-width: 991px) {

    .proiecte-blog .blog-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }


    .proiecte-blog .blog-item .article-body {
        padding: 18px 20px 20px;
    }


    .proiecte-blog .blog-item h2 {
        font-size: 20px;
    }
}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 600px) {

    .proiecte-blog .blog-items {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .proiecte-blog .blog-item {
        border-radius: 12px;
    }


    .proiecte-blog .blog-item .article-body {
        padding: 17px 18px 19px;
    }


    .proiecte-blog .blog-item h2 {
        font-size: 19px;
        line-height: 1.35;
    }
}

/* =========================================================
   FIX FINAL - CARD PROIECTE EUROPENE
   ========================================================= */


/* Distan?a mai mica īntre carduri */
.proiecte-blog .blog-items {
    gap: 14px !important;
    --bs-gutter-x: 14px !important;
    --bs-gutter-y: 14px !important;
}


/* CARDUL VIZIBIL REAL DIN HELIX */
.proiecte-blog .article-list .article,
.proiecte-blog .blog-item .article {

    /* pastram permanent 2px ca sa nu "sara" cardul la hover */
    border: 2px solid transparent !important;

    border-radius: 14px !important;
    overflow: hidden;

    /* border gri foarte discret īn stare normala */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(
            135deg,
            #e3e6ea,
            #e3e6ea
        ) border-box !important;

    /* FARA UMBRA */
    box-shadow: none !important;

    transition:
        background 0.25s ease,
        transform 0.25s ease !important;
}


/* HOVER - STROKE GRADIENT */
.proiecte-blog .article-list .article:hover,
.proiecte-blog .blog-item .article:hover {

    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(
            135deg,
            #7b1fff 0%,
            #20c997 38%,
            #ffd700 72%,
            #7b1fff 100%
        ) border-box !important;

    border: 2px solid transparent !important;

    box-shadow: none !important;

    transform: translateY(-2px);
}


/* ANULAM ORICE UMBRA HELIX */
.proiecte-blog .article-list .article:hover,
.proiecte-blog .article-list .article:focus,
.proiecte-blog .blog-item .article:hover,
.proiecte-blog .blog-item .article:focus {
    box-shadow: none !important;
}

/* =========================================================
   REGLAJ TITLURI CARDURI - PROIECTE EUROPENE
   ========================================================= */

/* Zona titlului are aceea?i īnal?ime pe toate cardurile */
.proiecte-blog .article-list .article .article-body,
.proiecte-blog .blog-item .article-body {
    padding: 18px 24px 20px !important;
}


/* TITLUL */
.proiecte-blog .article-list .article h2,
.proiecte-blog .blog-item h2 {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 21px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;

    /* spa?iu pentru 3 rānduri */
    min-height: 4.2em;

    /* anulam orice taiere impusa de Edulif / Helix */
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
    text-overflow: clip !important;

    display: block !important;

    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}


/* LINKUL TITLULUI */
.proiecte-blog .article-list .article h2 a,
.proiecte-blog .blog-item h2 a {
    display: block !important;

    color: #11212d !important;
    text-decoration: none !important;

    white-space: normal !important;

    overflow: visible !important;
    text-overflow: clip !important;

    -webkit-line-clamp: unset !important;

    transition: color 0.2s ease;
}


/* Hover titlu */
.proiecte-blog .article-list .article:hover h2 a,
.proiecte-blog .blog-item:hover h2 a {
    color: #7b1fff !important;
}


/* TABLETA */
@media (max-width: 991px) {

    .proiecte-blog .article-list .article h2,
    .proiecte-blog .blog-item h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        min-height: 4.2em;
    }

}


/* TELEFON */
@media (max-width: 600px) {

    .proiecte-blog .article-list .article h2,
    .proiecte-blog .blog-item h2 {
        font-size: 19px !important;
        line-height: 1.35 !important;

        /* Pe telefon nu for?am īnal?ime egala */
        min-height: 0;
    }

}