/* =========================================================
   Phonen – Flango Layout
   Handy: 1 Hauptsitz + 7 kleine Sitze
   ========================================================= */

.phonen-media-area {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(4, 82px) !important;
    gap: 4px !important;
}

/* Hauptsitz links – 3 Reihen hoch */
.phonen-media-slot[data-slot-position="1"] {
    grid-column: 1 / 4 !important;
    grid-row: 1 / 4 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

/* Drei kleine Sitze rechts */
.phonen-media-slot[data-slot-position="2"] {
    grid-column: 4;
    grid-row: 1;
}

.phonen-media-slot[data-slot-position="3"] {
    grid-column: 4;
    grid-row: 2;
}

.phonen-media-slot[data-slot-position="4"] {
    grid-column: 4;
    grid-row: 3;
}

/* Vier kleine Sitze unten */
.phonen-media-slot[data-slot-position="5"] {
    grid-column: 1;
    grid-row: 4;
}

.phonen-media-slot[data-slot-position="6"] {
    grid-column: 2;
    grid-row: 4;
}

.phonen-media-slot[data-slot-position="7"] {
    grid-column: 3;
    grid-row: 4;
}

.phonen-media-slot[data-slot-position="8"] {
    grid-column: 4;
    grid-row: 4;
}

/* Kleine Sitze */
.phonen-small-slot,
.phonen-media-slot-empty {
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

/* Kleine Beschriftungen, damit sie in die Sitze passen */
.phonen-small-slot .phonen-media-placeholder,
.phonen-media-slot-empty {
    font-size: 11px;
}


/* =========================================================
   PC
   ========================================================= */

@media (min-width: 769px) {

    .phonen-media-area {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
    }

    .phonen-media-slot[data-slot-position="1"] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        height: 420px;
        max-height: 50vh;
    }

    .phonen-media-slot[data-slot-position="2"],
    .phonen-media-slot[data-slot-position="3"],
    .phonen-media-slot[data-slot-position="4"],
    .phonen-media-slot[data-slot-position="5"],
    .phonen-media-slot[data-slot-position="6"],
    .phonen-media-slot[data-slot-position="7"],
    .phonen-media-slot[data-slot-position="8"] {
        grid-column: auto;
        grid-row: auto;
        height: 200px;
    }
}

/* =========================================================
   PC – Flango Layout
   ========================================================= */

@media (min-width: 769px) {

    .phonen-media-area {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
    }

    /* Hauptsitz */
    .phonen-media-slot[data-slot-position="1"] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;

        height: 260px !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }

    /* Plätze 2–8 */
    .phonen-media-slot[data-slot-position="2"],
    .phonen-media-slot[data-slot-position="3"],
    .phonen-media-slot[data-slot-position="4"],
    .phonen-media-slot[data-slot-position="5"],
    .phonen-media-slot[data-slot-position="6"],
    .phonen-media-slot[data-slot-position="7"],
    .phonen-media-slot[data-slot-position="8"] {
        grid-column: auto !important;
        grid-row: auto !important;

        height: 135px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }
}