/* =====================================================
   BLOGINDEX.CSS

   Blogübersicht

   - Intro
   - Masonry Gallery
   - Hover Overlay
   - Responsive Layout

   Stand: August 2026
   ===================================================== */

   /* --------------------------------------------------
   BLOG-INDEX
-------------------------------------------------- */

.blog-index {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 7rem 0;
}


/* EINLEITUNG */

.blog-index__intro {
    max-width: 780px;
    margin-bottom: 4.5rem;
}

.blog-index__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--berry);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.blog-index__intro h1 {
    margin: 0 0 1.5rem;
}

.blog-index__lead {
    max-width: none;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #575756;
}


/* GALERIE */

.blog-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 10px;
    gap: 10px;
}


/* KARTENHÖHEN */

.blog-card--short {
    grid-row: span 22;
}

.blog-card--medium {
    grid-row: span 30;
}

.blog-card--tall {
    grid-row: span 38;
}


/* KARTE */

.blog-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #eeeeec;
}

.blog-card__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.blog-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 700ms ease,
        filter 700ms ease;
}


/* HOVER-FLÄCHE */

.blog-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 2rem;

    background:
        linear-gradient(
            to top,
            rgba(25, 25, 25, 0.78) 0%,
            rgba(25, 25, 25, 0.22) 55%,
            rgba(25, 25, 25, 0) 100%
        );

    opacity: 0;
    transition: opacity 450ms ease;
}

.blog-card__content {
    max-width: 30rem;
    color: #ffffff;
    transform: translateY(14px);
    transition: transform 450ms ease;
}

.blog-card__content h2 {
    margin: 0 0 0.65rem;
    color: inherit;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.2;
}

.blog-card__content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.blog-card__more,
.blog-card__status {
    display: inline-block;
    margin-top: 1.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.65);

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* INTERAKTION */

.blog-card__link:hover .blog-card__overlay,
.blog-card__link:focus-visible .blog-card__overlay {
    opacity: 1;
}

.blog-card__link:hover .blog-card__content,
.blog-card__link:focus-visible .blog-card__content {
    transform: translateY(0);
}

.blog-card__link:hover .blog-card__image,
.blog-card__link:focus-visible .blog-card__image {
    transform: scale(1.035);
    filter: brightness(0.9);
}


/* NOCH NICHT VERLINKTE ARTIKEL */

.blog-card--coming-soon .blog-card__link {
    cursor: default;
}


/* TABLET */

@media (max-width: 900px) {

    .blog-index {
        width: min(100% - 36px, 760px);
        padding: 5rem 0;
    }

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

}


/* SMARTPHONE */

@media (max-width: 580px) {

    .blog-index {
        width: calc(100% - 28px);
        padding: 4rem 0;
    }

    .blog-index__intro {
        margin-bottom: 3rem;
    }

    .blog-gallery {
        display: block;
    }

    .blog-card {
        height: auto;
        aspect-ratio: 4 / 5;
        margin-bottom: 10px;
    }

    .blog-card--short {
        aspect-ratio: 4 / 3;
    }

    .blog-card--tall {
        aspect-ratio: 3 / 4;
    }

    .blog-card__overlay {
        padding: 1.4rem;
    }

}


/* TOUCH-GERÄTE:
   Informationen nicht ausschließlich hinter Hover verstecken */

@media (hover: none) {

    .blog-card__overlay {
        opacity: 1;
        background:
            linear-gradient(
                to top,
                rgba(25, 25, 25, 0.72) 0%,
                rgba(25, 25, 25, 0) 65%
            );
    }

    .blog-card__content {
        transform: none;
    }

    .blog-card__content p {
        display: none;
    }

}