/* ==========================================================================
   FLUX PROJECTS – Übersicht
   ========================================================================== */


/* ==========================================================================
   Grid
   ========================================================================== */

.projects-overview__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1.5rem 2rem;
}

/* ==========================================================================
   Basis
   ========================================================================== */

.projects-overview {
    width: min(100% - 10vw, 1290px);

    margin: 0 auto;

    padding: 6rem 0 8rem;

    position: relative;
}


/* ==========================================================================
   Hintergrund
   ========================================================================== */

.projects-overview::before {
    content: "";

    position: absolute;

    top: -18rem;
    left: 50%;

    transform: translateX(-50%);

    width: 100vw;
    height: 130vh;

    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at -10% -10%,
            rgba(45,167,255,.70) 0%,
            rgba(193,212,250,.55) 30%,
            transparent 65%
        ),

        radial-gradient(
            circle at 110% -10%,
            rgba(246,18,182,.55) 0%,
            rgba(255,229,246,.55) 30%,
            transparent 65%
        ),

        linear-gradient(
            180deg,
            #eef6ff 0%,
            #fdf7fb 35%,
            #ffffff 100%
        );
}

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

.projects-overview .person-project {
    display: grid;

    grid-template-columns: 38% 62%;

    align-items: stretch;

    min-height: 190px;

    overflow: hidden;

    border: none;

    border-radius: 14px;

    color: #000;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.projects-overview .person-project:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);
}


/* ==========================================================================
   FLUX FARBVERLÄUFE
   ========================================================================== */

.projects-overview .person-project:nth-child(6n + 1) {
    background:
        linear-gradient(
            110deg,
            #f3b5df 0%,
            #ead0ef 48%,
            #c9d9ff 100%
        );
}

.projects-overview .person-project:nth-child(6n + 2) {
    background:
        linear-gradient(
            110deg,
            #f3b5df 0%,
            #f9e5f4 28%,
            #ffffff 50%,
            #e9efff 72%,
            #c9d9ff 100%
        );
}

.projects-overview .person-project:nth-child(6n + 3) {
    background:
        linear-gradient(
            110deg,
            #c5d7ff 0%,
            #ddd4f4 45%,
            #f3b7df 100%
        );
}

.projects-overview .person-project:nth-child(6n + 4) {
    background:
        linear-gradient(
            100deg,
            #ee8fce 0%,
            #f6c5e6 20%,
            #ffffff 52%,
            #e1e9ff 78%,
            #b9ccff 100%
        );
}

.projects-overview .person-project:nth-child(6n + 5) {
    background:
        linear-gradient(
            115deg,
            #bfd2ff 0%,
            #dce5ff 24%,
            #ffffff 50%,
            #f8d8ee 76%,
            #eea9d6 100%
        );
}

.projects-overview .person-project:nth-child(6n + 6) {
    background:
        linear-gradient(
            125deg,
            #e99bd0 0%,
            #ead2ef 48%,
            #c5d8ff 100%
        );
}


/* ==========================================================================
   Projektbild
   ========================================================================== */

.projects-overview .person-project__image {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.projects-overview .person-project__badge {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    display: block;
    width: max-content;
    max-width: calc(100% - 2rem);
    box-sizing: border-box;

    padding: .55rem 1.1rem;

    background: #f2fa5d;
    color: #000;

    border-radius: 999px;

    font-size: .8rem;
    font-weight: 700;
    line-height: 1.1;

    text-align: center;
    white-space: normal;

    box-shadow: 0 5px 14px rgba(0, 0, 0, .15);
}

.projects-overview .person-project__image img {
    width: 100%;
    height: 100%;

    min-height: 190px;

    object-fit: cover;

    transition: transform .35s ease;
}

.projects-overview .person-project:hover .person-project__image img {
    transform: scale(1.04);
}


/* ==========================================================================
   Projekt Inhalt
   ========================================================================== */

.projects-overview .person-project__content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 1.6rem 1.75rem;
}

.projects-overview .person-project__title {
    margin: 0;
    line-height: 1.05;
    font-size: 1.5rem;
}

.projects-overview .person-project__subtitle {
    margin: .65rem 0 0;
    line-height: 1.2;
    font-size: 1.15rem;
    font-weight: 700;
}


/* ==========================================================================
   Zwischenbreite
   ========================================================================== */

@media (max-width: 1200px) {

    .projects-overview .person-project {
        grid-template-columns: 42% 58%;
    }

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {

    .projects-overview__grid {
        grid-template-columns: 1fr;

        gap: 1rem;
    }

    .projects-overview .person-project {
        grid-template-columns: 38% 62%;

        min-height: 140px;

        border-radius: 12px;
    }

    .projects-overview .person-project__image img {
        min-height: 140px;
    }

    .projects-overview .person-project__content {
        padding: 1.1rem;
    }

    .projects-overview .person-project__title {
        font-size: 1.15rem;
    }

}

.projects-overview .person-project:hover .person-project__title,
.projects-overview .person-project:hover .person-project__subtitle {
    color: #f612b6;
}

@media (max-width: 768px) {

    .projects-overview .person-project__badge {
        font-size: .7rem;
        padding: .45rem .8rem;
    }

}