/* Blog OdwolAI V2 - Etap 2: szablon pojedynczego wpisu (single-post.php).
   Ladowany wylacznie przez odwolai_v2_is_single_post() (is_singular('post')).
   Wszystkie selektory izolowane pod .oai-site, przestrzenie klas
   .oai-single-post-*, .oai-post-content i .oai-single-related*, osobne od
   assets/css/blog.css (Etap 1, celowo nietkniety w tym zadaniu).

   Skala tytulu H1 (.oai-single-post-hero__title) korzysta z lokalnego
   zestawu custom properties (--oai-single-post-title-*) zdefiniowanego
   ponizej, ktory celowo powiela dokladnie te same wartosci co zaakceptowana
   skala .oai-blog-hero__title w blog.css (1.75rem/700/1.2 bazowo, 2rem od
   768px, 2.25rem od 1280px, 1.5rem ponizej 360px, letter-spacing "normal").
   Nie mozna odwolac sie bezposrednio do zmiennych z blog.css, bo blog.css
   nie jest ladowany na pojedynczym wpisie (osobny warunkowy enqueue) - to
   jest wlasna, lokalna kopia tego samego zrodla prawdy dla H1, nie nowy
   niezalezny system.

   UWAGA (korekta po pierwszej kontroli wizualnej): tytuly kart "Czytaj tez"
   (.oai-single-related-card__title) NIE korzystaja juz z tej samej zmiennej
   co H1 - poczatkowo byly z nia powiazane, co dawalo bledny efekt
   28-36px na kartach. Maja teraz wlasna, mniejsza, jawna skale
   (17/18/20px), niezalezna od --oai-single-post-title-*.

   Rzeczywiste featured images (Hero i karty "Czytaj tez") NIE maja
   wymuszonego aspect-ratio ani object-fit - identyczna zasada jak w Etapie
   1: legacy zdjecia maja rozne proporcje i renderuja sie naturalnie
   (width:100%; height:auto;), bez cropowania i bez letterboxingu. Tylko
   placeholder braku obrazu (karty "Czytaj tez") ma kontrolowana proporcje
   4:5, zgodnie z docelowym standardem PLAN_BLOG_v1.0.md.

   .oai-post-content polega w duzej mierze na natywnym CSS wp-block-library,
   ktory WordPress automatycznie laduje dla tresci zawierajacej bloki w
   motywach klasycznych (ten motyw nie wylacza tego mechanizmu) - odpowiada
   on m.in. za bazowe zachowanie .wp-block-columns na mobile i strukture
   alignwide/alignfull. Style ponizej nadpisuja wylacznie typografie, kolory,
   odstepy i akcenty zgodne z design systemem OdwolAI, nie probuja na nowo
   budowac calej mechaniki blokow. */

/* --oai-single-post-body-* : jedno zrodlo prawdy dla typografii body copy
   (.oai-post-content p/.wp-block-paragraph/ul/ol/li), przepisane z
   rzeczywiscie zweryfikowanych wartosci .oai-single-post-hero__excerpt
   (odczytanych ponizej w tym samym pliku, NIE zgadywanych): baza 1.0625rem
   (17px)/line-height 1.6, od 768px 1.125rem (18px) - excerpt Hero nie
   rosnie dalej powyzej 768px, wiec body-size tez celowo nie rosnie od
   1024/1280px. Line-height body zostaje na dotychczasowym 1.72 (miesci sie
   w dopuszczalnym zakresie ~1.6-1.75 dla dlugich artykulow, wiec nie ma
   powodu go zmieniac). Nie modyfikowano samej reguly .oai-single-post-hero__excerpt
   - to nowa, niezalezna kopia tych samych wartosci literalnych. */

.oai-site .oai-single-post-page {
	--oai-single-post-title-size: 1.75rem;
	--oai-single-post-title-line-height: 1.2;
	--oai-single-post-title-weight: 700;
	--oai-single-post-title-letter-spacing: normal;
	--oai-single-post-body-size: 1.0625rem;
	--oai-single-post-body-line-height: 1.72;
}

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

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

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

/* ==========================================================================
   Hero pojedynczego wpisu
   ========================================================================== */

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

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

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

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

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

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

.oai-site .oai-single-post-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-single-post-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-single-post-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-single-post-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

.oai-site .oai-single-post-hero__layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-single-post-hero__content {
	min-width: 0;
}

.oai-site .oai-single-post-hero__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-single-post-hero__category:hover {
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

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

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

.oai-site .oai-single-post-hero__excerpt {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-single-post-hero__excerpt p {
	margin: 0;
}

.oai-site .oai-single-post-hero__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.oai-site .oai-single-post-hero__byline {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-single-post-hero__byline-label {
	font-weight: 400;
}

.oai-site .oai-single-post-hero__byline-name {
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-single-post-hero__dates {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-single-post-hero__date-sep {
	color: var(--oai-color-border);
}

.oai-site .oai-single-post-hero__media {
	width: 100%;
	min-width: 0;
}

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

/* Korekta po pierwszej kontroli wizualnej: obraz byl odrobine zbyt
   dominujacy przy poprzednim podziale ~57/43. Od 1024px kolumna obrazu
   pozostaje szersza (39%) niz sam obraz - obraz ma wlasny max-width i jest
   dosuniety do prawej krawedzi kolumny (margin-left: auto), zeby wizualnie
   nie wypelnial calej szerokosci i nie dominowal nad tekstem. */

@media (min-width: 1024px) {
	.oai-site .oai-single-post-hero__image {
		max-width: 420px;
		margin-left: auto;
	}
}

/* Tablet od 768px */

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

	.oai-site .oai-single-post-hero__excerpt {
		font-size: 1.125rem;
	}
}

/* Desktop od 1024px: dwie kolumny, tekst ~61% / obraz ~39% (korekta po
   pierwszej kontroli wizualnej - poprzednio ~57/43 dawalo zbyt dominujacy
   obraz). Tekst ma byc wizualnie glowna czescia Hero, obraz go uzupelnia.
   Ten sam prog dwukolumnowy co pozostale podstrony projektu. */

@media (min-width: 1024px) {
	.oai-site .oai-single-post-hero__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
	}

	.oai-site .oai-single-post-hero__content {
		flex: 1 1 61%;
		max-width: 61%;
	}

	.oai-site .oai-single-post-hero__media {
		flex: 0 0 39%;
		max-width: 39%;
	}
}

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

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

/* ==========================================================================
   Tresc artykulu - the_content()

   Korekta po drugiej kontroli wizualnej: .oai-post-content ma teraz
   DOKLADNIE ta sama geometrie zewnetrzna co Hero (.oai-single-post-hero +
   __inner: max-width var(--oai-container-width) wysrodkowane, ten sam
   poziomy padding 20px/40px na tych samych progach) - dzieki temu lewa
   krawedz tresci jest zawsze dokladnie w tej samej osi co lewa krawedz H1.
   Wezsza, czytelna kolumna (100% do 1023px, ~900px od 1024px, ~980px od
   1280px) jest wymuszana na BEZPOSREDNICH dzieciach (.oai-post-content > *),
   ktore pozostaja przyklejone do lewej krawedzi (brak wlasnego margin:auto)
   - stad prawa krawedz tresci konczy sie znacznie dalej niz poprzednie
   760px, w przyblizeniu w okolicy prawej czesci Hero, bez potrzeby
   transform/position/ujemnych marginesow ani nowego wrappera PHP.
   .alignwide/.alignfull maja wlasna, wczesniej istniejaca regule
   max-width:100% (wzgledem tego samego, teraz szerszego .oai-post-content)
   i pozostaja nietkniete - to jest ich zamierzone dzialanie. */

.oai-site .oai-post-content {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 40px 20px 56px;
	font-size: var(--oai-single-post-body-size);
	line-height: var(--oai-single-post-body-line-height);
	color: var(--oai-color-navy);
	overflow-wrap: break-word;
	word-break: normal;
}

.oai-site .oai-post-content > * {
	max-width: 100%;
}

.oai-site .oai-post-content .wp-block-table {
	margin: 0 0 24px;
	overflow-x: auto;
}

.oai-site .oai-post-content p {
	margin: 0 0 1.2em;
}

.oai-site .oai-post-content h2 {
	margin: 2.2em 0 0.75em;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.26;
	color: var(--oai-color-navy);
	overflow-wrap: break-word;
	word-break: normal;
}

.oai-site .oai-post-content > h2:first-child {
	margin-top: 0;
}

.oai-site .oai-post-content h3 {
	margin: 1.9em 0 0.6em;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.32;
	color: var(--oai-color-navy);
	overflow-wrap: break-word;
	word-break: normal;
}

.oai-site .oai-post-content ul,
.oai-site .oai-post-content ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.oai-site .oai-post-content li {
	margin: 0 0 10px;
	line-height: 1.65;
}

.oai-site .oai-post-content li:last-child {
	margin-bottom: 0;
}

.oai-site .oai-post-content ul ul,
.oai-site .oai-post-content ul ol,
.oai-site .oai-post-content ol ul,
.oai-site .oai-post-content ol ol {
	margin: 10px 0 0;
}

/* Normalizacja rozmiaru czcionki akapitow/elementow list legacy content.
   Ten sam mechanizm rdzenia WordPressa co przy linkach ponizej -
   .has-small/medium/large/x-large-font-size z font-size !important - wyladowal
   bezposrednio na <p> (i potencjalnie <li>) tresci artykulu. Potwierdzone
   realnym wpisem (curl na /sasiad-zalal-mieszkanie-co-zrobic/): 97 akapitow
   z klasa has-small-font-size, wymuszajaca font-size:13px niezaleznie od
   breakpointu, podczas gdy sasiednie akapity BEZ tej klasy renderuja sie w
   pelnej skali --oai-single-post-body-size (17-18px) - to jest realna,
   potwierdzona przyczyna zgloszonej niespojnosci rozmiarow miedzy
   akapitami (przyklad z zadania: akapit pod naglowkiem "Kto placi za
   zalanie mieszkania przez sasiada?" nie ma tej klasy, wiec wydaje sie
   "wiekszy" niz otaczajace go akapity ze stara klasa 13px). Selektory
   celowo precyzyjne (element + konkretna klasa), NIE sama klasa
   .has-*-font-size, zeby nie dotknac naglowkow (h2/h3 tez czasem maja
   has-medium-font-size w tresci - to pozostaje bez zmian, poza zakresem
   tego zadania) ani innych elementow spoza body copy. ul/ol dodane na
   wszelki wypadek zgodnie z zakresem zadania, mimo ze w sprawdzonym wpisie
   klasa nie wystapila bezposrednio na <ul>/<ol>. */

.oai-site .oai-post-content p.has-small-font-size,
.oai-site .oai-post-content p.has-medium-font-size,
.oai-site .oai-post-content p.has-large-font-size,
.oai-site .oai-post-content p.has-x-large-font-size,
.oai-site .oai-post-content li.has-small-font-size,
.oai-site .oai-post-content li.has-medium-font-size,
.oai-site .oai-post-content li.has-large-font-size,
.oai-site .oai-post-content li.has-x-large-font-size,
.oai-site .oai-post-content ul.has-small-font-size,
.oai-site .oai-post-content ul.has-medium-font-size,
.oai-site .oai-post-content ul.has-large-font-size,
.oai-site .oai-post-content ul.has-x-large-font-size,
.oai-site .oai-post-content ol.has-small-font-size,
.oai-site .oai-post-content ol.has-medium-font-size,
.oai-site .oai-post-content ol.has-large-font-size,
.oai-site .oai-post-content ol.has-x-large-font-size {
	font-size: inherit !important;
}

/* Normalizacja zwyklych linkow legacy content. Rdzen WordPressa emituje
   globalnie (przez wp_head(), niezaleznie od aktywnego motywu) reguly
   .has-small/medium/large/x-large-font-size { font-size: var(...) !important; }
   (potwierdzone rzeczywiste wartosci: 13/20/36/42px) - jesli taka klasa
   Gutenberga wyladuje bezposrednio na <a> (a nie na jego rodzicu), link
   staje sie niezaleznie od otoczenia bardzo maly albo gigantyczny. Jedyny
   sposob, zeby zwykly link zawsze bezpiecznie dziedziczyl typografie
   rodzica, to wlasna regula font-size rowniez z !important - nie da sie
   pokonac !important rdzenia inaczej. To NIE jest inline style="" (ktorego
   w tresci nie znaleziono), wiec ograniczenie z zasad U+00A0/forbidden
   patterns dotyczace inline stylow tu nie ma zastosowania. Link wewnatrz
   H2/H3 nadal naturalnie dziedziczy rozmiar headingu - inherit zawsze
   patrzy na bezposredniego rodzica. Przycisk CTA (.wp-block-button__link)
   ma wlasna, celowa typografie i jest tu wykluczony. */

.oai-site .oai-post-content a:not(.wp-block-button__link) {
	font-family: inherit;
	font-size: inherit !important;
	line-height: inherit;
	letter-spacing: inherit;
	font-weight: 700;
	color: var(--oai-color-navy);
	text-decoration-line: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: text-decoration-thickness var(--oai-transition-fast);
}

.oai-site .oai-post-content a:hover {
	text-decoration-thickness: 2px;
}

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

.oai-site .oai-post-content blockquote,
.oai-site .oai-post-content .wp-block-quote {
	margin: 0 0 24px;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--oai-color-cyan);
	font-size: 1.0625rem;
	font-style: normal;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-post-content blockquote p,
.oai-site .oai-post-content .wp-block-quote p {
	margin: 0 0 8px;
}

.oai-site .oai-post-content blockquote p:last-child,
.oai-site .oai-post-content .wp-block-quote p:last-child {
	margin-bottom: 0;
}

.oai-site .oai-post-content blockquote cite,
.oai-site .oai-post-content .wp-block-quote cite {
	display: block;
	margin-top: 8px;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-post-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--oai-radius-m);
}

.oai-site .oai-post-content figure {
	margin: 0 0 24px;
}

.oai-site .oai-post-content figcaption {
	margin-top: 8px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.oai-site .oai-post-content th,
.oai-site .oai-post-content td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-post-content th {
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-post-content hr,
.oai-site .oai-post-content .wp-block-separator {
	margin: 40px 0;
	border: none;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-post-content .wp-block-columns {
	margin: 0 0 24px;
	gap: 24px;
}

.oai-site .oai-post-content .wp-block-buttons {
	margin: 0 0 24px;
}

.oai-site .oai-post-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: 12px 22px;
	font-size: 0.9375rem;
	line-height: 1.2;
	border-radius: 8px;
	background: var(--oai-color-navy);
	color: var(--oai-color-white);
	font-weight: 600;
	text-decoration: none;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-post-content .wp-block-button__link:hover {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-post-content .wp-block-button__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
}

.oai-site .oai-post-content .alignwide {
	max-width: 100%;
}

.oai-site .oai-post-content .alignfull {
	max-width: 100%;
}

/* Tablet od 768px: gap Hero->content zmniejszony (52px, w docelowym
   zakresie 48-56px), pozioma szerokosc pozostaje pelna dostepna (jak
   mobile) - wezsza kolumna czytelnicza wlacza sie dopiero od 1024px. */

@media (min-width: 768px) {
	.oai-site .oai-post-content {
		padding: 52px 40px 72px;
	}

	.oai-site .oai-post-content h2 {
		font-size: 1.5625rem;
	}

	.oai-site .oai-post-content h3 {
		font-size: 1.3125rem;
	}
}

/* 1024-1279px: kolumna czytelnicza zawezona do ~900px (docelowy zakres
   850-920px), lewa krawedz nadal dokladnie w osi Hero dzieki temu, ze
   ograniczenie dziala na bezposrednich dzieciach, nie na samym kontenerze. */

@media (min-width: 1024px) {
	.oai-site .oai-post-content > * {
		max-width: 900px;
	}

	.oai-site .oai-post-content h2 {
		font-size: 1.625rem;
	}

	.oai-site .oai-post-content h3 {
		font-size: 1.375rem;
	}
}

/* "Duzy desktop" od 1280px: body copy NIE rosnie dalej (zostaje na 18px z
   --oai-single-post-body-size ustawionym od 768px) - identycznie jak
   .oai-single-post-hero__excerpt, ktory tez nie ma osobnej wartosci na
   1024/1280px. Rosnie tylko gap Hero->content (68px, docelowy zakres
   64-72px) i kolumna czytelnicza (~980px, docelowy zakres 960-1000px). */

@media (min-width: 1280px) {
	.oai-site .oai-post-content {
		padding-top: 68px;
	}

	.oai-site .oai-post-content > * {
		max-width: 980px;
	}

	.oai-site .oai-post-content h2 {
		font-size: 1.6875rem;
	}

	.oai-site .oai-post-content h3 {
		font-size: 1.4375rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-post-content {
		padding: 32px 16px 40px;
	}
}

/* ==========================================================================
   Czytaj tez
   ========================================================================== */

.oai-site .oai-single-related {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 40px 20px 56px;
	background-color: rgba(1, 2, 66, 0.02);
	border-top: 1px solid var(--oai-color-border);
}

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

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

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

.oai-site .oai-single-related__item {
	min-width: 0;
}

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

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

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

.oai-site .oai-single-related-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-single-related-card__content {
	margin-top: 16px;
	min-width: 0;
}

.oai-site .oai-single-related-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-single-related-card__category:hover {
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

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

.oai-site .oai-single-related-card__title {
	margin: 0;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-wrap: wrap;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-single-related-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-single-related-card__title-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

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

@media (min-width: 768px) {
	.oai-site .oai-single-related {
		padding: 56px 40px 72px;
	}

	.oai-site .oai-single-related__heading {
		font-size: 1.3125rem;
	}

	.oai-site .oai-single-related-card__title {
		font-size: 1.125rem;
	}

	.oai-site .oai-single-related__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-single-related-card__title {
		font-size: 1.25rem;
	}

	.oai-site .oai-single-related__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-single-related {
		padding: 32px 16px 40px;
	}
}