/*
 * Wpis bloga (single.php) — szablon, nie blok: struktura i wygląd w jednym
 * arkuszu. Bloki rdzenia w treści (akapit, nagłówek H2, lista) są stylowane
 * WYŁĄCZNIE pod `.s-wpis__body` — nic poza treścią wpisu się nie zmienia.
 * Bloki `site/ramka` i `site/wpis-cta` mają własne arkusze.
 * Wartości: AP §5.3, §4.7; `Blog - wpis.dc.html` L41–55, L109–119, L228–361.
 */

/* --- 1. Nagłówek wpisu ------------------------------------------------------ */

.s-wpis-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(47px, 7.64vw, 84px) 24px 40px;
	background: transparent;
}

.s-wpis-hero__glow,
.s-wpis-hero__halo,
.s-wpis-hero__rings,
.s-wpis-hero__lines,
.s-wpis-hero__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.s-wpis-hero__glow {
	inset: -14%;
	background: radial-gradient(60% 66% at 60% -10%, #3f5c88 0%, #314971 14%, #243550 28%, #1a2639 42%, rgba(17, 25, 40, 0.7) 58%, rgba(11, 17, 30, 0.28) 78%, rgba(9, 14, 26, 0) 100%);
	-webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 74%);
	mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 74%);
}

.s-wpis-hero__halo {
	background: radial-gradient(26% 26% at 60% 0%, rgba(120, 164, 235, 0.18) 0%, rgba(90, 130, 200, 0.05) 54%, rgba(255, 255, 255, 0) 100%);
}

.s-wpis-hero__rings {
	width: 100%;
	height: 100%;
	opacity: 0.45;
	stroke: rgba(255, 255, 255, 0.13);
	-webkit-mask-image: radial-gradient(66% 74% at 60% 0%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 80%);
	mask-image: radial-gradient(66% 74% at 60% 0%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 80%);
}

.s-wpis-hero__lines {
	opacity: 0.12;
	background-image: repeating-linear-gradient(90deg, rgba(214, 232, 255, 0.9) 0 1px, rgba(255, 255, 255, 0) 1px 34px);
	-webkit-mask-image: radial-gradient(56% 66% at 60% 6%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 78%);
	mask-image: radial-gradient(56% 66% at 60% 6%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 78%);
}

.s-wpis-hero__shade {
	background: linear-gradient(180deg, rgba(7, 11, 19, 0.38) 0%, rgba(7, 11, 19, 0) 30%, rgba(7, 11, 19, 0.08) 66%, rgba(7, 11, 19, 0.26) 90%, rgba(7, 11, 19, 0) 100%);
}

.s-wpis-hero__wrap {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 4px;
}

.s-wpis-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
}

.s-wpis-hero__back {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px 8px 13px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(226, 235, 250, 0.86);
	transition: color 0.2s ease;
}

/* Pigułka (obrys i tło) to ::before, nie ramka linku: na telefonie link
   rośnie do 44 px celu dotyku (padding + ujemny margines), a pigułka
   zostaje w rozmiarze designu (32 px). */
.s-wpis-hero__back::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.s-wpis-hero__back:hover {
	color: #fff;
}

.s-wpis-hero__back:hover::before {
	border-color: rgba(154, 190, 255, 0.6);
	background: rgba(22, 103, 230, 0.24);
}

.s-wpis-hero__tag {
	padding: 6px 13px;
	border: 1px solid var(--pw-line-accent);
	border-radius: 100px;
	background: rgba(22, 103, 230, 0.18);
	color: var(--pw-link);
}

.s-wpis-hero__title {
	margin: 20px 0 0;
	font-size: clamp(33px, 4.6vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	font-weight: 800;
	color: #fff;
	text-wrap: pretty;
}

.s-wpis-hero__lead {
	margin: 20px 0 0;
	font-size: 19px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}

.s-wpis-hero__author {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--pw-line-dim);
}

.s-wpis-hero__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--pw-blue), #66b4ff);
	font-size: 15px;
	font-weight: 800;
	color: #fff;
}

.s-wpis-hero__avatar.is-photo {
	object-fit: cover;
}

.s-wpis-hero__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.s-wpis-hero__name {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.s-wpis-hero__role {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.5);
}

/* --- 2. Okładka ------------------------------------------------------------- */

.s-wpis-cover {
	padding: 0 24px 20px;
	background: transparent;
}

.s-wpis-cover__frame {
	position: relative;
	max-width: 1060px;
	height: clamp(180px, 26vw, 300px);
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 28px;
	background: linear-gradient(150deg, #1c3a72 0%, #152951 46%, #101b33 100%);
}

.s-wpis-cover__glow,
.s-wpis-cover__lines,
.s-wpis-cover__shade,
.s-wpis-cover__img {
	position: absolute;
	inset: 0;
}

.s-wpis-cover__glow {
	background:
		radial-gradient(62% 72% at 22% 18%, rgba(60, 140, 255, 0.58) 0%, rgba(22, 103, 230, 0) 72%),
		radial-gradient(54% 62% at 86% 92%, rgba(130, 116, 255, 0.44) 0%, rgba(111, 96, 235, 0) 72%);
}

.s-wpis-cover__lines {
	opacity: 0.16;
	background-image: repeating-linear-gradient(90deg, rgba(214, 232, 255, 0.9) 0 1px, rgba(255, 255, 255, 0) 1px 28px);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0) 100%);
}

.s-wpis-cover__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
}

.s-wpis-cover__shade {
	background: linear-gradient(195deg, rgba(9, 17, 32, 0.26) 0%, rgba(9, 17, 32, 0.52) 70%, rgba(9, 17, 32, 0.72) 100%);
}

/* --- 3. Treść i spis treści ------------------------------------------------- */

.s-wpis {
	padding: 44px 24px clamp(45px, 7.27vw, 80px);
	background: transparent;
}

.s-wpis__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: 56px;
	align-items: start;
	max-width: 1060px;
	margin: 0 auto;
}

.s-wpis__body {
	min-width: 0;
	font-size: 17.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.84);
}

.s-wpis__body > p {
	margin: 0 0 22px;
}

.s-wpis__body > p:has(+ .s-wpis-cta),
.s-wpis__body > :last-child {
	margin-bottom: 0;
}

.s-wpis__body > h2 {
	scroll-margin-top: 90px;
	margin: 42px 0 14px;
	font-family: inherit;
	font-size: 27px;
	line-height: 1.16;
	letter-spacing: -0.035em;
	font-weight: 800;
	color: #fff;
}

.s-wpis__body > ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

/* Kropka to ::before, nie span w treści (design: `<span aria-hidden>`) —
   ozdobnik listy, 6 px, 9 px od góry wiersza, 12 px przed tekstem. */
.s-wpis__body > ul > li {
	position: relative;
	padding-left: 18px;
}

.s-wpis__body > ul > li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pw-blue);
}

.s-wpis__body a:not([class]) {
	color: var(--pw-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.s-wpis__toc-m {
	display: none;
	margin-bottom: 26px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.05);
}

.s-wpis__toc-sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 18px;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.s-wpis__toc-chev {
	flex: none;
}

.s-wpis__toc-list {
	display: flex;
	flex-direction: column;
	padding: 0 18px 10px;
}

.s-wpis__toc-list .s-wpis__toc-link {
	display: block;
	padding: 11px 0;
}

.s-wpis__aside {
	position: sticky;
	top: 96px;
}

.s-wpis__toc {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-wpis__toc-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.s-wpis__toc-link {
	font-size: 14.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.74);
	transition: color 0.2s ease;
}

.s-wpis__toc-link:hover {
	color: var(--pw-link);
}

/* --- 4. Powiązana usługa ---------------------------------------------------- */

.s-wpis-rel {
	padding: 0 24px clamp(40px, 6.55vw, 72px);
	background: transparent;
}

.s-wpis-rel__wrap,
.s-wpis-more__wrap {
	max-width: 1060px;
	margin: 0 auto;
}

.s-wpis-rel__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	padding: 28px 32px;
	border: 1px solid var(--pw-line-accent);
	border-radius: 26px;
	background: linear-gradient(160deg, rgba(22, 103, 230, 0.2) 0%, rgba(255, 255, 255, 0.05) 60%);
	color: inherit;
	transition: transform 0.3s var(--pw-ease);
}

.s-wpis-rel__link:hover {
	color: inherit;
	transform: translateY(-4px);
}

.s-wpis-rel__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pw-link);
}

.s-wpis-rel__title {
	display: block;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #fff;
}

.s-wpis-rel__label + .s-wpis-rel__title {
	margin-top: 8px;
}

.s-wpis-rel__btn {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 24px;
	border-radius: 100px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: var(--pw-ink-dark);
}

/* --- 5. Czytaj dalej -------------------------------------------------------- */

.s-wpis-more {
	padding: 0 24px clamp(54px, 8.73vw, 96px);
	background: transparent;
}

.s-wpis-more__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.s-wpis-more__title {
	margin: 0;
	font-family: inherit;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.1;
	letter-spacing: -0.04em;
	font-weight: 800;
	color: #fff;
}

.s-wpis-more__all {
	font-size: 15px;
	font-weight: 600;
	color: var(--pw-link);
}

.s-wpis-more__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.s-wpis-more__card {
	display: flex;
	flex-direction: column;
	padding: 28px 30px 30px;
	border: 1px solid var(--pw-line);
	border-radius: 24px;
	background: var(--pw-surface);
	color: inherit;
	transition: transform 0.35s var(--pw-ease), border-color 0.35s, background 0.35s;
}

.s-wpis-more__card:hover {
	border-color: rgba(122, 166, 255, 0.4);
	color: inherit;
	transform: translateY(-6px);
}

.s-wpis-more__tag {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pw-link);
}

.s-wpis-more__name {
	margin-top: 10px;
	font-size: 20px;
	line-height: 1.22;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: #fff;
}

.s-wpis-more__short {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.58);
}

.s-wpis-hero__back:focus-visible,
.s-wpis__toc-link:focus-visible,
.s-wpis-rel__link:focus-visible,
.s-wpis-more__all:focus-visible,
.s-wpis-more__card:focus-visible {
	outline: 2px solid var(--pw-link);
	outline-offset: 3px;
}

/* --- Tablet i telefon --------------------------------------------------------- */

@media (max-width: 900px) {
	.s-wpis__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.s-wpis__aside {
		display: none;
	}

	.s-wpis__toc-m {
		display: block;
	}

	.s-wpis-more__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	/* Sekcje z `data-wrap` w designie: 16 px od krawędzi + 4 px wrappera
	   (L109–112). Okładka i treść nie mają go na dziecku sekcji — zostaje
	   24 px, a `<article data-wrap>` dostaje własne 4 px. */
	.s-wpis-hero,
	.s-wpis-rel,
	.s-wpis-more {
		padding-left: 16px;
		padding-right: 16px;
	}

	.s-wpis-rel__wrap,
	.s-wpis-more__wrap,
	.s-wpis__body {
		padding-left: 4px;
		padding-right: 4px;
	}

	.s-wpis-hero__title {
		font-size: 33px;
	}

	.s-wpis__body p {
		font-size: 16.5px;
	}

	/* Design: 12–13,5 px; bramka mobile.textSize ≥ 14 px (deviations).
	   Interlinie = wysokość wiersza designu, więc nic się nie przesuwa. */
	.s-wpis-hero__meta,
	.s-wpis-hero__back,
	.s-wpis-more__tag {
		font-size: 14px;
		line-height: 16px;
	}

	.s-wpis-hero__role {
		font-size: 14px;
		line-height: 17px;
	}

	.s-wpis-rel__label {
		font-size: 14px;
		line-height: 15px;
	}

	/* Cele dotyku 44 px (bramka mobile.tapTargets) bez przesuwania układu:
	   większy padding oddany ujemnym marginesem (deviations). */
	.s-wpis-hero__back {
		margin-block: -6px;
		padding-block: 14px;
	}

	.s-wpis-hero__back::before {
		inset: 6px 0;
	}

	.s-wpis-more__all {
		margin-block: -12.5px;
		padding-block: 12.5px;
	}

	.s-wpis__toc-list .s-wpis__toc-link {
		margin-block: -0.5px;
		padding-block: 11.5px;
	}
}

@media (max-width: 400px) {
	.s-wpis-hero__title {
		letter-spacing: -0.035em;
	}
}