/*
 * Inco - warstwa integracyjna WordPress.
 * Uzupelnienia do main.css (kompilat inco-design): mapowanie blokow core
 * na klasy designu + drobne poprawki markupu WP. Bez nowych wzorcow wizualnych.
 */

/* ============================================================
   Core button jako .button-more
   Klase .button-more (+ warianty) nadaje sie na WRAPPER bloku
   (.wp-block-button) w panelu "Dodatkowe klasy CSS". Wrapper
   dostaje wyglad przycisku z main.css (te same reguly co <a> w
   designie, w tym kontekstowe: .about-slide/.blog-shop/.blog-list),
   a wewnetrzny link jest neutralizowany i rozciagniety na caly box.
   ============================================================ */
.wp-block-button.button-more {
	position: relative;
	cursor: pointer;
}
.wp-block-button.button-more .wp-block-button__link {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: none;
}
/* Pelna klikalnosc: link pokrywa caly box przycisku. */
.wp-block-button.button-more .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Wrapper .wp-block-buttons przezroczysty dla layoutu: .button-more uczestniczy
   bezposrednio w kolumnie flex rodzica (align-self/margin z main.css dzialaja 1:1). */
.about-slide__content .wp-block-buttons {
	display: contents;
}

/* Postercard (blok flexisnap/postercard): tresc (naglowek + akapity) nad
   absolutnie pozycjonowanym obrazem karty (.blog-shop__media ma inset:0;
   w designie z-index 2 dostaje tylko .section-heading i .button-more).
   Bez tego akapity sa niewidoczne i nieklikalne pod obrazem. */
.blog-shop__content {
	position: relative;
	z-index: 2;
}

/* ============================================================
   Pasek nagrod: wygaszenie koncowych logotypow (w designie
   nadawane recznie klasami --dim50/--dim60 na pozycjach 6/8/9).
   ============================================================ */
.section-awards-strip .award-logo:nth-child(6),
.section-awards-strip .award-logo:nth-child(9) {
	opacity: 0.5;
}
.section-awards-strip .award-logo:nth-child(8) {
	opacity: 0.6;
}

/* ============================================================
   Domyslny blockGap WP (flow layout) nie wnosi marginesow do
   komponentow designu. Punktowo: sekcje stykaja sie jak w makiecie,
   dzieci gridow/flexow bez doklejanych 24px.
   ============================================================ */
.wp-site-blocks > * {
	margin-block: 0;
}
.wp-block-post-content > .wp-block-flexisnap-section {
	margin-block: 0;
}
.wp-block-group.blog > * {
	margin-block: 0;
}
.about-slide > .about-slide__content {
	margin-block-start: 0;
}

/* ============================================================
   Drobne resety markupu WP
   ============================================================ */
/* figure core/image bez domyslnych marginesow przegladarki. */
.wp-block-image {
	margin: 0;
}

/* Zloty akcent naglowka przez format koloru tekstu (mark),
   bez zoltego tla przegladarki. */
mark.has-inline-color {
	background: none;
}

/* ============================================================
   Kompozycje stron opisowych z blokow core (certyfikaty itd.).
   Grupy core niosa klasy designu (.section-content, .section-text,
   .certificates-grid...) - flow layout WP nie dokleja marginesow
   do ich dzieci, odstepy daje gap z main.css designu.
   ============================================================ */
.section-content > *,
.section-text > *,
.certificates-grid > *,
.certificate-card > *,
.certificate-card__content > * {
	margin-block: 0;
}

/* Podloga 600px dla media sekcji feature (design scope'uje po body:
   .page-certyfikaty/.page-nasze-wartosci; klasa na bloku dziala
   identycznie na froncie i w kanwie edytora). */
.section-feature--product.is-media-tall .section-media {
	min-height: 600px;
}

@media (max-width: 1200px) {
	.section-feature--product.is-media-tall .section-media {
		min-height: 0;
	}
}


/* ============================================================
   Podstrony opisowe (do-pobrania, grupa-inco, kontakt, kariera...):
   kompozycje z blokow core + flexisnap/link-card. Reset marginesow
   flow-layoutu WP w kontenerach designu - odstepy daje gap z main.css.
   ============================================================ */
.downloads-grid > *, .downloads-body > *, .download-card > *, .download-card__body > *,
.item-content > *, .item-meta > *, .filters > *,
.section-intro > *, .section-intro__heading > *,
.benefits-intro > *, .benefits-intro__text > *, .benefits-list > *,
.benefit-card > *, .benefit-card__content > *,
.teaser > *, .teaser__panel > *, .teaser__media > *, .content-group > *,
.social-list > *, .contact-box > *,
.contact-hq__panel > *, .contact-panel > *, .contact-panel__heading > *, .contact-cards > *,
.contact-card > *, .contact-card__list > *, .contact-row > *, .contact-item > *,
.contact-item__text > *, .contact-details > *,
.plants-list > *, .plant > *, .plant__inner > *, .plant__heading > *, .plant__cards > *,
.section-registry__content > *, .details-list > *,
.announcements-list > *, .announcement-card > *,
.projects-row > *, .project-card > *, .project-card__logos > *, .project-card__text > *,
.project-finance > *, .finance-item > *,
.values-list > *, .value-card > *, .value-card__media > *, .value-card__content > *,
.team-list > *, .person-card > *, .person-card__photo > *, .person-card__info > *,
.companies-intro > *, .companies-list > *, .company-item__body > *, .company-item__details > *,
.shareholders-content > *, .shareholders-media > *,
.timeline-entry > *, .entry-content > *, .entry-media > *, .entry-photo > *,
.brand-category > *, .brand-list > *, .brand-tile > *,
.categories-list > *, .category-card > *, .card-media > *,
.beneficiaries-row > *, .beneficiaries-grid > *, .beneficiary-card > *, .beneficiary-card__media > *,
.documents-grid > *, .thanks-card > *,
.awards-grid > *, .awards-row > *, .award-card > *, .award-card__media > *, .award-card__content > *,
.section-lead__text > *, .download-list > *, .download-item > *,
.support-note > *, .support-note__text > * {
	margin-block: 0;
}

/* ============================================================
   flexisnap/download-grid (Siatka kart pobran): kolumny z selecta
   (is-cols-N na .downloads-grid; bez klasy rzadzi baza designu,
   ponizej 900px zawsze jedna kolumna z main.css), komorki kart
   (interactivity chowa je atrybutem hidden) oraz natywne <button>
   designu (filtry, "Zobacz wszystkie") - przegladarka nie dziedziczy
   fontu do buttonow sama z siebie.
   ============================================================ */
.downloads-grid.is-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.downloads-grid.is-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.downloads-grid.is-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1400px) {
	.downloads-grid.is-cols-3,
	.downloads-grid.is-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 900px) {
	.downloads-grid.is-cols-2,
	.downloads-grid.is-cols-3,
	.downloads-grid.is-cols-4 {
		grid-template-columns: 1fr;
	}
}
.downloads-grid__cell {
	min-width: 0;
	display: flex;
}
.downloads-grid__cell > * {
	width: 100%;
}
.downloads-grid__cell[hidden] {
	display: none;
}
button.button-filter,
button.button-more {
	font-family: inherit;
	cursor: pointer;
}

/* Kadrowanie okladki "Cala okladka widoczna, mniejsza (70%)" (select
   "Kadrowanie okladki", coverVariants kontraktu): obrazek w calosci,
   w 70 proc. pudelka okladki, wysrodkowany (logo z marginesem). Dwie
   klasy w selektorze, bo base .download-card__cover img z main.css ma
   te sama wage co jednoklasowy wariant. */
.download-card__cover.download-card__cover--small {
	display: flex;
	align-items: center;
	justify-content: center;
}
.download-card__cover.download-card__cover--small img {
	width: 70%;
	height: 70%;
	object-fit: contain;
}

/* Wariant "Nizsza okladka (50%)" karty pobrania (select "Wyglad karty",
   kontrakt flexisnap_download_card_classes; klasa sama albo razem
   z --shadow1). Zgloszenie klienta 09.09: mniejsza ma byc SAMA okladka,
   ikona PDF, teksty i odstepy zostaja jak w karcie zwyklej. Szerokosc
   dalej dyktuje siatka. Progi jak w main.css (1200).
   Mala karta trzyma wlasna wysokosc (bez height:100% z designu), zeby
   w rzedzie obok duzej nie rozciagac pudelka z cieniem pod tresc. */
.download-card.download-card--compact {
	height: auto;
	align-self: start;
}
.download-card--compact .download-card__cover {
	height: 210px;
}
@media (max-width: 1200px) {
	.download-card--compact .download-card__cover {
		height: 160px;
	}
}

/* Ikony designu jako blok obrazka (flexisnap/image, wczesniej core/image):
   klasa wymiarujaca laduje na wrapperze (div/figure), img wypelnia jej box
   (design wymiaruje sama klase, nie element img). Selektory klasowe, zeby
   dzialaly dla obu wrapperow (kanwa i front). */
.item-download img,
.item-meta__dot img,
.download-item__icon img,
.download-item__chevron img,
.contact-item__icon img,
.support-note__icon img,
.section-media__play img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Sloty medialne o stalej wysokosci (design: .slot { height + overflow:hidden },
   .slot img { width/height:100% + object-fit }): u nas blok obrazka wstawia
   posredni wrapper (div/figure) o auto-wysokosci, ktory przerywa lancuch
   height:100% - img renderowal sie w naturalnych proporcjach, wyzsze kadry
   byly ucinane od dolu przez overflow, nizsze zostawialy pusta przestrzen.
   Wrapper musi wypelniac box slotu; reszte robia reguly designu z main.css. */
.card-media > div,
.card-media > figure,
.beneficiary-card__media > div,
.beneficiary-card__media > figure,
.award-card__media > div,
.award-card__media > figure,
.download-card__cover > div,
.download-card__cover > figure,
.contact-map > div,
.contact-map > figure,
.gallery-item > div,
.gallery-item > figure,
.project-card__logos > div,
.project-card__logos > figure,
.section-banner > div,
.section-banner > figure,
.shareholders-media > div,
.shareholders-media > figure,
.thanks-card > div,
.thanks-card > figure {
	width: 100%;
	height: 100%;
}

/* Karty opisowe, styl "projekty UE" (jeden blok zamiast osobnych rzedow):
   design ma 3x .projects-row (flex gap 60, 2 karty) w kontenerze sekcji
   z gap 60 - flex-wrap z modyfikatorem --cols-N odtwarza to 1:1.
   Na mobile design przelacza rzedy na kolumne z gap 32 (regula bazowa
   .projects-row z main.css); reset flex-basis, zeby karty nie dostaly
   wysokosci z calc. */
[class*='projects-row--cols-'] {
	flex-wrap: wrap;
}
.projects-row--cols-2 > .project-card {
	flex: 0 1 calc((100% - 60px) / 2);
}
.projects-row--cols-3 > .project-card {
	flex: 0 1 calc((100% - 120px) / 3);
}
@media (max-width: 1000px) {
	.projects-row--cols-2 > .project-card,
	.projects-row--cols-3 > .project-card {
		flex: 1 1 auto;
	}

	/* Rytm mobilny designu: 32px wewnatrz rzedu, 60px miedzy rzedami
	   (gap 32 + margines 28 na pierwszej karcie kazdego kolejnego rzedu). */
	.projects-row--cols-2 > .project-card:nth-child(odd):not(:first-child) {
		margin-top: 28px;
	}
}

/* CTA designu w kontenerach flex/grid: wrapper .wp-block-buttons jest
   przezroczysty dla layoutu - .button-more/.button-filter uczestniczy
   bezposrednio w kolumnie rodzica (align-self/margin z main.css 1:1). */
.wp-block-buttons:has(> .wp-block-button.button-more),
.wp-block-buttons:has(> .wp-block-button.button-filter) {
	display: contents;
}

/* CTA w tresci media-textu (kolumna .section-text jest gridem): wrapper
   przezroczysty robi z kazdego przycisku osobny element gridu rozciagniety
   na cala kolumne (core daje linkowi width:100%). Zwykle pudelko flex
   przywraca szerokosc z tresci i stawia przyciski obok siebie
   (poz. 2.1: pary CTA "ABE/Brodacid", "Florovit/Azofoska"). */
.section-text .wp-block-buttons:has(> .wp-block-button.button-more) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Filtry pobran: przyciski core jako .button-filter (wzorzec .button-more:
   klasa designu na wrapperze, wewnetrzny link neutralny). */
.filters .wp-block-buttons {
	display: contents;
}

/* Klient: na telefonie filtry maja stac w jednej linii przewijanej w bok,
   zamiast zawijac sie do czterech wierszy (zmierzone: 190px wysokosci przy
   390, 290px przy 320; chipy potrzebuja lacznie 1139px, wiec jedna linia
   miesci sie dopiero od 1440).
   Wrapper musi tu przestac byc przezroczysty, bo display:contents nie tworzy
   pudelka, ktore da sie przewijac. Regula siedzi w tym pliku, nie w main.css,
   bo inco-wp.css laduje sie POZNIEJ i przy tej samej specyficznosci wygrywa. */
@media ( max-width: 767px ) {
	.filters {
		flex-direction: column;
		/* nowrap jest konieczne: w kontenerze kolumnowym `wrap` liczy szerokosc
		   linii od TRESCI, nie od kontenera, wiec stretch rozciagal etykiete
		   i wiersz do 768px przy oknie 390 i rozpychal strone w poziomie. */
		flex-wrap: nowrap;
		align-items: stretch;
	}

	/* Selektor musi powtorzyc :has(...) z reguly wyzej (linia ~237), bo ta ma
	   trzy klasy specyficznosci i wygrywala z prostym .filters .wp-block-buttons
	   mimo pozniejszej kolejnosci. Zmierzone: chipy szly po jednym w wierszu,
	   9 wierszy i 471px wysokosci, czyli gorzej niz przed zmiana. */
	.filters .wp-block-buttons:has( > .wp-block-button.button-filter ) {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		/* Bez tego kotwica snapa wyrownuje chip do krawedzi scrollportu, a padding
		   lezy w jego wnetrzu - pierwszy chip dostawal scrollLeft 21 i wciecie
		   znikalo. scroll-padding przesuwa punkt zaczepienia o te sama wartosc. */
		scroll-padding-inline: var( --container-padding-x );
		/* Wiersz siega krawedzi ekranu, zeby uciety chip byl sygnalem, ze jest
		   tego wiecej. Bez tego przewijanie konczy sie na marginesie kontenera
		   i wyglada na przypadek. Padding oddaje wciecie pierwszemu chipowi. */
		margin-inline: calc( -1 * var( --container-padding-x ) );
		padding-inline: var( --container-padding-x );
		/* Pasek przewijania schowany: na telefonie i tak go nie ma, a na
		   desktopie w trybie responsywnym psulby wysokosc. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.filters .wp-block-buttons:has( > .wp-block-button.button-filter )::-webkit-scrollbar {
		display: none;
	}

	.filters .wp-block-buttons:has( > .wp-block-button.button-filter ) > .wp-block-button {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}
.wp-block-button.button-filter .wp-block-button__link {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: none;
}

/* Karta-link social (flexisnap/link-card bezposrednio w .social-list):
   design ma <li> wokol <a> - <li> kurczy sie w flexie, a .social-item
   w srodku ma width:100%. U nas <a> jest itemem flexa, wiec width:100%
   liczyloby sie od calej linii i lamalo wiersz. Mapowanie regul <li>. */
@media (max-width: 800px) {
	.social-list > a.social-item {
		width: auto;
		flex: 1 1 0;
		max-width: 375px;
	}
}
@media (max-width: 767px) {
	.social-list > a.social-item {
		flex: 0 0 calc(50% - 10px);
		min-width: 0;
		max-width: none;
	}
}

/* Pary etykieta-wartosc renderuje blok Lista danych (dl > dt+dd 1:1
   z main.css) - adaptacja p.<klasa> ze strong usunieta po migracji
   na dedykowane bloki (2026-08-04). */

/* Finansowanie projektu (inwestycje-eu): dwa akapity w .finance-item
   zamiast dt/dd (kolumna, jak w designie). */
.finance-item > p:first-child {
	font-size: var(--font-size-text);
	font-weight: 400;
	line-height: normal;
	color: var(--color-text-primary);
}
.finance-item > p + p {
	font-size: var(--font-size-text);
	font-weight: 600;
	line-height: normal;
	color: var(--color-text-primary);
}
@media (max-width: 767px) {
	.finance-item > p:first-child,
	.finance-item > p + p { font-size: 14px; }
}

/* Wartosci w wierszach kontaktu: link w akapicie .contact-item__value
   przejmuje wyglad a.contact-item__value z designu. */
.contact-item__value a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.contact-item__value a:hover {
	color: var(--color-primary);
}

/* Linki hoteli (Grupa kapitalowa, core/list): odpowiednik a.company-item__link
   (wiersz flex z ikona www 24px przed tekstem). */
.company-item__hotels li a {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	max-width: 100%;
	margin-top: 10px;
	overflow-wrap: anywhere;
	font-weight: 500;
	color: var(--color-text-secondary);
	text-decoration: underline;
}
.company-item__hotels li a::before {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: url("../images/icon-website.svg") center / contain no-repeat;
}

/* ============================================================
   Artykul (single wpis, szablon single.html + override
   flexisnap-blog-post-single.php). Hero/sidebar emituja klasy
   designu wprost; ponizej TYLKO mapowanie tresci wpisu (bloki
   core w .article-body) na wyglad z _article.scss designu.
   ============================================================ */

/* Chevron okruszkow: main.css (kompilat designu) wskazuje /assets/,
   ktore w WP nie istnieje - podmiana na asset motywu. */
.breadcrumbs__item + .breadcrumbs__item::before {
	background-image: url("../images/icon-breadcrumb-chevron.svg");
}

/* Rytm plaskiej tresci: design grupuje bloki w .article-block
   (60px miedzy grupami, 40px w srodku). Tresc z edytora jest
   plaska: gap 40 + dodatkowe 20 przed naglowkiem nowej sekcji. */
.article-body {
	gap: 40px;
}
.article-body > h2:not(:first-child) {
	margin-top: 20px;
}
.article-body h2 {
	margin: 0;
	font-size: var(--font-size-page-subtitle);
	font-weight: 500;
	line-height: normal;
	color: var(--color-text-primary);
}

/* Lista: core/list jako .article-list (zlote kropki jako ::before,
   design uzywa <img class="article-list__dot">; wizualnie 1:1). */
.article-body ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* li jako block (nie flex): anonimowy flex-item tekstu nie schodzi
   ponizej min-content i rozpychal strone na waskich ekranach. */
.article-body ul li {
	position: relative;
	padding-left: 34px;
	font-size: var(--font-size-element-title);
	font-weight: 500;
	line-height: normal;
	color: var(--color-text-primary);
}
.article-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	background: url("../images/icon-dot.svg") center / contain no-repeat;
}
.article-body ul li strong {
	font-weight: 700;
}
/* Akapit wprowadzajacy przed lista: w designie 10px (grupa
   .article-list-group), flat-gap 40 - 30 = 10. */
.article-body > ul:not(:first-child) {
	margin-top: -30px;
}

/* Kolumny: core/columns jako .article-columns (--top domyslnie,
   --center przez "Wyrownanie w pionie: srodek" w edytorze). */
.article-body .wp-block-columns {
	display: flex;
	gap: 40px;
	margin: 0;
	align-items: flex-start;
}
.article-body .wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}
.article-body .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

/* Kafel obrazu w kompozycji z kolumnami (.article-tile w makiecie): staly
   kadr 360 px z przycieciem, bo projekt rowna tam zdjecie do wysokosci
   sasiedniej kolumny tekstu. */
.article-body .wp-block-column .wp-block-image {
	height: 360px;
	border-radius: var(--radius-button);
	overflow: hidden;
	background: var(--color-bg);
	min-width: 0;
}
.article-body .wp-block-column .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pojedyncze zdjecie w toku tresci zachowuje WLASNE proporcje (zgloszenie
   klienta 22.09: skan dokumentu 641x909 wychodzil jako pasek 883x300 z samej
   gory kartki). Makieta nie ma wzorca dla tego przypadku, bo pokazuje zdjecia
   wylacznie w galerii i w kolumnach; staly kadr pasuje do zdjec poziomych,
   a prawie polowa zdjec we wpisach jest pionowa. Zdjecie szersze od kolumny
   zmniejsza sie, wezsze zostaje w swoim rozmiarze i stoi w osi tekstu. */
.article-body > .wp-block-image {
	height: auto;
	min-width: 0;
}
.article-body > .wp-block-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	margin-inline: auto;
	border-radius: var(--radius-button);
	object-fit: contain;
}

/* Galeria zdjec we wpisie (klient 03.09): kafelki wzorowane na logotypach
   marek ze strony glownej - jednakowy kwadrat, biale tlo, cien, a zdjecie
   w srodku w calosci (contain) z lekko zaokraglonymi rogami. Cztery w rzedzie,
   potem zawijanie. Powiekszenie daje lightbox rdzenia (theme.json,
   settings.blocks.core/image.lightbox).

   Uwaga na wage selektorow: rdzen stosuje regule
   `.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img`
   (1,4,2) z object-fit: cover, wiec kadrowanie nadpisujemy selektorem
   z ta sama lista klas plus .article-body. */
.article-body .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	width: 100%;
	margin: 0;
}
/* Szerokosc kafelka daje siatka, nie rdzen. Rdzen liczy ja w procentach
   regulami o roznej wadze (osobne dla galerii z dwoma i trzema zdjeciami,
   z :first-child:nth-last-child), wiec zamiast licytacji selektorami
   wymuszamy pelna kolumne przez min-width - to wygrywa z kazda szerokoscia. */
.article-body .wp-block-gallery.has-nested-images figure.wp-block-image[class]:not(#individual-image) {
	width: auto;
	min-width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: var(--color-bg);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	overflow: hidden;
}
/* Zdjecie skaluje sie do wolnego miejsca, ale ZACHOWUJE wlasne proporcje
   (max-width/max-height zamiast 100% x 100%). Rozciagniecie pudelka obrazka
   do kwadratu psulo powiekszenie: lightbox rdzenia liczy proporcje ze
   zmierzonego elementu img, wiec podawal kwadrat zamiast poziomego zdjecia. */
.article-body .wp-block-gallery.has-nested-images figure.wp-block-image[class]:not(#individual-image) img,
.article-body .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image[class]:not(#individual-image) img {
	flex: 0 1 auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

/* Ciasniejsze ekrany: kafelek nie moze zejsc do rozmiaru, w ktorym po
   odjeciu paddingu zostaje pare dziesiatek pikseli na zdjecie. */
@media (max-width: 900px) {
	.article-body .wp-block-gallery {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.article-body .wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.article-body .wp-block-gallery.has-nested-images figure.wp-block-image[class]:not(#individual-image) {
		padding: 14px;
		border-radius: 32px;
	}
}
/* Samodzielna galeria po sekcji kolumn = nowy "article-block" w designie
   (60px zamiast 40px odstepu). */
.article-body > .wp-block-columns + .wp-block-gallery {
	margin-top: 20px;
}

/* Rdzenne kolumny stackuja sie ponizej 782px; design dopiero ponizej 761px.
   W pasie 761-781 wymuszamy uklad wierszowy jak w designie. Ponizej 761
   dziala natywne stackowanie core (row + wrap + basis 100%). */
@media (min-width: 761px) and (max-width: 781px) {
	.article-body .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

/* .article-layout (main.css) ma align-items:flex-start; po przejsciu w kolumne
   (<=1200) body bez width przyjmuje szerokosc min-content i wystaje poza
   container (overflow-x). Sidebar dostaje width:100% w main.css, body nie. */
@media (max-width: 1200px) {
	.article-layout > .article-body {
		width: 100%;
	}
}

/* flexisnap/gallery-grid-item: akapity tresci karty bez klasy designu
   (nowe karty z edytora) wygladaja jak .certificate-card__subtitle. */
.certificate-card__content p {
	margin-block: 0;
	font-size: var(--font-size-text);
	font-weight: 400;
	line-height: normal;
	color: var(--color-text-primary);
}

/* Blok Obrazek (flexisnap/image) z linkiem: wrapper <a> ma zachowac geometrie
   div-a z makiety. .brand-tile jest flex z klasy designu; karta dokumentu
   potrzebuje jawnego block (a jest inline z natury). */
a.document-card {
	display: block;
}

/* ============================================================
   Karty opisowe (flexisnap/feature-cards): liczba kart w linii.
   Attr columns dokleja modyfikator .values-list--cols-N; design
   domyslnie klaadzie wszystkie karty w jednej linii (flex: 1).
   Na wezszych ekranach wygrywaja reguly responsywne designu
   (1000px: 2 w linii, 700px: 1) - identycznie jak bez modyfikatora.
   Dziala tak samo na froncie i w kanwie edytora.
   ============================================================ */
.values-list[class*='values-list--cols-'] {
	flex-wrap: wrap;
}
.values-list--cols-2 { --inco-vl-cols: 2; }
.values-list--cols-3 { --inco-vl-cols: 3; }
.values-list--cols-4 { --inco-vl-cols: 4; }
.values-list--cols-5 { --inco-vl-cols: 5; }
.values-list--cols-6 { --inco-vl-cols: 6; }
.values-list[class*='values-list--cols-'] > .value-card {
	flex: 0 1
		calc(
			(100% - (var(--inco-vl-cols) - 1) * 60px) / var(--inco-vl-cols)
		);
}

@media (max-width: 1000px) {
	.values-list[class*='values-list--cols-'] > .value-card {
		flex: 1 1 calc(50% - 20px);
	}
}

@media (max-width: 700px) {
	.values-list[class*='values-list--cols-'] > .value-card {
		flex: 1 1 100%;
	}
}