/* ============================================================
   Agru-Frank — Blog: Archiwum wpisów + Single post
   Tokeny z base.css. Typografia tymczasowa — retype po Księdze znaku.
   ============================================================ */

/* ============================================================
   Blog Hero — migrowany do .u-hero/.u-hero--medium/.u-split (utilities.css),
   1:1 z industry-hero (branze = wyznacznik ukladu, decyzja Tomka 24.07).
   ============================================================ */

/* .blog-hero__eyebrow: .u-eyebrow w utilities.css */

/* .blog-hero__title — wyglad w .u-hero-heading (utilities.css) */

/* .blog-hero__desc -> .u-hero__lead (utilities.css) */

/* ============================================================
   Blog Filter — pills nawigacja kategorii
   Wzorzec: industries.css (taby z aktywnym stanem --blue)
   Zero JS: klik → /category/xyz/ (SEO-friendly)
   ============================================================ */

.blog-filter {
	padding-bottom: var(--space-48);
}

/* .blog-filter__link wyglada jak .agf-chip (base.css) — sama klasa w markupie, tylko is-active tu */
.blog-filter__item.is-active .agf-chip {
	background: var(--blue);
	color: var(--white);
	border-color: var(--blue);
}

/* ============================================================
   Archive: grid kart
   ============================================================ */

.blog-archive__grid {
	display: grid;
	gap: var(--space-32);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.blog-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.blog-archive__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================
   Blog Card
   ============================================================ */

/* Krzyżyki narożne (stałe) + ramka (hover-reveal) — rodzina .u-card--elevated (utilities.css).
   overflow:hidden celowo bez niego (jak .realizations__card) — krzyżyki wystają 8px poza kartę;
   przycięcie zdjęcia/zoomu robią wewnętrzne __image-link/__image (mają własny overflow:hidden). */
.blog-card {
	position: relative;
	background: var(--white);
	box-shadow: var(--shadow-mega);
	display: flex;
	flex-direction: column;
}

.blog-card__image-link {
	display: block;
	overflow: hidden;
}

.blog-card__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__body {
	padding: var(--space-24);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-8);
}

/* Kategoria — niebieski badge, ostre rogi (styleguide nie ma zaokraglen tutaj —
   bylo --radius-sm, ani sharp ani pill, usuniete: user 2026-07-24). Wspolny blok:
   blog-card + single-post. */
.blog-card__category,
.single-post__category {
	display: inline-block;
	background: var(--blue);
	color: var(--white);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: var(--space-4) var(--space-8);   /* 3px->4px, na skalę (bylo poza tokenami) */
	text-decoration: none;
	transition: background var(--transition-fast);
}
.blog-card__category { position: relative; z-index: 1; }   /* nad stretched-link tytulu (przed nim w DOM, inaczej martwy klik) */

.blog-card__category:hover,
.single-post__category:hover {
	background: var(--blue-dark);
}

/* Kategoria + data w jednym wierszu (user 2026-07-24) */
.blog-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
}

.blog-card__date {
	font-size: var(--text-label);
	color: color-mix(in srgb, var(--graphite) 60%, transparent);
}

.blog-card__title {
	font-size: var(--text-lead);
	font-weight: 600;
	line-height: 1.3;
	color: var(--graphite);
	margin: 0;
}

.blog-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}
/* Stretched-link — caly .blog-card__body klikalny do artykulu (user 2026-07-24) */
.blog-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.blog-card__title a:hover {
	color: var(--blue);
}

.blog-card__excerpt {
	font-size: var(--text-body);
	line-height: 1.6;
	color: color-mix(in srgb, var(--graphite) 75%, transparent);
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA — typografia z .u-cta.u-cta--sm (utilities.css), tu tylko layout lokalny */
.blog-card__cta {
	gap: var(--space-8);
	align-self: flex-start;
	margin-top: var(--space-8);
	transition: color var(--transition-fast);
}

.blog-card__cta svg {
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.blog-card__cta:hover svg {
	transform: translateX(3px);
}

/* ============================================================
   Paginacja
   ============================================================ */

.blog-pagination {
	margin-top: var(--space-64);
	display: flex;
	justify-content: center;
}

/* Pasek = jezyk .agf-tabs__bar (tabs.css): tlo graphite 8%, kwadratowe rogi.
   Aktywny numer = agf-tabs__tab[aria-selected] jezyk: biale tlo + niebieska
   ramka hairline + krzyzyki narozne mini (bez mobile-accordion override —
   paginacja to nawigacja, nie panel do chowania). */
.blog-pagination ul {
	list-style: none;
	padding: var(--space-16);
	margin: 0;
	display: flex;
	gap: var(--space-8);
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	background: var(--bg-page);
	background: color-mix(in srgb, var(--graphite) 8%, var(--white));
}

.blog-pagination .page-numbers {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-target-min);
	height: var(--tap-target-min);
	padding: 0 var(--space-8);
	text-decoration: none;
	font-size: var(--text-body);
	font-weight: 600;
	color: var(--graphite);
	transition: background var(--transition-base), color var(--transition-fast);
}

.blog-pagination .page-numbers:hover {
	color: var(--blue);
}

.blog-pagination .page-numbers.current {
	background: var(--white);
	color: var(--graphite);
}

/* Ramka hairline aktywnego numeru (agf-tabs__tab::after) */
.blog-pagination .page-numbers.current::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--blue);
	pointer-events: none;
}

/* Krzyzyki narozne mini aktywnego numeru (agf-tabs__tab::before, skala /2) */
.blog-pagination .page-numbers.current::before {
	content: "";
	position: absolute;
	inset: calc(var(--space-8) / -2);
	pointer-events: none;
	background:
		linear-gradient(var(--blue), var(--blue)) left var(--space-4) top 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 top var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right var(--space-4) top 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 top var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) left var(--space-4) bottom 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 bottom var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right var(--space-4) bottom 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 bottom var(--space-4) / var(--space-8) 1px no-repeat;
}

.blog-pagination .page-numbers.dots {
	pointer-events: none;
}

/* Pusty stan */
/* .blog-archive__empty -> .u-empty-state (utilities.css) */

/* ============================================================
   Single Post
   ============================================================ */

/* Full-bleed featured image — poza .single-post__inner */
.single-post__hero-fullbleed {
	width: 100%;
	max-height: 480px;
	overflow: hidden;
}

.single-post__hero-fullbleed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Treść artykułu: measure czytelna wycentrowana */
.single-post__inner {
	max-width: var(--container-text);
	margin-inline: auto;
}

.single-post__meta {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	margin-bottom: var(--space-16);
	flex-wrap: wrap;
}


.single-post__date {
	font-size: var(--text-label);
	color: color-mix(in srgb, var(--graphite) 60%, transparent);
}

.single-post__title {
	font-size: var(--text-h1);
	font-weight: 600;
	line-height: 1.15;
	color: var(--graphite);
	margin: 0 0 var(--space-32);
}

/* Typografia treści */
.single-post__body {
	font-size: var(--text-body);
	line-height: 1.75;
	color: var(--graphite);
}
/* akapity/listy na miarę czytelności; wrapper __inner zostaje 800 (obrazy/tabele pełnej szer.) */
.single-post__body p,
.single-post__body ul,
.single-post__body ol {
	max-width: var(--measure);
}

.single-post__body p { margin: 0 0 var(--space-24); }

.single-post__body h2 {
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: 1.25;
	margin: var(--space-48) 0 var(--space-24);
	color: var(--graphite);
}

.single-post__body h3 {
	font-size: var(--text-h4);
	font-weight: 600;
	line-height: 1.3;
	margin: var(--space-32) 0 var(--space-16);
	color: var(--graphite);
}

.single-post__body ul,
.single-post__body ol {
	padding-left: var(--space-32);
	margin: 0 0 var(--space-24);
}

.single-post__body li { margin-bottom: var(--space-8); }

.single-post__body a {
	color: var(--blue);
	text-decoration: underline;
}

.single-post__body a:hover { color: var(--blue); }

.single-post__body img {
	margin: var(--space-32) 0;
}

.single-post__body blockquote {
	border-left: 4px solid var(--blue);
	padding-left: var(--space-24);
	margin: var(--space-32) 0;
	font-style: italic;
	color: color-mix(in srgb, var(--graphite) 80%, transparent);
}

/* Tabele (np. kategorie cookies) — pełna szerokość __inner (800px), nie --measure jak akapity. */
.single-post__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-32);
	font-size: var(--text-body);
}
.single-post__body th,
.single-post__body td {
	text-align: left;
	padding: var(--space-8) var(--space-16) var(--space-8) 0;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.single-post__body th {
	font-weight: 600;
	color: var(--graphite);
}

/* ============================================================
   Powiązane artykuły — sekcja "Przeczytaj też"
   ============================================================ */

.blog-related {
	background: color-mix(in srgb, var(--graphite) 5%, var(--white));
	padding: var(--space-64) 0;
}

/* .blog-related__title: typografia z .u-card-title (utilities.css), margin lokalny (sekcja, nie karta) */
.blog-related__title {
	margin: 0 0 var(--space-32);
}

.blog-related__grid {
	display: grid;
	gap: var(--space-32);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.blog-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.blog-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}