/**
 * SP1 Siechnice — układ i komponenty.
 *
 * Odwzorowanie makiety „SP1 Siechnice Strona Glowna.dc.html”.
 * Wartości px z makiety przeliczono na rem, aby reagowały na przełącznik
 * rozmiaru tekstu; w pikselach pozostawiono wyłącznie włoskowe obramowania
 * i elementy chromu, których skalowanie nie jest pożądane.
 *
 * SPIS TREŚCI
 *   1.  Fonty lokalne
 *   2.  Kontener i sekcje
 *   3.  Przyciski
 *   4.  Pasek sieci i przełącznik placówek
 *   5.  Pasek dostępności
 *   6.  Nagłówek przyklejony, identyfikacja, nawigacja
 *   7.  Menu mobilne i hamburger
 *   8.  Pasek „Ważne teraz”
 *   9.  Sekcja powitalna (hero)
 *  10.  Szybki dostęp
 *  11.  Karty aktualności
 *  12.  Wydarzenia
 *  13.  Kafle sieci szkół
 *  14.  Nagłówek podstrony i okruszki
 *  15.  Układ dwukolumnowy i panel boczny
 *  16.  Bloki treści: tekst, tabela, dokumenty, mapa
 *  17.  Treść redakcyjna (.sp-prose)
 *  18.  Formularze, wyszukiwarka, komentarze
 *  19.  Paginacja i nawigacja między wpisami
 *  20.  Brak treści
 *  21.  Stopka
 *  22.  Punkty łamania
 */

/* ==========================================================================
   1. Fonty lokalne (assets/fonts/) — bez odwołań do domen zewnętrznych
   ========================================================================== */

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Kontener i sekcje
   ========================================================================== */

[hidden] {
	display: none !important;
}

.sp-page {
	background: var(--sp-white);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.sp-main {
	flex: 1;
}

.sp-container {
	width: 100%;
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-section {
	padding-block: var(--sp-section-y-sm);
}

.sp-section--white {
	background: var(--sp-white);
}

.sp-section--surface {
	background: var(--sp-surface);
	padding-block: var(--sp-section-y);
}

.sp-section--divider {
	border-bottom: 1px solid var(--sp-line-3);
}

.sp-section--top-divider {
	border-top: 1px solid var(--sp-line-3);
}

/* Odstęp pionowy dla widoków list bez panelu bocznego. */
.sp-section--flow {
	padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(3rem, 7vw, 5rem);
}

.sp-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}

.sp-section__title {
	margin: 0;
	font-size: var(--sp-h2-small);
	color: var(--sp-navy-700);
}

.sp-section__title--lg {
	font-size: var(--sp-h2);
	letter-spacing: -0.015em;
}

.sp-section__subtitle {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

.sp-section__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-navy-700);
}

.sp-section__more:hover {
	gap: 0.75rem;
}

/* ==========================================================================
   3. Przyciski
   ========================================================================== */

.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	font-family: var(--sp-font-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--sp-radius);
	cursor: pointer;
	transition: background-color var(--sp-transition), color var(--sp-transition);
}

.sp-btn--gold {
	background: var(--sp-accent);
	color: var(--sp-accent-on);
	border-bottom: 2px solid var(--sp-accent-strong);
}

.sp-btn--gold:hover,
.sp-btn--gold:focus-visible {
	background: var(--sp-accent-hover);
	color: var(--sp-accent-on);
}

.sp-btn--navy {
	background: var(--sp-navy-700);
	color: var(--sp-white);
}

.sp-btn--navy:hover,
.sp-btn--navy:focus-visible {
	background: var(--sp-navy-800);
	color: var(--sp-white);
}

.sp-btn--outline {
	background: transparent;
	color: var(--sp-white);
	font-weight: 600;
	border: 1px solid rgba(255, 255, 255, 0.45);
}

.sp-btn--outline:hover,
.sp-btn--outline:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: var(--sp-white);
}

.sp-btn--lg {
	padding: 0.9375rem 1.625rem;
	font-size: 1rem;
}

.sp-btn__icon {
	font-size: 0.8125rem;
}

.sp-btn__meta {
	font-weight: 500;
}

/* ==========================================================================
   4. Pasek sieci (#071228) i przełącznik placówek
   ========================================================================== */

.sp-topbar {
	background: var(--sp-navy-900);
	color: var(--sp-on-dark-soft);
	font-size: 0.8125rem;
	border-bottom: 1px solid var(--sp-line-dark);
}

.sp-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	padding-block: 0.4375rem;
}

.sp-topbar__left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
}

.sp-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.5rem;
	color: var(--sp-on-dark);
	font-weight: 600;
	text-decoration: none;
}

.sp-topbar__brand:hover,
.sp-topbar__brand:focus-visible {
	color: var(--sp-accent);
}

.sp-topbar__mark {
	display: inline-grid;
	grid-template-columns: repeat(2, 4px);
	gap: 2px;
	flex: none;
}

.sp-topbar__mark span {
	width: 4px;
	height: 4px;
	background: #6f80a3;
}

.sp-topbar__mark span:first-child {
	background: var(--sp-accent);
}

.sp-topbar__divider {
	color: var(--sp-navy-400);
}

.sp-topbar__note {
	color: var(--sp-on-dark-meta);
}

.sp-switcher {
	position: relative;
}

.sp-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	min-height: 1.5rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sp-on-dark-soft);
	background: transparent;
	border: none;
	border-radius: var(--sp-radius);
}

.sp-switcher__toggle:hover,
.sp-switcher__toggle:focus-visible {
	color: var(--sp-white);
}

.sp-switcher__caret {
	font-size: 0.5625rem;
	transition: transform var(--sp-transition);
}

.sp-switcher__toggle[aria-expanded="true"] .sp-switcher__caret {
	transform: rotate(180deg);
}

.sp-switcher__list {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	z-index: 70;
	min-width: 18rem;
	max-width: min(22rem, calc(100vw - 2rem));
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	background: var(--sp-white);
	border: 1px solid #d6dce6;
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow-menu);
}

.sp-switcher__list li + li {
	margin-top: 0;
}

.sp-switcher__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	color: var(--sp-ink);
	text-decoration: none;
	border-radius: 2px;
}

.sp-switcher__link:hover,
.sp-switcher__link:focus-visible {
	background: var(--sp-surface-2);
	color: var(--sp-navy-700);
}

.sp-switcher__link.is-current .sp-switcher__name {
	font-weight: 700;
}

.sp-switcher__name {
	font-weight: 500;
}

.sp-switcher__domain {
	font-size: 0.75rem;
	color: var(--sp-muted);
}

/* ==========================================================================
   5. Pasek dostępności (#0b1a3a)
   ========================================================================== */

.sp-accessbar {
	background: var(--sp-navy-800);
	color: var(--sp-on-dark);
	font-size: 0.8125rem;
}

.sp-accessbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 0.5rem;
}

.sp-accessbar__name {
	margin: 0;
	letter-spacing: 0.02em;
}

.sp-accessbar__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.sp-accessbar__label {
	color: var(--sp-on-dark-soft);
}

.sp-textsize {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.sp-textsize__btn,
.sp-contrast-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 1.75rem;
	padding: 0.3125rem 0.75rem;
	font-family: var(--sp-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--sp-radius);
	cursor: pointer;
}

.sp-textsize__btn {
	color: var(--sp-on-dark);
	background: transparent;
	border: 1px solid #5a6c8f;
}

.sp-textsize__btn:hover {
	background: rgba(242, 244, 248, 0.16);
}

.sp-textsize__btn[aria-pressed="true"] {
	color: var(--sp-navy-800);
	background: var(--sp-surface-2);
	border-color: var(--sp-surface-2);
}

.sp-contrast-toggle {
	color: var(--sp-surface-2);
	background: transparent;
	border: 1px solid #5a6c8f;
}

.sp-contrast-toggle:hover {
	background: rgba(242, 244, 248, 0.16);
}

.sp-contrast-toggle[aria-pressed="true"] {
	color: var(--sp-navy-800);
	background: var(--sp-surface-2);
	border-color: var(--sp-surface-2);
}

/* ==========================================================================
   6. Nagłówek przyklejony, identyfikacja, nawigacja
   ========================================================================== */

.sp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sp-white);
	border-bottom: 1px solid var(--sp-line);
	box-shadow: var(--sp-shadow-header);
}

.sp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.875rem;
}

.sp-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	min-width: 0;
}

.sp-logo {
	display: block;
	flex: none;
}

.sp-branding__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

.sp-branding__name {
	font-family: var(--sp-font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--sp-navy-700);
	letter-spacing: -0.01em;
}

.sp-branding__sub {
	font-size: 0.75rem;
	color: var(--sp-muted);
	letter-spacing: 0.05em;
}

.sp-header__nav {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.sp-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-nav__list li {
	margin: 0;
	position: relative;
}

.sp-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sp-ink);
	text-decoration: none;
	border-radius: var(--sp-radius);
}

.sp-nav__list a:hover,
.sp-nav__list a:focus-visible {
	background: var(--sp-surface-2);
	color: var(--sp-navy-700);
}

.sp-nav__list .current-menu-item > a,
.sp-nav__list .current_page_item > a,
.sp-nav__list .current-menu-ancestor > a,
.sp-nav__list a[aria-current="page"] {
	color: var(--sp-navy-700);
	background: var(--sp-surface-3);
	font-weight: 600;
}

/* Podmenu drugiego poziomu. */
.sp-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	display: none;
	min-width: 15rem;
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	background: var(--sp-white);
	border: 1px solid var(--sp-line-2);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow-menu);
}

.sp-nav__list li:hover > .sub-menu,
.sp-nav__list li:focus-within > .sub-menu {
	display: block;
}

.sp-nav__list .sub-menu a {
	display: flex;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-size: 0.9375rem;
}

.sp-header__ediary {
	margin-left: 0.75rem;
	flex: none;
}

/* ==========================================================================
   7. Menu mobilne i hamburger
   ========================================================================== */

.sp-burger {
	display: none;
	width: 2.875rem;
	height: 2.875rem;
	flex: none;
	place-content: center;
	justify-items: center;
	gap: 5px;
	padding: 0;
	background: var(--sp-navy-700);
	border: none;
	border-radius: var(--sp-radius);
	cursor: pointer;
}

.sp-burger__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--sp-white);
}

.sp-nav-mobile {
	padding: 0.5rem 1rem 1rem;
	background: var(--sp-surface);
	border-top: 1px solid var(--sp-line);
}

.sp-nav-mobile__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-nav-mobile__list li {
	margin: 0;
}

.sp-nav-mobile__list a {
	display: block;
	padding: 0.9375rem 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--sp-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sp-line-3);
}

.sp-nav-mobile__list a[aria-current="page"] {
	color: var(--sp-navy-700);
	font-weight: 600;
}

.sp-nav-mobile__list .sub-menu {
	margin: 0;
	padding-left: 1rem;
	list-style: none;
}

.sp-nav-mobile .sp-search-form {
	margin-top: 1rem;
}

/* ==========================================================================
   8. Pasek „Ważne teraz”
   ========================================================================== */

.sp-alert {
	background: var(--sp-surface-current);
	border-bottom: 1px solid var(--sp-accent-strong);
}

/* Ogłoszenie zamknięte wcześniej przez użytkownika — atrybut ustawia
   skrypt inline w <head>, więc pasek nie zdąży mignąć. */
html[data-sp-alert-dismissed="1"] .sp-alert {
	display: none;
}

.sp-alert__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
}

.sp-alert__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--sp-ink);
}

.sp-alert__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-white);
	background: var(--sp-navy-700);
	border-radius: 2px;
}

.sp-alert__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 1.5rem;
	font-weight: 600;
	color: var(--sp-navy-700);
}

.sp-alert__close {
	flex: none;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	min-height: 2rem;
	background: transparent;
	color: var(--sp-navy-700);
	border: 1px solid var(--sp-accent-strong);
	border-radius: var(--sp-radius);
	font-size: 0.875rem;
	line-height: 1;
}

.sp-alert__close:hover {
	background: var(--sp-white);
}

/* ==========================================================================
   9. Sekcja powitalna (hero)
   ========================================================================== */

.sp-hero {
	position: relative;
	overflow: hidden;
	color: var(--sp-white);
	background: linear-gradient(115deg, #0b1a3a 0%, #10254f 46%, #1c3a71 100%);
}

.sp-hero__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(circle at 78% 30%, #000 0%, transparent 68%);
	mask-image: radial-gradient(circle at 78% 30%, #000 0%, transparent 68%);
}

.sp-hero__glow {
	position: absolute;
	top: -60px;
	right: -80px;
	width: 420px;
	height: 420px;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 165, 63, 0.28) 0%, transparent 70%);
}

.sp-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	align-items: center;
	gap: clamp(2rem, 5vw, 3.5rem);
	padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 8vw, 5.5rem);
}

.sp-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1.125rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sp-accent);
}

.sp-hero__rule {
	display: block;
	width: 28px;
	height: 2px;
	flex: none;
	background: var(--sp-accent);
}

.sp-hero__title {
	margin: 0 0 1.375rem;
	font-family: var(--sp-font-serif);
	font-weight: 600;
	font-size: var(--sp-h1-hero);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--sp-white);
}

.sp-hero__lead {
	margin: 0 0 2rem;
	max-width: 54ch;
	font-size: var(--sp-lead);
	line-height: 1.65;
	color: var(--sp-on-dark-lead);
}

.sp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

.sp-hero__media {
	min-width: 0;
}

.sp-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--sp-radius);
}

.sp-hero__placeholder {
	display: grid;
	place-items: center;
	min-height: clamp(15rem, 32vw, 23.75rem);
	padding: 1.5rem;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
}

.sp-hero__placeholder span {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sp-on-dark-soft);
}

/* ==========================================================================
   10. Szybki dostęp
   ========================================================================== */

.sp-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14.25rem, 100%), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-quicklinks__item {
	margin: 0;
}

.sp-quicklink {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	height: 100%;
	padding: 1.5rem;
	text-decoration: none;
	background: var(--sp-white);
	border: 1px solid var(--sp-line-2);
	border-left: 4px solid var(--sp-navy-700);
	border-radius: var(--sp-radius);
	transition: transform var(--sp-transition), box-shadow var(--sp-transition), border-color var(--sp-transition);
}

a.sp-quicklink:hover,
a.sp-quicklink:focus-visible {
	border-left-color: var(--sp-accent);
	box-shadow: var(--sp-shadow-card);
	transform: translateY(-2px);
}

.sp-quicklink__kicker {
	font-family: var(--sp-font-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--sp-accent-text);
}

.sp-quicklink__label {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sp-navy-700);
}

.sp-quicklink__desc {
	font-size: 0.90625rem;
	line-height: 1.55;
	color: var(--sp-muted);
}

/* ==========================================================================
   11. Karty aktualności
   ========================================================================== */

.sp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18.125rem, 100%), 1fr));
	gap: 1.5rem;
}

.sp-card {
	display: flex;
	flex-direction: column;
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	overflow: hidden;
	transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-card:hover {
	box-shadow: var(--sp-shadow-card);
	transform: translateY(-2px);
}

.sp-card__media {
	display: block;
	text-decoration: none;
}

.sp-card__image {
	display: block;
	width: 100%;
	height: 11rem;
	object-fit: cover;
}

.sp-card__image--placeholder {
	display: grid;
	place-items: center;
	background: linear-gradient(150deg, var(--sp-placeholder-a), var(--sp-placeholder-b));
}

.sp-placeholder__label {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sp-muted-strong);
}

.sp-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
}

.sp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

.sp-card__date {
	font-weight: 600;
	color: var(--sp-accent-text);
}

.sp-card__category {
	color: var(--sp-muted);
	text-decoration-thickness: 1px;
}

.sp-card__title {
	margin: 0;
	font-family: var(--sp-font-serif);
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sp-navy-700);
}

.sp-card__title a {
	color: inherit;
	text-decoration: none;
}

.sp-card__title a:hover,
.sp-card__title a:focus-visible {
	text-decoration: underline;
}

.sp-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sp-ink-excerpt);
}

.sp-card__more {
	margin: auto 0 0;
	padding-top: 0.5rem;
}

.sp-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-navy-700);
	text-decoration: none;
}

.sp-card__more a:hover,
.sp-card__more a:focus-visible {
	color: var(--sp-accent-text);
	gap: 0.75rem;
}

/* ==========================================================================
   12. Wydarzenia
   ========================================================================== */

.sp-events {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-events__item {
	margin: 0;
}

.sp-event {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	height: 100%;
	padding: 1.125rem 1.25rem;
	text-decoration: none;
	background: var(--sp-white);
	border: 1px solid var(--sp-line-2);
	border-top: 3px solid var(--sp-accent-strong);
	border-radius: var(--sp-radius);
	transition: box-shadow var(--sp-transition), transform var(--sp-transition);
}

.sp-event:hover,
.sp-event:focus-visible {
	box-shadow: var(--sp-shadow-card);
	transform: translateY(-2px);
}

.sp-event__date {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sp-accent-text);
}

.sp-event__title {
	font-family: var(--sp-font-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sp-navy-700);
}

.sp-event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

/* ==========================================================================
   13. Kafle sieci szkół
   ========================================================================== */

.sp-network {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14.375rem, 100%), 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-network__item {
	margin: 0;
}

.sp-network__tile {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	height: 100%;
	padding: 1.125rem 1.25rem;
	text-decoration: none;
	background: var(--sp-white);
	border: 1px solid var(--sp-line-2);
	border-radius: var(--sp-radius);
	transition: border-color var(--sp-transition);
}

.sp-network__tile:hover,
.sp-network__tile:focus-visible {
	border-color: var(--sp-navy-700);
}

.sp-network__tile.is-current {
	background: var(--sp-surface-current);
	border-color: var(--sp-accent-strong);
}

.sp-network__name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sp-navy-700);
}

.sp-network__domain {
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

/* ==========================================================================
   14. Nagłówek podstrony i okruszki
   ========================================================================== */

.sp-pagehead {
	background: var(--sp-navy-700);
	color: var(--sp-white);
	padding-block: clamp(1.875rem, 4vw, 2.75rem) clamp(2.125rem, 5vw, 3.25rem);
}

.sp-pagehead__title {
	margin: 0 0 0.875rem;
	font-family: var(--sp-font-serif);
	font-weight: 600;
	font-size: var(--sp-h1-page);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--sp-white);
}

.sp-pagehead__lead {
	margin: 0;
	max-width: 62ch;
	font-size: var(--sp-lead-page);
	line-height: 1.65;
	color: var(--sp-on-dark-lead);
}

.sp-breadcrumbs {
	margin-bottom: 1.125rem;
	font-size: 0.84375rem;
	color: var(--sp-on-dark-soft);
}

.sp-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0;
}

.sp-breadcrumbs__item a {
	color: var(--sp-on-dark-soft);
	min-height: 1.5rem;
	display: inline-flex;
	align-items: center;
}

.sp-breadcrumbs__item a:hover,
.sp-breadcrumbs__item a:focus-visible {
	color: var(--sp-white);
}

.sp-breadcrumbs__item [aria-current="page"] {
	color: var(--sp-white);
}

/* ==========================================================================
   15. Układ dwukolumnowy i panel boczny
   ========================================================================== */

.sp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 19.75rem;
	align-items: start;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(3rem, 7vw, 5rem);
}

.sp-content {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	min-width: 0;
}

.sp-aside {
	display: grid;
	gap: 1.125rem;
	position: sticky;
	top: var(--sp-header-offset);
	min-width: 0;
}

.sp-aside__box {
	padding: 1.5rem;
	background: var(--sp-white);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

.sp-aside__box--office {
	background: var(--sp-surface);
	border-top: 3px solid var(--sp-navy-700);
}

.sp-aside__title {
	margin: 0 0 0.875rem;
	font-family: var(--sp-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.sp-aside__address {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--sp-ink-soft);
}

.sp-aside__hours {
	margin: 0.875rem 0 0;
	font-size: 0.875rem;
	color: var(--sp-muted);
}

.sp-aside__list,
.sp-aside .widget ul {
	display: grid;
	gap: 0.6875rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.sp-aside__list li,
.sp-aside .widget li {
	margin: 0;
}

.sp-aside__list a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	color: var(--sp-navy-700);
}

/* ==========================================================================
   16. Bloki treści: tekst, tabela, dokumenty, mapa
   ========================================================================== */

.sp-block__title {
	margin: 0 0 0.875rem;
	font-family: var(--sp-font-serif);
	font-size: var(--sp-h3);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sp-navy-700);
}

.sp-block__text,
.sp-block__placeholder {
	margin: 0 0 1.125rem;
	max-width: 68ch;
	font-size: 1.03125rem;
	line-height: 1.7;
	color: var(--sp-ink-soft);
}

.sp-block__placeholder {
	padding: 1rem 1.25rem;
	background: var(--sp-surface);
	border-left: 4px solid var(--sp-accent-strong);
	border-radius: var(--sp-radius);
	color: var(--sp-muted);
}

.sp-block__note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

.sp-block__list {
	max-width: 68ch;
	font-size: 1.03125rem;
	line-height: 1.7;
	color: var(--sp-ink-soft);
}

/* Tabela etykieta / wartość. */
.sp-datalist {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--sp-line);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	overflow: hidden;
}

.sp-datalist__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.625rem;
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--sp-white);
}

.sp-datalist__label {
	font-size: 0.96875rem;
	font-weight: 500;
	color: var(--sp-ink);
}

.sp-datalist__value {
	font-size: 0.90625rem;
	color: var(--sp-muted);
	text-align: right;
}

/* Lista dokumentów. */
.sp-doclist {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-doclist__item {
	margin: 0;
}

.sp-doclist__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.9375rem 1.125rem;
	text-decoration: none;
	background: var(--sp-white);
	border: 1px solid var(--sp-line-2);
	border-left: 4px solid var(--sp-accent-strong);
	border-radius: var(--sp-radius);
	transition: background-color var(--sp-transition), border-color var(--sp-transition);
}

.sp-doclist__link:hover,
.sp-doclist__link:focus-visible {
	background: var(--sp-surface);
	border-left-color: var(--sp-accent);
}

.sp-doclist__name {
	font-size: 0.96875rem;
	font-weight: 500;
	color: var(--sp-navy-700);
}

.sp-doclist__meta {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--sp-muted);
}

/* Osadzona mapa. */
.sp-prose iframe,
.sp-map {
	display: block;
	width: 100%;
	min-height: clamp(12.5rem, 26vw, 18.75rem);
	border: 1px solid var(--sp-line-2);
	border-radius: var(--sp-radius);
}

/* ==========================================================================
   17. Treść redakcyjna (.sp-prose)
   ========================================================================== */

.sp-prose {
	max-width: 68ch;
	font-size: 1.03125rem;
	line-height: 1.7;
	color: var(--sp-ink-soft);
}

.sp-prose > * + * {
	margin-top: 1.125rem;
}

.sp-prose h2 {
	margin-top: 2.25rem;
	font-size: var(--sp-h3);
}

.sp-prose h3 {
	margin-top: 1.75rem;
	font-size: 1.1875rem;
}

.sp-prose a {
	color: var(--sp-navy-700);
	text-decoration: underline;
}

.sp-prose ul,
.sp-prose ol {
	padding-left: 1.375rem;
}

.sp-prose img {
	border-radius: var(--sp-radius);
}

.sp-entry {
	min-width: 0;
}

.sp-entry__meta {
	margin-bottom: 1.25rem;
}

.sp-entry__thumb {
	margin: 0 0 1.75rem;
}

.sp-entry__thumb img {
	border-radius: var(--sp-radius);
}

.sp-entry__download {
	margin: 0 0 1.5rem;
}

.sp-entry__tags {
	margin: 1.75rem 0 0;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

.sp-entry__tags-label {
	font-weight: 600;
	color: var(--sp-ink);
}

.sp-entry__edit {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
}

.sp-pagelinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	font-size: 0.9375rem;
}

.sp-pagelinks a,
.sp-pagelinks > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--sp-line-2);
	border-radius: var(--sp-radius);
	text-decoration: none;
}

/* ==========================================================================
   18. Formularze, wyszukiwarka, komentarze
   ========================================================================== */

.sp-search-form__label {
	font-size: 0.9375rem;
}

.sp-search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sp-search-form__input {
	flex: 1 1 12rem;
	min-width: 0;
}

.sp-search-form__submit {
	flex: none;
}

.sp-search-top {
	max-width: 34rem;
}

.sp-comments {
	padding-top: 2rem;
	border-top: 1px solid var(--sp-line);
}

.sp-comments__title {
	font-size: var(--sp-h3);
}

.sp-comments__list,
.sp-comments__list .children {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.sp-comments__list .children {
	margin: 1rem 0 0 1.5rem;
}

.sp-comments__list .comment-body {
	padding: 1.25rem;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	margin-bottom: 1rem;
}

.sp-comments__notes {
	font-size: 0.875rem;
	color: var(--sp-muted);
}

.comment-form p {
	margin-bottom: 1rem;
}

/* ==========================================================================
   19. Paginacja i nawigacja między wpisami
   ========================================================================== */

.sp-pagination {
	margin-top: 2.5rem;
}

.sp-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-pagination__item {
	margin: 0;
}

.sp-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-navy-700);
	text-decoration: none;
	background: var(--sp-white);
	border: 1px solid var(--sp-line-2);
	border-radius: var(--sp-radius);
}

.sp-pagination__item .page-numbers:hover {
	background: var(--sp-surface-2);
}

.sp-pagination__item .page-numbers.current {
	color: var(--sp-accent-on);
	background: var(--sp-accent);
	border-color: var(--sp-accent-strong);
}

.sp-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
}

.sp-postnav__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.125rem 1.25rem;
	text-decoration: none;
	background: var(--sp-white);
	border: 1px solid var(--sp-line-2);
	border-radius: var(--sp-radius);
}

.sp-postnav__link:hover {
	border-color: var(--sp-navy-700);
}

.sp-postnav__label {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.sp-postnav__title {
	font-family: var(--sp-font-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--sp-navy-700);
}

.sp-postnav__link--next {
	text-align: right;
}

/* ==========================================================================
   20. Brak treści
   ========================================================================== */

.sp-nothing {
	max-width: 44rem;
}

.sp-nothing__title {
	font-size: var(--sp-h3);
}

.sp-nothing__list {
	max-width: 60ch;
	color: var(--sp-ink-soft);
}

.sp-nothing .sp-search-form {
	margin-top: 1.5rem;
	max-width: 34rem;
}

.sp-nothing__contact {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

/* ==========================================================================
   21. Stopka
   ========================================================================== */

.sp-footer {
	background: var(--sp-navy-800);
	color: var(--sp-on-dark-link);
}

.sp-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14.375rem, 100%), 1fr));
	gap: 2.5rem;
	padding-block: var(--sp-section-y-sm) 2rem;
}

.sp-footer a {
	color: var(--sp-on-dark-link);
}

.sp-footer a:hover,
.sp-footer a:focus-visible {
	color: var(--sp-white);
}

.sp-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.125rem;
}

.sp-footer__brand-name {
	display: flex;
	flex-direction: column;
	font-family: var(--sp-font-serif);
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--sp-white);
}

.sp-footer__brand-sub {
	font-family: var(--sp-font-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sp-on-dark-soft);
}

.sp-footer__address {
	font-size: 0.9375rem;
	line-height: 1.8;
}

.sp-footer__address a {
	color: var(--sp-accent);
}

.sp-footer__address a:hover,
.sp-footer__address a:focus-visible {
	color: var(--sp-white);
}

.sp-footer__hours {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--sp-on-dark-label);
}

.sp-footer__site {
	margin: 0.375rem 0 0;
	font-size: 0.84375rem;
	color: var(--sp-on-dark-faint);
}

.sp-footer__heading {
	margin: 0 0 1rem;
	font-family: var(--sp-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-on-dark-label);
}

.sp-footer__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.sp-footer__list li {
	margin: 0;
}

.sp-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
}

.sp-footer__bip {
	display: inline-flex !important;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5625rem 0.875rem 0.5625rem 0.6875rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sp-navy-700) !important;
	background: var(--sp-white);
	border-radius: var(--sp-radius);
	text-decoration: none;
}

.sp-footer__bip:hover,
.sp-footer__bip:focus-visible {
	background: var(--sp-surface-2);
	color: var(--sp-navy-700) !important;
}

.sp-footer__bip img {
	width: 40px;
	height: auto;
	flex: none;
}

.sp-footer__empty {
	font-size: 0.875rem;
	color: var(--sp-on-dark-faint);
}

.sp-footer__widget + .sp-footer__widget {
	margin-top: 1.5rem;
}

.sp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 1.25rem 2.25rem;
	border-top: 1px solid var(--sp-navy-500);
	font-size: 0.84375rem;
	color: var(--sp-on-dark-faint);
}

.sp-footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   22. Punkty łamania
   ========================================================================== */

/* Nawigacja przełącza się na wersję mobilną poniżej 1040 px — tak jak
   w makiecie (breakpoint zdefiniowany w skrypcie prototypu). */
@media (max-width: 64.9375rem) {

	.sp-nav {
		display: none;
	}

	.sp-burger {
		display: grid;
	}

	.sp-header__ediary {
		margin-left: 0;
		padding: 0.6875rem 1rem;
		font-size: 0.875rem;
	}

	.sp-header__ediary .sp-btn__icon {
		display: none;
	}
}

@media (min-width: 65rem) {

	.sp-nav-mobile {
		display: none !important;
	}
}

/* Panel boczny schodzi pod treść. */
@media (max-width: 60rem) {

	.sp-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-aside {
		position: static;
	}
}

@media (max-width: 40rem) {

	.sp-accessbar__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-footer__bottom {
		flex-direction: column;
	}

	.sp-postnav__link--next {
		text-align: left;
	}

	.sp-hero__glow {
		width: 260px;
		height: 260px;
	}
}

/* Przy powiększeniu tekstu do stopnia A++ i wąskim ekranie rezygnujemy
   z przyklejonego nagłówka, aby nie zabierał wysokości okna (WCAG 1.4.10). */
@media (max-height: 30rem), (max-width: 30rem) {

	.sp-header {
		position: static;
	}

	:root {
		--sp-header-offset: 1rem;
	}
}

/* ==========================================================================
   23. Pasek informacyjny o prywatności
   Przypięty do dolnej krawędzi okna. Nie przykrywa treści: dopóki jest
   widoczny, strona dostaje odpowiedni odstęp dolny, a scroll-padding-bottom
   chroni element z fokusem przed schowaniem się pod paskiem (WCAG 2.4.11).
   ========================================================================== */

.sp-privacy {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 80;
	background: var(--sp-navy-800);
	color: var(--sp-on-dark);
	border-top: 3px solid var(--sp-accent);
	box-shadow: 0 -8px 28px rgba(7, 18, 40, 0.28);
}

.sp-privacy__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

.sp-privacy__text {
	flex: 1 1 28rem;
	margin: 0;
	max-width: 82ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sp-on-dark);
}

.sp-privacy__link {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	margin-left: 0.25rem;
	color: var(--sp-accent);
	font-weight: 600;
}

.sp-privacy__link:hover,
.sp-privacy__link:focus-visible {
	color: var(--sp-white);
}

.sp-privacy__close {
	flex: none;
}

/* Pasek zamknięty wcześniej albo brak JavaScriptu w stanie początkowym —
   atrybuty ustawia skrypt inline w <head>, więc nic nie miga. */
html[data-sp-privacy-dismissed="1"] .sp-privacy {
	display: none;
}

html[data-sp-privacy-visible="1"] body {
	padding-bottom: 8.5rem;
	scroll-padding-bottom: 8.5rem;
}

@media (min-width: 48rem) {

	html[data-sp-privacy-visible="1"] body {
		padding-bottom: 6.5rem;
		scroll-padding-bottom: 6.5rem;
	}
}

@media (max-width: 40rem) {

	.sp-privacy__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.sp-privacy__close {
		width: 100%;
	}

	html[data-sp-privacy-visible="1"] body {
		padding-bottom: 12rem;
		scroll-padding-bottom: 12rem;
	}
}

/* Oznaczenie materiału przejętego z innej placówki sieci — wypisywane
   przez wtyczkę syndykacji przez hak sp1_post_meta_after. */
.sp-card__origin {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

.sp-card__origin a {
	color: var(--sp-muted);
}

.sp-card__origin a:hover,
.sp-card__origin a:focus-visible {
	color: var(--sp-navy-700);
}

/* Portal oświatowy gminy w przełączniku placówek — wyróżniony i oddzielony
   od listy szkół nagłówkiem grupującym. */
.sp-switcher__portal {
	padding-bottom: 0.375rem;
	margin-bottom: 0.375rem;
	border-bottom: 1px solid var(--sp-line);
}

.sp-switcher__portal .sp-switcher__name {
	font-weight: 700;
	color: var(--sp-navy-700);
}

.sp-switcher__heading {
	padding: 0.25rem 0.75rem 0.375rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

/* ==========================================================================
   24. Informacje urzędowe
   Godło Rzeczypospolitej Polskiej w górnym pasku oraz pas z danymi
   Inspektora Ochrony Danych i adresem do doręczeń elektronicznych.
   ========================================================================== */

/* --- Górny pasek: prawa strona jako rząd --- */

.sp-topbar__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* --- Godło państwowe --- */

.sp-emblem {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.5rem;
}

.sp-emblem__img {
	display: block;
	width: auto;
	height: 1.375rem;
	flex: none;
}

.sp-emblem__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sp-on-dark);
	white-space: nowrap;
}

/* Na wąskich ekranach zostaje samo godło — jego opis alternatywny
   nadal niesie pełną informację dla czytników ekranu. */
@media (max-width: 48rem) {

	.sp-emblem__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --- Pas informacji urzędowych w stopce --- */

.sp-footer__official {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: 1.75rem;
	border-top: 1px solid var(--sp-navy-500);
}

.sp-official {
	min-width: 0;
}

.sp-official__title {
	margin: 0 0 0.875rem;
	padding-left: 0.75rem;
	font-family: var(--sp-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-on-dark-label);
	border-left: 3px solid var(--sp-accent);
}

.sp-official__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-official__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0;
	font-size: 0.9375rem;
}

.sp-official__label {
	flex: 0 0 auto;
	min-width: 9rem;
	font-size: 0.8125rem;
	color: var(--sp-on-dark-label);
}

.sp-official__value {
	flex: 1 1 12rem;
	min-width: 0;
	color: var(--sp-on-dark-link);
}

.sp-official__value a {
	color: var(--sp-on-dark-link);
}

.sp-official__value a:hover,
.sp-official__value a:focus-visible {
	color: var(--sp-white);
}

/* Adres ADE — kod do przepisania, więc czcionka o stałej szerokości,
   zaznaczenie całości jednym kliknięciem i widoczna ramka pola. */
.sp-official__row--code {
	align-items: center;
}

/* Etykiety wierszy z kodem są dłuższe niż pozostałe („Adres do e-Doręczeń
   (ADE)”), więc dostają własną szerokość — inaczej pola ADE i ePUAP
   zaczynałyby się w różnych miejscach i kolumna wyglądałaby na postrzępioną. */
.sp-official__row--code .sp-official__label {
	min-width: 11.5rem;
}

.sp-official__ade {
	display: inline-block;
	padding: 0.375rem 0.625rem;
	font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", "Consolas", monospace;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--sp-white);
	background: #16294d;
	border: 1px solid #5a6c8f;
	border-radius: var(--sp-radius);
	user-select: all;
	-webkit-user-select: all;
	overflow-wrap: anywhere;
}

/* Przycisk kopiowania dokłada skrypt motywu — bez JavaScriptu nie ma go
   w kodzie strony, a adres i tak da się zaznaczyć jednym kliknięciem. */
.sp-official__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 1.75rem;
	margin-left: 0.5rem;
	padding: 0.25rem 0.625rem;
	font-family: var(--sp-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sp-accent);
	background: transparent;
	border: 1px solid #5a6c8f;
	border-radius: var(--sp-radius);
	cursor: pointer;
}

.sp-official__copy:hover {
	color: var(--sp-accent-on);
	background: var(--sp-accent);
	border-color: var(--sp-accent);
}

.sp-official__note {
	margin: 0.75rem 0 0;
	max-width: 60ch;
	font-size: 0.84375rem;
	line-height: 1.6;
	color: var(--sp-on-dark-faint);
}

/* ==========================================================================
   25. BIP i profile społecznościowe w górnym pasku
   Odnośniki zewnętrzne po prawej stronie paska. Cele dotykowe mają co
   najmniej 28 px, czyli z zapasem ponad wymagane 24 px (WCAG 2.5.8).
   ========================================================================== */

.sp-topbar__links {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

/* --- Biuletyn Informacji Publicznej ---
   Logo BIP jest czerwone i przezroczyste, więc na granacie byłoby nieczytelne.
   Biała płytka daje mu właściwe tło i jednocześnie odróżnia odnośnik od
   pozostałych elementów paska. */

.sp-bip-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.5rem;
	min-height: 1.75rem;
	padding: 0.25rem 0.5rem;
	background: var(--sp-white);
	border: 1px solid var(--sp-white);
	border-radius: var(--sp-radius);
	text-decoration: none;
}

/* Hover sygnalizujemy złotą obwódką, a nie złotym wypełnieniem: czerwone
   logo BIP na złotym tle mierzy 2,94:1 i byłoby po najechaniu gorzej
   widoczne niż w stanie spoczynku. Płytka zostaje biała. */
.sp-bip-link:hover,
.sp-bip-link:focus-visible {
	background: var(--sp-white);
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 2px var(--sp-accent);
}

.sp-bip-link__logo {
	display: block;
	width: auto;
	height: 1.125rem;
	flex: none;
}

/* --- Ikony serwisów --- */

.sp-social {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-social__item {
	margin: 0;
}

.sp-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--sp-on-dark);
	border-radius: var(--sp-radius);
	text-decoration: none;
	transition: color var(--sp-transition), background-color var(--sp-transition);
}

.sp-social__link:hover,
.sp-social__link:focus-visible {
	color: var(--sp-accent-on);
	background: var(--sp-accent);
}

.sp-social__icon {
	display: block;
	flex: none;
}

/* Poniżej 64 rem znika nota o organie prowadzącym — ta sama informacja stoi
   w stopce, a pasek musi pomieścić godło, BIP i ikony bez łamania się
   na trzy wiersze. */
@media (max-width: 64rem) {

	.sp-topbar__right .sp-topbar__note,
	.sp-topbar__right .sp-topbar__divider {
		display: none;
	}
}

/* ==========================================================================
   26. Kafelki usług z filtrem „Jestem…”
   Odwzorowanie sekcji „Usługi” z portalu edusiechnice.pl. Zaokrąglenia
   (1,25 rem na kartach, pełne na przyciskach) celowo różnią się od reszty
   motywu — dotyczą wyłącznie tej sekcji, aby kafelki w szkołach wyglądały
   tak samo jak na portalu gminy.
   ========================================================================== */

/* --- Filtr --- */

.sp-tiles-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 2rem;
}

.sp-tiles-filter__label {
	margin-right: 0.25rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sp-navy-700);
}

.sp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem; /* 36 px — z zapasem ponad 24 px z WCAG 2.5.8 */
	padding: 0.375rem 1rem;
	font-family: var(--sp-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sp-navy-700);
	background: var(--sp-white);
	border: 1.5px solid #848ea2; /* 3,30:1 wobec bieli */
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition);
}

.sp-chip:hover {
	background: var(--sp-surface-2);
	border-color: var(--sp-navy-700);
}

.sp-chip[aria-pressed="true"] {
	color: var(--sp-white);
	background: var(--sp-navy-700);
	border-color: var(--sp-navy-700);
}

.sp-chip__icon {
	width: 1rem;
	height: 1rem;
	flex: none;
}

/* --- Siatka --- */

.sp-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-tiles__item {
	display: flex;
	margin: 0;
}

.sp-tiles__item + .sp-tiles__item {
	margin-top: 0;
}

/* --- Karta --- */

.sp-tile {
	--tile: #10254f;
	--tile-tint: #eef1f6;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 2rem 1.75rem 1.75rem;
	overflow: hidden;
	background: var(--sp-white);
	border: 1px solid #e6e1d6;
	border-radius: 1.25rem;
	box-shadow: 0 1px 2px rgba(16, 37, 79, 0.04);
	transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-tile:hover {
	transform: translateY(-2px);
	box-shadow: var(--sp-shadow-card);
}

/* Dekoracyjne koło w prawym górnym rogu, w odcieniu koloru kafelka. */
.sp-tile__blob {
	position: absolute;
	top: -7rem;
	right: -7rem;
	width: 15rem;
	height: 15rem;
	pointer-events: none;
	background: var(--tile-tint);
	border-radius: 50%;
}

/* Domena usługi zewnętrznej — nad kołem, w prawym górnym rogu. */
.sp-tile__domain {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	max-width: calc(100% - 7.5rem);
	margin: 0;
	overflow: hidden;
	font-size: 0.8125rem;
	color: var(--sp-muted-strong); /* ≥ 6:1 na każdym odcieniu palety */
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sp-tile__domain-icon {
	width: 0.9375rem;
	height: 0.9375rem;
	flex: none;
}

.sp-tile__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.875rem;
	height: 3.875rem;
	margin-bottom: 1.5rem;
	color: var(--sp-white);
	background: var(--tile);
	border-radius: 1rem;
	box-shadow: 0 14px 24px -12px var(--tile);
	box-shadow: 0 14px 24px -12px color-mix(in srgb, var(--tile) 80%, transparent);
}

.sp-tile__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.sp-tile__title {
	position: relative;
	z-index: 1;
	margin: 0 0 0.75rem;
	font-family: var(--sp-font-serif);
	font-size: clamp(1.5rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--sp-navy-700);
}

.sp-tile__desc {
	position: relative;
	z-index: 1;
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--sp-muted);
}

.sp-tile__audience {
	position: relative;
	z-index: 1;
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-gold-800);
}

.sp-tile__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: auto;
}

.sp-tile__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem; /* 40 px */
	padding: 0.5rem 1rem;
	font-family: var(--sp-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: 999px;
	transition: background-color var(--sp-transition), border-color var(--sp-transition), color var(--sp-transition);
}

.sp-tile__btn--primary {
	color: var(--sp-white);
	background: var(--sp-navy-700);
	border-color: var(--sp-navy-700);
}

.sp-tile__btn--primary:hover,
.sp-tile__btn--primary:focus-visible {
	color: var(--sp-white);
	background: var(--sp-navy-800);
	border-color: var(--sp-navy-800);
}

.sp-tile__btn--secondary {
	color: var(--sp-navy-700);
	background: var(--sp-white);
	border-color: #848ea2; /* 3,30:1 wobec bieli */
}

.sp-tile__btn--secondary:hover,
.sp-tile__btn--secondary:focus-visible {
	color: var(--sp-navy-700);
	background: var(--sp-surface-2);
	border-color: var(--sp-navy-700);
}

.sp-tile__btn-icon {
	width: 1rem;
	height: 1rem;
	flex: none;
	transition: transform var(--sp-transition);
}

.sp-tile__btn:hover .sp-tile__btn-icon {
	transform: translateX(3px);
}

@media (max-width: 40rem) {

	.sp-tile {
		padding: 1.625rem 1.25rem 1.5rem;
	}
}

/* ==========================================================================
   27. Jadłospis tygodniowy
   Karty dni w tej samej stylistyce co kafelki usług (zaokrąglenia, ciepła
   linia obramowania). Alergeny jako numerowane plakietki objaśnione legendą.
   ========================================================================== */

/* --- Tydzień --- */

.sp-menu-week {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}

@media (min-width: 72rem) {

	.sp-menu-week {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.sp-menu-day {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.25rem 1.125rem 1.125rem;
	background: var(--sp-white);
	border: 1px solid #e6e1d6;
	border-radius: 1rem;
}

.sp-menu-day.is-today {
	border: 2px solid var(--sp-gold-700);
	box-shadow: var(--sp-shadow-card);
}

.sp-menu-day.is-closed {
	background: var(--sp-surface);
}

.sp-menu-day__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	margin: 0 0 0.875rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sp-line);
	font-size: 1rem;
}

.sp-menu-day__name {
	font-family: var(--sp-font-serif);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--sp-navy-700);
}

.sp-menu-day__date {
	font-family: var(--sp-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--sp-muted);
}

.sp-menu-day__badge {
	margin-left: auto;
	padding: 0.125rem 0.625rem;
	font-family: var(--sp-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sp-white);
	background: var(--sp-navy-700);
	border-radius: 999px;
}

.sp-menu-day__closed,
.sp-menu-day__empty,
.sp-menu-day__note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

.sp-menu-day__note {
	margin-top: 0.75rem;
	font-style: italic;
}

.sp-menu-day__closed strong {
	color: var(--sp-navy-700);
}

/* --- Posiłki --- */

.sp-menu-meals {
	margin: 0;
}

.sp-menu-meal + .sp-menu-meal {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--sp-line-2);
}

.sp-menu-meal__label {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.sp-menu-meal__body {
	margin: 0;
}

.sp-menu-meal__dish {
	display: block;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sp-ink);
}

/* --- Alergeny --- */

.sp-allergens {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0.375rem 0 0;
}

.sp-allergens__label {
	margin-right: 0.125rem;
	font-size: 0.75rem;
	color: var(--sp-muted);
}

.sp-allergen {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	color: #9a3412; /* 6,59:1 na #fdf1ea */
	background: #fdf1ea;
	border-radius: 999px;
}

/* --- Legenda --- */

.sp-menu-legend {
	margin: 2.5rem 0 0;
	padding: 1.5rem 1.5rem 1.25rem;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 1rem;
}

.sp-menu-legend__title {
	margin: 0 0 0.5rem;
	font-size: 1.375rem;
}

.sp-menu-legend__intro {
	margin: 0 0 1rem;
	max-width: 70ch;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

.sp-menu-legend__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-menu-legend__item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--sp-ink-soft);
}

.sp-menu-legend__item + .sp-menu-legend__item {
	margin-top: 0;
}

.sp-menu-legend__item .sp-allergen {
	flex: none;
}

/* --- Strona jadłospisu --- */

.sp-menu-page .sp-section__title {
	margin-bottom: 1.25rem;
}

.sp-menu-page__note {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

.sp-menu-page__next {
	margin: 0 0 1rem;
}

.sp-menu-page__list {
	margin-top: 2.5rem;
}

.sp-menu-page__all {
	margin: 1.5rem 0 0;
}

/* --- „Jadłospis na dziś” na stronie głównej --- */

.sp-menu-today {
	--tile: #c2410c;
	--tile-tint: #fdf1ea;

	position: relative;
	display: grid;
	gap: 1.25rem;
	padding: 1.75rem;
	overflow: hidden;
	background: var(--sp-white);
	border: 1px solid #e6e1d6;
	border-radius: 1.25rem;
}

.sp-menu-today__blob {
	position: absolute;
	top: -8rem;
	right: -8rem;
	width: 17rem;
	height: 17rem;
	pointer-events: none;
	background: var(--tile-tint);
	border-radius: 50%;
}

.sp-menu-today__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sp-menu-today__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	color: var(--sp-white);
	background: var(--tile);
	border-radius: 1rem;
	box-shadow: 0 14px 24px -12px var(--tile);
	box-shadow: 0 14px 24px -12px color-mix(in srgb, var(--tile) 80%, transparent);
}

.sp-menu-today__icon svg {
	width: 1.625rem;
	height: 1.625rem;
}

.sp-menu-today__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
	font-weight: 700;
}

.sp-menu-today__date {
	margin: 0.125rem 0 0;
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

.sp-menu-today__body {
	position: relative;
}

/* Na stronie głównej posiłki stoją obok siebie, każdy w osobnym polu. */
.sp-menu-today .sp-menu-meals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 0.75rem;
}

.sp-menu-today .sp-menu-meal {
	padding: 1rem 1.125rem;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 0.875rem;
}

.sp-menu-today .sp-menu-meal + .sp-menu-meal {
	margin-top: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--sp-line);
}

.sp-menu-today__actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

/* ==========================================================================
   28. Alergeny wypisane nazwami
   ========================================================================== */

.sp-allergens--names {
	gap: 0.3125rem;
}

.sp-allergen--name {
	display: inline-flex;
	min-width: 0;
	height: auto;
	padding: 0.1875rem 0.5625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.sp-menu-legend--names .sp-menu-legend__list {
	grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
	gap: 0.625rem 1.5rem;
}

.sp-menu-legend--names .sp-menu-legend__item {
	flex-direction: column;
	gap: 0.25rem;
}

.sp-menu-legend__desc {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--sp-muted);
}