/*
 * Lista wpisów (home.php, parts/post-card.php) — szablon, nie blok: struktura
 * i wygląd w jednym arkuszu. Nagłówek i pas CTA listy to bloki strony
 * (site/hero-srodek wariant blog, site/cta) z własnymi arkuszami.
 * Wartości: AP §5.2, S35; `Blog.dc.html` L47–55, L129, L279–336.
 */

/* --- Sekcje ---------------------------------------------------------------- */

.s-blog {
	position: relative;
	background: transparent;
}

.s-blog.is-chips {
	padding: 6px 24px 0;
}

.s-blog.is-feat {
	padding: 34px 24px 0;
}

.s-blog.is-list {
	padding: 34px 24px clamp(54px, 8.73vw, 96px);
}

.s-blog__wrap,
.s-blog__chips {
	max-width: var(--pw-wrap);
	margin: 0 auto;
	padding: 0 4px;
}

/* --- Chipy kategorii (S35) -------------------------------------------------- */

.s-blog__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
}

/* Filtrują tylko w przeglądarce (js/site.js): bez JS nie ma czego klikać,
   a wszystkie wpisy są widoczne. */
html:not(.js) .s-blog.is-chips {
	display: none;
}

.s-blog__chip {
	height: 40px;
	padding: 0 19px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.08);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s var(--pw-ease);
}

.s-blog__chip:hover {
	border-color: var(--pw-line-hover);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	transform: translateY(-1px);
}

.s-blog__chip:active {
	transform: translateY(0) scale(0.97);
}

.s-blog__chip[aria-pressed="true"] {
	border-color: #fff;
	background: #fff;
	color: var(--pw-ink-dark);
}

.s-blog__chip:focus-visible {
	outline: 2px solid var(--pw-link);
	outline-offset: 3px;
}

/* --- Wyróżniony wpis --------------------------------------------------------- */

.s-blog-feat {
	position: relative;
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	max-width: var(--pw-wrap);
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 30px;
	background: var(--pw-surface);
	box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
	color: inherit;
	transition: transform 0.4s var(--pw-ease), box-shadow 0.4s, border-color 0.4s;
}

.s-blog-feat:hover {
	border-color: var(--pw-line-hover);
	box-shadow: 0 48px 90px -42px rgba(6, 18, 44, 0.95);
	color: inherit;
	transform: translateY(-6px);
}

.s-blog-feat:focus-visible,
.s-blog-card:focus-visible {
	outline: 2px solid var(--pw-link);
	outline-offset: 3px;
}

.s-blog-feat__cover {
	position: relative;
	min-height: 340px;
	overflow: hidden;
	background: linear-gradient(150deg, #1c3a72 0%, rgba(21, 41, 81, 0.5) 40%, #101b33 100%);
}

.s-blog-feat__glow,
.s-blog-feat__shade,
.s-blog-feat__lines,
.s-blog-card__shade,
.s-blog-card__lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.s-blog-feat__glow {
	background:
		radial-gradient(62% 64% at 26% 18%, rgba(60, 140, 255, 0.6) 0%, rgba(22, 103, 230, 0) 72%),
		radial-gradient(54% 54% at 86% 90%, rgba(130, 116, 255, 0.45) 0%, rgba(111, 96, 235, 0) 72%);
}

.s-blog-feat__img,
.s-blog-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-blog-feat__img {
	opacity: 0.9;
}

.s-blog-feat__shade {
	background: linear-gradient(200deg, rgba(9, 17, 32, 0.32) 0%, rgba(9, 17, 32, 0.62) 68%, rgba(9, 17, 32, 0.8) 100%);
}

.s-blog-feat__lines {
	opacity: 0.18;
	background-image: repeating-linear-gradient(90deg, rgba(214, 232, 255, 0.9) 0 1px, rgba(255, 255, 255, 0) 1px 26px);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0) 98%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0) 98%);
}

.s-blog-feat__badge {
	position: absolute;
	top: 26px;
	left: 26px;
	padding: 7px 14px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.94);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #1147a8;
}

.s-blog-feat__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 42px 44px;
}

.s-blog-feat__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.58);
}

.s-blog-feat__tag {
	color: var(--pw-link);
}

.s-blog-feat__title {
	margin: 16px 0 0;
	font-size: clamp(26px, 2.8vw, 38px);
	line-height: 1.08;
	letter-spacing: -0.04em;
	font-weight: 800;
	color: #fff;
	text-wrap: pretty;
}

.s-blog-feat__lead {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

.s-blog-feat__more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 9px;
	height: 48px;
	margin-top: 28px;
	padding: 0 26px;
	border-radius: 100px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: var(--pw-ink-dark);
}

/* --- Siatka wpisów -------------------------------------------------------- */

.s-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 20px;
}

.s-blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pw-line);
	border-radius: 26px;
	background: var(--pw-surface);
	color: inherit;
	transition: transform 0.4s var(--pw-ease), box-shadow 0.4s, border-color 0.4s, background 0.4s;
}

.s-blog-card:hover {
	border-color: var(--pw-line-hover);
	background: var(--pw-surface-hover);
	box-shadow: 0 44px 70px -40px rgba(6, 18, 44, 0.95);
	color: inherit;
	transform: translateY(-8px);
}

/* `hidden` przegrywa z `display: flex` klasy — jawnie. */
.s-blog-card[hidden],
.s-blog__empty[hidden] {
	display: none;
}

.s-blog-card__cover {
	position: relative;
	height: 152px;
	overflow: hidden;
	background: #101b33;
}

.s-blog-card__img {
	opacity: 0.88;
}

.s-blog-card__shade {
	background: linear-gradient(190deg, rgba(9, 17, 32, 0.22) 0%, rgba(9, 17, 32, 0.55) 72%, rgba(9, 17, 32, 0.72) 100%);
}

.s-blog-card__lines {
	opacity: 0.16;
	background-image: repeating-linear-gradient(90deg, rgba(214, 232, 255, 0.9) 0 1px, rgba(255, 255, 255, 0) 1px 24px);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.8) 64%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.8) 64%, rgba(0, 0, 0, 0) 100%);
}

.s-blog-card__num {
	position: absolute;
	right: 18px;
	bottom: 12px;
	font-size: 54px;
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.18);
}

.s-blog-card__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 13px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	font-weight: 700;
	color: #1147a8;
}

.s-blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 26px 28px;
}

.s-blog-card__meta {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

.s-blog-card__title {
	margin: 10px 0 0;
	font-size: 20px;
	line-height: 1.22;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: #fff;
	text-wrap: pretty;
}

.s-blog-card__lead {
	margin: 11px 0 0;
	font-size: 15px;
	line-height: 1.58;
	color: rgba(255, 255, 255, 0.68);
}

.s-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--pw-link);
}

.s-blog__empty {
	margin-top: 8px;
	padding: 56px 24px;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: 26px;
	font-size: 16px;
	text-align: center;
	color: rgba(255, 255, 255, 0.62);
}

.s-blog__empty-link {
	font-weight: 700;
	color: var(--pw-link);
}

/* --- Telefon --------------------------------------------------------------- */

@media (max-width: 900px) {
	.s-blog__chip {
		min-height: 44px;
	}

	.s-blog-feat {
		grid-template-columns: 1fr;
	}

	.s-blog-feat__cover {
		height: 200px;
		min-height: 0;
	}

	.s-blog__grid {
		grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	}
}

@media (max-width: 640px) {
	/* Sekcje z `data-wrap` w designie: 16 px od krawędzi + 4 px wrappera.
	   Duża karta nie ma `data-wrap` — zostaje 24 px (Blog L111–112, L287). */
	.s-blog.is-chips,
	.s-blog.is-list {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Design: 12–13,5 px; bramka mobile.textSize ≥ 14 px (deviations).
	   Interlinie = wysokość wiersza designu, pola i pigułki się nie przesuwają. */
	.s-blog__chip {
		font-size: 14px;
	}

	.s-blog-feat__meta,
	.s-blog-card__meta {
		font-size: 14px;
		line-height: 16px;
	}

	.s-blog-feat__badge,
	.s-blog-card__tag {
		font-size: 14px;
		line-height: 15px;
	}
}