/* MIOLE | Mriezka kategorii | 22.10.2026
   Samostatne upravy sekcie Inšpirácia.
   Povodny subor miole-upravy.css zostava bez zmeny.
   Poradie existujucich karticiek:
   1 Sebalaska, 2 Symboly spojenia, 3 Rodina,
   4 Perlove sperky, 5 Top sperky.
*/

/* Zaklad sekcie */
.middle-banners .insp-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
}

.middle-banners .insp-left {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 32px 15px 24px !important;
    box-sizing: border-box;
    text-align: center;
}

.middle-banners .insp-right {
    display: grid !important;
    width: 100% !important;
    max-width: 1400px !important;
    height: auto !important;
    margin: 0 auto !important;
    gap: 5px !important;
}

.middle-banners .insp-right > .insp-tile {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

.middle-banners .insp-right > .insp-tile a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.middle-banners .insp-right > .insp-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pocitac: dve male fotografie vlavo aj vpravo, dominantna uprostred */
@media (min-width: 769px) {
    .middle-banners .insp-right {
        grid-template-columns: 1fr 1.15fr 1fr !important;
        grid-template-rows: repeat(2, 250px) !important;
        padding: 0 20px 35px;
        box-sizing: border-box;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(4) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(5) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* Mobil: 2 fotografie, siroka stredova, 2 fotografie */
@media (max-width: 768px) {
    .middle-banners .insp-left {
        padding: 22px 12px 18px !important;
    }
    .middle-banners .insp-right {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 175px 240px 175px !important;
        padding: 0 8px 20px;
        box-sizing: border-box;
        gap: 5px !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(2) {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(5) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
    .middle-banners .insp-right > .insp-tile:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }
}

/* MIOLE | Typografia dlazdic a jemnejsie fotografie */
@media (min-width: 769px) {
    .middle-banners .insp-right > .insp-tile a,
    .middle-banners .insp-right > .insp-tile a * {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
}
@media (max-width: 768px) {
    .middle-banners .insp-right > .insp-tile a,
    .middle-banners .insp-right > .insp-tile a * {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }
}
/* Jemne presvetlenie zdrojovych fotiek; pripadny dalsi prekryv
   v povodnej sablone sa upravi az po overeni v DevTools. */
.middle-banners .insp-right > .insp-tile img {
    filter: brightness(0.88) !important;
}