/* --- Základní styly --- */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s;
}

h1 {
    text-align: center;
    color: #333;
}

/* ===========================================================
    Mobile first (< 700px)
    Layout: "Flow - tj. žádný" (jeden sloupec)
    Obrázky: 1:1 (čtverec)
=========================================================== */
.portfolio {
    max-width: 600px;
    margin: 0 auto;
    background-color: #f0f0f0;
}

.item {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    /* čtverec */
    aspect-ratio: 1 / 1;
}

.item img {
    display: block;
    width: 100%;
    height: 100%;

    /* vyplní čtverec, ořízne okraje */
    object-fit: cover;
}


/* ===========================================================
    TABLET (700px -- 1000px)
    Layout: "Grid" (3 sloupce)
    Obrázky: 1:1 (čtverec)
=========================================================== */
@media (min-width: 700px) and (max-width: 999px) {

    body {
        background-color: #e0e0e0;
    }

    .portfolio {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 960px;
        margin: 0 auto;
    }

    .item {
        margin-bottom: 0; /* mezery řeší grid */
    }
}


/* ===========================================================
    DESKTOP (>= 1000px)
    Layout: "Flex" (masonry)
    Obrázky: Automatický (originální) poměr stran
=========================================================== */
@media (min-width: 1000px) {

    body {
        background-color: #ffffff;
    }

    .portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        max-width: none;
        justify-content: center;
    }

    /* stejné výšky boxů, různé šířky */
    .item {
        height: 300px;
        flex: none;
        aspect-ratio: auto;
    }

    .item img {
        height: 100%;   /* vztaženo k .item */
        width: auto;    /* drží poměr stran */
        object-fit: contain; /* bez ořezu */
    }
}