/* ==========================================================================
   ALLMEBLO. Hero z fotografia na podstronach CMS. 2026-08-11.

   Tekst po lewej, zdjecie po prawej, po polowie szerokosci na desktopie,
   jedno pod drugim ponizej 900 px. Grafiki: 11 kwadratow 1120x1120 w
   themes/leo_bicomart/assets/img/modules/appagebuilder/images (dostawa_wlasna,
   dostawa_wysylka, dostawa_reklamacja, obsluga_klienta, konfigurator_mebli,
   raty0, platnosc_online, wybor_tkanin, tkaniny_czyszczenie,
   wypelnienie_mebla, system_rozkladania), kazda z blizniakiem .webp.

   DLACZEGO OSOBNY PLIK, A NIE profile3635912023.css
   Tam mieszka reszta stylow tych stron (.alm-del, .am-lead, .am-facts), ale
   ten plik wchodzi do paczki CCC, a PrestaShop liczy nazwe paczki ze SCIEZEK
   plikow, nie z ich tresci. Zmierzone 2026-08-11: po dopisaniu regul nazwa
   paczki zostala theme-d626171635.css, wiec przegladarki i tak dostawaly
   stara zawartosc. Osobny <link ?v=> z templates/cms/page.tpl daje kontrole
   nad uniewaznieniem, tak jak przy alm-cms-tresc.css.

   KOLEJNOSC I SPECYFICZNOSC
   Ten plik wchodzi PO paczce CCC, wiec przy remisie 0,2,0 wygrywa. Dla
   .am-facts jest dodatkowo wariant .alm-del .am-hero .am-facts (0,3,0), zeby
   nadpisanie siatki czterokolumnowej nie zalezalo od kolejnosci wpiec.

   Reguly nie sa zamkniete w .alm-del, bo dwie strony tego kontenera nie maja
   w oryginale: najczestsze pytania (10446) zaczynaja sie od <section>, a
   PayPo (29159) to wklejony kod PayPo. Kolory podane wprost, bez var().
   ========================================================================== */

.am-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    margin: 0 0 26px;
}

.am-hero__txt > *:first-child { margin-top: 0; }
.am-hero__txt > *:last-child  { margin-bottom: 0; }

/* Lista faktow w polowie szerokosci kolumny: cztery kafelki obok siebie
   lamaly sie na trzy wiersze kazdy, wiec w heroju ida dwa na dwa. */
.am-hero .am-facts,
.alm-del .am-hero .am-facts {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 0;
}

.am-hero__img {
    /* Bez ograniczenia zdjecie na monitorze 1500 px mialoby 660 px wysokosci
       i przykrywalo caly pierwszy ekran. Prawy dosuw utrzymuje podzial 50/50. */
    max-width: 560px;
    width: 100%;
    margin: 0 0 0 auto;
}

.am-hero__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;   /* rezerwacja miejsca, zrodla to kwadraty 1120x1120 */
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(82, 26, 6, .14);
}

/* PayPo: logo metody platnosci zostaje w kolumnie tekstowej, ale bez tego
   ograniczenia weszloby jako plik 600x571 i zdominowalo naglowek. */
.am-hero__txt .am-hero__logo { margin: 0 0 14px; }
.am-hero__txt .am-hero__logo img { max-width: 170px; height: auto; float: none; }

/* Zdjecie idzie NAD tekst. Gdyby zostalo pod nim, wypadloby ponizej listy
   .am-facts, czyli po jednym przewinieciu od tytulu strony. */
@media (max-width: 900px) {
    .am-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 22px;
    }
    .am-hero__img {
        order: -1;
        max-width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 420px) {
    .am-hero .am-facts,
    .alm-del .am-hero .am-facts {
        grid-template-columns: 1fr;
    }
}