/* KD – pasek meta (czas czytania, ostatnia aktualizacja) + przycisk „kopiuj link do sekcji”. */

/* ---------- Pasek meta extra ---------- */
.kd-post-meta-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	/* Mały odstęp od linii autora powyżej (nie za duży). */
	margin: 4px 0 6px;
	/* Nagłówek motywu to flex column; linia autora ma order:2, a ten pasek domyślnie
	   order:0 (lądował NAD autorem). Ten sam order + bycie po autorze w źródle = ląduje POD nim. */
	order: 2;
	/* width:100% + flex-basis:100% — bez tego (gdy to flex-item rodzica) kontener
	   zwijał się do szerokości treści i justify-content:center nie centrował. */
	width: 100%;
	flex-basis: 100%;
	max-width: 100%;
	/* Zabezpieczenie przed poziomym scrollem na wąskich ekranach. */
	overflow-wrap: anywhere;
}
.kd-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* Dopasowanie do linii autora pod spodem (ten sam rozmiar/font). */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.2;
	color: #6b6b6b;
	/* Chip nie rozdyma się i nie wypycha sąsiadów; zawija się jako całość. */
	flex: 0 0 auto;
	max-width: 100%;
}
.kd-meta-chip svg {
	/* Sztywny rozmiar ikony — SVG nie rozdyma się i nie skaluje z fontem. */
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	/* Ten sam czerwono-pomarańcz co ikony meta motywu (próbka piksela #fc3000). */
	color: #fc3000;
}
.kd-meta-chip time {
	color: #010101;
	font-weight: 600;
}

/* ---------- Mobile: pasek meta skaluje się sensownie ---------- */
@media (max-width: 575px) {
	.kd-post-meta-extra {
		gap: 6px 12px;
		margin: 12px 0 6px;
	}
	.kd-meta-chip {
		font-size: 14px;
		gap: 6px;
		/* Może zająć całą szerokość rzędu, żeby nie nachodzić na autora/zdjęcie. */
		flex: 0 1 auto;
	}
	.kd-meta-chip svg {
		width: 16px;
		height: 16px;
	}
}

/* ---------- Kopiuj link do sekcji ---------- */
.pxl-post-content .kd-has-anchor {
	/* miejsce na przycisk obok nagłówka */
	scroll-margin-top: 90px;
}
.kd-copy-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: 10px;
	padding: 0;
	vertical-align: middle;
	border: 1px solid #ececec;
	border-radius: 8px;
	background: #fff;
	color: #b5b5b5;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
	position: relative;
}
.kd-has-anchor:hover .kd-copy-link,
.kd-copy-link:focus-visible {
	opacity: 1;
}
.kd-copy-link:hover {
	color: #fb761d;
	border-color: #fb761d;
}
.kd-copy-link__ok {
	display: none;
	color: #1a9e54;
	font-size: 16px;
	font-weight: 700;
}
.kd-copy-link.is-copied {
	opacity: 1;
	color: #1a9e54;
	border-color: #1a9e54;
}
.kd-copy-link.is-copied .kd-copy-link__chain {
	display: none;
}
.kd-copy-link.is-copied .kd-copy-link__ok {
	display: inline;
}

/* Na dotyku (brak hover) — pokaż przyciski zawsze, lekko wyszarzone */
@media (hover: none) {
	.kd-copy-link {
		opacity: .55;
		width: 38px;
		height: 38px;
	}
}