/* Blog OdwolAI V2 - Etap 1: architektura techniczna i natywny indeks /blog/.
   Renderowany przez home.php, ladowany wylacznie przez
   odwolai_v2_is_blog_index() (is_home() && !is_front_page()). Wszystkie
   selektory izolowane pod .oai-site .oai-blog-*, osobna przestrzen klas od
   pozostalych podstron. Etap 2 (single-post.php) i Etap 3 (category.php)
   nie zostaly jeszcze wdrozone - ten plik zawiera wylacznie CSS indeksu.

   Kierunek: nowoczesny magazyn ekspercki, nie katalog produktow. Duzo
   bieli, granatowa typografia, cyjan wylacznie jako akcent (eyebrow,
   aktywny temat, podkreslenia linkow). Featured article ma najwiekszy
   ciezar wizualny (asymetryczny uklad zdjecie/tresc od 1024px), karty
   "Najnowsze poradniki" mniejszy - prosta siatka 2 kolumn bez ciezkich
   cieni i bez gradientow.

   Placeholder brakujacego featured image to plaska, jasna plama w tonie
   granatu (bez gradientu - zadanie wprost zabrania gradientow
   dekoracyjnych w tym pliku), zachowana proporcja 4:5 (nowy docelowy
   standard obrazow Bloga, PLAN_BLOG_v1.0.md), aria-hidden.

   Rzeczywiste featured images (prawdziwy <img>, nie placeholder) NIE maja
   wymuszonego aspect-ratio ani object-fit - renderuja sie w naturalnych
   proporcjach zrodla (width:100%; height:auto;). Powod: istniejace legacy
   wpisy maja rozne, niespojne proporcje zdjec; wymuszony kontener 16:9 z
   object-fit:cover je przycinal, a object-fit:contain przy sztywnym
   kontenerze tworzyl puste pasy (letterboxing). Docelowy standard nowych
   zdjec to 4:5 (master 1600x2000 WebP) - gdy stare zdjecia zostana
   wymienione podczas migracji, beda naturalnie renderowac sie w tej
   proporcji bez zadnej zmiany CSS.

   Siatka "Najnowsze poradniki": 1 kolumna do 768px, 2 kolumny od 768px
   wzwyz (rowniez na szerokim desktopie - plan nie przewiduje 3 kolumn).
   Ten sam prog 1024px co pozostale podstrony jest uzyty tylko dla ukladu
   Hero pojedynczego wpisu wyrozniajacego (obraz + tresc), zgodnie z
   zadaniem ktore prosi o priorytet czytelnosci nad sciskaniem kolumn. */

/* Jedno zrodlo prawdy dla skali tytulow Bloga. Hero H1 jest zaakceptowanym
   wzorcem wizualnym - Featured H2 i Card H3 maja renderowac sie z
   dokladnie ta sama typografia (font-size, line-height, font-weight,
   letter-spacing) na kazdym breakpoincie, mimo innej semantyki naglowka.
   Wartosci ponizej to dokladnie te same wartosci, ktore mial wczesniej
   wylacznie Hero H1 (1.75rem/700/1.2 bazowo, 2rem od 768px, 2.25rem od
   1280px, 1.5rem ponizej 360px, letter-spacing nigdy nie bylo ustawiane
   wiec pozostaje "normal") - Hero renderuje sie identycznie jak przed
   refaktorem, zmienia sie wylacznie zrodlo wartosci. Scope to
   .oai-blog-page (rzeczywista klasa na <main> w home.php, obejmujaca
   wszystkie sekcje Bloga), nie hipotetyczna .oai-blog, ktora nie istnieje
   w HTML. */

.oai-site .oai-blog-page {
	--oai-blog-title-size: 1.75rem;
	--oai-blog-title-line-height: 1.2;
	--oai-blog-title-weight: 700;
	--oai-blog-title-letter-spacing: normal;
}

@media (min-width: 768px) {
	.oai-site .oai-blog-page {
		--oai-blog-title-size: 2rem;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-blog-page {
		--oai-blog-title-size: 2.25rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-blog-page {
		--oai-blog-title-size: 1.5rem;
	}
}

.oai-site .oai-blog-hero {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 40px 20px 32px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-blog-hero__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-blog-hero__breadcrumb {
	width: 100%;
	margin: 0 0 24px;
}

.oai-site .oai-blog-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-blog-hero__breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
}

.oai-site .oai-blog-hero__breadcrumb-item + .oai-blog-hero__breadcrumb-item > .oai-blog-hero__breadcrumb-current::before {
	content: "/\00A0";
	margin: 0 8px 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-blog-hero__breadcrumb-current {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-blog-hero__breadcrumb-link {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	text-decoration: none;
	transition: color var(--oai-transition-fast), text-decoration-color var(--oai-transition-fast);
}

.oai-site .oai-blog-hero__breadcrumb-link:hover {
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

.oai-site .oai-blog-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-blog-hero__title {
	margin: 0 0 16px;
	max-width: 640px;
	font-size: var(--oai-blog-title-size);
	font-weight: var(--oai-blog-title-weight);
	line-height: var(--oai-blog-title-line-height);
	letter-spacing: var(--oai-blog-title-letter-spacing);
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-blog-hero__lead {
	margin: 0;
	max-width: 620px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Nawigacja tematyczna: kompaktowy, otwarty pasek linkow, bez kart */

.oai-site .oai-blog-topics {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 16px 20px;
	background-color: var(--oai-color-white);
	border-top: 1px solid var(--oai-color-border);
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-blog-topics__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-blog-topics__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-blog-topics__link {
	display: inline-block;
	padding: 4px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-blog-topics__link:hover {
	color: var(--oai-color-navy);
}

.oai-site .oai-blog-topics__link[aria-current="page"] {
	color: var(--oai-color-navy);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-blog-topics__link--disabled {
	color: var(--oai-color-navy-muted);
	opacity: 0.55;
	cursor: default;
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-topics__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Wyrozniony artykul: jednokolumnowo do 1024px, potem asymetryczny uklad
   zdjecie/tresc */

.oai-site .oai-blog-featured {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 40px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-blog-featured__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.oai-site .oai-blog-featured__media {
	width: 100%;
	min-width: 0;
}

.oai-site .oai-blog-featured__image-link {
	display: block;
	width: 100%;
}

.oai-site .oai-blog-featured__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--oai-radius-l);
	border: 1px solid var(--oai-color-border);
}

.oai-site .oai-blog-featured__image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	box-sizing: border-box;
	border-radius: var(--oai-radius-l);
	background-color: rgba(1, 2, 66, 0.04);
	border: 1px solid var(--oai-color-border);
}

.oai-site .oai-blog-featured__content {
	min-width: 0;
}

.oai-site .oai-blog-featured__category {
	display: inline-block;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
	text-decoration: none;
}

.oai-site .oai-blog-featured__category:hover {
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-featured__category:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

.oai-site .oai-blog-featured__title {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: var(--oai-blog-title-size);
	font-weight: var(--oai-blog-title-weight);
	line-height: var(--oai-blog-title-line-height);
	letter-spacing: var(--oai-blog-title-letter-spacing);
	text-wrap: wrap;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-blog-featured__title-link {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: var(--oai-color-navy);
	text-decoration: none;
}

.oai-site .oai-blog-featured__title-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-featured__title-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

.oai-site .oai-blog-featured__excerpt {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-blog-featured__excerpt p {
	margin: 0;
}

.oai-site .oai-blog-featured__meta {
	margin: 0 0 16px;
}

.oai-site .oai-blog-featured__date {
	font-size: 0.875rem;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-blog-featured__link {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--oai-color-navy);
	text-decoration-line: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--oai-transition-fast);
}

.oai-site .oai-blog-featured__link:hover {
	text-decoration-thickness: 2px;
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-featured__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Najnowsze poradniki */

.oai-site .oai-blog-latest {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 40px 20px 56px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-blog-latest__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-blog-latest__heading {
	margin: 0 0 24px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-blog-latest__empty {
	margin: 0;
	font-size: 1rem;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-blog-latest__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-blog-latest__item {
	min-width: 0;
}

/* Karta artykulu */

.oai-site .oai-blog-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.oai-site .oai-blog-card__image-link {
	display: block;
	width: 100%;
}

.oai-site .oai-blog-card__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--oai-radius-m);
	border: 1px solid var(--oai-color-border);
}

.oai-site .oai-blog-card__image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	box-sizing: border-box;
	border-radius: var(--oai-radius-m);
	background-color: rgba(1, 2, 66, 0.04);
	border: 1px solid var(--oai-color-border);
}

.oai-site .oai-blog-card__content {
	margin-top: 16px;
	min-width: 0;
}

.oai-site .oai-blog-card__category {
	display: inline-block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
	text-decoration: none;
}

.oai-site .oai-blog-card__category:hover {
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-card__category:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

.oai-site .oai-blog-card__title {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: var(--oai-blog-title-size);
	font-weight: var(--oai-blog-title-weight);
	line-height: var(--oai-blog-title-line-height);
	letter-spacing: var(--oai-blog-title-letter-spacing);
	text-wrap: wrap;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-blog-card__title-link {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: var(--oai-color-navy);
	text-decoration: none;
}

.oai-site .oai-blog-card__title-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-card__title-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

.oai-site .oai-blog-card__excerpt {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-blog-card__excerpt p {
	margin: 0;
}

.oai-site .oai-blog-card__date {
	font-size: 0.8125rem;
	color: var(--oai-color-navy-muted);
}

/* Paginacja: markup natywny the_posts_pagination(), stylizacja przez
   klasy generowane przez WordPress (.page-numbers, .current, .dots) */

.oai-site .oai-blog-latest__pagination {
	margin-top: 40px;
}

.oai-site .oai-blog-latest__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.oai-site .oai-blog-latest__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	box-sizing: border-box;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--oai-color-navy);
	text-decoration: none;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	transition: border-color var(--oai-transition-fast), color var(--oai-transition-fast);
}

.oai-site .oai-blog-latest__pagination a.page-numbers:hover {
	border-color: var(--oai-color-cyan);
}

.oai-site .oai-blog-latest__pagination .page-numbers.current {
	color: var(--oai-color-white);
	background-color: var(--oai-color-navy);
	border-color: var(--oai-color-navy);
}

.oai-site .oai-blog-latest__pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--oai-color-navy-muted);
}

html[data-oai-input="keyboard"] .oai-site .oai-blog-latest__pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
}

/* Tablet od 768px: wieksza typografia, 2 kolumny "Najnowsze poradniki" */

@media (min-width: 768px) {
	.oai-site .oai-blog-hero {
		padding: 56px 40px 40px;
	}

	.oai-site .oai-blog-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-blog-topics {
		padding: 18px 40px;
	}

	.oai-site .oai-blog-featured {
		padding: 56px 40px;
	}

	.oai-site .oai-blog-latest {
		padding: 56px 40px 72px;
	}

	.oai-site .oai-blog-latest__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-blog-latest__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 28px;
	}
}

/* Desktop od 1024px: featured w asymetrycznym ukladzie zdjecie/tresc
   (okolo 53/47 - zwiekszone w stosunku do wczesniejszego 58/42, zeby dac
   tytulowi wiecej szerokosci i ograniczyc liczbe linii), ten sam prog
   dwukolumnowy co pozostale podstrony projektu */

@media (min-width: 1024px) {
	.oai-site .oai-blog-featured__inner {
		flex-direction: row;
		align-items: center;
		gap: 48px;
	}

	.oai-site .oai-blog-featured__media {
		flex: 0 0 53%;
		max-width: 53%;
	}

	.oai-site .oai-blog-featured__content {
		flex: 1 1 47%;
		max-width: 47%;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-blog-hero {
		padding: 64px 40px 48px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-blog-hero {
		padding: 32px 16px 24px;
	}

	.oai-site .oai-blog-topics {
		padding: 14px 16px;
	}

	.oai-site .oai-blog-featured {
		padding: 32px 16px;
	}

	.oai-site .oai-blog-latest {
		padding: 32px 16px 48px;
	}
}

/* ==========================================================================
   Etap 3: archiwum kategorii Bloga (category.php)

   Renderowany przez category.php, ladowany warunkowo przez
   odwolai_v2_is_blog_category() (is_category()) razem z ta sama regula co
   indeks - dokladnie zgodnie z PLAN_BLOG_v1.0.md #12 ("blog.css na indeksie
   i kategoriach"). <main> na category.php nosi te sama klase .oai-blog-page
   co home.php, wiec Hero H1 archiwum korzysta z DOKLADNIE tych samych
   zmiennych --oai-blog-title-* co Hero H1 indeksu i tytuly kart - zero
   duplikacji skali typografii, zgodnie z zadaniem ("nie tworz nowego,
   wiekszego systemu H2/H3"). Karty listy to ten sam, reuzywany
   template-part article-blog-card.php co na /blog/ (bez zadnej modyfikacji
   pliku karty) - stad karty maja identyczny wyglad i identyczna typografie
   tytulu (H3, --oai-blog-title-size) jak na indeksie.

   Siatka listy i stylizacja paginacji sa swiadomie identyczne z
   .oai-blog-latest__list / .oai-blog-latest__pagination (ta sama, juz
   zaakceptowana skala: 1 kolumna do 768px, 2 kolumny od 768px, ten sam
   wyglad numerow stron) - wlasna przestrzen nazw .oai-category-list* zamiast
   reuzycia klas "latest" zachowuje poprawna semantyke (to nie jest sekcja
   "najnowsze poradniki", to pelna lista wpisow danej kategorii), przy
   zachowaniu identycznych wartosci liczbowych. */

.oai-site .oai-category-hero {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 40px 20px 32px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-category-hero__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-category-hero__breadcrumb {
	width: 100%;
	margin: 0 0 24px;
}

.oai-site .oai-category-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-category-hero__breadcrumb-item {
	display: flex;
	align-items: center;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.4;
}

.oai-site .oai-category-hero__breadcrumb-item + .oai-category-hero__breadcrumb-item::before {
	content: "/\00A0";
	margin: 0 8px 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-category-hero__breadcrumb-current {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-category-hero__breadcrumb-link {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	text-decoration: none;
	transition: color var(--oai-transition-fast), text-decoration-color var(--oai-transition-fast);
}

.oai-site .oai-category-hero__breadcrumb-link:hover {
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-category-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

.oai-site .oai-category-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-category-hero__title {
	margin: 0 0 16px;
	max-width: 640px;
	font-size: var(--oai-blog-title-size);
	font-weight: var(--oai-blog-title-weight);
	line-height: var(--oai-blog-title-line-height);
	letter-spacing: var(--oai-blog-title-letter-spacing);
	color: var(--oai-color-navy);
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-category-hero__description {
	margin: 0;
	max-width: 620px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-category-list {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 40px 20px 56px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-category-list__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-category-list__empty {
	margin: 0;
	font-size: 1rem;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-category-list__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-category-list__item {
	min-width: 0;
}

.oai-site .oai-category-list__pagination {
	margin-top: 40px;
}

.oai-site .oai-category-list__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.oai-site .oai-category-list__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	box-sizing: border-box;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--oai-color-navy);
	text-decoration: none;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	transition: border-color var(--oai-transition-fast), color var(--oai-transition-fast);
}

.oai-site .oai-category-list__pagination a.page-numbers:hover {
	border-color: var(--oai-color-cyan);
}

.oai-site .oai-category-list__pagination .page-numbers.current {
	color: var(--oai-color-white);
	background-color: var(--oai-color-navy);
	border-color: var(--oai-color-navy);
}

.oai-site .oai-category-list__pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--oai-color-navy-muted);
}

html[data-oai-input="keyboard"] .oai-site .oai-category-list__pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.oai-site .oai-category-hero {
		padding: 56px 40px 40px;
	}

	.oai-site .oai-category-hero__description {
		font-size: 1.0625rem;
	}

	.oai-site .oai-category-list {
		padding: 56px 40px 72px;
	}

	.oai-site .oai-category-list__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 28px;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-category-hero {
		padding: 64px 40px 48px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-category-hero {
		padding: 32px 16px 24px;
	}

	.oai-site .oai-category-list {
		padding: 32px 16px 48px;
	}
}