/* Block: Bento-Bild-Mosaic */

.myk-bento {
    --myk-bento-gap: 8px;
    --myk-bento-radius: 0px;
}
.myk-bento--gap-none { --myk-bento-gap: 0px; }
.myk-bento--gap-sm   { --myk-bento-gap: 8px; }
.myk-bento--gap-md   { --myk-bento-gap: 16px; }
.myk-bento--gap-lg   { --myk-bento-gap: 28px; }
.myk-bento--rounded  { --myk-bento-radius: var(--myk-r-medium); }

.myk-bento-grid {
    display: grid;
    gap: var(--myk-bento-gap);
    width: 100%;
}

/* Verhältnisse — der Grid-Container hat ein Aspect-Ratio,
   die Kacheln stretchen darin */
.myk-bento--aspect-wide    .myk-bento-grid { aspect-ratio: 16 / 9; }
.myk-bento--aspect-classic .myk-bento-grid { aspect-ratio: 4 / 3; }
.myk-bento--aspect-square  .myk-bento-grid { aspect-ratio: 1 / 1; }

.myk-bento-tile {
    margin: 0;
    overflow: hidden;
    border-radius: var(--myk-bento-radius);
    background: rgba(0,0,0, 0.05);
}
.myk-bento-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--myk-dur-base) var(--myk-ease);
}
.myk-bento-tile:hover img {
    transform: scale(1.04);
}

/* ─── Layout: 2×2 ─── */
.myk-bento--2x2 .myk-bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* ─── Layout: 1 großes rechts + 3 kleine links übereinander ─── */
.myk-bento--big-3 .myk-bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "small big"
        "small big"
        "small big";
}
.myk-bento--big-3 .myk-bento-tile--1 { grid-area: big; }
.myk-bento--big-3 .myk-bento-tile--2,
.myk-bento--big-3 .myk-bento-tile--3,
.myk-bento--big-3 .myk-bento-tile--4 { grid-area: auto; grid-column: 1; }

/* ─── Layout: 1 großes links + 3 kleine rechts ─── */
.myk-bento--big-left-3 .myk-bento-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.myk-bento--big-left-3 .myk-bento-tile--1 {
    grid-column: 1;
    grid-row: 1 / span 3;
}

/* ─── Layout: 5 – Header oben breit + 4 unten in Reihe ─── */
.myk-bento--split-5 .myk-bento-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
}
.myk-bento--split-5 .myk-bento-tile--1 {
    grid-column: 1 / -1;
}

/* ─── Layout: 6 – Mosaic gemischt ─── */
.myk-bento--mosaic-6 .myk-bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "a a b c"
        "a a d c"
        "e e d f";
}
.myk-bento--mosaic-6 .myk-bento-tile--1 { grid-area: a; }
.myk-bento--mosaic-6 .myk-bento-tile--2 { grid-area: b; }
.myk-bento--mosaic-6 .myk-bento-tile--3 { grid-area: c; }
.myk-bento--mosaic-6 .myk-bento-tile--4 { grid-area: d; }
.myk-bento--mosaic-6 .myk-bento-tile--5 { grid-area: e; }
.myk-bento--mosaic-6 .myk-bento-tile--6 { grid-area: f; }

/* ─── Layout: 3 nebeneinander ─── */
.myk-bento--3-up .myk-bento-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ─── Layout: 1 einzelnes Bild ─── */
.myk-bento--one-wide .myk-bento-grid {
    grid-template-columns: 1fr;
}

/* ─── Mobile: alles auf einfaches Stacked-Layout reduzieren ─── */
@media (max-width: 640px) {
    .myk-bento--2x2 .myk-bento-grid,
    .myk-bento--big-3 .myk-bento-grid,
    .myk-bento--big-left-3 .myk-bento-grid,
    .myk-bento--split-5 .myk-bento-grid,
    .myk-bento--mosaic-6 .myk-bento-grid,
    .myk-bento--3-up .myk-bento-grid {
        aspect-ratio: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: none;
    }
    .myk-bento-tile {
        aspect-ratio: 1 / 1;
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .myk-bento-tile--1 { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9; }
}

.myk-bento-caption {
    margin: clamp(0.5rem, 1vw, 1rem) 0 0;
    font-size: var(--myk-fs-meta);
    color: var(--myk-c-text-muted);
    text-align: center;
    font-style: italic;
}