/**
 * Jung Leben
 * Erfahrungen
 *
 * Klare, redaktionelle Erfahrungsübersicht.
 */


/* =========================================================
   BASIS
   ========================================================= */

.experience-archive {
    color: #173c32;
    background: #ffffff;
}


.experience-archive__container {
    width:
        min(
            1320px,
            calc(100% - 56px)
        );

    margin: 0 auto;
}


/* =========================================================
   KOMPAKTER SEITENKOPF
   ========================================================= */

.experience-archive__intro {
    padding:
        clamp(34px, 4vw, 48px)
        0
        clamp(29px, 3.5vw, 40px);

    background:
        linear-gradient(
            135deg,
            #fafbf8 0%,
            #f3f7ef 100%
        );

    border-bottom:
        1px solid
        rgba(
            23,
            60,
            50,
            0.06
        );
}


.experience-archive__intro-content {
    max-width: 830px;
}


.experience-archive__title {
    margin: 0;

    color: #173c32;

    font-size:
        clamp(
            2.65rem,
            4.4vw,
            4rem
        );

    font-weight: 720;

    line-height: 0.98;

    letter-spacing: -0.05em;
}


.experience-archive__description {
    max-width: 750px;

    margin:
        16px
        0
        0;

    color: #53685e;

    font-size:
        clamp(
            1.02rem,
            1.35vw,
            1.1rem
        );

    line-height: 1.67;
}


/* =========================================================
   CONTENT
   ========================================================= */

.experience-archive__content {
    padding:
        clamp(32px, 4vw, 48px)
        0
        clamp(65px, 7vw, 90px);
}


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

.experience-grid {
    display: grid;

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

    gap: 28px;

    align-items: stretch;
}


/* =========================================================
   KARTE
   ========================================================= */

.experience-card {
    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(
            23,
            60,
            50,
            0.10
        );

    border-radius: 18px;

    box-shadow:
        0 10px 30px
        rgba(
            23,
            60,
            50,
            0.045
        );

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


.experience-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            49,
            91,
            73,
            0.22
        );

    box-shadow:
        0 20px 44px
        rgba(
            23,
            60,
            50,
            0.085
        );
}


/* =========================================================
   ECHTES BEITRAGSBILD
   ========================================================= */

.experience-card__media {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #edf3e8;

    text-decoration: none;
}


.experience-card__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 350ms ease;
}


.experience-card:hover
.experience-card__image {
    transform:
        scale(1.025);
}


/* =========================================================
   OHNE BEITRAGSBILD
   ========================================================= */

/**
 * Kein grosser künstlicher Bildplatzhalter.
 * Nur eine feine visuelle Akzentlinie.
 */

.experience-card__accent {
    height: 8px;

    flex: 0 0 auto;

    background:
        linear-gradient(
            90deg,
            #dfe8cf 0%,
            #edf3e4 48%,
            #cddda9 100%
        );
}


/* =========================================================
   BODY
   ========================================================= */

.experience-card__body {
    flex: 1;

    display: flex;

    flex-direction: column;

    padding:
        30px
        30px
        27px;
}


/* =========================================================
   META
   ========================================================= */

.experience-card__meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 15px;

    color: #8a744c;

    font-size: 0.72rem;
    font-weight: 760;

    line-height: 1.3;

    letter-spacing: 0.065em;

    text-transform: uppercase;
}


.experience-card__meta-dot {
    color: #a4aea8;

    font-size: 0.8rem;
}


/* =========================================================
   TITEL
   ========================================================= */

.experience-card__title {
    margin: 0;

    color: #173c32;

    font-size:
        clamp(
            1.48rem,
            1.8vw,
            1.72rem
        );

    font-weight: 720;

    line-height: 1.1;

    letter-spacing: -0.038em;
}


.experience-card__title a {
    color: inherit;

    text-decoration: none;
}


.experience-card__title a:hover {
    color: #315b49;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.experience-card__excerpt {
    margin:
        15px
        0
        0;

    color: #586d63;

    font-size: 1rem;

    line-height: 1.66;
}


/* =========================================================
   CTA
   ========================================================= */

.experience-card__footer {
    margin-top: auto;

    padding-top: 24px;
}


.experience-card__link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #315b49;

    font-size: 0.91rem;
    font-weight: 760;

    text-decoration: none;
}


.experience-card__link span {
    display: inline-block;

    transition:
        transform 180ms ease;
}


.experience-card__link:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.experience-pagination {
    margin-top:
        clamp(
            45px,
            6vw,
            70px
        );
}


.experience-pagination
.navigation {
    margin: 0;
}


.experience-pagination
.nav-links {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;
}


.experience-pagination
.page-numbers {
    min-width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        13px;

    color: #315b49;
    background: #ffffff;

    border:
        1px solid
        rgba(
            23,
            60,
            50,
            0.12
        );

    border-radius: 999px;

    font-size: 0.84rem;
    font-weight: 700;

    text-decoration: none;
}


.experience-pagination
.page-numbers:hover {
    background: #f0f5ed;
}


.experience-pagination
.page-numbers.current {
    color: #ffffff;
    background: #315b49;

    border-color: #315b49;
}


/* =========================================================
   EMPTY
   ========================================================= */

.experience-empty {
    max-width: 680px;

    padding:
        35px
        0;
}


.experience-empty h2 {
    margin: 0;

    color: #173c32;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height: 1.05;

    letter-spacing: -0.04em;
}


.experience-empty p {
    margin:
        15px
        0
        0;

    color: #607269;

    font-size: 1rem;

    line-height: 1.7;
}


/* =========================================================
   GROSSE DESKTOPS
   ========================================================= */

@media (min-width: 1500px) {

    .experience-archive__container {
        width:
            min(
                1360px,
                calc(100% - 80px)
            );
    }


    .experience-grid {
        gap: 30px;
    }


    .experience-card__body {
        padding:
            32px
            32px
            29px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .experience-archive__container {
        width:
            min(
                900px,
                calc(100% - 42px)
            );
    }


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

        gap: 22px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .experience-archive__container {
        width:
            calc(
                100% - 34px
            );
    }


    .experience-archive__intro {
        padding:
            33px
            0
            29px;
    }


    .experience-archive__title {
        font-size:
            clamp(
                2.5rem,
                13vw,
                3.6rem
            );
    }


    .experience-archive__description {
        font-size: 0.99rem;
    }


    .experience-archive__content {
        padding:
            29px
            0
            52px;
    }


    .experience-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .experience-card__body {
        padding:
            24px
            21px
            22px;
    }


    .experience-card__title {
        font-size: 1.47rem;
    }


    .experience-card__excerpt {
        font-size: 0.97rem;
    }


    .experience-card__footer {
        padding-top: 20px;
    }

}