:root {
    --sp11-navy-950: #082a22;
    --sp11-navy-900: #003c30;
    --sp11-blue-800: #005a46;
    --sp11-blue-700: #00705a;
    --sp11-blue-100: #ddf2ec;
    --sp11-sky-50: #f3f9f7;
    --sp11-surface: #ffffff;
    --sp11-canvas: #f5f8f7;
    --sp11-text: #172033;
    --sp11-muted: #536173;
    --sp11-border: #d5e2de;
    --sp11-amber-700: #8a5200;
    --sp11-amber-100: #fff0c7;
    --sp11-success-700: #005a46;
    --sp11-success-100: #ddf2ec;
    --sp11-danger-700: #a1262f;
    --sp11-danger-100: #ffe3e6;
    --sp11-focus: #ffbf47;
    --sp11-shadow-sm: 0 0.25rem 1rem rgba(0, 60, 48, 0.08);
    --sp11-shadow-md: 0 1rem 2.5rem rgba(0, 60, 48, 0.12);
    --sp11-radius-sm: 0.65rem;
    --sp11-radius: 1rem;
    --sp11-radius-lg: 1.45rem;
    --sp11-container: 76rem;
    --sp11-reading: 48rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--sp11-text);
    background: var(--sp11-canvas);
    font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--sp11-blue-800); text-decoration-thickness: 0.11em; text-underline-offset: 0.18em; }
a:hover { color: var(--sp11-navy-950); }
:focus-visible { outline: 0.2rem solid var(--sp11-focus); outline-offset: 0.2rem; }
[hidden] { display: none !important; }

.sp11-container { width: min(calc(100% - 2rem), var(--sp11-container)); margin-inline: auto; }
.sp11-reading { width: min(100%, var(--sp11-reading)); }
.sp11-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sp11-skip-link { position: fixed; z-index: 9999; top: 0.75rem; left: 0.75rem; padding: 0.75rem 1rem; color: #000; background: var(--sp11-focus); border: 0.125rem solid #000; border-radius: 0.45rem; transform: translateY(-160%); }
.sp11-skip-link:focus { transform: translateY(0); }

.sp11-topbar { color: #fff; background: var(--sp11-navy-950); font-size: 0.92rem; }
.sp11-topbar__inner { min-height: 2.9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp11-topbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.1rem; }
.sp11-topbar a { color: #fff; }
.sp11-topbar a:hover { text-decoration-thickness: 0.18em; }
.sp11-topbar__badge { display: inline-flex; gap: 0.45rem; align-items: center; padding: 0.2rem 0.65rem; color: var(--sp11-navy-950); background: var(--sp11-amber-100); border-radius: 999px; font-weight: 700; text-decoration: none; }

.sp11-header { position: relative; z-index: 30; background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--sp11-border); box-shadow: 0 0.35rem 1.5rem rgba(0,60,48,0.05); }
.sp11-header__brand-row { min-height: 6.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.sp11-brand { display: inline-flex; align-items: center; gap: 1rem; color: var(--sp11-navy-950); text-decoration: none; }
.sp11-brand__mark { width: 4.7rem; height: 4.7rem; display: grid; place-items: center; flex: 0 0 auto; padding: 0.12rem; overflow: hidden; background: #fff; border: 1px solid var(--sp11-border); border-radius: 1rem; box-shadow: var(--sp11-shadow-sm); }
.sp11-brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.sp11-brand__name { display: block; font-size: clamp(1.04rem, 2vw, 1.32rem); font-weight: 800; line-height: 1.2; }
.sp11-brand__patron { display: block; margin-top: 0.2rem; color: var(--sp11-muted); font-size: 0.9rem; font-weight: 600; }
.sp11-header__actions { display: flex; align-items: center; gap: 0.6rem; }
.sp11-nav-toggle { min-width: 3rem; min-height: 3rem; display: inline-grid; place-items: center; border: 1px solid var(--sp11-border); border-radius: 0.8rem; color: var(--sp11-navy-950); background: #fff; font-weight: 800; cursor: pointer; }
.sp11-nav-toggle__bars, .sp11-nav-toggle__bars::before, .sp11-nav-toggle__bars::after { width: 1.35rem; height: 0.14rem; display: block; background: currentColor; border-radius: 999px; content: ""; }
.sp11-nav-toggle__bars { position: relative; }
.sp11-nav-toggle__bars::before { position: absolute; top: -0.42rem; }
.sp11-nav-toggle__bars::after { position: absolute; top: 0.42rem; }

.sp11-nav { border-top: 1px solid var(--sp11-border); }
.sp11-nav__list, .sp11-nav__submenu { margin: 0; padding: 0; list-style: none; }
.sp11-nav__list { display: flex; align-items: stretch; gap: 0.18rem; }
.sp11-nav__item { position: relative; }
.sp11-nav__link, .sp11-nav__button { min-height: 3.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.8rem 0.85rem; color: var(--sp11-navy-950); background: transparent; border: 0; border-radius: 0.65rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.sp11-nav__link:hover, .sp11-nav__button:hover, .sp11-nav__link[aria-current="page"] { color: var(--sp11-blue-800); background: var(--sp11-sky-50); }
.sp11-nav__chevron { width: 0.55rem; height: 0.55rem; border-right: 0.12rem solid currentColor; border-bottom: 0.12rem solid currentColor; transform: rotate(45deg) translateY(-0.15rem); }
.sp11-nav__submenu { position: absolute; z-index: 40; top: calc(100% + 0.4rem); left: 0; min-width: 17rem; padding: 0.55rem; background: #fff; border: 1px solid var(--sp11-border); border-radius: 0.9rem; box-shadow: var(--sp11-shadow-md); }
.sp11-nav__submenu a { display: block; padding: 0.72rem 0.8rem; color: var(--sp11-text); border-radius: 0.55rem; font-weight: 650; text-decoration: none; }
.sp11-nav__submenu a:hover { color: var(--sp11-blue-800); background: var(--sp11-sky-50); }

.sp11-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #edf7f4 100%); border-bottom: 1px solid var(--sp11-border); }
.sp11-hero::before { position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 15%, rgba(0,90,70,.10) 0 0.15rem, transparent 0.16rem), radial-gradient(circle at 80% 30%, rgba(138,82,0,.10) 0 0.12rem, transparent 0.13rem); background-size: 2.4rem 2.4rem, 3rem 3rem; content: ""; mask-image: linear-gradient(to bottom, #000 0%, transparent 88%); }
.sp11-hero__inner { position: relative; min-height: 33rem; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 7vw, 6rem); }
.sp11-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; color: var(--sp11-blue-800); font-size: 0.82rem; font-weight: 850; letter-spacing: 0.085em; text-transform: uppercase; }
.sp11-eyebrow::before { width: 1.8rem; height: 0.25rem; background: var(--sp11-focus); border-radius: 999px; content: ""; }
.sp11-hero h1 { max-width: 15ch; margin: 0; color: var(--sp11-navy-950); font-size: clamp(2.25rem, 6vw, 4.7rem); line-height: 1.02; letter-spacing: -0.045em; }
.sp11-hero__lead { max-width: 39rem; margin: 1.35rem 0 0; color: var(--sp11-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.sp11-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.sp11-btn { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.72rem 1.05rem; border: 0.13rem solid transparent; border-radius: 0.75rem; font-weight: 800; text-decoration: none; }
.sp11-btn--primary { color: #fff; background: var(--sp11-blue-800); border-color: var(--sp11-blue-800); }
.sp11-btn--primary:hover { color: #fff; background: var(--sp11-navy-900); border-color: var(--sp11-navy-900); }
.sp11-btn--secondary { color: var(--sp11-navy-950); background: #fff; border-color: var(--sp11-border); }
.sp11-btn--secondary:hover { color: var(--sp11-blue-800); border-color: var(--sp11-blue-700); }
.sp11-hero__panel { position: relative; padding: 1.2rem; background: rgba(255,255,255,.88); border: 1px solid rgba(215,225,236,.95); border-radius: var(--sp11-radius-lg); box-shadow: var(--sp11-shadow-md); backdrop-filter: blur(0.5rem); }
.sp11-hero__visual { min-height: 20rem; display: grid; align-content: end; padding: 1.4rem; overflow: hidden; color: #fff; background: linear-gradient(145deg, rgba(0,60,48,.12), rgba(0,90,70,.18)), linear-gradient(135deg, var(--sp11-blue-700), var(--sp11-navy-950)); border-radius: 1rem; }
.sp11-hero__visual::before { width: 11rem; aspect-ratio: 1; align-self: start; justify-self: end; background: radial-gradient(circle at center, transparent 38%, rgba(255,255,255,.18) 39% 42%, transparent 43%), conic-gradient(from 20deg, rgba(255,255,255,.35), transparent 20% 40%, rgba(255,191,71,.55) 40% 54%, transparent 54% 74%, rgba(255,255,255,.28) 74%); border-radius: 50%; content: ""; }
.sp11-hero__visual strong { font-size: 1.35rem; line-height: 1.2; }
.sp11-hero__visual span { margin-top: 0.4rem; color: #e6f3ff; }

.sp11-quick { position: relative; z-index: 4; margin-top: -2rem; }
.sp11-quick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.sp11-quick-card { min-height: 8.7rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; color: var(--sp11-text); background: #fff; border: 1px solid var(--sp11-border); border-radius: var(--sp11-radius); box-shadow: var(--sp11-shadow-sm); text-decoration: none; }
.sp11-quick-card:hover { color: var(--sp11-navy-950); border-color: var(--sp11-blue-700); box-shadow: var(--sp11-shadow-md); transform: translateY(-0.15rem); }
.sp11-quick-card__icon { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; color: var(--sp11-blue-800); background: var(--sp11-blue-100); border-radius: 0.7rem; font-weight: 900; }
.sp11-quick-card__icon--image { width: 3.4rem; height: 3.4rem; padding: 0.2rem; overflow: hidden; background: #fff; border: 1px solid var(--sp11-border); }
.sp11-quick-card__icon--image img { width: 100%; height: 100%; object-fit: contain; }
.sp11-quick-card strong { font-size: 1.05rem; }
.sp11-quick-card span { color: var(--sp11-muted); font-size: 0.9rem; }

.sp11-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.sp11-section--white { background: #fff; }
.sp11-section--soft { background: var(--sp11-sky-50); border-block: 1px solid var(--sp11-border); }








.sp11-section__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.sp11-section__head h2 { margin: 0; color: var(--sp11-navy-950); font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; letter-spacing: -0.03em; }
.sp11-section__head p { max-width: 40rem; margin: 0.55rem 0 0; color: var(--sp11-muted); }
.sp11-text-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; white-space: nowrap; }

.sp11-alert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sp11-alert { padding: 1.15rem; background: #fff; border: 1px solid var(--sp11-border); border-left: 0.35rem solid var(--sp11-danger-700); border-radius: var(--sp11-radius-sm); box-shadow: var(--sp11-shadow-sm); }
.sp11-alert time { color: var(--sp11-muted); font-size: 0.9rem; }
.sp11-alert h3 { margin: 0.45rem 0 0.65rem; font-size: 1.15rem; line-height: 1.3; }
.sp11-alert h3 a { color: var(--sp11-navy-950); }

.sp11-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.sp11-news-card { overflow: hidden; background: #fff; border: 1px solid var(--sp11-border); border-radius: var(--sp11-radius); box-shadow: var(--sp11-shadow-sm); }
.sp11-news-card__media { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; color: var(--sp11-blue-800); background: linear-gradient(145deg, #ddf2ec, #f7fbfa); }
.sp11-news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sp11-news-card__placeholder { font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.sp11-news-card__body { padding: 1.15rem; }
.sp11-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; color: var(--sp11-muted); font-size: 0.88rem; }
.sp11-news-card h3 { margin: 0.65rem 0; font-size: 1.25rem; line-height: 1.3; }
.sp11-news-card h3 a { color: var(--sp11-navy-950); }
.sp11-news-card p { margin: 0; color: var(--sp11-muted); }

.sp11-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sp11-audience { padding: 1.35rem; background: #fff; border: 1px solid var(--sp11-border); border-radius: var(--sp11-radius); }
.sp11-audience:nth-child(2) { background: var(--sp11-navy-900); border-color: var(--sp11-navy-900); color: #fff; }
.sp11-audience:nth-child(2) h3, .sp11-audience:nth-child(2) a { color: #fff; }
.sp11-audience h3 { margin: 0; color: var(--sp11-navy-950); font-size: 1.3rem; }
.sp11-audience ul { margin: 1rem 0 0; padding-left: 1.15rem; }
.sp11-audience li + li { margin-top: 0.45rem; }
.sp11-audience a { font-weight: 700; }


.sp11-official { padding-block: clamp(2.6rem, 5vw, 4.4rem); background: #fff; border-top: 1px solid var(--sp11-border); }
.sp11-official__head { max-width: 47rem; margin-bottom: 1.4rem; }
.sp11-official__head h2 { margin: 0; color: var(--sp11-navy-950); font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.15; }
.sp11-official__head p { margin: 0.55rem 0 0; color: var(--sp11-muted); }
.sp11-official__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sp11-official-card { min-height: 12.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 1rem; color: var(--sp11-navy-950); background: #fff; border: 1px solid var(--sp11-border); border-radius: var(--sp11-radius); box-shadow: var(--sp11-shadow-sm); text-align: center; text-decoration: none; }
.sp11-official-card:hover { color: var(--sp11-blue-800); border-color: var(--sp11-blue-700); box-shadow: var(--sp11-shadow-md); transform: translateY(-0.12rem); }
.sp11-official-card__image { width: 100%; height: 7.2rem; display: grid; place-items: center; }
.sp11-official-card__image img { max-width: 8rem; max-height: 7.2rem; object-fit: contain; }
.sp11-official-card strong { line-height: 1.25; }
.sp11-social-link { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 0.75rem; padding: 0.45rem 0.65rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.35); border-radius: 0.65rem; text-decoration: none; }
.sp11-social-link img { width: 2.4rem; height: 2.4rem; object-fit: contain; border-radius: 0.35rem; }

.sp11-contact-band { padding-block: 2rem; color: #fff; background: var(--sp11-navy-950); }
.sp11-contact-band__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.5rem; align-items: center; }
.sp11-contact-band h2 { margin: 0; font-size: 1.55rem; }
.sp11-contact-band p { margin: 0.35rem 0 0; color: #d7e8f8; }
.sp11-contact-band a { color: #fff; font-weight: 800; }

.sp11-breadcrumbs { padding-block: 1rem; background: #fff; border-bottom: 1px solid var(--sp11-border); }
.sp11-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.65rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.sp11-breadcrumbs li:not(:last-child)::after { margin-left: 0.65rem; color: var(--sp11-muted); content: "/"; }
.sp11-page { padding-block: clamp(2.5rem, 6vw, 5rem); }
.sp11-page h1 { margin: 0 0 1.25rem; color: var(--sp11-navy-950); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.04em; }
.sp11-content { max-width: var(--sp11-reading); font-size: 1.05rem; }
.sp11-content h2, .sp11-content h3 { margin-top: 2.1em; color: var(--sp11-navy-950); line-height: 1.25; }
.sp11-content p, .sp11-content ul, .sp11-content ol { margin-block: 1em; }
.sp11-content img { margin-block: 1.5rem; border-radius: var(--sp11-radius-sm); }
.sp11-content table { width: 100%; border-collapse: collapse; }
.sp11-content th, .sp11-content td { padding: 0.75rem; border: 1px solid var(--sp11-border); text-align: left; vertical-align: top; }
.sp11-content th { color: var(--sp11-navy-950); background: var(--sp11-sky-50); }

.sp11-footer { color: #dcece7; background: var(--sp11-navy-900); }
.sp11-footer__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 2.5rem; padding-block: 3.2rem; }
.sp11-footer h2 { margin-top: 0; color: #fff; font-size: 1.05rem; }
.sp11-footer a { color: #fff; }
.sp11-footer ul { margin: 0; padding: 0; list-style: none; }
.sp11-footer li + li { margin-top: 0.5rem; }
.sp11-footer__bottom { padding-block: 1rem; border-top: 1px solid rgba(255,255,255,.16); font-size: 0.9rem; }

@media (max-width: 67.49rem) {
    .sp11-header__brand-row { min-height: 5.5rem; }
    .sp11-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: min(70vh, 38rem); overflow: auto; background: #fff; box-shadow: var(--sp11-shadow-md); }
    .sp11-nav__list { display: block; padding: 0.65rem 1rem 1rem; }
    .sp11-nav__link, .sp11-nav__button { width: 100%; justify-content: space-between; min-height: 3rem; }
    .sp11-nav__submenu { position: static; min-width: 0; margin: 0.1rem 0 0.45rem 1rem; padding: 0.25rem; box-shadow: none; }
    .sp11-hero__inner { min-height: auto; grid-template-columns: 1fr; }
    .sp11-hero__panel { max-width: 38rem; }
    .sp11-quick { margin-top: -1rem; }
    .sp11-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp11-alert-grid, .sp11-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp11-audience-grid { grid-template-columns: 1fr; }
    .sp11-official__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 67.5rem) {
    .sp11-nav-toggle { display: none; }
}

@media (max-width: 44rem) {
    .sp11-container { width: min(calc(100% - 1.25rem), var(--sp11-container)); }
    .sp11-topbar__inner { padding-block: 0.5rem; align-items: flex-start; flex-direction: column; }
    .sp11-topbar__links { gap: 0.35rem 0.8rem; }
    .sp11-brand__mark { width: 3.45rem; height: 3.45rem; border-radius: 0.75rem; }
    .sp11-brand__patron { display: none; }
    .sp11-hero h1 { font-size: clamp(2.2rem, 13vw, 3.55rem); }
    .sp11-actions, .sp11-btn { width: 100%; }
    .sp11-quick__grid, .sp11-alert-grid, .sp11-news-grid { grid-template-columns: 1fr; }
    .sp11-section__head { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
    .sp11-contact-band__grid, .sp11-footer__grid, .sp11-official__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .sp11-quick-card, .sp11-btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
    .sp11-brand__mark, .sp11-hero__visual, .sp11-contact-band, .sp11-footer { forced-color-adjust: auto; }
    .sp11-btn, .sp11-quick-card, .sp11-news-card, .sp11-alert, .sp11-official-card { border: 2px solid ButtonText; }
}

@media print {
    .sp11-topbar, .sp11-header, .sp11-quick, .sp11-official, .sp11-contact-band, .sp11-footer, .sp11-actions, .sp11-section__head .sp11-text-link { display: none !important; }
    body { color: #000; background: #fff; font-size: 11pt; line-height: 1.45; }
    .sp11-container, .sp11-reading, .sp11-content { width: 100%; max-width: none; }
    .sp11-page, .sp11-section { padding: 0; }
    a { color: #000; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; font-weight: 400; }
    h1, h2, h3 { break-after: avoid; }
    img, table, blockquote { break-inside: avoid; }
}


/* ==========================================================
   SP11 v1.3 — serwisy publiczne bezpośrednio pod hero
   Lekki SaaS Platinum z wyraźnym, lecz spokojnym akcentem
   ========================================================== */

.sp11-official {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(1.5rem, 3vw, 2.35rem);
    background:
        radial-gradient(circle at 8% 10%, rgba(0, 90, 70, 0.10), transparent 17rem),
        radial-gradient(circle at 92% 100%, rgba(255, 191, 71, 0.13), transparent 16rem),
        linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #f8fafc 100%);
    border-top: 0;
    border-bottom: 1px solid var(--sp11-border);
}

.sp11-official::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 0.28rem;
    background: linear-gradient(
        90deg,
        var(--sp11-blue-800) 0 42%,
        var(--sp11-focus) 42% 56%,
        #c9102d 56% 100%
    );
    content: "";
}

.sp11-official::after {
    position: absolute;
    z-index: -1;
    width: 18rem;
    height: 18rem;
    right: -8rem;
    bottom: -10rem;
    background:
        radial-gradient(circle at center,
            rgba(0, 90, 70, 0.08) 0 28%,
            transparent 29% 42%,
            rgba(0, 90, 70, 0.05) 43% 45%,
            transparent 46%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.sp11-official > .sp11-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(15rem, 0.68fr) minmax(0, 1.55fr);
    align-items: center;
    gap: clamp(1.3rem, 3vw, 2.7rem);
}

.sp11-official__head {
    max-width: 32rem;
    margin: 0;
}

.sp11-official__head .sp11-eyebrow {
    margin-bottom: 0.7rem;
}

.sp11-official__head h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
}

.sp11-official__head p {
    max-width: 31rem;
    margin-top: 0.65rem;
    font-size: 0.96rem;
}

.sp11-official__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.sp11-official-card {
    position: relative;
    min-height: 9.4rem;
    gap: 0.6rem;
    padding: 0.85rem 0.7rem 0.9rem;
    overflow: hidden;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(145deg, rgba(0, 90, 70, 0.24), rgba(215, 225, 236, 0.72)) border-box;
    border: 1px solid transparent;
    border-radius: 1rem;
    box-shadow:
        0 0.25rem 0.8rem rgba(15, 46, 77, 0.06),
        0 0.04rem 0.1rem rgba(15, 46, 77, 0.12);
}

.sp11-official-card::before {
    position: absolute;
    top: 0;
    right: 1rem;
    left: 1rem;
    height: 0.2rem;
    background: var(--sp11-blue-700);
    border-radius: 0 0 999px 999px;
    content: "";
    opacity: 0.78;
}

.sp11-official-card:nth-child(2)::before {
    background: #c9102d;
}

.sp11-official-card:nth-child(3)::before {
    background: var(--sp11-focus);
}

.sp11-official-card:nth-child(4)::before {
    background: var(--sp11-navy-900);
}

.sp11-official-card:hover {
    border-color: transparent;
    box-shadow:
        0 0.75rem 1.8rem rgba(15, 46, 77, 0.11),
        0 0 0 1px rgba(0, 90, 70, 0.18);
    transform: translateY(-0.16rem);
}

.sp11-official-card__image {
    height: 5.55rem;
}

.sp11-official-card__image img {
    max-width: 6.2rem;
    max-height: 5.5rem;
}

.sp11-official-card strong {
    max-width: 14rem;
    color: var(--sp11-navy-950);
    font-size: 0.9rem;
    line-height: 1.28;
}

.sp11-official + .sp11-quick {
    margin-top: 0;
    padding-top: 1.35rem;
    background: #fff;
}

.sp11-quick-card__icon {
    box-shadow: inset 0 0 0 1px rgba(0, 90, 70, 0.08);
}

@media (max-width: 68rem) {
    .sp11-official > .sp11-container {
        grid-template-columns: 1fr;
    }

    .sp11-official__head {
        max-width: 44rem;
    }
}

@media (max-width: 50rem) {
    .sp11-official__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 31rem) {
    .sp11-official__grid {
        grid-template-columns: 1fr;
    }

    .sp11-official-card {
        min-height: 8.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp11-official-card:hover {
        transform: none;
    }
}

@media (forced-colors: active) {
    .sp11-official,
    .sp11-official-card {
        background: Canvas;
        border-color: CanvasText;
    }

    .sp11-official::before,
    .sp11-official::after,
    .sp11-official-card::before {
        display: none;
    }
}

/* ==========================================================
   SP11 v1.4 — profesjonalne tła sekcji bez ilustracji
   Lekki SaaS Platinum + WCAG 2.2
   ========================================================== */

.sp11-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.sp11-section > .sp11-container {
    position: relative;
    z-index: 2;
}

.sp11-section--separated {
    border-top: 1px solid rgba(0, 60, 48, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.sp11-section--separated::before {
    position: absolute;
    z-index: 1;
    top: -1px;
    left: 50%;
    width: min(70rem, 82vw);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 90, 70, 0.32) 22%,
        rgba(0, 90, 70, 0.52) 50%,
        rgba(0, 90, 70, 0.32) 78%,
        transparent
    );
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
}

.sp11-section--separated::after {
    position: absolute;
    z-index: 1;
    top: -0.16rem;
    left: 50%;
    width: 4.8rem;
    height: 0.28rem;
    background: linear-gradient(
        90deg,
        var(--sp11-blue-700),
        var(--sp11-focus),
        #c9102d
    );
    border: 0.2rem solid rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    box-shadow: 0 0.3rem 1rem rgba(0, 60, 48, 0.12);
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
}

.sp11-section--platinum-mist {
    background:
        radial-gradient(
            circle at 4% 12%,
            rgba(0, 90, 70, 0.085),
            transparent 18rem
        ),
        radial-gradient(
            circle at 96% 88%,
            rgba(255, 191, 71, 0.075),
            transparent 17rem
        ),
        linear-gradient(180deg, #f7fbfa 0%, #edf6f3 100%);
}

.sp11-section--platinum-white {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(0, 90, 70, 0.055),
            transparent 34rem
        ),
        linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f5f8f7 100%);
}

.sp11-section--platinum-slate {
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(0, 90, 70, 0.075),
            transparent 19rem
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(0, 60, 48, 0.045),
            transparent 18rem
        ),
        linear-gradient(180deg, #f2f7f5 0%, #e8f1ee 100%);
}

.sp11-section--platinum-mist .sp11-section__head,
.sp11-section--platinum-slate .sp11-section__head {
    max-width: 50rem;
    padding: 1rem 1.15rem 1.05rem 1.35rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(198, 212, 226, 0.92);
    border-radius: var(--sp11-radius);
    box-shadow:
        0 0.35rem 1.2rem rgba(0, 60, 48, 0.07),
        inset 0 1px 0 #ffffff;
}

.sp11-section--platinum-white .sp11-section__head {
    position: relative;
    padding-left: 1.35rem;
}

.sp11-section--platinum-white .sp11-section__head::before {
    position: absolute;
    top: 0.2rem;
    bottom: 0.2rem;
    left: 0;
    width: 0.28rem;
    background: linear-gradient(
        180deg,
        var(--sp11-blue-700),
        var(--sp11-focus)
    );
    border-radius: 999px;
    content: "";
}

.sp11-section--platinum-mist .sp11-alert,
.sp11-section--platinum-white .sp11-news-card,
.sp11-section--platinum-slate .sp11-audience {
    box-shadow:
        0 0.35rem 1.25rem rgba(0, 60, 48, 0.065),
        0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

.sp11-section--platinum-white .sp11-news-card {
    background: rgba(255, 255, 255, 0.98);
}

.sp11-section--platinum-slate .sp11-audience:not(:nth-child(2)) {
    background: rgba(255, 255, 255, 0.97);
}

@media (prefers-reduced-motion: reduce) {
    .sp11-section--separated::after {
        box-shadow: none;
    }
}

@media (forced-colors: active) {
    .sp11-section--platinum-mist,
    .sp11-section--platinum-white,
    .sp11-section--platinum-slate,
    .sp11-section--platinum-mist .sp11-section__head,
    .sp11-section--platinum-slate .sp11-section__head {
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .sp11-section--separated::before,
    .sp11-section--separated::after,
    .sp11-section--platinum-white .sp11-section__head::before {
        display: none;
    }
}

@media print {
    .sp11-section--platinum-mist,
    .sp11-section--platinum-white,
    .sp11-section--platinum-slate,
    .sp11-section--platinum-mist .sp11-section__head,
    .sp11-section--platinum-slate .sp11-section__head {
        background: #fff !important;
        box-shadow: none !important;
    }

    .sp11-section--separated::before,
    .sp11-section--separated::after,
    .sp11-section--platinum-white .sp11-section__head::before {
        display: none !important;
    }
}

/* ==========================================================
   SP11 v1.5 — kolor wiodący szkoły #005A46
   ========================================================== */

:root {
    /* Kolor marki SP11. */
    --sp11-brand: #005a46;
    --sp11-brand-dark: #003c30;
    --sp11-brand-deep: #082a22;
    --sp11-brand-hover: #00705a;
    --sp11-brand-soft: #ddf2ec;
    --sp11-brand-surface: #f3f9f7;
}

/* Zielona dominanta w hero, bez pogorszenia czytelności. */
.sp11-hero {
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(0, 90, 70, 0.09),
            transparent 24rem
        ),
        linear-gradient(180deg, #ffffff 0%, #edf7f4 100%);
}

.sp11-hero__visual {
    background:
        linear-gradient(145deg, rgba(0, 60, 48, 0.10), rgba(0, 90, 70, 0.15)),
        linear-gradient(135deg, var(--sp11-brand-hover), var(--sp11-brand-deep));
}

/* Logo otrzymuje dyskretną oprawę w kolorze placówki. */
.sp11-brand__mark {
    border-color: rgba(0, 90, 70, 0.22);
    box-shadow:
        0 0.35rem 1.2rem rgba(0, 60, 48, 0.09),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* Pasek jednostek: zieleń zajmuje większość akcentu. */
.sp11-official::before {
    background: linear-gradient(
        90deg,
        var(--sp11-brand-dark) 0 66%,
        var(--sp11-focus) 66% 82%,
        #c9102d 82% 100%
    );
}

.sp11-official-card::before {
    background: var(--sp11-brand);
}

.sp11-official-card:nth-child(2)::before {
    background: var(--sp11-brand-hover);
}

.sp11-official-card:nth-child(3)::before {
    background: var(--sp11-focus);
}

.sp11-official-card:nth-child(4)::before {
    background: var(--sp11-brand-dark);
}

/* Separator sekcji również opiera się przede wszystkim na zieleni. */
.sp11-section--separated::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 90, 70, 0.28) 22%,
        rgba(0, 90, 70, 0.52) 50%,
        rgba(0, 90, 70, 0.28) 78%,
        transparent
    );
}

.sp11-section--separated::after {
    background: linear-gradient(
        90deg,
        var(--sp11-brand-dark) 0 68%,
        var(--sp11-focus) 68% 84%,
        #c9102d 84% 100%
    );
}

/* Karty i przyciski. */
.sp11-btn--primary {
    background: var(--sp11-brand);
    border-color: var(--sp11-brand);
}

.sp11-btn--primary:hover {
    background: var(--sp11-brand-dark);
    border-color: var(--sp11-brand-dark);
}

.sp11-quick-card__icon {
    color: var(--sp11-brand);
    background: var(--sp11-brand-soft);
}

.sp11-quick-card:hover,
.sp11-official-card:hover {
    border-color: var(--sp11-brand-hover);
}

.sp11-news-card__media {
    color: var(--sp11-brand);
    background: linear-gradient(145deg, var(--sp11-brand-soft), #f8fcfa);
}

/* Sekcje tła w zielonej tonacji platinum. */
.sp11-section--platinum-mist {
    background:
        radial-gradient(
            circle at 4% 12%,
            rgba(0, 90, 70, 0.085),
            transparent 18rem
        ),
        radial-gradient(
            circle at 96% 88%,
            rgba(255, 191, 71, 0.065),
            transparent 17rem
        ),
        linear-gradient(180deg, #f8fcfa 0%, #edf6f3 100%);
}

.sp11-section--platinum-white {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(0, 90, 70, 0.05),
            transparent 34rem
        ),
        linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f5f8f7 100%);
}

.sp11-section--platinum-slate {
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(0, 90, 70, 0.07),
            transparent 19rem
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(0, 60, 48, 0.04),
            transparent 18rem
        ),
        linear-gradient(180deg, #f2f7f5 0%, #e8f1ee 100%);
}

.sp11-section--platinum-white .sp11-section__head::before {
    background: linear-gradient(
        180deg,
        var(--sp11-brand),
        var(--sp11-focus)
    );
}

/* Ciemne powierzchnie oparte na głębokiej zieleni. */
.sp11-topbar,
.sp11-contact-band {
    background: var(--sp11-brand-deep);
}

.sp11-footer,
.sp11-audience:nth-child(2) {
    background: var(--sp11-brand-dark);
    border-color: var(--sp11-brand-dark);
}

@media (forced-colors: active) {
    .sp11-brand__mark {
        border-color: CanvasText;
        box-shadow: none;
    }
}

/* ==========================================================
   SP11 v1.6 — duże logo szkoły w panelu hero
   ========================================================== */

.sp11-hero__panel {
    padding: clamp(0.85rem, 2vw, 1.15rem);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(243, 249, 247, 0.96)
        );
    border-color: rgba(0, 90, 70, 0.18);
    box-shadow:
        0 1.15rem 3rem rgba(0, 60, 48, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.sp11-hero__visual {
    min-height: 26rem;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    padding: clamp(1.3rem, 3vw, 2rem);
    color: var(--sp11-text);
    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(0, 90, 70, 0.10),
            transparent 13rem
        ),
        linear-gradient(180deg, #ffffff 0%, #edf7f4 100%);
    border: 1px solid rgba(0, 90, 70, 0.14);
    border-radius: 1rem;
}

.sp11-hero__visual::before {
    display: none;
}

.sp11-hero__logo-wrap {
    display: grid;
    place-items: center;
    min-height: 17rem;
    padding: 0.75rem;
}

.sp11-hero__logo {
    display: block;
    width: min(18rem, 78%);
    height: auto;
    filter:
        drop-shadow(0 0.8rem 1.25rem rgba(0, 60, 48, 0.14));
}

.sp11-hero__identity {
    position: relative;
    display: grid;
    gap: 0.35rem;
    padding: 1.05rem 1.1rem 1.1rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 90, 70, 0.16);
    border-radius: 0.85rem;
    box-shadow:
        0 0.35rem 1.1rem rgba(0, 60, 48, 0.07),
        inset 0 1px 0 #ffffff;
    text-align: center;
}

.sp11-hero__identity::before {
    position: absolute;
    top: 0;
    right: 22%;
    left: 22%;
    height: 0.22rem;
    background: var(--sp11-brand);
    border-radius: 0 0 999px 999px;
    content: "";
}

.sp11-hero__identity-label {
    color: var(--sp11-brand);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.sp11-hero__identity strong {
    color: var(--sp11-brand-deep);
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    line-height: 1.2;
}

.sp11-hero__identity > span:last-child {
    margin-top: 0;
    color: var(--sp11-muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

@media (max-width: 68rem) {
    .sp11-hero__panel {
        width: 100%;
        max-width: 40rem;
    }

    .sp11-hero__visual {
        min-height: 23rem;
    }

    .sp11-hero__logo {
        width: min(16rem, 72%);
    }
}

@media (max-width: 34rem) {
    .sp11-hero__visual {
        min-height: 20rem;
        padding: 1rem;
    }

    .sp11-hero__logo-wrap {
        min-height: 13rem;
    }

    .sp11-hero__logo {
        width: min(13rem, 70%);
    }
}

@media (forced-colors: active) {
    .sp11-hero__panel,
    .sp11-hero__visual,
    .sp11-hero__identity {
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .sp11-hero__identity::before {
        background: Highlight;
    }

    .sp11-hero__logo {
        filter: none;
    }
}

@media print {
    .sp11-hero__panel,
    .sp11-hero__visual,
    .sp11-hero__identity {
        background: #fff !important;
        box-shadow: none !important;
    }

    .sp11-hero__logo {
        width: 8rem;
        filter: none;
    }
}

/* ==========================================================
   SP11 v1.7 — zielona sekcja szybkiego dostępu
   ========================================================== */

/*
 * Cała sekcja ma kolor wiodący szkoły.
 * Karty pozostają odrębnymi, czytelnymi powierzchniami.
 */
.sp11-official + .sp11-quick,
.sp11-quick {
    position: relative;
    isolation: isolate;
    margin-top: 0;
    padding-block: clamp(1.45rem, 3vw, 2.15rem);
    background: #005a46;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(0, 60, 48, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1rem 2.5rem rgba(0, 60, 48, 0.10);
}

.sp11-quick::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(255, 255, 255, 0.075),
            transparent 15rem
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(255, 207, 92, 0.08),
            transparent 16rem
        );
    content: "";
    pointer-events: none;
}

.sp11-quick__grid {
    position: relative;
    z-index: 1;
}

.sp11-quick-card {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
        0 0.55rem 1.5rem rgba(0, 42, 33, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.sp11-quick-card:hover {
    border-color: #ffffff;
    box-shadow:
        0 0.9rem 2rem rgba(0, 42, 33, 0.24),
        0 0 0 2px rgba(255, 255, 255, 0.28);
}

/*
 * Dziennik wyróżniony ciepłym złotym tłem.
 * Kontrast #082A22 na #FFCF5C wynosi około 10,5:1.
 */
.sp11-quick-card--diary {
    color: #082a22;
    background: #ffcf5c;
    border-color: #ffdf8b;
    box-shadow:
        0 0.65rem 1.8rem rgba(0, 42, 33, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.sp11-quick-card--diary strong,
.sp11-quick-card--diary > span:not(.sp11-quick-card__icon) {
    color: #082a22;
}

.sp11-quick-card--diary .sp11-quick-card__icon {
    color: #ffffff;
    background: #005a46;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.sp11-quick-card--diary:hover {
    color: #082a22;
    background: #f7d774;
    border-color: #ffffff;
}

.sp11-quick-card--diary:focus-visible {
    outline-color: #ffffff;
    box-shadow:
        0 0 0 0.28rem #003c30,
        0 0 0 0.5rem #ffffff,
        0 0.65rem 1.8rem rgba(0, 42, 33, 0.24);
}

/* Etykieta w panelu hero ma teraz wyraźny, ciemny kolor. */
.sp11-hero__identity-label {
    color: #003c30;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.075em;
}

/* Tryby systemowe i wydruk. */
@media (forced-colors: active) {
    .sp11-quick,
    .sp11-quick-card,
    .sp11-quick-card--diary {
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .sp11-quick-card--diary,
    .sp11-quick-card--diary strong,
    .sp11-quick-card--diary > span:not(.sp11-quick-card__icon) {
        color: CanvasText;
    }

    .sp11-quick-card--diary .sp11-quick-card__icon {
        color: HighlightText;
        background: Highlight;
    }

    .sp11-quick::before {
        display: none;
    }
}

@media print {
    .sp11-quick,
    .sp11-quick-card,
    .sp11-quick-card--diary {
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .sp11-quick-card--diary .sp11-quick-card__icon {
        color: #000 !important;
        background: #fff !important;
        border: 1px solid #000;
    }

    .sp11-quick::before {
        display: none !important;
    }
}

/* ==========================================================
   SP11 v1.8 — subtelne wypełnienie kart szybkiego dostępu
   ========================================================== */

/*
 * Karty szybkiego dostępu otrzymują lekkie wypełnienie:
 * - jasny gradient pionowy,
 * - miękkie zielone światło w prawym górnym rogu,
 * - bardzo delikatne rozjaśnienie od dołu.
 * Efekty są dekoracyjne i nie utrudniają czytania tekstu.
 */
.sp11-quick-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(0, 90, 70, 0.06),
            transparent 7rem
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(255, 255, 255, 0.85),
            transparent 7rem
        ),
        linear-gradient(180deg, #ffffff 0%, #f5faf8 100%);
}

.sp11-quick-card::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.24),
            transparent 36%
        );
    content: "";
    pointer-events: none;
}

.sp11-quick-card::after {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: rgba(0, 90, 70, 0.045);
    content: "";
    pointer-events: none;
    filter: blur(0.25rem);
}

.sp11-quick-card > * {
    position: relative;
    z-index: 1;
}

/* Ikony na standardowych kartach również dostają lekkie wypełnienie. */
.sp11-quick-card:not(.sp11-quick-card--diary) .sp11-quick-card__icon {
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.95),
            transparent 60%
        ),
        linear-gradient(180deg, #e9f5f1 0%, #ddf2ec 100%);
    color: #005a46;
    box-shadow:
        inset 0 0 0 1px rgba(0, 90, 70, 0.08),
        0 0.15rem 0.4rem rgba(0, 60, 48, 0.06);
}

/*
 * Karta dziennika pozostaje wyróżniona, ale bez płaskiego koloru.
 * Zastosowano miękki złoty gradient i subtelne rozświetlenie.
 */
.sp11-quick-card--diary {
    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(255, 255, 255, 0.22),
            transparent 6rem
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(255, 243, 207, 0.65),
            transparent 7rem
        ),
        linear-gradient(180deg, #ffdc86 0%, #ffcf5c 100%);
}

.sp11-quick-card--diary::before {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            transparent 38%
        );
}

.sp11-quick-card--diary::after {
    background: rgba(255, 255, 255, 0.18);
}

.sp11-quick-card--diary .sp11-quick-card__icon {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0.18rem 0.45rem rgba(0, 60, 48, 0.12);
}

/* Wydruk i tryby systemowe bez efektów dekoracyjnych. */
@media (forced-colors: active) {
    .sp11-quick-card,
    .sp11-quick-card--diary,
    .sp11-quick-card:not(.sp11-quick-card--diary) .sp11-quick-card__icon {
        background: Canvas;
        box-shadow: none;
    }

    .sp11-quick-card::before,
    .sp11-quick-card::after,
    .sp11-quick-card--diary::before,
    .sp11-quick-card--diary::after {
        display: none;
    }
}

@media print {
    .sp11-quick-card,
    .sp11-quick-card--diary,
    .sp11-quick-card:not(.sp11-quick-card--diary) .sp11-quick-card__icon {
        background: #fff !important;
        box-shadow: none !important;
    }

    .sp11-quick-card::before,
    .sp11-quick-card::after,
    .sp11-quick-card--diary::before,
    .sp11-quick-card--diary::after {
        display: none !important;
    }
}

/* ================================================================
   SP11 CMS integration — internal pages, dynamic content and legacy
   ================================================================ */

:root {
  --sp11-content-max: 78rem;
  --sp11-reading-max: 52rem;
}

html.js .sp11-nav {
  display: block;
}

body.sp11-site {
  min-width: 20rem;
  overflow-x: hidden;
  color: var(--sp11-text);
  background: var(--sp11-canvas);
}

body.sp11-site img {
  max-width: 100%;
}

.sp11-skip-link {
  position: fixed;
  z-index: 10000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.8rem 1rem;
  color: #fff;
  background: #003c30;
  border: 3px solid #ffcf5c;
  border-radius: 0.5rem;
  font-weight: 800;
  transform: translateY(-180%);
}

.sp11-skip-link:focus {
  transform: translateY(0);
}

.sp11-header {
  position: relative;
  z-index: 100;
}

.sp11-header__brand-row {
  min-height: 6.1rem;
}

.sp11-brand picture,
.sp11-brand__mark picture,
.sp11-hero__logo-wrap picture,
.sp11-official-card__image picture,
.sp11-social-link picture {
  display: contents;
}

.sp11-brand__mark img {
  width: 4.7rem;
  height: 4.7rem;
  object-fit: contain;
}

.sp11-brand__text {
  display: grid;
  gap: 0.15rem;
}

.sp11-nav__item {
  position: relative;
}

.sp11-nav__link[aria-current="page"],
.sp11-nav__button[aria-expanded="true"] {
  color: #fff;
  background: #003c30;
}

.sp11-nav__submenu {
  z-index: 300;
  min-width: 18rem;
}

.sp11-nav__submenu a[aria-current="page"] {
  color: #003c30;
  background: #ddf2ec;
  font-weight: 800;
}

.sp11-nav__submenu a:focus-visible,
.sp11-nav__submenu a:hover {
  color: #003c30;
  background: #ffefbd;
}

.sp11-breadcrumb {
  background: #f3f9f7;
  border-top: 1px solid #d5e2de;
  border-bottom: 1px solid #d5e2de;
}

.sp11-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin: 0;
  padding: 0.85rem 0;
  list-style: none;
  color: #536173;
  font-size: 0.92rem;
}

.sp11-breadcrumb__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.sp11-breadcrumb__list li:not(:last-child)::after {
  color: #7d8b98;
  content: "/";
}

.sp11-breadcrumb a {
  color: #005a46;
  font-weight: 700;
}

.sp11-page-shell {
  padding-block: clamp(2rem, 5vw, 4.25rem);
  background:
    radial-gradient(circle at 94% 4%, rgba(0,90,70,.055), transparent 22rem),
    linear-gradient(180deg, #fff 0%, #f3f8f6 100%);
}

.sp11-page-shell--plain {
  background: #f5f8f7;
}

.sp11-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.sp11-page-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.sp11-page-header {
  margin-bottom: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 95% 10%, rgba(0,90,70,.10), transparent 13rem),
    linear-gradient(145deg, #fff, #edf7f4);
  border: 1px solid #d5e2de;
  border-radius: 1rem;
  box-shadow: 0 .75rem 2rem rgba(0,60,48,.08);
}

.sp11-page-header .sp11-eyebrow {
  margin-bottom: 0.55rem;
}

.sp11-page-header h1 {
  max-width: 48rem;
  margin: 0;
  color: #082a22;
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.08;
}

.sp11-page-header p {
  max-width: 48rem;
  margin: 0.8rem 0 0;
  color: #536173;
}

.sp11-content-card,
.sp11-sidebar-card,
.sp11-list-card,
.sp11-article-card,
.sp11-empty-state,
.sp11-error-card {
  background: #fff;
  border: 1px solid #d5e2de;
  border-radius: 1rem;
  box-shadow: 0 .5rem 1.8rem rgba(0,60,48,.07);
}

.sp11-content-card,
.sp11-article-card {
  padding: clamp(1.2rem, 3vw, 2.25rem);
}

.sp11-content {
  max-width: var(--sp11-reading-max);
  color: #172033;
  font-size: 1.04rem;
  line-height: 1.78;
}

.sp11-content > :first-child {
  margin-top: 0;
}

.sp11-content h2,
.sp11-content h3,
.sp11-content h4,
.article-content h2,
.article-content h3,
.article-content h4,
.strona-content h2,
.strona-content h3,
.strona-content h4 {
  color: #082a22;
  line-height: 1.25;
}

.sp11-content h2,
.article-content h2,
.strona-content h2 {
  margin-top: 2.1rem;
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.sp11-content h3,
.article-content h3,
.strona-content h3 {
  margin-top: 1.65rem;
  font-size: 1.35rem;
}

.sp11-content p,
.sp11-content ul,
.sp11-content ol,
.article-content p,
.article-content ul,
.article-content ol,
.strona-content p,
.strona-content ul,
.strona-content ol {
  margin-block: 0 1.1rem;
}

.sp11-content a,
.article-content a,
.strona-content a {
  color: #005a46;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: .11em;
  text-underline-offset: .18em;
}

.sp11-content blockquote,
.article-content blockquote,
.strona-content blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.2rem;
  background: #edf7f4;
  border-left: .3rem solid #005a46;
  border-radius: .5rem;
}

.sp11-content table,
.article-content table,
.strona-content table {
  width: 100%;
  margin: 1.4rem 0;
  border-collapse: collapse;
}

.sp11-content th,
.sp11-content td,
.article-content th,
.article-content td,
.strona-content th,
.strona-content td {
  padding: .75rem;
  border: 1px solid #bdcec8;
  text-align: left;
  vertical-align: top;
}

.sp11-content th,
.article-content th,
.strona-content th {
  color: #fff;
  background: #005a46;
}

.sp11-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  color: #364650;
  background: #f3f9f7;
  border: 1px solid #d5e2de;
  border-radius: .65rem;
  font-size: .92rem;
}

.sp11-meta a {
  color: #005a46;
  font-weight: 700;
}

.sp11-list-grid {
  display: grid;
  gap: 1rem;
}

.sp11-list-card {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  overflow: hidden;
}

.sp11-list-card__media {
  min-height: 13rem;
  background:
    radial-gradient(circle at 70% 20%, rgba(0,90,70,.13), transparent 8rem),
    linear-gradient(145deg, #edf7f4, #dfece8);
}

.sp11-list-card__media picture,
.sp11-list-card__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.sp11-list-card__media img {
  object-fit: cover;
}

.sp11-list-card__body {
  display: grid;
  align-content: start;
  gap: .75rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.sp11-list-card__body h2,
.sp11-list-card__body h3 {
  margin: 0;
  color: #082a22;
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  line-height: 1.24;
}

.sp11-list-card__body p {
  margin: 0;
  color: #536173;
}

.sp11-tag {
  width: fit-content;
  padding: .3rem .65rem;
  color: #003c30;
  background: #ddf2ec;
  border: 1px solid #b9d8ce;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
}

.sp11-text-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: fit-content;
  color: #005a46;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

.sp11-filter {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #d5e2de;
  border-radius: .85rem;
}

.sp11-filter__search {
  display: flex;
  gap: .65rem;
}

.sp11-filter label {
  display: block;
  margin-bottom: .4rem;
  color: #082a22;
  font-weight: 800;
}

.sp11-filter input[type="search"] {
  min-width: 0;
  flex: 1;
  min-height: 2.85rem;
  padding: .65rem .8rem;
  color: #172033;
  background: #fff;
  border: 2px solid #91aaa2;
  border-radius: .55rem;
}

.sp11-filter input[type="search"]:focus {
  border-color: #005a46;
  outline: 3px solid #ffcf5c;
  outline-offset: 2px;
}

.sp11-sidebar {
  display: grid;
  gap: 1rem;
}

.sp11-sidebar-card {
  overflow: hidden;
}

.sp11-sidebar-card__head {
  padding: .85rem 1rem;
  color: #fff;
  background: #005a46;
  font-size: 1.05rem;
  font-weight: 800;
}

.sp11-sidebar-card__body {
  padding: .85rem 1rem 1rem;
}

.sp11-sidebar-card ul {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp11-sidebar-card a {
  display: block;
  padding: .55rem .65rem;
  color: #003c30;
  border-radius: .45rem;
  font-weight: 700;
}

.sp11-sidebar-card a:hover,
.sp11-sidebar-card a:focus-visible {
  background: #ffefbd;
}

.sp11-article-media {
  margin: 0 0 1.4rem;
  overflow: hidden;
  background: #e8f1ee;
  border: 1px solid #d5e2de;
  border-radius: .9rem;
}

.sp11-article-media img {
  display: block;
  width: 100%;
  max-height: 36rem;
  object-fit: cover;
}

.sp11-article-caption {
  margin: 0;
  padding: .65rem .85rem;
  color: #536173;
  background: #f3f9f7;
  font-size: .9rem;
}

.sp11-article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #d5e2de;
}

.sp11-article-nav a {
  display: grid;
  gap: .25rem;
  padding: .8rem;
  color: #003c30;
  background: #f3f9f7;
  border: 1px solid #d5e2de;
  border-radius: .65rem;
  font-weight: 800;
}

.sp11-article-nav a:last-child {
  text-align: right;
}

.sp11-pagination {
  margin-top: 1.5rem;
}

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

.sp11-pagination a,
.sp11-pagination span {
  display: grid;
  place-items: center;
  min-width: 2.65rem;
  min-height: 2.65rem;
  padding: .45rem .65rem;
  color: #003c30;
  background: #fff;
  border: 1px solid #91aaa2;
  border-radius: .5rem;
  font-weight: 800;
}

.sp11-pagination [aria-current="page"] {
  color: #fff;
  background: #005a46;
  border-color: #005a46;
}

.sp11-pagination [aria-disabled="true"] {
  color: #718078;
  background: #eef2f0;
}

.sp11-empty-state,
.sp11-error-card {
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.sp11-error-code {
  display: block;
  margin-bottom: .5rem;
  color: #005a46;
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 900;
  line-height: 1;
}

.sp11-official-card__image img {
  object-fit: contain;
}

.sp11-news-card__media picture,
.sp11-news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.sp11-news-card__media img {
  object-fit: cover;
}

.sp11-news-card__body {
  display: grid;
  gap: .7rem;
}

.sp11-news-card__body p {
  margin: 0;
}

.sp11-alert {
  align-content: start;
}

.sp11-alert h3 {
  margin: 0;
}

.sp11-alert p {
  margin: .55rem 0 0;
}

.sp11-audience ul {
  padding-left: 1.15rem;
}

.sp11-audience li + li {
  margin-top: .4rem;
}

.sp11-audience a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .16em;
}

.sp11-back-to-top {
  position: fixed;
  z-index: 700;
  right: 1rem;
  bottom: 1rem;
  display: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: #fff;
  background: #005a46;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 .5rem 1.5rem rgba(0,42,33,.24);
  cursor: pointer;
}

.sp11-back-to-top.is-visible {
  display: grid;
}

.sp11-cookie-banner {
  position: fixed;
  z-index: 9000;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  max-width: 62rem;
  margin-inline: auto;
  padding: 1rem;
  color: #fff;
  background: #082a22;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: .8rem;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.28);
}

.sp11-cookie-banner p {
  margin: 0 0 .75rem;
  color: #fff;
}

.sp11-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.sp11-cookie-actions form {
  margin: 0;
}

.sp11-cookie-actions button {
  min-height: 2.7rem;
  padding: .55rem .9rem;
  border: 2px solid #fff;
  border-radius: .45rem;
  font-weight: 800;
  cursor: pointer;
}

.sp11-cookie-accept {
  color: #082a22;
  background: #ffcf5c;
}

.sp11-cookie-reject {
  color: #fff;
  background: transparent;
}

.etr-switcher,
.metryczka,
.gallery-section {
  margin-top: 1.5rem;
}

.metryczka {
  max-width: var(--sp11-reading-max);
  padding: 1rem;
  background: #f3f9f7;
  border: 1px solid #d5e2de;
  border-radius: .75rem;
}

.metryczka__heading {
  margin: 0 0 .75rem;
  color: #082a22;
  font-size: 1.25rem;
}

.metryczka__list {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.metryczka__row {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: .7rem;
}

.metryczka__term {
  font-weight: 800;
}

.metryczka__def {
  margin: 0;
}

.menu-page-wrap {
  width: min(100% - 2rem, 78rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.menu-page {
  min-width: 0;
}

.menu-page-header,
.menu-week,
.menu-empty,
.menu-archive {
  border-color: #d5e2de !important;
  box-shadow: 0 .5rem 1.8rem rgba(0,60,48,.07);
}

.menu-page-header h1,
.menu-week h2,
.menu-day h3,
.menu-notes h2,
.menu-notes h3 {
  color: #082a22 !important;
}

.menu-print-button,
.menu-status {
  color: #fff !important;
  background: #005a46 !important;
  border-color: #005a46 !important;
}

@media (max-width: 64rem) {
  .sp11-page-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 48rem) {
  .sp11-list-card {
    grid-template-columns: 1fr;
  }

  .sp11-list-card__media {
    min-height: 12rem;
  }

  .sp11-sidebar {
    grid-template-columns: 1fr;
  }

  .sp11-article-nav {
    grid-template-columns: 1fr;
  }

  .sp11-article-nav a:last-child {
    text-align: left;
  }

  .metryczka__row {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
}

@media (max-width: 31rem) {
  .sp11-filter__search {
    display: grid;
  }
}

@media (forced-colors: active) {
  .sp11-content-card,
  .sp11-sidebar-card,
  .sp11-list-card,
  .sp11-article-card,
  .sp11-page-header,
  .sp11-empty-state,
  .sp11-error-card,
  .sp11-cookie-banner {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
}

@media print {
  .sp11-topbar,
  .sp11-header,
  .sp11-breadcrumb,
  .sp11-sidebar,
  .sp11-back-to-top,
  .sp11-cookie-banner,
  .sp11-contact-band,
  footer {
    display: none !important;
  }

  .sp11-page-shell,
  .sp11-page-header,
  .sp11-content-card,
  .sp11-article-card {
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .sp11-page-grid {
    display: block;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

/* SP11 CMS v1.0 — widoczność menu mobilnego */
@media (max-width: 67.49rem) {
    html.js .sp11-nav {
        display: none;
    }

    html.js .sp11-nav.is-open {
        display: block;
    }
}

@media (min-width: 67.5rem) {
    html.js .sp11-nav {
        display: block;
    }
}

/* ================================================================
   SP11 Front v1.1 — dopasowanie produkcji do podglądu HTML
   ================================================================ */

/* Etykieta pod logo: usunięcie konfliktu ze starszym selektorem span. */
.sp11-hero__visual .sp11-hero__identity-label {
    color: #003c30 !important;
    opacity: 1 !important;
    text-shadow: none;
}

/* BIP: ciemny napis na żółtej powierzchni, kontrast WCAG AAA. */
.sp11-topbar .sp11-topbar__badge {
    color: #082a22 !important;
    background: #ffcf5c !important;
    border: 1px solid #ffe39a;
    text-decoration: none !important;
}

/* Karty są wystarczającym wizualnym oznaczeniem linku. */
.sp11-quick-card,
.sp11-quick-card strong,
.sp11-quick-card > span {
    text-decoration: none !important;
}

.sp11-quick-card:hover strong,
.sp11-quick-card:focus-visible strong {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.16em;
}

/* Herby i BIP mają jednakową, czystą powierzchnię. */
.sp11-official-card {
    text-decoration: none !important;
}

.sp11-official-card strong {
    line-height: 1.3;
    text-align: center;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

.sp11-official-card__image {
    height: 6.5rem;
}

.sp11-official-card__image img {
    width: auto;
    max-width: 6.4rem;
    height: auto;
    max-height: 6.2rem;
    object-fit: contain;
}

/* Struktura nagłówków zgodna z podglądem HTML. */
.sp11-section__head > div {
    min-width: 0;
}

.sp11-section__head > .sp11-text-link {
    flex: 0 0 auto;
    margin-bottom: 0.2rem;
}

/* Zwarte ważne informacje przy małej liczbie wpisów. */
.sp11-section--compact {
    padding-block: clamp(2.6rem, 5vw, 4rem);
}

.sp11-alert-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.sp11-alert-grid--single {
    grid-template-columns: minmax(0, 36rem);
}

.sp11-alert {
    min-height: 0;
}

.sp11-alert time {
    color: #536173;
    font-size: 0.9rem;
    font-weight: 700;
}

.sp11-alert h3 a {
    color: #082a22;
    text-decoration: none;
}

.sp11-alert h3 a:hover,
.sp11-alert h3 a:focus-visible {
    color: #005a46;
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.16em;
}

/* Aktualności: układ i typografia jak w zaakceptowanym prototypie. */
.sp11-news-card__body h3 {
    margin: 0;
}

.sp11-news-card__body h3 a {
    color: #082a22;
    text-decoration: none;
}

.sp11-news-card__body h3 a:hover,
.sp11-news-card__body h3 a:focus-visible {
    color: #005a46;
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.16em;
}

.sp11-news-card__meta {
    margin-bottom: 0;
}

/* Stopka zawsze ma trzy równe, stabilne kolumny. */
.sp11-footer__grid {
    grid-template-columns: 1.25fr 1fr 1fr;
    align-items: start;
}

.sp11-footer__grid section,
.sp11-footer__grid nav {
    min-width: 0;
}

.sp11-footer__grid h2 {
    margin: 0 0 0.9rem;
    color: #fff;
    font-size: 1.08rem;
}

.sp11-footer__grid p {
    margin: 0 0 0.75rem;
}

.sp11-footer__grid li + li {
    margin-top: 0.5rem;
}

/* Nie dopuszczamy do rozciągania jednego komunikatu na całą szerokość. */
@media (min-width: 48.01rem) {
    .sp11-alert-grid--single .sp11-alert {
        max-width: 36rem;
    }
}

@media (max-width: 48rem) {
    .sp11-section__head > .sp11-text-link {
        margin-bottom: 0;
    }

    .sp11-alert-grid--single {
        grid-template-columns: 1fr;
    }
}

@media (forced-colors: active) {
    .sp11-topbar .sp11-topbar__badge {
        color: ButtonText !important;
        background: ButtonFace !important;
        border-color: ButtonText;
    }
}

@media print {
    .sp11-section--compact {
        padding-block: 1rem;
    }
}

/* ================================================================
   SP11 Front v1.2 — Informacje według potrzeb zamiast sp11-quick
   ================================================================ */

/* Dawny pasek szybkiego dostępu nie jest już używany. */
.sp11-official + .sp11-section--audience-featured {
    margin-top: 0;
}

.sp11-section--audience-featured {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.4rem, 5vw, 4.4rem);
    color: #ffffff;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(255, 255, 255, 0.09),
            transparent 18rem
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(255, 207, 92, 0.09),
            transparent 18rem
        ),
        linear-gradient(145deg, #005a46 0%, #003c30 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid #002e25;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1.5rem 3rem rgba(0, 42, 33, 0.15);
}

.sp11-section--audience-featured::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0.28rem;
    background: linear-gradient(
        90deg,
        #ffcf5c 0 18%,
        rgba(255, 255, 255, 0.55) 18% 22%,
        #ffcf5c 22% 40%,
        transparent 40% 100%
    );
    content: "";
    pointer-events: none;
}

.sp11-section__head--on-dark {
    max-width: 55rem;
    margin-bottom: clamp(1.35rem, 3vw, 2rem);
    padding: 0;
    color: #ffffff;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sp11-section__head--on-dark h2,
.sp11-section__head--on-dark p {
    color: #ffffff;
}

.sp11-section__head--on-dark p {
    max-width: 48rem;
    margin-top: 0.55rem;
    color: rgba(255, 255, 255, 0.88);
}

.sp11-section__head--on-dark .sp11-eyebrow {
    color: #ffdf8b;
}

.sp11-audience-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.sp11-audience-grid--four .sp11-audience {
    min-height: 15rem;
    padding: clamp(1.1rem, 2.5vw, 1.45rem);
    color: #172033;
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(0, 90, 70, 0.055),
            transparent 7rem
        ),
        linear-gradient(180deg, #ffffff 0%, #f4f9f7 100%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 0.8rem 2rem rgba(0, 35, 28, 0.22),
        inset 0 1px 0 #ffffff;
}

.sp11-audience-grid--four .sp11-audience h3 {
    color: #082a22;
}

.sp11-audience-grid--four .sp11-audience a {
    color: #003c30;
}

.sp11-audience-grid--four .sp11-audience a:hover,
.sp11-audience-grid--four .sp11-audience a:focus-visible {
    color: #005a46;
}

.sp11-audience-grid--four .sp11-audience--student {
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(255, 255, 255, 0.08),
            transparent 7rem
        ),
        linear-gradient(145deg, #164d3f 0%, #0b382e 100%);
    border-color: rgba(255, 255, 255, 0.30);
}

.sp11-audience-grid--four .sp11-audience--student h3,
.sp11-audience-grid--four .sp11-audience--student a {
    color: #ffffff;
}

.sp11-audience-grid--four .sp11-audience--student a:hover,
.sp11-audience-grid--four .sp11-audience--student a:focus-visible {
    color: #ffdf8b;
}

/* Karta dziennika jest dodatkowym, wyróżnionym blokiem sp11-audience. */
.sp11-audience-grid--four .sp11-audience--diary {
    color: #082a22;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(255, 255, 255, 0.30),
            transparent 7rem
        ),
        linear-gradient(180deg, #ffe49a 0%, #ffcf5c 100%);
    border-color: #ffe9af;
}

.sp11-audience-grid--four .sp11-audience--diary h3,
.sp11-audience-grid--four .sp11-audience--diary a {
    color: #082a22;
}

.sp11-audience__mark {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 0.8rem;
    color: #ffffff;
    background: #005a46;
    border-radius: 0.7rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 0.25rem 0.65rem rgba(0, 60, 48, 0.18);
    font-size: 1.15rem;
    font-weight: 900;
}

.sp11-audience--diary p {
    margin: 0.55rem 0 1rem;
    color: #293e36;
    line-height: 1.55;
}

.sp11-audience__action {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 2.8rem;
    margin-top: auto;
    padding: 0.6rem 0.85rem;
    color: #ffffff !important;
    background: #005a46;
    border: 2px solid #005a46;
    border-radius: 0.55rem;
    font-weight: 850;
    text-decoration: none !important;
}

.sp11-audience__action:hover {
    color: #ffffff !important;
    background: #003c30;
    border-color: #003c30;
}

.sp11-audience__action:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #003c30;
}

.sp11-audience__unavailable {
    display: block;
    margin-top: auto;
    color: #3d4c47;
    font-size: 0.92rem;
    font-weight: 700;
}

@media (max-width: 70rem) {
    .sp11-audience-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 42rem) {
    .sp11-audience-grid--four {
        grid-template-columns: 1fr;
    }

    .sp11-audience-grid--four .sp11-audience {
        min-height: 0;
    }
}

@media (forced-colors: active) {
    .sp11-section--audience-featured,
    .sp11-section__head--on-dark,
    .sp11-audience-grid--four .sp11-audience,
    .sp11-audience-grid--four .sp11-audience--student,
    .sp11-audience-grid--four .sp11-audience--diary {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .sp11-section__head--on-dark h2,
    .sp11-section__head--on-dark p,
    .sp11-section__head--on-dark .sp11-eyebrow,
    .sp11-audience-grid--four .sp11-audience h3,
    .sp11-audience-grid--four .sp11-audience a {
        color: CanvasText;
    }

    .sp11-audience__mark,
    .sp11-audience__action {
        color: HighlightText !important;
        background: Highlight;
        border-color: Highlight;
    }

    .sp11-section--audience-featured::before {
        display: none;
    }
}

@media print {
    .sp11-section--audience-featured,
    .sp11-section__head--on-dark,
    .sp11-audience-grid--four .sp11-audience,
    .sp11-audience-grid--four .sp11-audience--student,
    .sp11-audience-grid--four .sp11-audience--diary {
        color: #000 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .sp11-section__head--on-dark h2,
    .sp11-section__head--on-dark p,
    .sp11-section__head--on-dark .sp11-eyebrow,
    .sp11-audience-grid--four .sp11-audience h3,
    .sp11-audience-grid--four .sp11-audience a {
        color: #000 !important;
    }

    .sp11-section--audience-featured::before {
        display: none !important;
    }
}

/* ================================================================
   SP11 Front v1.3 — sześć aktualności na stronie głównej
   ================================================================ */

#aktualnosci .sp11-news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#aktualnosci .sp11-news-card {
    min-width: 0;
}

@media (max-width: 68rem) {
    #aktualnosci .sp11-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 42rem) {
    #aktualnosci .sp11-news-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   SP11 Front v1.4 — wyraźny hover i focus linków podkreślonych
   ================================================================ */

/*
 * Podkreślony link ma drugi sygnał interakcji:
 * - złote podświetlenie tła,
 * - ciemniejszy tekst,
 * - grubsze podkreślenie.
 *
 * Padding i ujemny margines zapobiegają przesuwaniu tekstu.
 */
.sp11-content a,
.article-content a,
.strona-content a,
.sp11-text-link,
.sp11-audience li a,
.sp11-footer li a,
.sp11-topbar__links a,
.sp11-contact-band a:not(.sp11-social-link) {
    padding-inline: 0.12em;
    margin-inline: -0.12em;
    border-radius: 0.18rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        text-decoration-thickness 160ms ease;
}

.sp11-content a:hover,
.article-content a:hover,
.strona-content a:hover,
.sp11-text-link:hover,
.sp11-audience li a:hover,
.sp11-footer li a:hover,
.sp11-topbar__links a:hover,
.sp11-contact-band a:not(.sp11-social-link):hover {
    color: #003c30 !important;
    background-color: #ffefbd;
    box-shadow: 0 0 0 0.16rem #ffefbd;
    text-decoration-color: #003c30;
    text-decoration-thickness: 0.17em;
    text-underline-offset: 0.2em;
}

/*
 * Fokus klawiatury jest mocniejszy niż hover i nie opiera się wyłącznie
 * na zmianie koloru.
 */
.sp11-content a:focus-visible,
.article-content a:focus-visible,
.strona-content a:focus-visible,
.sp11-text-link:focus-visible,
.sp11-audience li a:focus-visible,
.sp11-footer li a:focus-visible,
.sp11-topbar__links a:focus-visible,
.sp11-contact-band a:not(.sp11-social-link):focus-visible {
    color: #082a22 !important;
    background-color: #ffcf5c;
    outline: 3px solid #082a22;
    outline-offset: 3px;
    box-shadow: 0 0 0 0.2rem #ffcf5c;
    text-decoration-color: #082a22;
    text-decoration-thickness: 0.17em;
}

/* Linki na ciemnych powierzchniach otrzymują ten sam czytelny akcent. */
.sp11-audience--student li a:hover,
.sp11-audience--student li a:focus-visible,
.sp11-footer li a:hover,
.sp11-footer li a:focus-visible,
.sp11-topbar__links a:hover,
.sp11-topbar__links a:focus-visible,
.sp11-contact-band a:not(.sp11-social-link):hover,
.sp11-contact-band a:not(.sp11-social-link):focus-visible {
    color: #082a22 !important;
}

/* Całe karty nadal wykorzystują zmianę obramowania i cienia. */
.sp11-official-card:hover,
.sp11-official-card:focus-visible {
    border-color: #ffcf5c;
    box-shadow:
        0 0 0 3px rgba(255, 207, 92, 0.52),
        0 0.9rem 2rem rgba(0, 42, 33, 0.18);
}

.sp11-official-card:hover strong,
.sp11-official-card:focus-visible strong {
    color: #003c30;
    text-decoration-thickness: 0.15em;
    text-decoration-color: #005a46;
}

/* Bez animowania przejść przy systemowym ograniczeniu ruchu. */
@media (prefers-reduced-motion: reduce) {
    .sp11-content a,
    .article-content a,
    .strona-content a,
    .sp11-text-link,
    .sp11-audience li a,
    .sp11-footer li a,
    .sp11-topbar__links a,
    .sp11-contact-band a:not(.sp11-social-link) {
        transition: none;
    }
}

@media (forced-colors: active) {
    .sp11-content a:hover,
    .article-content a:hover,
    .strona-content a:hover,
    .sp11-text-link:hover,
    .sp11-audience li a:hover,
    .sp11-footer li a:hover,
    .sp11-topbar__links a:hover,
    .sp11-contact-band a:not(.sp11-social-link):hover {
        color: LinkText !important;
        background: Canvas;
        box-shadow: none;
    }

    .sp11-content a:focus-visible,
    .article-content a:focus-visible,
    .strona-content a:focus-visible,
    .sp11-text-link:focus-visible,
    .sp11-audience li a:focus-visible,
    .sp11-footer li a:focus-visible,
    .sp11-topbar__links a:focus-visible,
    .sp11-contact-band a:not(.sp11-social-link):focus-visible {
        color: HighlightText !important;
        background: Highlight;
        outline-color: Highlight;
        box-shadow: none;
    }
}

@media print {
    .sp11-content a,
    .article-content a,
    .strona-content a,
    .sp11-text-link,
    .sp11-audience li a,
    .sp11-footer li a {
        padding-inline: 0;
        margin-inline: 0;
        color: #000 !important;
        background: transparent !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
}

/* ================================================================
   SP11 Front v1.5 — sticky menu podczas przewijania
   ================================================================ */

:root {
    --sp11-sticky-offset: 4.25rem;
}

/*
 * Cały nagłówek jest elementem sticky.
 * Dzięki temu menu pozostaje nad treścią bez klonowania nawigacji.
 */
.sp11-site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    width: 100%;
    background: #ffffff;
    transition:
        box-shadow 180ms ease,
        transform 180ms ease;
}

.sp11-site-header.is-condensed {
    box-shadow:
        0 0.55rem 1.7rem rgba(0, 42, 33, 0.18),
        0 1px 0 rgba(0, 90, 70, 0.18);
}

/*
 * Desktop: po przewinięciu pozostaje wyłącznie pasek menu.
 * Górny pasek oraz wiersz z dużym logo są zwijane.
 */
@media (min-width: 67.5rem) {
    .sp11-site-header .sp11-topbar,
    .sp11-site-header .sp11-header__brand-row {
        overflow: hidden;
        transition:
            max-height 180ms ease,
            min-height 180ms ease,
            padding 180ms ease,
            opacity 140ms ease,
            border-width 180ms ease;
    }

    .sp11-site-header .sp11-topbar {
        max-height: 4rem;
    }

    .sp11-site-header .sp11-header__brand-row {
        max-height: 7.5rem;
    }

    .sp11-site-header.is-condensed .sp11-topbar,
    .sp11-site-header.is-condensed .sp11-header__brand-row {
        min-height: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        border-width: 0;
        pointer-events: none;
    }

    .sp11-site-header.is-condensed .sp11-nav {
        border-top: 0;
    }

    .sp11-site-header.is-condensed .sp11-nav__list {
        min-height: 4.25rem;
    }
}

/*
 * Telefon i tablet: pozostaje kompaktowy wiersz z logo i przyciskiem menu.
 * Ukrywamy jedynie górny pasek kontaktowy.
 */
@media (max-width: 67.49rem) {
    :root {
        --sp11-sticky-offset: 5.4rem;
    }

    .sp11-site-header .sp11-topbar {
        overflow: hidden;
        max-height: 4rem;
        transition:
            max-height 180ms ease,
            padding 180ms ease,
            opacity 140ms ease;
    }

    .sp11-site-header.is-condensed .sp11-topbar {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        pointer-events: none;
    }

    .sp11-site-header.is-condensed .sp11-header__brand-row {
        min-height: 5.2rem;
    }

    .sp11-site-header.is-condensed .sp11-brand__mark img {
        width: 3.6rem;
        height: 3.6rem;
    }

    .sp11-site-header.is-condensed .sp11-brand__name {
        font-size: 1rem;
    }

    .sp11-site-header.is-condensed .sp11-brand__patron {
        font-size: 0.76rem;
    }

    .sp11-site-header .sp11-nav.is-open {
        max-height: calc(100vh - var(--sp11-sticky-offset));
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 1rem 2rem rgba(0, 42, 33, 0.18);
    }
}

/*
 * Kotwice nie chowają się pod przyklejonym menu.
 */
[id] {
    scroll-margin-top: calc(var(--sp11-sticky-offset) + 1rem);
}

/* Subtelny sygnał wizualny oddzielający sticky menu od treści. */
.sp11-site-header.is-condensed .sp11-nav {
    background:
        linear-gradient(180deg, #ffffff 0%, #f5faf8 100%);
}

/* Brak animacji przy systemowym ograniczeniu ruchu. */
@media (prefers-reduced-motion: reduce) {
    .sp11-site-header,
    .sp11-site-header .sp11-topbar,
    .sp11-site-header .sp11-header__brand-row {
        transition: none;
    }
}

/* Tryb wysokiego kontrastu. */
@media (forced-colors: active) {
    .sp11-site-header,
    .sp11-site-header.is-condensed,
    .sp11-site-header.is-condensed .sp11-nav {
        background: Canvas;
        box-shadow: none;
        border-bottom: 1px solid CanvasText;
    }
}

/* Sticky nie ma znaczenia na wydruku. */
@media print {
    .sp11-site-header {
        position: static !important;
        box-shadow: none !important;
    }

    .sp11-site-header .sp11-topbar,
    .sp11-site-header .sp11-header__brand-row {
        max-height: none !important;
        opacity: 1 !important;
    }
}

/* ================================================================
   SP11 Front v1.6 — usunięcie podskoku sticky menu
   ================================================================ */

/*
 * Przeglądarka nie próbuje korygować pozycji przewinięcia na podstawie
 * elementów zwijanych wewnątrz nagłówka.
 */
.sp11-site-header {
    overflow-anchor: none;
}

/* Spokojniejsze przejście bez gwałtownego rozpoczęcia animacji. */
@media (min-width: 67.5rem) {
    .sp11-site-header .sp11-topbar,
    .sp11-site-header .sp11-header__brand-row {
        transition:
            max-height 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
            min-height 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
            padding 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
            opacity 150ms linear,
            border-width 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
}

@media (max-width: 67.49rem) {
    .sp11-site-header .sp11-topbar,
    .sp11-site-header .sp11-header__brand-row,
    .sp11-site-header .sp11-brand__mark img,
    .sp11-site-header .sp11-brand__name,
    .sp11-site-header .sp11-brand__patron {
        transition:
            max-height 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
            min-height 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
            padding 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
            width 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
            height 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
            font-size 180ms ease,
            opacity 150ms linear;
    }
}

/* Przy ograniczeniu ruchu zmiana stanu jest natychmiastowa. */
@media (prefers-reduced-motion: reduce) {
    .sp11-site-header,
    .sp11-site-header .sp11-topbar,
    .sp11-site-header .sp11-header__brand-row,
    .sp11-site-header .sp11-brand__mark img,
    .sp11-site-header .sp11-brand__name,
    .sp11-site-header .sp11-brand__patron {
        transition: none !important;
    }
}

/* ================================================================
   SP11 Front v1.7 — sekcja rekrutacyjna
   ================================================================ */

.sp11-recruitment {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2rem, 4vw, 3.6rem);
    background:
        linear-gradient(180deg, #f8fbfa 0%, #edf5f2 100%);
    border-top: 1px solid rgba(0, 90, 70, 0.12);
    border-bottom: 1px solid rgba(0, 90, 70, 0.12);
}

.sp11-recruitment__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(13rem, 0.55fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(255, 207, 92, 0.16),
            transparent 17rem
        ),
        linear-gradient(135deg, #005a46 0%, #003c30 62%, #082a22 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.15rem;
    box-shadow:
        0 1.15rem 3rem rgba(0, 42, 33, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sp11-recruitment__panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0.32rem;
    background: linear-gradient(
        90deg,
        #ffcf5c 0 36%,
        #ffffff 36% 42%,
        #ffcf5c 42% 64%,
        transparent 64% 100%
    );
    content: "";
    pointer-events: none;
}

.sp11-recruitment__content {
    position: relative;
    z-index: 2;
}

.sp11-recruitment__eyebrow {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: #ffdf8b;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.sp11-recruitment h2 {
    max-width: 46rem;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.08;
}

.sp11-recruitment__content > p {
    max-width: 44rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 1.06rem;
    line-height: 1.7;
}

.sp11-recruitment__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 42rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}

.sp11-recruitment__steps li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.35rem;
    padding: 0.65rem 0.8rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.7rem;
}

.sp11-recruitment__steps li > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    color: #082a22;
    background: #ffcf5c;
    border-radius: 50%;
    font-weight: 900;
}

.sp11-recruitment__steps strong {
    color: #ffffff;
    font-size: 0.95rem;
}

.sp11-recruitment__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.sp11-btn--recruitment {
    color: #082a22;
    background: #ffcf5c;
    border-color: #ffcf5c;
    box-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.18);
}

.sp11-btn--recruitment:hover {
    color: #082a22;
    background: #ffe08e;
    border-color: #ffffff;
}

.sp11-btn--recruitment:focus-visible {
    color: #082a22;
    background: #ffe08e;
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #003c30;
}

.sp11-btn--recruitment-secondary {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.82);
}

.sp11-btn--recruitment-secondary:hover {
    color: #082a22;
    background: #ffffff;
    border-color: #ffffff;
}

.sp11-btn--recruitment-secondary:focus-visible {
    color: #082a22;
    background: #ffffff;
    outline: 3px solid #ffcf5c;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #003c30;
}

.sp11-recruitment__number {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 15rem;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.10),
            transparent 68%
        );
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 1rem;
}

.sp11-recruitment__number::before,
.sp11-recruitment__number::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    content: "";
}

.sp11-recruitment__number::before {
    width: 12rem;
    height: 12rem;
}

.sp11-recruitment__number::after {
    width: 8.5rem;
    height: 8.5rem;
}

.sp11-recruitment__number span {
    position: relative;
    z-index: 2;
    color: #ffcf5c;
    font-size: clamp(5rem, 10vw, 8.5rem);
    font-weight: 950;
    letter-spacing: -0.08em;
    line-height: 0.86;
    text-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.20);
}

.sp11-recruitment__number small {
    position: relative;
    z-index: 2;
    margin-top: 0.4rem;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

@media (max-width: 64rem) {
    .sp11-recruitment__panel {
        grid-template-columns: 1fr;
    }

    .sp11-recruitment__number {
        min-height: 9rem;
    }

    .sp11-recruitment__number::before {
        width: 8rem;
        height: 8rem;
    }

    .sp11-recruitment__number::after {
        width: 5.8rem;
        height: 5.8rem;
    }

    .sp11-recruitment__number span {
        font-size: 5.5rem;
    }
}

@media (max-width: 42rem) {
    .sp11-recruitment__steps {
        grid-template-columns: 1fr;
    }

    .sp11-recruitment__actions {
        display: grid;
    }

    .sp11-recruitment__actions .sp11-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (forced-colors: active) {
    .sp11-recruitment,
    .sp11-recruitment__panel,
    .sp11-recruitment__steps li,
    .sp11-recruitment__number {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .sp11-recruitment h2,
    .sp11-recruitment__content > p,
    .sp11-recruitment__eyebrow,
    .sp11-recruitment__steps strong,
    .sp11-recruitment__number span,
    .sp11-recruitment__number small {
        color: CanvasText;
    }

    .sp11-btn--recruitment,
    .sp11-btn--recruitment-secondary,
    .sp11-recruitment__steps li > span {
        color: HighlightText;
        background: Highlight;
        border-color: Highlight;
    }

    .sp11-recruitment__panel::before,
    .sp11-recruitment__number::before,
    .sp11-recruitment__number::after {
        display: none;
    }
}

@media print {
    .sp11-recruitment {
        padding-block: 1rem;
        background: #ffffff !important;
    }

    .sp11-recruitment__panel,
    .sp11-recruitment__steps li,
    .sp11-recruitment__number {
        color: #000 !important;
        background: #ffffff !important;
        border-color: #000 !important;
        box-shadow: none !important;
    }

    .sp11-recruitment h2,
    .sp11-recruitment__content > p,
    .sp11-recruitment__eyebrow,
    .sp11-recruitment__steps strong,
    .sp11-recruitment__number span,
    .sp11-recruitment__number small {
        color: #000 !important;
    }

    .sp11-recruitment__panel::before,
    .sp11-recruitment__number::before,
    .sp11-recruitment__number::after {
        display: none !important;
    }
}

/* ================================================================
   SP11 Front v1.9 — treść stron statycznych i listy CKEditor
   ================================================================ */

/*
 * Reguły obejmują wyłącznie standardową wersję strony.
 * Treść ETR zachowuje swój osobny, uproszczony sposób prezentacji.
 */
.strona-content--standard {
    max-width: 75rem;
    color: #172033;
    font-size: clamp(1rem, 0.35vw + 0.94rem, 1.075rem);
    line-height: 1.78;
    overflow-wrap: anywhere;
}

.strona-content--standard > * {
    max-width: 76ch;
}

.strona-content--standard > figure,
.strona-content--standard > table,
.strona-content--standard > .table-responsive,
.strona-content--standard > blockquote {
    max-width: 100%;
}

.strona-content--standard p {
    margin: 0 0 1.25rem;
}

.strona-content--standard p + p {
    margin-top: 0.15rem;
}

.strona-content--standard h2,
.strona-content--standard h3,
.strona-content--standard h4 {
    position: relative;
    max-width: 48rem;
    color: #082a22;
    text-wrap: balance;
}

.strona-content--standard h2 {
    margin: 2.35rem 0 1rem;
    padding-left: 1rem;
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.22;
}

.strona-content--standard h2::before {
    position: absolute;
    top: 0.17em;
    bottom: 0.13em;
    left: 0;
    width: 0.28rem;
    background: linear-gradient(
        180deg,
        #005a46 0 72%,
        #ffcf5c 72% 100%
    );
    border-radius: 999px;
    content: "";
}

.strona-content--standard h3 {
    margin: 2rem 0 0.8rem;
    font-size: clamp(1.28rem, 2.4vw, 1.55rem);
}

.strona-content--standard h4 {
    margin: 1.65rem 0 0.65rem;
    font-size: 1.12rem;
}

/* ---------------------------------------------------------------
   Listy nieuporządkowane
   --------------------------------------------------------------- */

.strona-content--standard ul,
.strona-content--standard ol {
    display: grid;
    gap: 0.62rem;
    margin: 1rem 0 1.55rem;
    padding: 0;
    list-style: none;
}

.strona-content--standard li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 1.75rem;
    line-height: 1.68;
}

.strona-content--standard ul > li::before {
    position: absolute;
    top: 0.64em;
    left: 0.2rem;
    width: 0.52rem;
    height: 0.52rem;
    background: #005a46;
    border-radius: 50%;
    box-shadow: 0 0 0 0.2rem #e2f1ec;
    content: "";
}

.strona-content--standard li > p {
    margin: 0;
}

.strona-content--standard li > p + p {
    margin-top: 0.65rem;
}

/*
 * Zagnieżdżona lista jest wizualnie lżejsza, ale nadal zachowuje
 * wyraźną hierarchię niezależną od samego koloru.
 */
.strona-content--standard li > ul,
.strona-content--standard li > ol {
    gap: 0.48rem;
    margin: 0.7rem 0 0.25rem;
    padding-left: 0.65rem;
}

.strona-content--standard ul ul > li {
    padding-left: 1.55rem;
}

.strona-content--standard ul ul > li::before {
    top: 0.59em;
    left: 0.18rem;
    width: 0.48rem;
    height: 0.48rem;
    background: #ffffff;
    border: 2px solid #005a46;
    box-shadow: none;
}

.strona-content--standard ul ul ul > li::before {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffcf5c;
    border: 1px solid #003c30;
    border-radius: 0.12rem;
}

/* ---------------------------------------------------------------
   Listy numerowane
   --------------------------------------------------------------- */

.strona-content--standard ol {
    counter-reset: sp11-standard-list;
}

.strona-content--standard ol > li {
    min-height: 1.8rem;
    padding-left: 2.45rem;
    counter-increment: sp11-standard-list;
}

.strona-content--standard ol > li::before {
    position: absolute;
    top: 0.05rem;
    left: 0;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    color: #ffffff;
    background: #005a46;
    border: 1px solid #003c30;
    border-radius: 50%;
    content: counter(sp11-standard-list);
    font-size: 0.79rem;
    font-weight: 800;
    line-height: 1;
}

.strona-content--standard ol ol {
    counter-reset: sp11-standard-sublist;
}

.strona-content--standard ol ol > li {
    padding-left: 2.25rem;
    counter-increment: sp11-standard-sublist;
}

.strona-content--standard ol ol > li::before {
    width: 1.65rem;
    height: 1.65rem;
    color: #082a22;
    background: #ffcf5c;
    border-color: #d5a925;
    content: counter(sp11-standard-sublist, lower-alpha);
}

/* ---------------------------------------------------------------
   Dodatkowe elementy tworzone w CKEditorze
   --------------------------------------------------------------- */

.strona-content--standard strong {
    color: #102b23;
    font-weight: 750;
}

.strona-content--standard hr {
    max-width: 100%;
    height: 1px;
    margin: 2rem 0;
    background: linear-gradient(
        90deg,
        #005a46 0 28%,
        #ffcf5c 28% 39%,
        #d5e2de 39% 100%
    );
    border: 0;
}

.strona-content--standard figure {
    margin: 1.6rem 0;
}

.strona-content--standard figure img,
.strona-content--standard > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid #d5e2de;
    border-radius: 0.8rem;
    box-shadow: 0 0.55rem 1.6rem rgba(0, 60, 48, 0.09);
}

.strona-content--standard figcaption {
    margin-top: 0.55rem;
    color: #536173;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

.strona-content--standard blockquote p:last-child {
    margin-bottom: 0;
}

/*
 * Listy wewnątrz cytatu zachowują własne znaczniki, lecz bez
 * dodatkowej poświaty, aby blok nie był wizualnie przeciążony.
 */
.strona-content--standard blockquote ul > li::before {
    box-shadow: none;
}

/* ---------------------------------------------------------------
   Responsywność
   --------------------------------------------------------------- */

@media (max-width: 42rem) {
    .strona-content--standard {
        font-size: 1rem;
        line-height: 1.72;
    }

    .strona-content--standard h2 {
        margin-top: 2rem;
        padding-left: 0.85rem;
    }

    .strona-content--standard ul,
    .strona-content--standard ol {
        gap: 0.55rem;
        margin-bottom: 1.35rem;
    }

    .strona-content--standard li {
        padding-left: 1.55rem;
    }

    .strona-content--standard li > ul,
    .strona-content--standard li > ol {
        padding-left: 0.15rem;
    }

    .strona-content--standard ol > li {
        padding-left: 2.25rem;
    }
}

/* Wysoki kontrast systemowy. */
@media (forced-colors: active) {
    .strona-content--standard h2::before {
        background: CanvasText;
    }

    .strona-content--standard ul > li::before,
    .strona-content--standard ul ul > li::before,
    .strona-content--standard ul ul ul > li::before {
        background: CanvasText;
        border-color: CanvasText;
        box-shadow: none;
    }

    .strona-content--standard ol > li::before,
    .strona-content--standard ol ol > li::before {
        color: HighlightText;
        background: Highlight;
        border-color: Highlight;
    }
}

/* Wydruk pozostaje prosty i oszczędny. */
@media print {
    .strona-content--standard {
        max-width: none;
        color: #000000;
        font-size: 11pt;
        line-height: 1.5;
    }

    .strona-content--standard > * {
        max-width: none;
    }

    .strona-content--standard h2 {
        padding-left: 0;
        color: #000000;
    }

    .strona-content--standard h2::before {
        display: none;
    }

    .strona-content--standard ul,
    .strona-content--standard ol {
        display: block;
        margin: 0.7rem 0 1rem 1.35rem;
        list-style-position: outside;
    }

    .strona-content--standard ul {
        list-style-type: disc;
    }

    .strona-content--standard ul ul {
        list-style-type: circle;
    }

    .strona-content--standard ol {
        list-style-type: decimal;
    }

    .strona-content--standard li,
    .strona-content--standard ol > li,
    .strona-content--standard ol ol > li {
        min-height: 0;
        margin-bottom: 0.3rem;
        padding-left: 0.2rem;
    }

    .strona-content--standard li::before {
        display: none !important;
    }

    .strona-content--standard figure img,
    .strona-content--standard > img {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ================================================================
   SP11 Front v2.0 — treść aktualności i listy CKEditor
   ================================================================ */

/*
 * Reguły obejmują standardową treść pojedynczej aktualności:
 * article-content article-content--standard.
 * Wersja ETR zachowuje osobny, uproszczony wygląd.
 */
.article-content--standard {
    max-width: 75rem;
    color: #172033;
    font-size: clamp(1rem, 0.35vw + 0.94rem, 1.075rem);
    line-height: 1.78;
    overflow-wrap: anywhere;
}

.article-content--standard > * {
    max-width: 76ch;
}

.article-content--standard > figure,
.article-content--standard > table,
.article-content--standard > .table-responsive,
.article-content--standard > blockquote {
    max-width: 100%;
}

.article-content--standard > :first-child {
    margin-top: 0;
}

.article-content--standard p {
    margin: 0 0 1.25rem;
}

.article-content--standard p + p {
    margin-top: 0.15rem;
}

.article-content--standard h2,
.article-content--standard h3,
.article-content--standard h4 {
    position: relative;
    max-width: 48rem;
    color: #082a22;
    text-wrap: balance;
}

.article-content--standard h2 {
    margin: 2.35rem 0 1rem;
    padding-left: 1rem;
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.22;
}

.article-content--standard h2::before {
    position: absolute;
    top: 0.17em;
    bottom: 0.13em;
    left: 0;
    width: 0.28rem;
    background: linear-gradient(
        180deg,
        #005a46 0 72%,
        #ffcf5c 72% 100%
    );
    border-radius: 999px;
    content: "";
}

.article-content--standard h3 {
    margin: 2rem 0 0.8rem;
    font-size: clamp(1.28rem, 2.4vw, 1.55rem);
}

.article-content--standard h4 {
    margin: 1.65rem 0 0.65rem;
    font-size: 1.12rem;
}

/* ---------------------------------------------------------------
   Listy nieuporządkowane
   --------------------------------------------------------------- */

.article-content--standard ul,
.article-content--standard ol {
    display: grid;
    gap: 0.62rem;
    margin: 1rem 0 1.55rem;
    padding: 0;
    list-style: none;
}

.article-content--standard li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 1.75rem;
    line-height: 1.68;
}

.article-content--standard ul > li::before {
    position: absolute;
    top: 0.64em;
    left: 0.2rem;
    width: 0.52rem;
    height: 0.52rem;
    background: #005a46;
    border-radius: 50%;
    box-shadow: 0 0 0 0.2rem #e2f1ec;
    content: "";
}

.article-content--standard li > p {
    margin: 0;
}

.article-content--standard li > p + p {
    margin-top: 0.65rem;
}

.article-content--standard li > ul,
.article-content--standard li > ol {
    gap: 0.48rem;
    margin: 0.7rem 0 0.25rem;
    padding-left: 0.65rem;
}

.article-content--standard ul ul > li {
    padding-left: 1.55rem;
}

.article-content--standard ul ul > li::before {
    top: 0.59em;
    left: 0.18rem;
    width: 0.48rem;
    height: 0.48rem;
    background: #ffffff;
    border: 2px solid #005a46;
    box-shadow: none;
}

.article-content--standard ul ul ul > li::before {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffcf5c;
    border: 1px solid #003c30;
    border-radius: 0.12rem;
}

/* ---------------------------------------------------------------
   Listy numerowane
   --------------------------------------------------------------- */

.article-content--standard ol {
    counter-reset: sp11-news-list;
}

.article-content--standard ol > li {
    min-height: 1.8rem;
    padding-left: 2.45rem;
    counter-increment: sp11-news-list;
}

.article-content--standard ol > li::before {
    position: absolute;
    top: 0.05rem;
    left: 0;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    color: #ffffff;
    background: #005a46;
    border: 1px solid #003c30;
    border-radius: 50%;
    content: counter(sp11-news-list);
    font-size: 0.79rem;
    font-weight: 800;
    line-height: 1;
}

.article-content--standard ol ol {
    counter-reset: sp11-news-sublist;
}

.article-content--standard ol ol > li {
    padding-left: 2.25rem;
    counter-increment: sp11-news-sublist;
}

.article-content--standard ol ol > li::before {
    width: 1.65rem;
    height: 1.65rem;
    color: #082a22;
    background: #ffcf5c;
    border-color: #d5a925;
    content: counter(sp11-news-sublist, lower-alpha);
}

/* ---------------------------------------------------------------
   Elementy CKEditora
   --------------------------------------------------------------- */

.article-content--standard strong {
    color: #102b23;
    font-weight: 750;
}

.article-content--standard hr {
    max-width: 100%;
    height: 1px;
    margin: 2rem 0;
    background: linear-gradient(
        90deg,
        #005a46 0 28%,
        #ffcf5c 28% 39%,
        #d5e2de 39% 100%
    );
    border: 0;
}

.article-content--standard figure {
    margin: 1.6rem 0;
}

.article-content--standard figure img,
.article-content--standard > img,
.article-content--standard p > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid #d5e2de;
    border-radius: 0.8rem;
    box-shadow: 0 0.55rem 1.6rem rgba(0, 60, 48, 0.09);
}

.article-content--standard p > img {
    margin-block: 1.4rem;
}

.article-content--standard figcaption {
    margin-top: 0.55rem;
    color: #536173;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

.article-content--standard blockquote {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.15rem 1.25rem 1.15rem 1.45rem;
    color: #17352c;
    background:
        linear-gradient(135deg, #edf7f4 0%, #f8fbfa 100%);
    border: 1px solid #cfe1db;
    border-left: 0.32rem solid #005a46;
    border-radius: 0.7rem;
}

.article-content--standard blockquote p:last-child {
    margin-bottom: 0;
}

.article-content--standard blockquote ul > li::before {
    box-shadow: none;
}

/* Tabele wewnątrz aktualności. */
.article-content--standard table {
    display: table;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #bdcec8;
    border-radius: 0.7rem;
}

.article-content--standard th,
.article-content--standard td {
    padding: 0.75rem;
    border: 0;
    border-right: 1px solid #bdcec8;
    border-bottom: 1px solid #bdcec8;
    text-align: left;
    vertical-align: top;
}

.article-content--standard tr > *:last-child {
    border-right: 0;
}

.article-content--standard tbody tr:last-child > * {
    border-bottom: 0;
}

.article-content--standard th {
    color: #ffffff;
    background: #005a46;
    font-weight: 750;
}

.article-content--standard tbody tr:nth-child(even) td {
    background: #f3f9f7;
}

/* ---------------------------------------------------------------
   Responsywność
   --------------------------------------------------------------- */

@media (max-width: 42rem) {
    .article-content--standard {
        font-size: 1rem;
        line-height: 1.72;
    }

    .article-content--standard h2 {
        margin-top: 2rem;
        padding-left: 0.85rem;
    }

    .article-content--standard ul,
    .article-content--standard ol {
        gap: 0.55rem;
        margin-bottom: 1.35rem;
    }

    .article-content--standard li {
        padding-left: 1.55rem;
    }

    .article-content--standard li > ul,
    .article-content--standard li > ol {
        padding-left: 0.15rem;
    }

    .article-content--standard ol > li {
        padding-left: 2.25rem;
    }

    .article-content--standard table {
        display: block;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
}

/* Wysoki kontrast. */
@media (forced-colors: active) {
    .article-content--standard h2::before {
        background: CanvasText;
    }

    .article-content--standard ul > li::before,
    .article-content--standard ul ul > li::before,
    .article-content--standard ul ul ul > li::before {
        background: CanvasText;
        border-color: CanvasText;
        box-shadow: none;
    }

    .article-content--standard ol > li::before,
    .article-content--standard ol ol > li::before {
        color: HighlightText;
        background: Highlight;
        border-color: Highlight;
    }

    .article-content--standard blockquote,
    .article-content--standard table,
    .article-content--standard th,
    .article-content--standard td {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
    }
}

/* Prosty wydruk. */
@media print {
    .article-content--standard {
        max-width: none;
        color: #000000;
        font-size: 11pt;
        line-height: 1.5;
    }

    .article-content--standard > * {
        max-width: none;
    }

    .article-content--standard h2 {
        padding-left: 0;
        color: #000000;
    }

    .article-content--standard h2::before {
        display: none;
    }

    .article-content--standard ul,
    .article-content--standard ol {
        display: block;
        margin: 0.7rem 0 1rem 1.35rem;
        list-style-position: outside;
    }

    .article-content--standard ul {
        list-style-type: disc;
    }

    .article-content--standard ul ul {
        list-style-type: circle;
    }

    .article-content--standard ol {
        list-style-type: decimal;
    }

    .article-content--standard li,
    .article-content--standard ol > li,
    .article-content--standard ol ol > li {
        min-height: 0;
        margin-bottom: 0.3rem;
        padding-left: 0.2rem;
    }

    .article-content--standard li::before {
        display: none !important;
    }

    .article-content--standard figure img,
    .article-content--standard > img,
    .article-content--standard p > img {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .article-content--standard blockquote {
        color: #000000;
        background: #ffffff;
        border: 1px solid #000000;
        border-left-width: 3px;
        box-shadow: none;
    }

    .article-content--standard table,
    .article-content--standard th,
    .article-content--standard td {
        color: #000000;
        background: #ffffff !important;
        border-color: #000000;
    }
}

/* ================================================================
   SP11 Front v2.1 — trzy jasne karty audience i jedna wyróżniona
   ================================================================ */

/*
 * „Dla ucznia” ma ten sam jasny wariant co „Dla rodzica”
 * i „Szkoła i wsparcie”. Jedyną wyróżnioną kartą pozostaje dziennik.
 */
.sp11-audience-grid--four .sp11-audience--student {
    color: #172033;
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(0, 90, 70, 0.055),
            transparent 7rem
        ),
        linear-gradient(180deg, #ffffff 0%, #f4f9f7 100%);
    border-color: rgba(255, 255, 255, 0.72);
}

.sp11-audience-grid--four .sp11-audience--student h3 {
    color: #082a22;
}

.sp11-audience-grid--four .sp11-audience--student a {
    color: #003c30;
}

.sp11-audience-grid--four .sp11-audience--student a:hover,
.sp11-audience-grid--four .sp11-audience--student a:focus-visible {
    color: #005a46;
}

/* Wyróżnienie pozostaje wyłącznie na karcie dziennika. */
.sp11-audience-grid--four .sp11-audience--diary {
    box-shadow:
        0 0 0 2px rgba(255, 207, 92, 0.34),
        0 0.8rem 2rem rgba(0, 35, 28, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

/* ================================================================
   SP11 Front v2.2 — trójkolorowy pasek nad stopką
   ================================================================ */

/*
 * Stopka otrzymuje własny kontekst warstw, tak samo jak sekcja
 * .sp11-official. Dzięki isolation:isolate pseudo-element z
 * z-index:-1 pozostaje nad tłem stopki, ale pod jej treścią.
 */
.sp11-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.sp11-footer::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 0.28rem;
    background: linear-gradient(
        90deg,
        var(--sp11-blue-800) 0 42%,
        var(--sp11-focus) 42% 56%,
        #c9102d 56% 100%
    );
    content: "";
    pointer-events: none;
}

/*
 * Treść stopki pozostaje w warstwie podstawowej. Nie jest konieczne
 * nadawanie jej dodatniego z-index, ponieważ pseudo-element ma -1
 * wewnątrz odizolowanego kontekstu stopki.
 */
.sp11-footer__grid,
.sp11-footer__bottom {
    position: relative;
}

@media (forced-colors: active) {
    .sp11-footer::before {
        background: CanvasText;
    }
}

@media print {
    .sp11-footer::before {
        display: none !important;
    }
}