/*
 * Stickerly — boks „W skrócie" na wpisie, styl B v2.
 *
 * ⚠️ Prefiks klas: `st2-tldr`.
 *
 * ⚠️ ZWARTOŚĆ BIERZE SIĘ Z UKŁADU, NIE Z MNIEJSZEJ CZCIONKI.
 * v1 kładła streszczenie i listę atutów jeden pod drugim, przez co boks miał
 * ~300 px wysokości na starcie wpisu. Dwie kolumny obok siebie schodzą do ~190
 * przy tej samej treści i tym samym stopniu pisma.
 */

.st2-tldr {
	/*
	 * ⚠️ KONTENER I SIATKA MUSZĄ BYĆ NA RÓŻNYCH ELEMENTACH.
	 * Element deklarujący `container-type` NIE MOŻE odpytywać sam siebie —
	 * `@container` widzi wyłącznie przodków. Pierwsza wersja miała jedno
	 * i drugie na `.st2-tldr` i zapytanie po prostu nigdy nie łapało.
	 * Stąd wewnętrzne `.st2-tldr-srodek`, które trzyma siatkę.
	 */
	container-type: inline-size;
	margin: 0 0 clamp(1.2rem, 2.6vw, 1.8rem);
	padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.4rem);
	/* ⚠️ Krawędź TYLKO przy lewym boku. Obwódka dookoła robi z boksu kolejny
	   prostokąt w tekście; jedna gruba kreska mówi „to jest wyróżniony
	   fragment tego artykułu", a nie „to jest wstawka". */
	border-left: 4px solid var(--st2-granat);
	border-radius: 0 var(--st2-r-karta) var(--st2-r-karta) 0;
	background: linear-gradient(122deg, var(--st2-blekit-mgla) 0%, #eaf0fd 100%);
}

.st2-tldr-srodek {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(0.9rem, 2.4vw, 1.8rem);
}

/* ---------- kolumna główna ---------- */

.st2-tldr-meta {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.5rem;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--st2-granat);
}

.st2-tldr-meta strong { font-weight: 700; }
.st2-tldr-kropka { color: var(--st2-blekit); }
.st2-tldr-czas { font-weight: 500; letter-spacing: 0.06em; color: var(--st2-szary); }

.st2-tldr-ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--st2-r-znacznik);
	background: #fff;
	color: var(--st2-granat);
	box-shadow: var(--st2-cien-spok);
	flex: 0 0 auto;
}

.st2-tldr-ikona svg { width: 16px; height: 16px; }

/*
 * ⚠️ KOLORY NADAWANE JAWNIE, NIE DZIEDZICZENIEM.
 * Boks siedzi WEWNĄTRZ treści wpisu, gdzie obowiązuje `.st-wpis-tresc p
 * { color: #2b303b }`. Reguła wskazująca element wprost zawsze bije
 * dziedziczenie — to nas kosztowało nieczytelny boks produktowy (07.09).
 */
.st2-tldr-lead {
	margin: 0;
	font-size: clamp(0.98rem, 1.5vw, 1.1rem);
	font-weight: 700;
	line-height: 1.42;
	color: var(--st2-grafit);
}

.st2-tldr-tresc {
	margin: 0.45rem 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--st2-szary);
}

/* ---------- kolumna boczna ---------- */

.st2-tldr-boczna {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: clamp(0.9rem, 2.4vw, 1.8rem);
	border-left: 1px solid rgba(52, 74, 144, 0.16);
}

.st2-tldr-punkty { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }

.st2-tldr-punkty li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.35;
	color: var(--st2-grafit);
}

.st2-tldr-dopisek {
	position: absolute;
	right: -0.5rem;
	bottom: -1.6rem;
	width: 118px;
	text-align: right;
	pointer-events: none;
}

.st2-tldr-dopisek p { margin: 0; font-size: 0.88rem; }
.st2-tldr-strzalka { width: 62px; height: auto; margin-left: auto; }

/* ============================================================== WĘŻSZE */

@container (max-width: 640px) {
	.st2-tldr-srodek { grid-template-columns: 1fr; gap: 0.8rem; }

	/* Kreska pionowa nie ma sensu, gdy kolumny stoją jedna pod drugą. */
	.st2-tldr-boczna { padding-left: 0; padding-top: 0.8rem; border-left: 0; border-top: 1px solid rgba(52, 74, 144, 0.16); }
	.st2-tldr-dopisek { display: none; }
}