/* ==========================================================================
   KROMED — system stylów
   Czysty CSS, bez frameworków i preprocesorów.
   Paleta: niebieski (z logo), granat, jasny kaszmir, zieleń NFZ.
   Struktura: 1) tokeny 2) reset 3) typografia 4) layout 5) komponenty
              6) utilities 7) responsywność 8) a11y / druk
   ========================================================================== */

/* 1. TOKENY ============================================================== */
:root {
  /* --- Niebieski (kolor z logo) --- */
  --c-brand:      #009ee3;  /* kolor pobrany z logo — płaszczyzny, grafika    */
  --c-brand-btn:  #0077ab;  /* wypełnienie przycisków (biały tekst 5.0:1)     */
  --c-brand-ink:  #006494;  /* tekst i linki (6.5:1)                          */
  --c-brand-wash: #e6f5fd;  /* delikatne tło                                  */
  --c-sky:        #7ecdf5;  /* jasny błękit — akcenty na granacie (8.8:1)     */

  /* --- Granat --- */
  --c-navy:       #0b2545;  /* granat — stopka, paski, ciemne sekcje          */
  --c-navy-2:     #13355c;  /* jaśniejszy granat — gradient                   */

  /* --- Zieleń (z obecnej strony) — oznacza świadczenia bezpłatne / NFZ --- */
  --c-green:      #4caf50;  /* płaszczyzny i grafika                          */
  --c-green-btn:  #2f7d33;  /* wypełnienie z białym tekstem (5.1:1)           */
  --c-green-ink:  #2e6b31;  /* tekst zielony (6.4:1)                          */
  --c-green-wash: #eaf6ea;  /* delikatne tło                                  */

  /* --- Jasny kaszmir --- */
  --c-cashmere:     #e7e0d1;  /* ciepła jasna beż-szarość                     */
  --c-cashmere-50:  #f7f4ee;  /* tło sekcji                                   */
  --c-cashmere-line:#ddd5c3;  /* obramowania                                  */

  /* --- Neutralne --- */
  --c-ink:   #0b1f2b;  /* tekst podstawowy (16.9:1)                           */
  --c-muted: #46596b;  /* tekst pomocniczy (7.2:1)                            */
  --c-white: #ffffff;

  --c-bg:     var(--c-white);
  --c-bg-alt: var(--c-cashmere-50);
  --c-line:   var(--c-cashmere-line);
  --c-focus:  #0b2545;

  /* --- Typografia --- */
  --f-sans: "Poppins", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
  --fs-lg:   clamp(1.375rem, 0.6vw + 1.25rem, 1.625rem);
  --fs-xl:   clamp(1.75rem, 1.3vw + 1.42rem, 2.375rem);
  --fs-2xl:  clamp(2.25rem, 2.6vw + 1.6rem, 3.5rem);
  --lh-tight: 1.15;
  --lh-base:  1.65;

  /* --- Przestrzeń --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  /* --- Kształt --- */
  --r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, .08), 0 3px 10px rgba(11, 37, 69, .06);
  --shadow-md: 0 4px 12px rgba(11, 37, 69, .10), 0 20px 40px rgba(11, 37, 69, .12);
  --shadow-lg: 0 8px 24px rgba(11, 37, 69, .14), 0 32px 64px rgba(11, 37, 69, .20);

  --wrap: 1180px;
}

/* 2. RESET =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, picture { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

/* 3. TYPOGRAFIA ========================================================== */
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { max-width: 68ch; }

a { color: var(--c-brand-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-navy); }
strong { font-weight: 600; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-sm); }
.on-dark :focus-visible, .hero :focus-visible { outline-color: var(--c-sky); }

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 100;
  transform: translateY(-250%);
  background: var(--c-navy); color: var(--c-white);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); color: var(--c-white); }

/* 4. LAYOUT ============================================================== */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--alt { background: var(--c-bg-alt); }

.section__head { margin-bottom: var(--sp-6); max-width: 62ch; }
.section__head p { margin-top: var(--sp-3); color: var(--c-muted); font-size: var(--fs-md); }

.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-brand-ink); margin-bottom: var(--sp-3);
}
.eyebrow::before { content: ""; width: 2rem; height: 3px; background: var(--c-brand); border-radius: 3px; }

/* 5. KOMPONENTY ========================================================== */

/* 5.0 Pasek narzędzi dostępności ======================================== */
.a11y-bar {
  background: var(--c-white); color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-xs);
}
.a11y-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-2);
}
.a11y-group { display: flex; align-items: center; gap: var(--sp-2); }
.a11y-group + .a11y-group { padding-left: var(--sp-4); border-left: 1px solid var(--c-line); }

.a11y-btn {
  display: grid; place-items: center;
  min-width: 2.25rem; height: 2.25rem; padding-inline: var(--sp-2);
  background: var(--c-white); color: var(--c-ink);
  border: 2px solid var(--c-ink); border-radius: var(--r-sm);
  font-weight: 700; line-height: 1; cursor: pointer;
}
.a11y-btn:hover { background: var(--c-ink); color: var(--c-white); }
.a11y-btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-white); }

/* Przyciski kontrastu — każdy pokazuje literę A w swoim schemacie */
.a11y-swatch {
  width: 2.25rem; height: 2.25rem; padding: 0;
  border-radius: 50%; border: 2px solid var(--c-ink);
  font-weight: 700; font-size: 0.9375rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.a11y-swatch[aria-pressed="true"] { outline: 3px solid var(--c-brand-ink); outline-offset: 2px; }
.a11y-swatch--domyslny  { background: #ffffff; color: #000000; }
.a11y-swatch--kontrast  { background: #000000; color: #ffffff; border-color: #000000; }
.a11y-swatch--niebieski { background: #000000; color: #66ccff; border-color: #000000; }
.a11y-swatch--zolty     { background: #ffff00; color: #000000; border-color: #000000; }

.a11y-link {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 2px solid var(--c-ink); border-radius: 50%; color: var(--c-ink);
}
.a11y-link:hover { background: var(--c-ink); color: var(--c-white); }
.a11y-link svg { width: 1.25rem; height: 1.25rem; }
.a11y-bar__spacer { margin-left: auto; }

@media (max-width: 40rem) {
  .a11y-bar__inner { justify-content: center; gap: var(--sp-3); }
  .a11y-group + .a11y-group { padding-left: var(--sp-3); }
  .a11y-bar__spacer { margin-left: 0; }
}

/* --- Tryby wysokiego kontrastu ---------------------------------------- */
/* Nadpisujemy wyłącznie tokeny — reszta arkusza działa bez zmian. */
html[data-kontrast] {
  --c-brand-wash: var(--c-bg);
  --c-green-wash: var(--c-bg);
  --c-cashmere: var(--c-bg);
  --c-cashmere-50: var(--c-bg);
  --c-bg-alt: var(--c-bg);
  --c-navy: var(--c-bg);
  --c-navy-2: var(--c-bg);
}
html[data-kontrast="czarny"]    { --c-bg: #000000; --c-fg: #ffffff; }
html[data-kontrast="niebieski"] { --c-bg: #000000; --c-fg: #66ccff; }
html[data-kontrast="zolty"]     { --c-bg: #ffff00; --c-fg: #000000; }

html[data-kontrast] {
  --c-white: var(--c-bg);
  --c-ink: var(--c-fg);
  --c-muted: var(--c-fg);
  --c-line: var(--c-fg);
  --c-cashmere-line: var(--c-fg);
  --c-brand: var(--c-fg);
  --c-brand-btn: var(--c-bg);
  --c-brand-ink: var(--c-fg);
  --c-sky: var(--c-fg);
  --c-green: var(--c-fg);
  --c-green-btn: var(--c-bg);
  --c-green-ink: var(--c-fg);
  --c-focus: var(--c-fg);
}
html[data-kontrast] body { background: var(--c-bg); color: var(--c-fg); }
html[data-kontrast] .hero,
html[data-kontrast] .subhero,
html[data-kontrast] .footer,
html[data-kontrast] .funding,
html[data-kontrast] .topbar,
html[data-kontrast] .header,
html[data-kontrast] .a11y-bar,
html[data-kontrast] .spec,
html[data-kontrast] .card,
html[data-kontrast] .panel,
html[data-kontrast] .note,
html[data-kontrast] .news__item,
html[data-kontrast] .hours-card,
html[data-kontrast] .table thead th,
html[data-kontrast] .table tbody tr:nth-child(even),
html[data-kontrast] .faq details,
html[data-kontrast] .btn {
  background: var(--c-bg) !important;
  color: var(--c-fg) !important;
  box-shadow: none !important;
  background-image: none !important;
}
html[data-kontrast] .hero::before,
html[data-kontrast] .hero::after,
html[data-kontrast] .subhero::after { display: none; }
html[data-kontrast] a { color: var(--c-fg); text-decoration: underline; }
html[data-kontrast] .btn,
html[data-kontrast] .card,
html[data-kontrast] .spec,
html[data-kontrast] .panel,
html[data-kontrast] .note,
html[data-kontrast] .badge,
html[data-kontrast] .news__item,
html[data-kontrast] .faq details { border: 2px solid var(--c-fg) !important; }
html[data-kontrast] .btn:hover,
html[data-kontrast] .nav__link:hover,
html[data-kontrast] .a11y-btn:hover { outline: 3px solid var(--c-fg); }
/* Grafiki: w trybach kontrastowych zdjęcia rozpraszają — zostają kontury */
html[data-kontrast] img:not([src$=".svg"]) { filter: grayscale(1) contrast(1.4); }
html[data-kontrast="czarny"] img, html[data-kontrast="niebieski"] img { filter: grayscale(1) invert(1) contrast(1.3); }
/* Tekst zawsze w kolorze pierwszoplanowym — w normalnej palecie część elementów
   używa --c-white jako koloru tekstu na ciemnym tle, co w trybie kontrastowym
   uczyniłoby je niewidocznymi. */
html[data-kontrast] *:not(.a11y-swatch):not(.a11y-swatch *) { color: var(--c-fg) !important; }

/* Logo jako jednolita sylwetka — inwersja kolorowego PNG daje brudny szary */
html[data-kontrast="czarny"] .logo img,
html[data-kontrast="niebieski"] .logo img,
html[data-kontrast="czarny"] .footer__logo img,
html[data-kontrast="niebieski"] .footer__logo img { filter: brightness(0) invert(1); }
html[data-kontrast="zolty"] .logo img,
html[data-kontrast="zolty"] .footer__logo img { filter: brightness(0); }

/* Przyciski rozmiaru tekstu — stan wciśnięty musi zostać czytelny */
html[data-kontrast] .a11y-btn {
  background: var(--c-bg) !important; color: var(--c-fg) !important;
  border-color: var(--c-fg) !important;
}
html[data-kontrast] .a11y-btn[aria-pressed="true"],
html[data-kontrast] .a11y-btn:hover {
  background: var(--c-fg) !important; color: var(--c-bg) !important;
}
html[data-kontrast] .a11y-btn[aria-pressed="true"] *,
html[data-kontrast] .a11y-btn:hover * { color: var(--c-bg) !important; }

html[data-kontrast] .a11y-swatch { filter: none; }
html[data-kontrast] .a11y-swatch--domyslny  { background: #ffffff !important; color: #000000 !important; }
html[data-kontrast] .a11y-swatch--kontrast  { background: #000000 !important; color: #ffffff !important; }
html[data-kontrast] .a11y-swatch--niebieski { background: #000000 !important; color: #66ccff !important; }
html[data-kontrast] .a11y-swatch--zolty     { background: #ffff00 !important; color: #000000 !important; }

/* --- Skala tekstu ------------------------------------------------------ */
html[data-skala="1"] { font-size: 112.5%; }
html[data-skala="2"] { font-size: 125%; }
html[data-skala="3"] { font-size: 140%; }

/* 5.1 Przyciski */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 3rem; padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-sm); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-brand-btn); color: var(--c-white); box-shadow: 0 4px 14px rgba(0, 119, 171, .35); }
.btn--primary:hover { background: var(--c-navy); color: var(--c-white); box-shadow: 0 8px 22px rgba(11, 37, 69, .35); }
/* CTA na ciemnym tle — jasny kaszmir z granatowym tekstem (11.7:1) */
.btn--cream { background: var(--c-cashmere); color: var(--c-navy); box-shadow: 0 4px 16px rgba(0, 0, 0, .22); }
.btn--cream:hover { background: var(--c-white); color: var(--c-navy); }
.btn--ghost { background: transparent; color: var(--c-brand-ink); border-color: var(--c-brand); }
.btn--ghost:hover { background: var(--c-brand-wash); color: var(--c-brand-ink); }
.btn--outline-light { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.6); }
.btn--outline-light:hover { background: rgba(255,255,255,.14); color: var(--c-white); }

/* 5.3 Pasek kontaktowy */
.topbar { background: var(--c-navy); color: var(--c-cashmere); font-size: var(--fs-xs); }
.topbar a { color: var(--c-white); text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--c-sky); text-decoration: underline; }
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  align-items: center; justify-content: space-between; padding-block: var(--sp-2);
}
.topbar__list { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.topbar__sos { color: var(--c-white); font-weight: 700; }

/* 5.4 Nagłówek */
.header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3);
}
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 2.5rem; width: auto; }

.nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { background: var(--c-brand-wash); color: var(--c-brand-ink); }
.nav__link[aria-current="page"] { color: var(--c-brand-ink); box-shadow: inset 0 -3px 0 var(--c-brand); }
.nav__cta { margin-left: var(--sp-2); }
.nav-toggle { display: none; }

/* 5.5 Hero — granat przechodzący w niebieski z logo */
.hero {
  position: relative; overflow: hidden; color: var(--c-white);
  background: linear-gradient(135deg, #0b2545 0%, #13355c 45%, #0077ab 100%);
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto 45%; height: 140%;
  background: radial-gradient(closest-side, rgba(0, 158, 227, .35), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--c-brand) 0 25%, var(--c-green) 25% 50%, var(--c-sky) 50% 75%, var(--c-cashmere) 75%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center; padding-block: clamp(2.75rem, 6vw, 5.5rem);
}
.hero .eyebrow { color: var(--c-sky); }
.hero .eyebrow::before { background: var(--c-sky); }
.hero h1 { margin-bottom: var(--sp-4); }
.hero h1 em { font-style: normal; color: var(--c-sky); }
.hero__lead { font-size: var(--fs-md); color: rgba(255, 255, 255, .92); margin-bottom: var(--sp-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-7);
  padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero__fact dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-sky); font-weight: 700; }
.hero__fact dd { font-size: var(--fs-lg); font-weight: 700; color: var(--c-white); }

.hours-card {
  background: var(--c-white); color: var(--c-ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-6); border-top: 5px solid var(--c-brand);
}
.hours-card h2 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours th, .hours td { text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.hours th { font-weight: 500; color: var(--c-muted); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-brand-ink); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr:last-child td { color: var(--c-muted); font-weight: 500; }
.hours-card__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); }

/* 5.6 Karty */
.card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--c-brand); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card h3 { font-size: var(--fs-md); }
.card p { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; }
.card__icon {
  width: 3.5rem; height: 3.5rem; flex: none;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--c-brand-btn); color: var(--c-white);
}
.card__icon svg, .card__icon img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.card__link { margin-top: auto; font-weight: 600; font-size: var(--fs-sm); color: var(--c-brand-ink); }
.card--link { position: relative; }
.card--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Karta wyróżniona — granatowa krawędź i granatowy kafel ikony */
.card--feature { border-width: 0; border-top: 5px solid var(--c-navy); box-shadow: var(--shadow-sm); }
.card--feature .card__icon { background: var(--c-navy); color: var(--c-white); }

/* 5.7 Plakietki */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.1875rem var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent;
}
.badge--nfz  { background: var(--c-green-wash); color: var(--c-green-ink); border-color: #bfe3c1; }
.badge--priv { background: var(--c-cashmere);   color: var(--c-navy);      border-color: var(--c-cashmere-line); }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 5.8 Placówki */
.branch { gap: var(--sp-4); border-top: 5px solid var(--c-brand); }
.branch__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.branch__addr { font-size: var(--fs-sm); color: var(--c-muted); font-style: normal; }
.branch__tel {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-lg); font-weight: 700; text-decoration: none; color: var(--c-brand-ink);
}
.branch__tel:hover { color: var(--c-navy); }
.branch__scope { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.branch__scope li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.branch__scope li::before {
  content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .55rem;
  background: var(--c-brand); border-radius: 50%;
}

/* 5.9 Aktualności */
.news { display: grid; gap: var(--sp-5); }
.news__item {
  display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-left: 6px solid var(--c-brand); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.news__item h3 { font-size: var(--fs-md); }
.news__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--fs-xs); }
.news__date { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-muted); }
.news__tag {
  padding: 0.125rem var(--sp-3); border-radius: var(--r-pill);
  background: var(--c-brand-wash); color: var(--c-brand-ink); font-weight: 700;
}
.news__item p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.news__empty { color: var(--c-muted); font-size: var(--fs-sm); }
/* Wpis przypięty — jasny kaszmir i granatowa krawędź */
.news__item--pinned { border-left-color: var(--c-navy); background: var(--c-cashmere-50); }
.news__item--pinned .news__tag { background: var(--c-navy); color: var(--c-white); }
.news__item .card__link { margin-top: var(--sp-2); }

/* 5.10 Sekcja dofinansowania */
.funding { background: var(--c-navy); color: var(--c-cashmere); }
.funding h2 { color: var(--c-white); }
.funding p { color: rgba(255, 255, 255, .88); }
.funding a { color: var(--c-sky); }
.funding .eyebrow { color: var(--c-sky); }
.funding .eyebrow::before { background: var(--c-sky); }
.funding .btn--cream { color: var(--c-navy); }
.funding__inner {
  display: grid; gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
}
.funding__logos {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: center;
  background: var(--c-white); border-radius: var(--r-md); padding: var(--sp-5);
}
.funding__logos img { height: auto; width: 100%; max-width: 51rem; }
/* Ciąg znaków musi zachować oryginalne kolory — także w trybach kontrastowych */
html[data-kontrast] .funding__logos {
  background: #ffffff !important; border: 2px solid var(--c-fg) !important;
}
html[data-kontrast] .funding__logos img { filter: none !important; }
.funding__ph {
  display: grid; place-items: center; min-height: 3.5rem; flex: 1 1 8rem;
  border: 1px dashed var(--c-muted); border-radius: var(--r-sm);
  color: var(--c-muted); font-size: var(--fs-xs); text-align: center; padding: var(--sp-2);
}

/* 5.11 Stopka */
.footer { background: var(--c-navy); color: var(--c-cashmere); padding-block: var(--sp-8) var(--sp-5); }
.footer a { color: var(--c-white); text-decoration: none; }
.footer a:hover { color: var(--c-sky); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.footer h2 {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-sky); margin-bottom: var(--sp-4);
}
.footer ul { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.footer__logo img { height: 2.5rem; width: auto; margin-bottom: var(--sp-4); }
.footer__bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .80);
}

/* 5.12 Kafle specjalizacji (ikony z obecnej strony) */
.specs { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
@media (min-width: 62rem) { .specs { grid-template-columns: repeat(4, 1fr); } }
.spec {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center; padding: var(--sp-6) var(--sp-4);
  background: var(--c-navy); color: var(--c-white);
  border-radius: var(--r-md); text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.spec:hover { background: var(--c-brand-btn); color: var(--c-white); transform: translateY(-3px); }
.spec img, .spec svg { width: 4rem; height: 4rem; object-fit: contain; }
.spec span { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }

/* 5.13 Pas ze zdjęciem (sekcja „O nas”) */
.about { display: grid; gap: var(--sp-7); align-items: center;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.about__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.about__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* wariant dla grafiki z wyciętym tłem — bez ramki i cienia */
.about__media--cutout { border-radius: 0; box-shadow: none; }
.about__media--cutout img { aspect-ratio: auto; height: auto; object-fit: contain; }
.about__points { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.about__points li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.about__points li::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem;
  border-radius: 50%; background: var(--c-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}

/* 5.14 Nagłówek podstrony */
.subhero {
  position: relative;
  background: linear-gradient(135deg, #0b2545 0%, #13355c 60%, #0077ab 100%);
  color: var(--c-white);
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.subhero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--c-brand) 0 34%, var(--c-green) 34% 67%, var(--c-cashmere) 67%);
}
.subhero h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.subhero p { color: rgba(255,255,255,.9); font-size: var(--fs-md); }
.subhero .badge-row { margin-top: var(--sp-4); }

/* Okruszki */
.crumbs { font-size: var(--fs-xs); margin-bottom: var(--sp-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: var(--sp-2); color: rgba(255,255,255,.6); }
.crumbs a { color: var(--c-sky); text-decoration: none; }
.crumbs a:hover { color: var(--c-white); text-decoration: underline; }
.crumbs [aria-current] { color: rgba(255,255,255,.75); }

/* 5.15 Treść artykułu */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-lg); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-md); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--sp-2); }
.prose li::marker { color: var(--c-brand); }
.prose ol li::marker { color: var(--c-muted); font-weight: 700; }

/* Układ dwukolumnowy: treść + panel boczny */
.layout { display: grid; gap: var(--sp-7); align-items: start; }
.layout > * { min-width: 0; }   /* bez tego szerokie tabele rozpychają siatkę */
.prose { min-width: 0; }
@media (min-width: 62rem) { .layout { grid-template-columns: minmax(0, 1fr) 20rem; } }
.aside { display: grid; gap: var(--sp-5); position: sticky; top: 6rem; }
.panel {
  background: var(--c-cashmere-50); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.panel h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
            color: var(--c-muted); margin-bottom: var(--sp-3); }
.panel ul { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.panel--brand { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.panel--brand h2 { color: var(--c-sky); }
.panel--brand a { color: var(--c-white); }
.panel__tel { display: block; font-size: var(--fs-lg); font-weight: 700; text-decoration: none; margin-bottom: var(--sp-2); }

/* 5.16 Wyróżniona informacja */
.note {
  border-left: 5px solid var(--c-brand); background: var(--c-brand-wash);
  border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm);
}
.note--green { border-left-color: var(--c-green); background: var(--c-green-wash); }
.note--cream { border-left-color: var(--c-navy); background: var(--c-cashmere-50); }
.note strong { display: block; margin-bottom: var(--sp-1); color: var(--c-ink); }

/* 5.17 Tabele (cenniki, harmonogramy) */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 28rem; }
.table caption { text-align: left; font-size: var(--fs-xs); color: var(--c-muted); padding-bottom: var(--sp-3); }
.table th, .table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); }
.table thead th { background: var(--c-navy); color: var(--c-white); font-weight: 600; }
.table thead th:first-child { border-top-left-radius: var(--r-sm); }
.table thead th:last-child { border-top-right-radius: var(--r-sm); }
.table tbody tr:nth-child(even) { background: var(--c-cashmere-50); }
.table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 5.18 Personel */
.staff { display: grid; gap: var(--sp-3); }
.staff li {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
}
.staff li:last-child { border-bottom: 0; }
.staff__name { font-weight: 600; }
.staff__role { color: var(--c-muted); font-size: var(--fs-sm); }

/* 5.19 Rozwijane pytania */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-white); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: var(--sp-4) var(--sp-5);
  font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-brand-ink); font-weight: 700; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { background: var(--c-cashmere-50); }
.faq p { padding: var(--sp-4) var(--sp-5); margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* 5.20 Lista aktualności (podstrona) — dziedziczy .news */
.news--all .news__item { border-left-width: 6px; }


/* 5.21 Ramka „do weryfikacji" — celowo krzykliwa, ma nie dać się przeoczyć.
   Usuwa się ją razem z poprawioną treścią przed publikacją.
   Wyszukaj w plikach: note--todo                                          */
.note--todo {
  border: 10px solid transparent; border-radius: var(--r-md);
  background-image: linear-gradient(#fff8c4, #fff8c4),
                    repeating-linear-gradient(45deg, #ffd400 0 12px, #111111 12px 24px);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #1a1a1a; padding: 0; margin-top: var(--sp-7); font-size: var(--fs-sm);
  max-width: none;
}
.note--todo::before {
  content: "⚠ DO WERYFIKACJI — USUŃ TĘ RAMKĘ PRZED PUBLIKACJĄ";
  display: block; background: #c00000; color: #ffffff;
  font-weight: 800; letter-spacing: .06em; font-size: var(--fs-xs);
  padding: var(--sp-3) var(--sp-5);
}
.note--todo strong { display: block; padding: var(--sp-4) var(--sp-5) 0; color: #1a1a1a; }
.note--todo p { margin: 0; padding: var(--sp-2) var(--sp-5) var(--sp-5); color: #1a1a1a; max-width: none; }
.note--todo a { color: #7a0000; }

/* W trybach kontrastowych ramka zostaje wyraźna, ale w kolorach schematu */
html[data-kontrast] .note--todo {
  background-image: none !important; background: var(--c-bg) !important;
  border: 6px solid var(--c-fg) !important;
}
html[data-kontrast] .note--todo::before {
  background: var(--c-fg) !important; color: var(--c-bg) !important;
}
@media print { .note--todo { border-color: #000; } }

/* 6. UTILITIES =========================================================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.text-muted { color: var(--c-muted); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

/* 7. RESPONSYWNOŚĆ ======================================================= */
@media (max-width: 78rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 3rem; padding: var(--sp-2) var(--sp-5);
    background: var(--c-brand-btn); color: var(--c-white);
    border: 0; border-radius: var(--r-pill);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] { background: var(--c-navy); }
  .nav-toggle[hidden] { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-white); border-bottom: 4px solid var(--c-brand);
    box-shadow: var(--shadow-md); padding: var(--sp-4) 1.25rem var(--sp-5);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: var(--sp-3) var(--sp-2); border-radius: 0; border-bottom: 1px solid var(--c-line); }
  .nav__link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--c-brand); }
  .nav__cta { margin: var(--sp-4) 0 0; }
  .topbar__inner { justify-content: center; text-align: center; }
}

@media (min-width: 78.0625rem) {
  .nav[hidden] { display: block; }      /* na desktopie menu zawsze widoczne */
  .hero__inner { grid-template-columns: 1.12fr 0.88fr; }
  .hero__inner--solo { grid-template-columns: minmax(0, 46rem); }
}

@media (max-width: 30rem) {
  .hero__actions .btn { width: 100%; }
}

/* 8. PREFERENCJE UŻYTKOWNIKA / DRUK ===================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --c-muted: #26394a; --c-line: #94a0a8; }
}

@media print {
  .header, .topbar, .nav-toggle, .hero__actions, .skip-link { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .hero, .footer, .funding { background: #fff !important; color: #000 !important; }
  .hero h1, .footer h2, .funding h2, .funding p, .hero__lead { color: #000 !important; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}