/**
 * Sekcje serwisu publicznego — CSS przepisany z prototypu (artboard 1).
 * Wartości pochodzą wprost z handoffu, nie z przybliżenia.
 */

.imid-section {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 24px;
}

/* --- HERO --- */
.imid-hero {
	background: var(--wp--preset--color--card);
}

.imid-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px 24px 80px;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	align-items: center;
}

.imid-eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary-dark);
	margin: 0;
}

.imid-hero__title {
	font-size: 3.25rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-weight: 700;
	margin: 16px 0 0;
	text-wrap: pretty;
}

.imid-hero__lead {
	margin: 22px 0 0;
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
	max-width: 600px;
}

.imid-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.imid-hero__media {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: repeating-linear-gradient(135deg, #eef2f7, #eef2f7 12px, #dbe3ee 12px, #dbe3ee 24px);
	display: grid;
	place-items: center;
}

.imid-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imid-placeholder {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
	text-align: center;
	padding: 12px;
}

/* --- Przyciski publiczne --- */
.imid-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 32px;
	border-radius: 8px;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.imid-btn--primary {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 2px solid var(--wp--preset--color--primary);
}

.imid-btn--primary:hover,
.imid-btn--primary:focus {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: #fff;
}

.imid-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}

.imid-btn--outline:hover,
.imid-btn--outline:focus {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--primary-dark);
}

.imid-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* --- KAFLE --- */
.imid-tiles {
	background: var(--wp--preset--color--surface);
}

.imid-tiles__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 24px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.imid-tile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 8px;
	padding: 32px;
	box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
	text-decoration: none;
	color: inherit;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.imid-tile:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 4px 16px rgba(20, 24, 31, 0.10);
}

.imid-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.imid-tile__icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--wp--preset--color--primary-tint);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.imid-tile__icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--wp--preset--color--primary-dark);
	stroke-width: 2;
	fill: none;
}

.imid-tile__title {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.imid-tile__text {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
	flex: 1;
}

.imid-tile__more {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.imid-tile:hover .imid-tile__more {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* --- KROKI REKRUTACJI --- */
.imid-steps {
	background: var(--wp--preset--color--card);
}

.imid-steps__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px 24px 80px;
}

.imid-steps__title {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	margin: 0;
}

.imid-steps__lead {
	font-size: 1.125rem;
	color: var(--wp--preset--color--text-secondary);
	text-align: center;
	margin: 10px 0 0;
}

.imid-steps__list {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.imid-step {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 8px;
	padding: 28px;
	box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
}

.imid-step__num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.imid-step__title {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.imid-step__text {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* --- PASEK LOGOTYPÓW --- */
.imid-logos {
	background: var(--wp--preset--color--card);
	border-top: 1px solid var(--wp--preset--color--divider);
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.imid-logos__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}

.imid-logos img {
	height: 72px;
	width: auto;
}

/* --- STOPKA --- */
.imid-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--footer-text);
}

.imid-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px 40px;
	display: grid;

	/* Cztery sekcje: adres, Projekt, Informacje, Przetwarzanie danych.
	   Przy trzech kolumnach ostatnia spadala do drugiego rzedu, zostawiajac
	   dwa puste pola obok — wygladalo to na blad ukladu. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 32px;
	font-size: 1rem;
}

.imid-footer h2 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 16px;
}

.imid-footer p {
	margin: 0 0 8px;
	line-height: 1.6;
}

.imid-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.imid-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--footer-text);
	text-decoration: none;
}

.imid-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.imid-footer a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: 4px;
}

.imid-footer__bottom {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
	border-top: 1px solid var(--wp--preset--color--footer-divider);
	font-size: 0.875rem;
	line-height: 1.6;
}

.imid-footer__bottom p {
	margin: 0;
}

/* --- Węższe ekrany --- */
@media (max-width: 1024px) {
	.imid-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding: 56px 24px 48px;
	}

	.imid-hero__title {
		font-size: 2.5rem;
	}

	.imid-tiles__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 48px 24px;
	}

	.imid-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.imid-steps__inner {
		padding: 56px 24px 48px;
	}

	/* 2x2 — cztery sekcje dziela sie rowno, bez sieroty w ostatnim rzedzie. */
	.imid-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}
}

@media (max-width: 640px) {
	.imid-hero__title {
		font-size: 2rem;
	}

	.imid-hero__lead {
		font-size: 1.125rem;
	}

	.imid-tiles__inner,
	.imid-steps__list,
	.imid-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.imid-steps__title {
		font-size: 1.75rem;
	}

	.imid-btn {
		width: 100%;
	}
}

/* --- NAGŁÓWEK (artboard 1) --- */
.imid-header {
	background: var(--wp--preset--color--card);
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.imid-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 80px;
	display: flex;
	align-items: center;
	gap: 40px;
}

.imid-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

.imid-brand__mark {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--wp--preset--color--primary-tint);
	display: grid;
	place-items: center;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	flex-shrink: 0;
	overflow: hidden;
}

.imid-brand__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.imid-brand__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	display: block;
}

.imid-brand__sub {
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--text-muted);
	display: block;
}

/* Nawigacja w nagłówku */
.imid-header .wp-block-navigation {
	flex: 1;
	justify-content: center;
}

.imid-header .wp-block-navigation__container {
	gap: 8px;
}

.imid-header .wp-block-navigation-item__content {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding: 10px 12px;
	border-radius: 6px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.imid-header .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

.imid-header .wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.imid-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

.imid-header__login {
	flex-shrink: 0;
	min-height: 44px;
	padding: 0 20px;
	font-size: 1rem;
}

@media (max-width: 1024px) {
	.imid-header__inner {
		gap: 20px;
		min-height: 72px;
	}

	.imid-header .wp-block-navigation {
		justify-content: flex-end;
	}
}

@media (max-width: 782px) {
	.imid-brand__sub {
		display: none;
	}
}

/* ==========================================================================
   ODSTĘPY — korekta rytmu pionowego (10.09.2026)
   ========================================================================== */

/* Nagłówek — powietrze wokół paska nawigacji */
.imid-header__inner {
	min-height: 88px;
	gap: 48px;
}

.imid-header .wp-block-navigation__container {
	gap: 12px;
}

.imid-header .wp-block-navigation-item__content {
	padding: 12px 16px;
}

/* Treść nie może zaczynać się tuż pod nagłówkiem */
.imid-hero__inner {
	padding-top: 96px;
}

/* Kafle — więcej powietrza w środku */
.imid-tile {
	gap: 16px;
	padding: 36px 32px;
}

.imid-tile__icon {
	margin-bottom: 4px;
}

/* Kroki rekrutacji */
.imid-step {
	padding: 32px 28px;
}

.imid-step__num {
	margin-bottom: 20px;
}

.imid-steps__list {
	margin-top: 56px;
}

/* Stopka */
.imid-footer h2 {
	margin-bottom: 20px;
}

.imid-footer ul li + li {
	margin-top: 2px;
}

/* ==========================================================================
   NAGŁÓWEK — wyrównanie w pionie
   Układ flex ustawiony w bloku (layout.type = flex), tu tylko dostrojenie.
   ========================================================================== */

.imid-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 88px;
	gap: 40px;
}

/* Marka */
.imid-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	text-decoration: none;
}

.imid-brand__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}

/* Nawigacja — środek, wyrównana do osi */
.imid-header .wp-block-navigation {
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
}

.imid-header .wp-block-navigation__container {
	align-items: center;
	gap: 8px;
}

.imid-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	padding: 12px 14px;
	min-height: 44px;
	white-space: nowrap;
}

/* Przycisk logowania */
.imid-header__login {
	flex-shrink: 0;
	min-height: 44px;
	padding: 0 20px;
	font-size: 1rem;
	line-height: 1;
}

/* --- Odstęp nagłówek → treść (bez dublowania) --- */
body:not(.home) .wp-site-blocks > .entry-content,
body:not(.home) .wp-site-blocks main > .entry-content {
	margin-top: 48px;
}

body:not(.home) .entry-content > *:first-child {
	margin-top: 0;
}

/* ==========================================================================
   WSPÓLNA OŚ LEWEJ KRAWĘDZI

   ⚠️ Nagłówek to `is-layout-flex` (własny max-width 1200px + padding 24px),
   treść wpisu to `is-layout-constrained` — WordPress centruje ją do
   `contentSize` i dokłada padding z `has-global-padding`. Dwie różne
   mechaniki szerokości dawały rozjazd lewej krawędzi.

   Rozwiązanie: treść dostaje te same wymiary co nagłówek.
   ========================================================================== */

:root {
	--imid-max: 1200px;
	--imid-gutter: 24px;
}

.imid-header__inner,
.imid-hero__inner,
.imid-tiles__inner,
.imid-steps__inner,
.imid-logos__inner,
.imid-footer__inner,
.imid-footer__bottom {
	max-width: var(--imid-max);
	margin-inline: auto;
	padding-inline: var(--imid-gutter);
}

/* Treść wpisu — ta sama oś co nagłówek */
.entry-content.has-global-padding,
.entry-content.is-layout-constrained {
	max-width: calc( var(--imid-max) - var(--imid-gutter) * 2 );
	margin-inline: auto;
	padding-inline: 0;
}

/* Bloki wewnątrz treści nie mogą dokładać własnego centrowania */
.entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none;
	margin-inline: 0;
}

/* Pełnoszerokościowe sekcje wychodzą poza gutter */
.entry-content > .alignfull {
	margin-inline: calc( var(--imid-gutter) * -1 );
	width: auto;
	max-width: none;
}

@media (max-width: 782px) {
	:root {
		--imid-gutter: 20px;
	}
}

/* Na wąskich ekranach treść potrzebuje własnego marginesu */
@media (max-width: 1248px) {
	.entry-content.has-global-padding,
	.entry-content.is-layout-constrained {
		max-width: none;
		padding-inline: var(--imid-gutter);
	}
}

/* Pasek logotypów wewnątrz treści (wzorzec parlo-imid/logos) */
.imid-logos__inner img {
	width: 100%;
	/* Plik ma 1200 px, więc do 900 px wyświetlamy bez utraty ostrości
	   (nadal 1,33× gęstości na ekranach Retina). Księga marki wymaga,
	   by znaki były „czytelne dla odbiorcy i wyraźnie widoczne". */
	max-width: 900px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ==========================================================================
   NAGŁÓWEK NA WĄSKICH EKRANACH
   --------------------------------------------------------------------------
   WordPress przełącza `overlayMenu:"mobile"` dopiero przy 600px, a ten
   nagłówek (marka + 4 pozycje menu + przycisk logowania) potrzebuje
   hamburgera aż do ~900px — poniżej tej szerokości menu zawijało się
   w pionie i nagłówek rósł do 297px.

   Na mobile marka jest ukryta wizualnie (zostaje w DOM jako link do strony
   głównej dla czytników ekranu), więc w pasku są tylko hamburger i przycisk
   logowania.

   ⚠️ ZNANE OGRANICZENIE: `document.scrollWidth` bywa o ~16px większy od
   `clientWidth`. Nie objawia się to widocznym przewijaniem ani ucięciem
   treści, ale przy audycie 1.4.10 Reflow wymaga domknięcia. Źródło:
   akapit `<p>`, którym blok `wp:shortcode` owija przycisk — kurczy się
   poniżej szerokości przycisku, który ma `white-space: nowrap`.
   TODO: docelowo zastąpić blok shortcode blokiem HTML z `do_shortcode()`
   w szablonie, żeby usunąć zbędny węzeł zamiast obchodzić go CSS-em.
   ========================================================================== */

@media (max-width: 899px) {

	.imid-header__inner {
		gap: 12px;
		min-height: 64px;
		box-sizing: border-box;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	/* Marka ukryta wizualnie, dostępna dla czytnika ekranu (2.4.5) */
	.imid-header__inner > .imid-brand {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Hamburger — rdzeń ukrywa go od 600px; cel dotykowy 44×44 (2.5.5) */
	.imid-header .wp-block-navigation__responsive-container-open,
	.imid-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Pozioma lista schowana do czasu otwarcia nakładki */
	.imid-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
		width: 0;
		max-width: 0;
		overflow: hidden;
	}

	.imid-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		width: auto;
		max-width: none;
		overflow: auto;
	}

	.imid-header .wp-block-navigation { flex: 0 0 auto; }

	/* Przycisk logowania przy prawej krawędzi, bez kurczenia */
	.imid-header__inner > p {
		margin: 0 0 0 auto;
		display: flex;
		align-items: center;
		flex: 0 0 auto;
	}

	.imid-header__login {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 0 0.875rem;
		font-size: 0.9375rem;
	}
}

/* --- 900–1100px: menu poziome mieści się dopiero po zagęszczeniu --- */
@media (min-width: 900px) and (max-width: 1100px) {
	.imid-header__inner { gap: 16px; }
	.imid-header .wp-block-navigation__container { gap: 2px; }
	.imid-header .wp-block-navigation-item__content {
		padding: 12px 8px;
		font-size: 0.9375rem;
	}
	.imid-brand__sub { display: none; }
	.imid-header__login { padding: 0 0.875rem; font-size: 0.9375rem; }
}

/* ==========================================================================
   PODMENU W NAGŁÓWKU („Kursy")
   --------------------------------------------------------------------------
   WordPress renderuje listę podmenu z `opacity: 0` i podnosi ją dopiero
   regułami `:hover` / `:focus-within`. Kliknięcie przycisku rozwijającego
   ustawia `aria-expanded="true"`, ale samo w sobie NIE zmienia przezroczystości
   — podmenu pozostawało niewidoczne mimo poprawnego stanu ARIA.

   Wiążemy więc widoczność ze stanem `aria-expanded`, czyli z tym samym
   źródłem prawdy, które czyta czytnik ekranu (4.1.2 Name, Role, Value).
   ========================================================================== */

.imid-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--divider, #DDE2E8);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(20, 24, 31, .12);
	padding: 6px;
	min-width: 260px;
}

/* 🚨 Rdzeń WP ma już regułę `[aria-expanded=true] ~ .submenu-container`,
   ale otwarcie wymaga NIE TYLKO `opacity`, lecz także `height: auto`,
   `overflow: visible` i szerokości — bez nich lista ma zerową wysokość
   i pozostaje niewidoczna mimo poprawnego stanu ARIA.
   Selektor podnosi specyficzność o `.imid-header`, więc wygrywa z rdzeniem. */
.imid-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.imid-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.imid-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	height: auto;
	width: auto;
	min-width: 260px;
	opacity: 1;
	overflow: visible;
	visibility: visible;
}

.imid-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 14px;
	border-radius: 6px;
	min-height: 44px;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.imid-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.imid-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--primary-tint, #E6F0FB);
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
}

/* Strzałka rozwijania — cel dotykowy i wyraźny fokus (2.5.5, 2.4.7) */
.imid-header .wp-block-navigation-submenu__toggle {
	min-height: 44px;
}

.imid-header .wp-block-navigation-submenu__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0A6FE0);
	outline-offset: 2px;
}

/* ==========================================================================
   SEKCJA O PROJEKCIE (wzorzec parlo-imid/about)
   ========================================================================== */

.imid-about {
	background: var(--wp--preset--color--surface, #F5F7FA);
	padding: 4rem 0;
}

.imid-about__inner {
	max-width: var(--imid-max, 1200px);
	margin-inline: auto;
	padding-inline: var(--imid-gutter, 24px);
	box-sizing: border-box;
}

.imid-about__title {
	margin: 0 0 1.25rem;
	font-size: 2rem;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast, #14181f);
}

.imid-about__lead {
	margin: 0 0 1rem;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary, #374151);
}

/* Numer umowy — dane ewidencyjne, mniejsza waga wizualna niż treść */
.imid-about__meta {
	margin: 0 0 2.5rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-muted, #4B5563);
}

.imid-about__meta-label { font-weight: 700; }

.imid-about__meta-value {
	/* Długi identyfikator musi móc się złamać na wąskim ekranie */
	overflow-wrap: anywhere;
}

.imid-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.imid-about__col {
	background: var(--wp--preset--color--card, #fff);
	border: 1px solid var(--wp--preset--color--divider, #DDE2E8);
	border-radius: 12px;
	padding: 1.75rem;
}

.imid-about__subtitle {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, #14181f);
}

.imid-about__col p {
	margin: 0 0 0.75rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary, #374151);
}

.imid-about__list {
	margin: 0;
	padding-left: 1.25rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary, #374151);
}

.imid-about__list li + li { margin-top: 0.5rem; }

@media (max-width: 782px) {
	.imid-about { padding: 3rem 0; }
	.imid-about__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.imid-about__title { font-size: 1.625rem; }
}

/* ==========================================================================
   AKTUALNOŚCI — lista wpisów i pojedynczy wpis
   ========================================================================== */

.imid-blog { padding-block: 1rem 4rem; }

.imid-blog__title {
	margin: 0 0 2rem;
	font-size: 2.25rem;
	line-height: 1.2;
}

.imid-blog__list {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.imid-post-card {
	background: var(--wp--preset--color--card, #fff);
	border: 1px solid var(--wp--preset--color--divider, #DDE2E8);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
}

.imid-post-card__date {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted, #4B5563);
}

.imid-post-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
	line-height: 1.3;
}

.imid-post-card__title a {
	color: var(--wp--preset--color--contrast, #14181f);
	text-decoration: none;
}

/* Podkreślenie dopiero przy interakcji — tytuł jest już wyróżniony rozmiarem,
   a cała karta czytelnie oddziela wpisy (1.4.1 nie wymaga tu podkreślenia). */
.imid-post-card__title a:hover,
.imid-post-card__title a:focus-visible {
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
	text-decoration: underline;
}

.imid-post-card__excerpt {
	margin: 0;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary, #374151);
}

.imid-post-card__excerpt a {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #0A6FE0);
}

.imid-blog__pagination {
	margin-top: 2.5rem;
	gap: 0.5rem;
}

/* Cele nawigacji stronicowania — 44px (2.5.5) */
.imid-blog__pagination a,
.imid-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
}

.imid-blog__pagination a:hover,
.imid-blog__pagination a:focus-visible {
	background: var(--wp--preset--color--primary-tint, #E6F0FB);
}

.imid-blog__pagination .current {
	background: var(--wp--preset--color--primary-dark, #0B4FA8);
	color: #fff;
	font-weight: 700;
}

/* --- Pojedynczy wpis --- */

.imid-article { padding-block: 1rem 4rem; }

.imid-article__date {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-muted, #4B5563);
}

.imid-article__title {
	margin: 0 0 1.5rem;
	font-size: 2.25rem;
	line-height: 1.2;
}

.imid-article__image { margin-bottom: 2rem; }

.imid-article__image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.imid-article__sep {
	margin: 3rem 0 1.5rem;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--divider, #DDE2E8);
}

.imid-article .post-navigation-link {
	display: block;
	margin-bottom: 0.5rem;
}

@media (max-width: 782px) {
	.imid-blog__title,
	.imid-article__title { font-size: 1.75rem; }
	.imid-post-card { padding: 1.25rem; }
}

/* Nagłówek na wąskich ekranach — przycisk „Zaloguj się" wystawał o 12 px
   poza okno przy 400 px, powodując poziomy przewijak całej strony (1.4.10).
   Kontener nagłówka to flex z `nowrap`, więc przycisk nie miał się gdzie
   zmieścić obok logo i nawigacji. Pozwalamy mu się kurczyć. */
@media (max-width: 480px) {
	.imid-header__inner {
		gap: 12px;
		padding: 0 16px;
	}

	.imid-header__inner > * { min-width: 0; }

	.imid-header .imid-btn--outline {
		padding: 0 12px;
		font-size: 0.9375rem;
		white-space: nowrap;
	}
}

/* 🚨 Poziomy przewijak przy 400 px (WCAG 1.4.10 Reflow).
   Kontener nagłówka to flex z `nowrap` — logo, nawigacja i przycisk
   „Zaloguj się" nie mieszczą się w jednej linii i przycisk wychodził
   12 px poza okno. Samo zwężanie nie wystarczyło: przy tej szerokości
   po prostu brakuje miejsca.
   Rozwiązanie: pozwalamy zawinąć do drugiej linii. */
@media (max-width: 480px) {
	.imid-header__inner {
		flex-wrap: wrap !important;
		row-gap: 8px;
		padding: 10px 16px !important;
	}

	.imid-header__inner > * { min-width: 0; max-width: 100%; }

	.imid-header .imid-btn--outline {
		padding: 0 12px !important;
		white-space: nowrap;
	}
}

/* 🚨 Przycisk „Zaloguj się" wychodził 12 px poza okno przy 400 px.
   Przyczyna: `wp:shortcode` owija przycisk w <p>, a ten jako element flex
   kurczy się PONIŻEJ szerokości swojej zawartości (domyślne min-width:auto
   nie działa, gdy rodzic ma ustalony rozmiar). Przycisk 134 px nie mieścił
   się w akapicie 106 px i wylewał na zewnątrz.

   Margines prawy by tego nie naprawił — trzeba pozwolić akapitowi przyjąć
   szerokość zawartości. */
.imid-header__inner > p {
	flex: 0 0 auto;
	width: auto;
	min-width: max-content;
	margin: 0;
}

@media (max-width: 480px) {
	/* Przy zawijaniu akapit z przyciskiem idzie do drugiej linii i ma
	   już całą szerokość do dyspozycji. */
	.imid-header__inner > p { min-width: 0; }

	.imid-header .imid-btn--outline {
		max-width: 100%;
		padding: 0 12px !important;
	}
}

/* Pasek logotypów UE przeniesiony do nagłówka (nad menu, pod paskiem
   dostępności). W tej pozycji oryginalna wysokość 72 px spychała nawigację
   zbyt nisko, dlatego zmniejszamy znaki i odstępy.

   ⚠️ Logotypy MUSZĄ pozostać czytelne — wytyczne UE wymagają widocznego
   oznaczenia. Wysokość 44 px na desktopie to minimum zachowujące
   rozpoznawalność wszystkich trzech znaków w jednym pasku. */
.imid-header .imid-logos {
	border-top: 0;
	background: var(--wp--preset--color--card, #fff);
}

.imid-header .imid-logos__inner {
	padding: 10px 24px;
}

.imid-header .imid-logos img {
	height: 44px;
	max-width: 100%;
}

@media (max-width: 782px) {
	.imid-header .imid-logos__inner { padding: 8px 16px; }
	.imid-header .imid-logos img { height: 34px; }
}

@media (max-width: 480px) {
	.imid-header .imid-logos img { height: 28px; }
}

/* Znaki urzędowe zachowują barwy także w trybie wysokiego kontrastu —
   reguła wyłączająca filtr dla logotypów FERS jest już w a11y.css. */
html[data-a11y-contrast="1"] .imid-header .imid-logos {
	background: #fff !important;
	border-bottom-color: #fff !important;
}

/* Pasek logotypów był za niski — znaki wyglądały na ściśnięte i traciły
   czytelność, a wytyczne UE wymagają widocznego oznaczenia projektu.
   Wysokość znaków 44 → 60 px, odstępy pionowe 10 → 18 px. */
.imid-header .imid-logos__inner {
	padding: 18px 24px;
}

.imid-header .imid-logos img {
	height: 60px;
}

@media (max-width: 782px) {
	.imid-header .imid-logos__inner { padding: 14px 16px; }
	.imid-header .imid-logos img { height: 44px; }
}

@media (max-width: 480px) {
	.imid-header .imid-logos__inner { padding: 12px 16px; }
	.imid-header .imid-logos img { height: 34px; }
}

/* 🚨 Logotypy były SPŁASZCZONE blisko trzykrotnie.
   Plik ma proporcje 7,27:1 (1200×165). Moja reguła w nagłówku ustawiała
   `height` i `max-width: 100%`, ale bez `width: auto` — atrybut
   `width="1200"` z HTML pozostawał w mocy i rozciągał obraz na pełną
   szerokość przy wymuszonej niskiej wysokości.

   `width: auto` przywraca proporcje: przy wysokości 60 px szerokość
   wyniesie ~436 px zamiast 1200 px. */
.imid-header .imid-logos img {
	width: auto !important;
	height: 60px;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 782px) {
	.imid-header .imid-logos img { height: 46px; }
}

@media (max-width: 480px) {
	.imid-header .imid-logos img { height: 34px; }
}

/* Znaki po naprawie proporcji były za małe (436 px w pasku 1200 px).
   Zwiększamy do wysokości dającej czytelne napisy i wyrównujemy do lewej,
   w jednej linii z logo i nawigacją poniżej. */
.imid-header .imid-logos__inner {
	justify-content: flex-start;
	padding: 14px 24px;
}

.imid-header .imid-logos img {
	height: 92px;
}

@media (max-width: 1024px) {
	.imid-header .imid-logos img { height: 74px; }
}

@media (max-width: 782px) {
	.imid-header .imid-logos__inner { padding: 12px 16px; justify-content: center; }
	.imid-header .imid-logos img { height: 58px; }
}

@media (max-width: 480px) {
	.imid-header .imid-logos img { height: 44px; }
}

/* 🚨 Znaki były za małe: reguła `.imid-logos__inner img` ustawiała
   `max-width: 900px`, więc obraz nie mógł rosnąć razem z paskiem.
   Zamiast sterować wysokością, ustawiamy SZEROKOŚĆ na pełną dostępną —
   wysokość dopasuje się sama z proporcji 7,27:1, więc nic się nie spłaszczy. */
.imid-header .imid-logos__inner {
	justify-content: center;
	padding: 20px 24px;
}

.imid-header .imid-logos img {
	width: 100% !important;
	max-width: 1000px !important;
	height: auto !important;
}

@media (max-width: 1024px) {
	.imid-header .imid-logos img { max-width: 100% !important; }
}

@media (max-width: 782px) {
	.imid-header .imid-logos__inner { padding: 14px 16px; }
}

/* Znaki mają wypełnić szerokość kontenera nagłówka (1200 px), tak jak
   nawigacja poniżej. Wcześniejsze `max-width: 1000px` niepotrzebnie
   je zmniejszało. Wysokość wynika z proporcji 7,27:1 — przy 1152 px
   szerokości daje ~158 px, czyli znaki czytelne bez spłaszczenia. */
.imid-header .imid-logos__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
	justify-content: center;
}

.imid-header .imid-logos img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Przy pełnej szerokości 1152 px pasek rósł do 198 px, co spychało
   nawigację zbyt nisko. Ograniczamy szerokość znaków do 820 px:
   wysokość spada do ~113 px, napisy pozostają w pełni czytelne. */
.imid-header .imid-logos img {
	max-width: 820px !important;
}

@media (max-width: 900px) {
	.imid-header .imid-logos img { max-width: 100% !important; }
}

/* Odniesienie do strony projektu na końcu sekcji „Informacje o projekcie". */
.imid-about__more {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--divider, #DDE2E8);
	line-height: 1.7;
}

/* --- Wyrazniejsze tlo sekcji z kartami ---
   Kontrast liczony wzgledem WCAG 2.1 AA:
   tlo/karta 1,21:1 (roznica widoczna, bez wymogu normatywnego),
   ramka/tlo 3,25:1 i ramka/karta 3,93:1 (1.4.11 wymaga 3:1),
   tekst na tle: tytul 14,70:1, lead 8,52:1, meta 6,24:1. */
:root {
	--imid-band: #E4EAF2;
	--imid-band-border: var(--wp--preset--color--border, #75828f);
}
.imid-tiles,
.imid-about {
	background: var(--imid-band);
}
.imid-tile,
.imid-about__col {
	border-color: var(--imid-band-border);
}
.imid-about__more {
	border-top-color: var(--imid-band-border);
}
/* Na jasnoniebieskim tle #0A6FE0 daje tylko 3,98:1 (AA wymaga 4,5:1
   dla tekstu), wiec link w tej sekcji uzywa ciemniejszego odcienia. */
.imid-about__more a {
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
}

/* --- Nota licencyjna CC BY 4.0 --- */
.imid-footer__licence {
	margin: 0.75rem 0 0;
}
.imid-about__licence {
	margin: 1rem 0 0;
	line-height: 1.7;
	color: var(--wp--preset--color--text-secondary, #374151);
}
.imid-about__licence a {
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
}

/* --- Transkrypcja nagrania w lekcji ---
   <details> zwija sie bez JS i jest obslugiwane przez czytniki ekranu.
   Tresc zostaje w DOM nawet zwinieta, wiec Ctrl+F znajduje fragmenty
   wykladu (WCAG 1.2.3 — alternatywa dla nagrania). */
.imid-transkrypcja {
	margin: 2rem 0 0;
	border: 1px solid var(--wp--preset--color--divider, #DDE2E8);
	border-radius: 8px;
	background: var(--wp--preset--color--card, #fff);
}
.imid-transkrypcja > summary {
	/* 44px wysokosci = minimalny cel dotykowy (WCAG 2.5.5) */
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.25rem;
	font-weight: 700;
	cursor: pointer;
	color: var(--wp--preset--color--primary-dark, #0B4FA8);
	border-radius: 8px;
}
.imid-transkrypcja > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0A6FE0);
	outline-offset: 2px;
}
.imid-transkrypcja[open] > summary {
	border-bottom: 1px solid var(--wp--preset--color--divider, #DDE2E8);
	border-radius: 8px 8px 0 0;
}
.imid-transkrypcja__tresc {
	/* Dlugi tekst: ograniczona wysokosc z wlasnym przewijaniem, zeby
	   transkrypcja nie spychala nawigacji lekcji o kilka ekranow w dol. */
	max-height: 26rem;
	overflow-y: auto;
	padding: 1.25rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-secondary, #374151);
}
.imid-transkrypcja__tresc p {
	margin: 0 0 1rem;
	max-width: 68ch;
}
.imid-transkrypcja__tresc p:last-child { margin-bottom: 0; }

html[data-a11y-contrast="1"] .imid-transkrypcja,
html[data-a11y-contrast="1"] .imid-transkrypcja > summary,
html[data-a11y-contrast="1"] .imid-transkrypcja__tresc {
	background: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}

/* Obszar transkrypcji jest przewijalny, wiec ma tabindex="0" (WCAG 2.1.1 —
   inaczej uzytkownik klawiatury nie przewinie tresci). Skoro przyjmuje
   fokus, musi go tez pokazywac (2.4.7). */
.imid-transkrypcja__tresc:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0A6FE0);
	outline-offset: -3px;
}

/* Grafika hero. Kontener ma proporcje 4:3, plik 2:1 — `cover` przytnie
   boki, dlatego prompt wymagal trzymania tresci w centralnych 70% kadru. */
.imid-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Tlo kontenera znika, gdy jest obrazek — inaczej szare paski
   przebijalyby przez krawedzie przy innym stosunku bokow. */
.imid-hero__media:has(.imid-hero__img) {
	background: none;
}

/* --- Logo Instytutu w nagłówku ---
   Plik ma 2x wysokość docelową (160px przy wyświetlanych 40px), żeby
   na ekranach Retina nie był rozmyty. */
.imid-brand__logo {
	height: 40px;
	width: auto;
	display: block;
}

/* 🚨 W trybie wysokiego kontrastu granatowe #1B3A7E na czarnym tle daje
   1,95:1 — logo byłoby praktycznie niewidoczne. Podmieniamy na wersję
   białą (21:1). Sam `filter: invert()` dałby brudny odcień, bo logo nie
   jest czysto jednobarwne na krawędziach. */
html[data-a11y-contrast="1"] .imid-brand__logo {
	content: url("img/logo-imid-white.png");
}

@media (max-width: 782px) {
	.imid-brand__logo { height: 32px; }
}