/* ==========================================================================
   Blog instal-complex.pl
   Tokeny wyciągnięte z aktualnego CSS strony:
   granat  #030F27  (--e-global-color-secondary; pasek nad menu w headerze #99
                     i tło stopki #115)
   akcent  #DAB457  (złoty pasek i linki w menu), hover #BE9B45
   tekst #333333, szary #878787, miękkie tło #F1F1F1
   nagłówki Montserrat 800 uppercase, tekst Poppins, kontener 1140px,
   radius 0, cień 0 0 13px -4px rgba(0,0,0,.25)
   Breakpointy: desktop >=1025, tablet <=1024, mobile <=640

   UWAGA SPECYFICZNOŚĆ: kit Elementora definiuje `.elementor-kit-17 h1..h6`
   (0,1,1) i wygrywa z regułami jednoklasowymi (0,1,0). Wszystkie reguły
   dla nagłówków są tu poprzedzone przodkiem (.icx-blog / .icx-hero),
   co daje (0,2,0) i pozwala uniknąć !important.
   ========================================================================== */

.icx-blog,
.icx-hero {
	--icx-navy: #030F27;
	--icx-navy-rgb: 3, 15, 39;
	--icx-accent: #DAB457;
	--icx-accent-hover: #BE9B45;
	--icx-text: #333333;
	--icx-muted: #878787;
	--icx-soft: #F1F1F1;
	--icx-bright: #FFFFFF;
	--icx-container: 1140px;
	--icx-radius: 0px;
	--icx-overlay: 0.72;
	--icx-shadow: 0px 0px 13px -4px rgba(0, 0, 0, 0.25);
	--icx-shadow-hover: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
	--icx-heading-font: "Montserrat", Sans-serif;
	--icx-body-font: "Poppins", Sans-serif;
}

.icx-container {
	width: 100%;
	max-width: var(--icx-container);
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* =========================================================== HERO (baza) ===
   Header (Elementor #99) jest w normalnym przepływie dokumentu - nie ma
   position:sticky/fixed/absolute - więc hero nie nachodzi na menu i nie
   wymaga offsetu górnego. Reguła .elementor-sticky--active to zabezpieczenie
   na wypadek włączenia sticky headera w przyszłości. */

.icx-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 300px;
	padding: 60px 15px;
	background-color: var(--icx-navy);
	box-sizing: border-box;
	overflow: hidden;
}

.elementor-sticky--active + .icx-hero,
body.icx-has-sticky-header .icx-hero {
	margin-top: var(--icx-header-height, 0px);
}

/* Wariant ze zdjęciem (pojedynczy wpis) - URL wstrzykiwany przez
   --icx-hero-img (stała ICX_SINGLE_HERO_ID w functions.php). */
.icx-hero--image {
	min-height: 420px;
	background-image: var(--icx-hero-img);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

.icx-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(var(--icx-navy-rgb), var(--icx-overlay));
	pointer-events: none;
}

.icx-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	max-width: var(--icx-container);
	margin: 0 auto;
	text-align: center;
}

.icx-hero .icx-breadcrumb {
	font-family: var(--icx-heading-font);
	line-height: 1.4;
	color: var(--icx-bright);
}

.icx-hero .icx-breadcrumb__item,
.icx-hero .icx-breadcrumb__item:visited {
	color: var(--icx-bright);
	text-decoration: none;
	transition: color 0.3s;
}

.icx-hero .icx-breadcrumb__item:hover,
.icx-hero .icx-breadcrumb__item:focus {
	color: var(--icx-accent);
	text-decoration: none;
}

.icx-hero .icx-breadcrumb__sep {
	display: inline-block;
	margin: 0 10px;
	color: var(--icx-bright);
	opacity: 0.6;
}

.icx-hero .icx-breadcrumb__current {
	color: var(--icx-accent);
}

/* Lista /blog/ - breadcrumb pełni rolę widocznego nagłówka */
.icx-hero--plain .icx-breadcrumb {
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: normal;
}

/* Pojedynczy wpis - breadcrumb podrzędny wobec H1 */
.icx-hero--image .icx-breadcrumb {
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
}

.icx-hero .icx-hero__title {
	max-width: 1000px;
	margin: 0;
	font-family: var(--icx-heading-font);
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: center;
	color: var(--icx-bright);
	overflow-wrap: break-word;
}

/* Odstęp od H1 = gap flexa (16px) + margin-top (8px) = 24px.
   Na /blog/ H1 jest position:absolute (screen-reader-text), więc nie jest
   flex-itemem i nie generuje dodatkowej przerwy - dystans pozostaje 24px. */
.icx-hero__rule {
	display: block;
	width: 170px;
	height: 2px;
	margin-top: 8px;
	background-color: var(--icx-accent);
}

/* ======================================================== LISTA WPISÓW === */

.icx-blog {
	font-family: var(--icx-body-font);
	color: var(--icx-text);
	padding-bottom: 100px;
}

/* Motyw rodzic ogranicza szerokość .site-main i wymusza
   .post .wp-post-image{max-height:500px} - neutralizujemy oba. */
.icx-blog.icx-blog {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.icx-blog .icx-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 36px;
	width: 100%;
	max-width: var(--icx-container);
	margin: 70px auto;
	padding: 0 15px;
	box-sizing: border-box;
}

.icx-blog .icx-grid > .icx-card {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--icx-bright);
	box-shadow: var(--icx-shadow);
	border-bottom: 3px solid var(--icx-accent);
	border-radius: var(--icx-radius);
	transition: box-shadow 0.3s;
}

.icx-blog .icx-grid > .icx-card:hover {
	box-shadow: var(--icx-shadow-hover);
}

.icx-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

/* Obraz flush do krawędzi karty, zawsze 4:3 */
.icx-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: 4 / 3;
	background-color: var(--icx-soft);
}

.icx-blog .icx-card__media img,
.icx-blog .icx-card__media img.wp-post-image,
.icx-blog .icx-card__media .attachment-large {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	margin: 0;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.4s ease;
}

.icx-card__link:hover .icx-card__media img,
.icx-card__link:focus .icx-card__media img {
	transform: scale(1.03);
}

/* Treść karty: padding 0 22px 26px, obraz bez paddingu */
.icx-blog .icx-card__title {
	margin: 16px 0 10px;
	padding: 0 22px;
	font-family: var(--icx-heading-font);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--icx-navy);
	transition: color 0.3s;
}

.icx-card__link:hover .icx-card__title,
.icx-card__link:focus .icx-card__title {
	color: var(--icx-accent-hover);
}

.icx-blog .icx-card__excerpt {
	margin: 0;
	padding: 0 22px 26px;
	font-family: var(--icx-body-font);
	font-size: 15px;
	font-weight: normal;
	line-height: 1.6;
	color: var(--icx-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================ PAGINACJA === */

.icx-pagination {
	max-width: var(--icx-container);
	margin: 0 auto;
	padding: 0 15px;
	text-align: center;
	font-family: var(--icx-heading-font);
}

.icx-pagination .page-numbers {
	display: inline-block;
	min-width: 44px;
	padding: 12px 10px;
	margin: 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--icx-navy);
	background-color: var(--icx-soft);
	border-radius: var(--icx-radius);
	transition: background-color 0.3s, color 0.3s;
}

.icx-pagination .page-numbers:hover,
.icx-pagination .page-numbers:focus,
.icx-pagination .page-numbers.current {
	background-color: var(--icx-accent);
	color: var(--icx-bright);
}

.icx-pagination .page-numbers.dots {
	background-color: transparent;
}

.icx-empty {
	max-width: var(--icx-container);
	margin: 70px auto;
	padding: 0 15px;
	text-align: center;
	font-size: 17px;
}

/* ====================================================== POJEDYNCZY WPIS === */

.icx-blog--single .icx-single {
	padding-top: 70px;
}

.icx-single__content {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
	font-family: var(--icx-body-font);
	font-size: 17px;
	font-weight: normal;
	line-height: 1.8;
	color: var(--icx-text);
}

.icx-single__content > *:first-child {
	margin-top: 0;
}

.icx-single__content p {
	margin: 0 0 20px;
}

.icx-blog .icx-single__content h2 {
	margin: 48px 0 20px;
	font-family: var(--icx-heading-font);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--icx-navy);
}

.icx-blog .icx-single__content h3 {
	margin: 36px 0 16px;
	font-family: var(--icx-heading-font);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--icx-navy);
}

.icx-single__content a {
	color: var(--icx-accent-hover);
	text-decoration: underline;
}

.icx-single__content a:hover,
.icx-single__content a:focus {
	color: var(--icx-accent);
}

.icx-single__content ol {
	margin: 0 0 24px;
	padding-left: 22px;
}

.icx-single__content ul {
	margin: 0 0 24px;
	padding-left: 0;
	list-style: none;
}

.icx-single__content ul > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
}

.icx-single__content ul > li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: var(--icx-accent);
}

.icx-single__content ol > li {
	margin-bottom: 10px;
}

.icx-single__content ol > li::marker {
	color: var(--icx-accent);
	font-weight: 700;
}

.icx-single__content figure {
	margin: 36px 0;
}

.icx-single__content figure img,
.icx-single__content > img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	border-radius: var(--icx-radius);
}

.icx-single__content strong {
	color: var(--icx-navy);
}

/* ================================================================== CTA === */

.icx-cta {
	margin-top: 60px;
}

.icx-cta__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 40px 30px;
	box-sizing: border-box;
	text-align: center;
	background-color: var(--icx-soft);
	border-bottom: 3px solid var(--icx-accent);
	border-radius: var(--icx-radius);
}

.icx-cta__text {
	margin: 0 0 24px;
	font-family: var(--icx-heading-font);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--icx-navy);
}

.icx-btn,
.icx-btn:visited {
	display: inline-block;
	font-family: var(--icx-heading-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--icx-bright);
	background-color: var(--icx-accent);
	padding: 18px 30px;
	border: 0 solid transparent;
	border-radius: var(--icx-radius);
	transition: background-color 0.3s;
}

.icx-btn:hover,
.icx-btn:focus {
	background-color: var(--icx-accent-hover);
	color: var(--icx-bright);
}

/* ================================================= POZOSTAŁE ARTYKUŁY === */

.icx-related {
	margin-top: 80px;
	padding-top: 60px;
	border-top: 1px solid #E5E5E5;
}

.icx-blog .icx-related__heading {
	margin: 0 0 32px;
	font-family: var(--icx-heading-font);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: left;
	color: var(--icx-navy);
}

/* Siatka pozostaje 4-kolumnowa niezależnie od liczby wpisów -
   przy jednym wpisie kafelek zajmuje pierwszą kolumnę, reszta zostaje pusta. */
.icx-related .icx-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: row;
	align-items: stretch;
	justify-items: stretch;
	gap: 28px;
}

.icx-related .icx-related__grid > .icx-tile {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--icx-bright);
	box-shadow: var(--icx-shadow);
	border-bottom: 3px solid var(--icx-accent);
	border-radius: var(--icx-radius);
	transition: box-shadow 0.3s;
}

.icx-related .icx-related__grid > .icx-tile:hover {
	box-shadow: var(--icx-shadow-hover);
}

.icx-tile__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.icx-tile__media {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: 4 / 3;
	background-color: var(--icx-soft);
}

.icx-blog .icx-tile__media img,
.icx-blog .icx-tile__media img.wp-post-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	margin: 0;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.4s ease;
}

.icx-tile__link:hover .icx-tile__media img,
.icx-tile__link:focus .icx-tile__media img {
	transform: scale(1.03);
}

.icx-blog .icx-tile__title {
	margin: 0;
	padding: 16px 18px 20px;
	font-family: var(--icx-heading-font);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--icx-navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.3s;
}

.icx-tile__link:hover .icx-tile__title,
.icx-tile__link:focus .icx-tile__title {
	color: var(--icx-accent-hover);
}

/* ======================================================= TABLET <= 1024 === */

@media (max-width: 1024px) {
	.icx-hero {
		min-height: 220px;
		padding: 60px 15px;
	}

	.icx-hero--image {
		min-height: 320px;
	}

	.icx-blog {
		padding-bottom: 70px;
	}

	.icx-blog .icx-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		margin: 50px auto;
	}

	.icx-blog--single .icx-single {
		padding-top: 50px;
	}

	.icx-related .icx-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ======================================================== MOBILE <= 640 === */

@media (max-width: 640px) {
	.icx-hero {
		min-height: 180px;
		padding: 50px 15px;
	}

	.icx-hero--image {
		min-height: 240px;
	}

	.icx-hero__inner {
		gap: 12px;
	}

	.icx-hero--image .icx-breadcrumb {
		font-size: 14px;
	}

	.icx-hero__rule {
		width: 120px;
		margin-top: 6px;
	}

	.icx-blog {
		padding-bottom: 60px;
	}

	.icx-blog .icx-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		margin: 40px auto;
	}

	.icx-blog--single .icx-single {
		padding-top: 40px;
	}

	.icx-blog .icx-single__content h2 {
		font-size: 23px;
		margin-top: 38px;
	}

	.icx-blog .icx-single__content h3 {
		font-size: 20px;
	}

	.icx-cta {
		margin-top: 45px;
	}

	.icx-cta__inner {
		padding: 30px 20px;
	}

	.icx-cta__text {
		font-size: 18px;
	}

	.icx-related {
		margin-top: 60px;
		padding-top: 45px;
	}

	.icx-blog .icx-related__heading {
		font-size: 20px;
		margin-bottom: 24px;
	}

	.icx-related .icx-related__grid {
		grid-template-columns: 1fr;
	}
}