/*
 * Uklady tresci z panelu (js/panel/content-blocks.js): wspolne dla wszystkich szablonow stron.
 * Laduja sie w layoutach i w edytorze. Bez JS na stronie: same klasy, wiec Bootstrap ani skrypty
 * szablonu niczego tu nie przestawia. !important stoi tylko przy ukladzie i zdjeciach, bo arkusze
 * stron nadaja zdjeciom w tresci marginesy, ramki, float i stala szerokosc. Tekst przejmuje wyglad strony.
 */
.isp-block, .isp-block *, .isp-block *::before, .isp-block *::after { box-sizing: border-box !important; }
div.isp-block { display: grid !important; gap: 20px !important; float: none !important; clear: both; width: auto !important; max-width: 100% !important; margin: 32px 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
div.isp-block > div { min-width: 0 !important; width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
div.isp-block > div > :first-child { margin-top: 0; }
div.isp-block > div > :last-child { margin-bottom: 0; }

/* Zdjecia */
div.isp-block > div > a { display: block; }
div.isp-block img.isp-block__img { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* Zdjecie ma rogi od ramki, zeby powiekszenie po najechaniu zostalo w srodku. */
div.isp-block--split > div:has(img.isp-block__img), div.isp-block--photos > div, div.isp-block--slider > div { overflow: hidden !important; border-radius: 10px !important; }

/* Tekst obok zdjecia */
div.isp-block--split { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; align-items: center !important; }
div.isp-block--split.isp-block--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; }
div.isp-block--split.isp-block--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; }

/* Kolumny tekstu */
div.isp-block--columns.isp-block--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
div.isp-block--columns.isp-block--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* Kolumny zdjec i siatka */
div.isp-block--photos { gap: 12px !important; }
div.isp-block--photos.isp-block--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
div.isp-block--photos.isp-block--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
div.isp-block--photos.isp-block--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
div.isp-block--photos.isp-block--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
div.isp-block--square img.isp-block__img { aspect-ratio: 1 / 1; height: auto !important; object-fit: cover; }
div.isp-block--r43 img.isp-block__img { aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; }
div.isp-block--r169 img.isp-block__img { aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; }

/* Slider: natywne przewijanie, dziala bez skryptow i palcem na telefonie */
div.isp-block--slider { display: flex !important; gap: 12px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; }
div.isp-block--slider > div { flex: 0 0 82% !important; scroll-snap-align: start; }
div.isp-block--slider img.isp-block__img { aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; }

/* Male kafelki, np. logotypy */
/* Stala wysokosc wiersza: proporcja z paddingiem rozjezdzala kafelki o rozne logotypy. */
div.isp-block--logos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; grid-auto-rows: 88px; gap: 12px !important; }
div.isp-block--logos > div { display: flex !important; align-items: center !important; justify-content: center !important; padding: 14px 16px !important; border: 1px solid rgba(0, 0, 0, .08) !important; border-radius: 10px !important; background: #fff !important; }
div.isp-block--logos > div > a { width: 100%; }
div.isp-block--logos img.isp-block__img { height: 60px !important; object-fit: contain; }
/* Na dotyku nie ma najechania, wiec logotyp zostaje w kolorach. */
@media (hover: hover) {
    div.isp-block--logos img.isp-block__img { filter: grayscale(1); opacity: .75; transition: filter .3s ease, opacity .3s ease; }
    div.isp-block--logos > div:hover img.isp-block__img { filter: none; opacity: 1; }
}

/* Hero: zdjecie pod tekstem. Bez zdjecia zostaje ciemne tlo, wiec bialy tekst nadal sie czyta. */
div.isp-block.isp-block--hero { position: relative; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(320px, auto) !important; gap: 0 !important; overflow: hidden !important; border-radius: 12px !important; background: #2B2F28 !important; }
div.isp-block.isp-block--tall { grid-template-rows: minmax(460px, auto) !important; }
div.isp-block--hero > div { grid-column: 1; grid-row: 1; }
div.isp-block--hero > div:first-child { position: relative; }
div.isp-block--hero img.isp-block__img { position: absolute !important; top: 0; left: 0; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
/* Tekst stoi na dole, gdzie cien jest najmocniejszy, a gora zdjecia zostaje czysta. */
div.isp-block--hero > div.isp-block__overlay { position: relative; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 40px 44px !important; background: linear-gradient(to top, rgba(18, 20, 16, .84) 0%, rgba(18, 20, 16, .58) 48%, rgba(18, 20, 16, .22) 100%) !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
div.isp-block--hero.isp-block--center > div.isp-block__overlay { justify-content: center; align-items: center; background: radial-gradient(ellipse at center, rgba(18, 20, 16, .72) 0%, rgba(18, 20, 16, .5) 100%) !important; text-align: center !important; }
div.isp-block--hero .isp-block__overlay > * { max-width: 640px; color: #fff !important; }
div.isp-block--hero .isp-block__overlay h1, div.isp-block--hero .isp-block__overlay h2, div.isp-block--hero .isp-block__overlay h3 { margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; font-size: clamp(28px, 4.4vw, 42px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.01em; }
/* Ozdoby naglowkow szablonu (kreska, obrazek) nie pasuja do tekstu na zdjeciu. */
div.isp-block--hero .isp-block__overlay h1::before, div.isp-block--hero .isp-block__overlay h1::after, div.isp-block--hero .isp-block__overlay h2::before, div.isp-block--hero .isp-block__overlay h2::after, div.isp-block--hero .isp-block__overlay h3::before, div.isp-block--hero .isp-block__overlay h3::after { content: none !important; }
div.isp-block--hero .isp-block__overlay p { margin: 0 0 14px !important; color: #fff !important; font-size: 17px; line-height: 1.5 !important; }
div.isp-block--hero .isp-block__overlay p:last-child { margin-bottom: 0 !important; }
div.isp-block--hero a { display: inline-block; color: #fff !important; }
div.isp-block--hero a.isp-block__button, div.isp-block--hero a.btn { display: inline-block; padding: 11px 22px !important; border: 0 !important; border-radius: 8px !important; background: #fff !important; color: #1C1F1A !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; text-shadow: none; transition: background .2s ease, transform .2s ease; }
div.isp-block--hero a.isp-block__button:hover, div.isp-block--hero a.btn:hover { background: #E9EBE4 !important; transform: translateY(-1px); }
div.isp-block--hero a.isp-block__button[href="#"] { display: none; }
.mceContentBody div.isp-block--hero a.isp-block__button[href="#"] { display: inline-block; }

div.isp-block a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Ramka przycina obrys, wiec link zdjecia ma go w srodku: dwa kolory czytaja sie na kazdym zdjeciu. */
div.isp-block > div > a:focus-visible { position: relative; outline: 0; }
div.isp-block > div > a:focus-visible::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 0 2px #1C1F1A, inset 0 0 0 4px #fff; }
div.isp-block--split a img.isp-block__img, div.isp-block--photos a img.isp-block__img, div.isp-block--slider a img.isp-block__img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
div.isp-block--split a:hover img.isp-block__img, div.isp-block--photos a:hover img.isp-block__img, div.isp-block--slider a:hover img.isp-block__img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    div.isp-block img.isp-block__img, div.isp-block a.isp-block__button { transition: none !important; transform: none !important; }
}

/* Puste miejsce widac tylko w edytorze */
.isp-block__slot { display: none !important; }
div.isp-block > div:has(> .isp-block__slot) { display: none !important; }
.mceContentBody div.isp-block img.isp-block__slot { display: block !important; }
.mceContentBody div.isp-block > div:has(> img.isp-block__slot) { display: block !important; }
.mceContentBody img.isp-block__img { cursor: pointer; }
.mceContentBody div.isp-block[data-ip-active] { outline: 2px solid #4F5D00; outline-offset: 4px; }
.mceContentBody div.isp-block--hero img.isp-block__img { cursor: default; }
.mceContentBody div.isp-block--hero img.isp-block__slot { visibility: hidden; }
/* Podpowiedz po najechaniu: wiadomo, co zrobi klik, a do tresci nic nie wchodzi. */
.mceContentBody div.isp-block > div { position: relative; }
.mceContentBody div.isp-block > div:has(> img.isp-block__img, > a > img.isp-block__img):hover::after { content: "Zmień"; position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 999px; background: #1C1F1A; color: #fff; font: 600 12px/1.5 Inter, system-ui, sans-serif; pointer-events: none; }
.mceContentBody div.isp-block > div:has(> img.isp-block__img.isp-block__slot):hover::after { content: "Wybierz"; }
.mceContentBody div.isp-block--hero > div::after { content: none !important; }
.mceContentBody div.isp-block--hero:has(img.isp-block__slot) > .isp-block__overlay::before { content: "Zdjęcie wybierzesz zębatką"; position: absolute; top: 16px; left: 44px; color: rgba(255, 255, 255, .72); font: 500 12px/1.5 Inter, system-ui, sans-serif; text-shadow: none; }
.mceContentBody div.isp-block--split:hover > div:not(:has(> img, > a > img)), .mceContentBody div.isp-block--columns:hover > div { outline: 1px dashed rgba(0, 0, 0, .22); outline-offset: 6px; }
.mceContentBody div.isp-block--slider { overflow-x: auto !important; }

@media (max-width: 640px) {
    div.isp-block.isp-block--hero, div.isp-block.isp-block--tall { grid-template-rows: minmax(260px, auto) !important; }
    div.isp-block--hero > div.isp-block__overlay { padding: 28px 22px !important; }
    div.isp-block--split { gap: 16px !important; }
    div.isp-block--split, div.isp-block--split.isp-block--1-2, div.isp-block--split.isp-block--2-1, div.isp-block--columns.isp-block--n2, div.isp-block--columns.isp-block--n3 { grid-template-columns: minmax(0, 1fr) !important; }
    div.isp-block--photos.isp-block--n3, div.isp-block--photos.isp-block--n4, div.isp-block--photos.isp-block--n5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    div.isp-block--photos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}