/* OnBagan — (c) 2026 SUME Sp. z o.o. · NIP 9112058044 · OnBagan is a brand of SUME Sp. z o.o., which owns the platform and its technology. · Created by Daniel Bagan & Paweł Rymarczyk · https://onbagan.com */

/*
 * THE PHOTOS INSIDE THE CONTENT — the look of the grid of photos under the description and in the folding "Read more" block.
 *
 * The stylesheet travels WITH THE ADD-ON, because a ZIP package cannot count on files in "public/":
 * it carries them in "assets/", and its own AssetsController serves them (the pattern: the Film banner add-on).
 * The module adds it to the page through the "head" hook point — once per page, only when the add-on
 * is switched on, and with the browser's cache for a week.
 *
 * Until 2026-09-13 these rules travelled in a <style> block in "templates/zdjecia.html.twig",
 * and on an item's page TWICE, because there are two hook points there. Now there is one file.
 * The ".rozwin*" rules are not here — those belong to the "Read more" add-on; only what concerns
 * ".zdj-tresci" is here. In the source shop the whole of it lay in the core of that shop.
 *
 * 🔴 What is NOT here and must not be: the value of "--zdj-proc" from the settings of the add-on.
 * This file is FIXED and lies in the browser's cache for a week, while that number
 * changes from the screen of the add-on — which is why it travels separately, in two lines in a block of the page.
 */

    .zdj-tresci {
        display: grid;
        gap: 12px;
        margin: 18px 0 26px;
        grid-template-columns: repeat(2, 1fr);
    }

    /* On a narrow screen the crop is to be smaller, not the page longer — hence two columns
       on a phone and fitting to the width only from 700 px up. */
    @media (min-width: 700px) {
        .zdj-tresci {
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        }
    }

    .zdj-tresci__poz {
        margin: 0;
        overflow: hidden;
        border-radius: 10px;
        background: #f2f4f7;
        /* A fixed shape of the crop — without it the page jumps when the photos are read in. */
        aspect-ratio: 4 / 3;
    }

    .zdj-tresci__poz img,
    .zdj-tresci__poz picture {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .zdj-tresci__poz:hover img {
        transform: scale(1.04);
    }

    /*
     * In the folding block the photos stand in a 2×2 square beside the text.
     *
     * We aim at every photo inside the block, not at one name: on a category page
     * the photos from the "under the description" place go in there, and on an item's page from its own —
     * the layout is to be the same whichever place gave them.
     */
    .rozwin__srodek .zdj-tresci,
    .zdj-tresci--czytaj-wiecej {
        grid-template-columns: repeat(2, 1fr);
        margin: 0;
        /* `0 0 34%` — the column of photos neither shrinks nor grows: it takes exactly its
           third of the width of the block. With `0 1 34%` it ran down to the smallest value,
           because the text with an `auto` basis reported the width of its content and both fields shrank
           together (measured on the source shop on 03-09-2026). */
        flex: 0 0 34%;
        min-width: 240px;
    }

    /*
     * 🔴 Setting the folding block out in two columns belongs to THE ADD-ON.
     *
     * The "Read more" add-on keeps `.rozwin__srodek` as an ordinary block, because of itself it has nothing
     * to put there beside the text: the look of the photos (beside the text or under it) belongs to this add-on.
     * The rule is DEAD as long as the add-on draws
     * nothing: with no `.zdj-tresci` inside, the `:has()` does not hit and the page stays byte for byte as
     * it was. A browser with no `:has()` will put the photos under the text — that is, in the fallback
     * layout, not in disarray.
     */
    .rozwin__srodek:has(.zdj-tresci) {
        display: flex;
        gap: 22px;
        align-items: flex-start;
    }

    @media (min-width: 901px) {
        .rozwin__srodek:has(.zdj-tresci) .rozwin__tekst {
            flex: 1 1 0;
        }
    }

    /*
     * A PHONE: the photos go under the text.
     *
     * The whole section is then NOT cut with one line — the text and the photos have their own cuts,
     * otherwise folding would show the beginning of the description alone and no photos. The height of the piece of the photos
     * is worked out by the script of the "Read more" add-on from "--zdj-proc"; with no script the fallback value from
     * here holds, and a click on "Read more" uncovers the whole of it.
     */
    @media (max-width: 900px) {
        .rozwin__srodek:has(.zdj-tresci) {
            flex-direction: column;
            gap: 16px;
        }

        .rozwin__srodek .zdj-tresci,
        .zdj-tresci--czytaj-wiecej {
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            grid-template-columns: repeat(var(--zdj-kol, 2), 1fr);
            overflow: hidden;
            max-height: var(--zdj-wys, 110px);
        }

        .rozwin__pole:checked ~ .rozwin__srodek .zdj-tresci {
            max-height: none;
        }

        /* Three cases of "there is nothing to hide": the folding switched off in the back office, the moment
           of the measuring by the script, short content. The `!important` as in the source shop —
           these three are to win over the cut no matter in what order the stylesheets come. */
        .rozwin[data-rozwin="0"] .zdj-tresci,
        .rozwin--mierze .zdj-tresci,
        .rozwin--bez-potrzeby .zdj-tresci {
            max-height: none !important;
        }
    }