/* --- Bento-Raster (epi/bento) ---------------------------------------------
   Vier Kacheln unterschiedlicher Groesse im Wechsel: oben gross–klein, unten
   klein–gross. Grosse Kacheln sind Bildkarten (.epi-card), Foto und Text
   nebeneinander, die zweite gespiegelt; kleine sind Textkarten mit Icon
   (.epi-card--text, epi-icon--…) auf Orange 50 statt Weiss, damit die zwei
   Groessen auch als zwei Arten lesbar sind (Abstufung, DESIGN.md 2.1).
   Unter 1024 px stehen die grossen Kacheln ueber die ganze Breite, die
   kleinen paarweise; mobil alles untereinander, Foto oben. */

.epi-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--epi-grid-gap);
}

/* Titel wie die kleinen Kacheln (.epi-card--text), damit beide Groessen
   eine Stimme haben. */
.epi-bento__gross .epi-card__title {
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    line-height: 1.3;
}

.epi-bento__klein {
    background-color: color-mix(in srgb, var(--color-primary-50) 45%, var(--color-base));
    border-color: color-mix(in srgb, var(--color-primary-50) 80%, var(--color-base));
    box-shadow: none;
}

@media screen and (min-width: 768px) {
    .epi-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .epi-bento__gross {
        grid-column: 1 / -1;
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Das Foto fuellt die Hoehe, die der Text vorgibt, und bestimmt sie nie
       selbst: absolut in seiner Flaeche, sonst zieht ein Hochformat die
       ganze Reihe in die Hoehe. */
    .epi-bento__gross .epi-card__media {
        position: relative;
        display: block;
        block-size: auto;
        min-block-size: 16rem;
    }

    .epi-bento__gross .epi-card__media img {
        position: absolute;
        inset: 0;
        block-size: 100% !important;
    }

    .epi-bento__gross:last-child .epi-card__media {
        order: 2;
    }

    .epi-bento__gross .epi-card__body {
        gap: 0.75rem;
        align-self: center;
        padding: var(--wp--preset--spacing--lg);
    }
}

@media screen and (min-width: 1024px) {
    .epi-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .epi-bento__gross {
        grid-column: span 2;
    }
}