@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-next-i-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-next-i-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-next-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-next-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/familjen-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/familjen-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Serwis CETPP w stylu PANORAMA. Kolejnosc arkuszy: style.css (baza i skladniki
   serwisu) -> panorama.css -> panorama-sekcje.css -> panorama-lead.css (role,
   kroje i wyjatki szkoly). Promienie tylko 8 / 12 / 20 / 28 / 40 / pigulka,
   cienie kart najwyzej 6% krycia, jeden mocny cien na strone.
   ========================================================================== */

/* ---------- baza mobilna (iOS Safari + Android Chrome) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: break-word; }
img, video, svg, iframe { max-width: 100%; height: auto; display: block; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, select, textarea, button { font-size: 16px; font-family: inherit; line-height: 1.25; }
select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; max-width: 100%; min-height: 48px;
  padding: 0 40px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23474B5C' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field, .form-row > * { min-width: 0; }
label:has(> input[type="checkbox"]) { min-height: 44px; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
:focus-visible { outline: 3px solid var(--akcent-ciemny); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
html.jest-nakladka { overflow: hidden; overscroll-behavior: none; }
html.jest-nakladka body { touch-action: none; }
html.jest-nakladka .nav-links { touch-action: pan-y; }
.zaslona {
  position: fixed; inset: 0; z-index: 79;
  background: var(--zaslona);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s .25s;
}
html.jest-nakladka .zaslona { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s 0s; }
html.jest-nakladka .pasek-szkol { position: relative; z-index: 80; }
@media (max-width: 900px) {
  .tabela-karty { min-width: 0; display: block; }
  .tabela-karty thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; border: 0;
  }
  .tabela-karty tbody, .tabela-karty tr, .tabela-karty td, .tabela-karty th { display: block; }
  .tabela-karty tr { border: 1px solid var(--linia); border-radius: 12px; padding: 6px 18px; margin-bottom: 12px; background: var(--card); }
  .tabela.tabela-karty tbody th { width: auto; padding: 14px 0 6px; border: 0; font-size: 1.15rem; }
  .tabela.tabela-karty td { display: block; position: relative; border: 0; padding: 10px 0 10px calc(7.5em + 14px); }
  .tabela.tabela-karty td + td { border-top: 1px solid var(--linia); }
  .tabela.tabela-karty td::before {
    content: attr(data-etykieta); position: absolute; left: 0; top: 13px; width: 7.5em;
    font-size: 13px; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; font-weight: 700; color: var(--muted);
  }
}
@media (max-width: 480px) {
  .tabela.tabela-karty td { padding: 10px 0; }
  .tabela.tabela-karty td::before { position: static; display: block; width: auto; margin-bottom: 4px; }
}

/* ==========================================================================
   Paleta: granat i zloto z okladki szkoly (2025), zloto slonca z logo.
   Nazwy zmiennych jak w szablon-strona - panorama.css czyta z nich role.
   ========================================================================== */
:root {
  color-scheme: light;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tap: 48px;
  --bg: #FBFAF6;
  --sand: #F3F0E6;
  --card: #FFFFFF;
  --ink: #12182F;
  --muted: #474B5C;
  --line: #E3DFD3;
  --linia: #E3DFD3;
  --pole-ramka: #767A8A;
  --akcent: #F2B705;
  --akcent-ciemny: #0F1B4D;
  --akcent-jasny: #F2B705;
  --zielony: #0F1B4D;
  --ciemny: #0F1B4D;
  --ciemny-2: #172663;
  --ciemny-stopka: #0A1338;
  --na-ciemnym: #F4F5F9;
  --na-ciemnym-mute: #BCC3D9;
  --zloto: #F2B705;
  --zloto-jasne: #FFD458;
  --zloto-ciemne: #6C4800;
  --zloto-tint: #FDF1C9;
  --zloto-mgla: #F8F3E2;
  --szkola-dzien: #E4E6EE;
  --luka-tlo: #FFF3C4;
  --luka-ink: #5A4300;
  --luka-ramka: #E8D27A;
  --zaslona: rgb(10 19 56 / .5);
  --linia-ciemna: rgb(255 255 255 / .12);
  --podklad-ciemny: rgb(255 255 255 / .07);
  --naglowek-h: 80px;
  --f-tekst: 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
  --f-nagl: 'Familjen Grotesk', 'Segoe UI', Arial, sans-serif;
}

html { background-color: var(--ciemny-stopka); scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 16px); }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-tekst);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--f-nagl); font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--zloto-ciemne); }
h2 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.08; }
h3 { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; }
p { margin: 0 0 1em; }
p, li, .ph-lead { text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--akcent-ciemny); text-underline-offset: 3px; }
strong, b { font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: min(100% - 32px, 1360px); margin-inline: auto; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--ciemny); color: var(--na-ciemnym); padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.skip-link:focus { top: 12px; }

.luka {
  display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 8px;
  background: var(--luka-tlo); color: var(--luka-ink);
  font-weight: 700; font-size: .92em; white-space: normal;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- pasek z nazwami szkol nad naglowkiem (prosba szkoly) ---------- */
.pasek-szkol { background: var(--ciemny-stopka); color: var(--na-ciemnym); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.pasek-szkol ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; padding-block: 9px; }
.pasek-szkol li { white-space: nowrap; max-width: none; }
.pasek-szkol li + li::before { content: "·" / ""; color: var(--zloto); margin-inline: 12px; }
@media (max-width: 560px) {
  .pasek-szkol { font-size: 13px; letter-spacing: 0; }
  .pasek-szkol ul { padding-block: 7px; column-gap: 18px; }
  .pasek-szkol li + li::before { content: none; }
}

/* ---------- naglowek: uklad (kolory i wysokosc daje skorka PANORAMY) ---------- */
.nav { position: sticky; top: 0; z-index: 90; background: var(--card); }
.nav-inner { display: flex; align-items: center; gap: 22px; min-height: 64px; min-width: 0; }
.nav-inner > * { min-width: 0; }
.nav .nav-logo {
  display: flex; align-items: center; gap: 13px;
  flex: none; text-decoration: none; color: var(--ink);
  min-height: 48px; padding: 0; margin-right: auto;
}
.nav-logo img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 1px var(--linia); background: var(--card); }
.marka { display: flex; flex-direction: column; line-height: 1.1; }
.marka-1 { font-family: var(--f-nagl); font-weight: 700; font-size: 18px; letter-spacing: -.005em; color: var(--ink); }
.marka-2 { font-size: 13px; color: var(--muted); margin-top: 4px; letter-spacing: .02em; }
.nav-links { display: flex; align-items: center; }
.nav .nav-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.nav .nav-tel {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--zloto); color: var(--ciemny); text-decoration: none; font-weight: 700; font-size: 16px;
  transition: background-color .22s ease, color .22s ease;
}
.nav-tel svg { width: 18px; height: 18px; flex: none; }
.nav-toggle {
  display: none; flex: 0 0 auto; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--linia); border-radius: 999px; background: var(--card); cursor: pointer;
  position: relative; z-index: 95;
}
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hamburger od 1080 px - ten sam prog co menu mobilne skorki PANORAMY (panorama.css 6),
   inaczej miedzy 1041 a 1080 menu znikalo bez przycisku. */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-links {
    flex-direction: column; align-items: stretch;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0;
    transition: opacity .25s ease, visibility 0s .25s;
  }
  .nav-links.open { opacity: 1; transition: opacity .25s ease, visibility 0s 0s; }
  .nav .nav-links a:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .nav .nav-logo { flex: 0 1 auto; min-width: 0; }
  .nav .marka { min-width: 0; }
  .nav-inner { gap: 10px; }
  .nav .nav-logo { gap: 10px; }
  .nav-logo img { width: 44px; height: 44px; }
  .marka-1 { font-size: 15.5px; }
  .marka-2 { font-size: 13px; letter-spacing: 0; }
  .nav .nav-tel { width: 48px; padding: 0; justify-content: center; }
  .nav-tel .nt-napis { display: none; }
}
@media (max-width: 560px) { .marka-miasto { display: none; } }
@media (max-width: 380px) {
  .marka-2 { display: none; }
}

/* ---------- przyciski (pigulki; odmiany koloru w panorama-lead.css) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-family: var(--f-tekst); font-weight: 700; font-size: 16px; line-height: 1.2;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  white-space: nowrap; text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: translate .22s ease; }
.cta-rzad { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-rzad--srodek { justify-content: center; }
@media (max-width: 600px) {
  .cta-rzad .btn, .pn-hero .hero-cta .btn { flex: 1 1 100%; }
}

/* ---------- promienie slonca z logo: tylko na ciemnych wyspach ---------- */
.promienie { position: relative; isolation: isolate; overflow: hidden; }
.promienie::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 200deg at 8% 120%, rgb(242 183 5 / .13) 0deg 1.4deg, rgb(242 183 5 / 0) 1.4deg 6deg);
  -webkit-mask-image: radial-gradient(circle at 8% 120%, #000 0%, rgb(0 0 0 / .5) 34%, transparent 64%);
  mask-image: radial-gradient(circle at 8% 120%, #000 0%, rgb(0 0 0 / .5) 34%, transparent 64%);
}

/* ---------- naglowek podstrony: tekst na plotnie, zdjecie w bialej ramce ---------- */
.pod-hero { background: var(--bg); padding-block: clamp(36px, 5vw, 72px) clamp(48px, 5.6vw, 88px); border-bottom: 1px solid var(--linia); }
.ph-in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5.6vw, 96px); align-items: center;
}
.pod-hero h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); }
.pod-hero .eyebrow { margin-bottom: 20px; }
.ph-lead { margin: 26px 0 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--muted); max-width: 36rem; }
.ph-lead + .cta-rzad, .ph-lead + .ph-lead { margin-top: 30px; }
.ph-foto {
  position: relative; margin: 0; padding: 8px; border-radius: 20px; background: var(--card);
  aspect-ratio: 4 / 3; max-width: 640px; justify-self: end; width: 100%;
  box-shadow: var(--p-cien-wyspa);
}
.ph-foto img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; object-fit: cover; border-radius: 12px; }
.pod-hero--bez-foto .ph-in { grid-template-columns: minmax(0, 1fr); }
.pod-hero--bez-foto .ph-lead { max-width: 44rem; }
.pod-hero--bez-foto h1 { max-width: 12em; }
@media (max-width: 374px) { .pod-hero h1 { font-size: clamp(32px, 11vw, 38px); } }
.okruszki { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 22px; font-size: 14.5px; color: var(--muted); }
.okruszki a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; font-weight: 700; }
.okruszki > *:not(:last-child)::after { content: "/" / ""; display: inline-block; color: var(--zloto-ciemne); margin-left: 10px; }
@media (max-width: 600px) { .okruszki { row-gap: 0; } .okruszki a { min-height: 36px; } }
.okruszki a, .okruszki span { display: inline-flex; align-items: center; }
@media (max-width: 900px) {
  .ph-in { grid-template-columns: minmax(0, 1fr); }
  .ph-foto { justify-self: start; max-width: 560px; aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .ph-foto { padding: 6px; }
  .ph-foto img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
}

/* ---------- sekcje ---------- */
.sekcja { padding-block: clamp(56px, 6.1vw, 96px); }
.sekcja--piasek { background: var(--sand); }
.sekcja--biala { background: var(--card); }
.sekcja--ciasna { padding-block: clamp(36px, 3.9vw, 56px); }
.eyebrow { display: block; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zloto-ciemne); }
.naglowek-sekcji { max-width: 46rem; margin: 0 auto clamp(32px, 4.2vw, 60px); text-align: center; }
.naglowek-sekcji p:not(.eyebrow) { margin: 22px auto 0; color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); max-width: 40rem; }
.naglowek-sekcji--lewo { margin-left: 0; text-align: left; }
.naglowek-sekcji--lewo p:not(.eyebrow) { margin-left: 0; }
.pod-sekcja { text-align: center; margin-top: clamp(30px, 4vw, 48px); }
.nota { font-size: 15px; color: var(--muted); max-width: 76ch; margin: 18px auto 0; }
.zrodlo { display: block; font-size: 14px; color: var(--muted); margin-top: 10px; }
h2 + p, h2 + .lead-duzy, .eyebrow + h2 + p { margin-top: 20px; }

/* ciemna wyspa (Tydzien w branzowce, sciezka): granat w kontenerze, promien 28 */
.wyspa-ciemna {
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--p-wyspa, min(100% - 32px, 1360px)); margin-inline: auto;
  padding: clamp(32px, 5.6vw, 88px) clamp(22px, 5vw, 80px);
  border-radius: 28px; background-color: var(--ciemny); color: var(--na-ciemnym);
}
.wyspa-ciemna h2, .wyspa-ciemna h3 { color: var(--na-ciemnym); }
.wyspa-ciemna h2 em { color: var(--zloto); }
.wyspa-ciemna p { color: var(--na-ciemnym-mute); }
.wyspa-ciemna .eyebrow { color: var(--zloto); }
.wyspa-ciemna :focus-visible { outline-color: var(--zloto); }
.wyspa-ciemna a:not(.btn) { color: var(--zloto-jasne); }
@media (max-width: 600px) { .wyspa-ciemna { border-radius: 20px; } }

/* ---------- kierunki: ciemne karty 2x2 obok kolumny tytulu ---------- */
.kierunki-uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px clamp(32px, 6.7vw, 120px); align-items: center; }
.kierunki-uklad .kierunki-wstep > p:not(.eyebrow) { margin: 24px 0 0; color: var(--muted); max-width: 28rem; font-size: clamp(17px, 1.3vw, 19px); }
.kierunki-uklad .pn-link { margin-top: 24px; }
.kierunki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kierunki--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.95vw, 24px); }
@media (max-width: 1339px) { .kierunki--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kierunek {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
  min-height: 250px; padding: 30px 30px 24px; border-radius: 12px;
  background: var(--ciemny); color: var(--na-ciemnym); text-decoration: none;
  transition: background-color .22s ease, translate .22s ease;
}
.kierunek-miara { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 26px; }
.kierunek-miara b { font-family: var(--f-nagl); font-size: clamp(30px, 2.6vw, 38px); line-height: 1; color: var(--zloto); letter-spacing: -.02em; }
.kierunek-miara span { font-size: 13px; font-weight: 700; color: var(--na-ciemnym-mute); letter-spacing: .1em; text-transform: uppercase; }
.kierunek-szkola { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--na-ciemnym-mute); letter-spacing: .02em; }
.kierunek h3 { margin: 0; color: var(--na-ciemnym); }
.kierunek p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--na-ciemnym-mute); }
.kierunek-link { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; min-height: 44px; font-weight: 700; color: var(--na-ciemnym); }
.kierunek-link svg { width: 18px; height: 18px; transition: translate .22s ease; }
.kierunki--jasne .kierunek { background: var(--card); color: var(--ink); box-shadow: var(--p-cien-karta); border: 1px solid var(--p-linia-karty); }
.kierunki--jasne .kierunek-miara b { color: var(--ink); }
.kierunki--jasne .kierunek-miara span, .kierunki--jasne .kierunek-szkola, .kierunki--jasne .kierunek p { color: var(--muted); }
.kierunki--jasne .kierunek h3, .kierunki--jasne .kierunek-link { color: var(--ink); }
.kierunki--jasne .kierunek :focus-visible { outline-color: var(--akcent-ciemny); }
.kierunek:focus-visible { outline-color: var(--zloto); outline-offset: 3px; }
.kierunki--jasne .kierunek:focus-visible { outline-color: var(--akcent-ciemny); }
@media (max-width: 1024px) { .kierunki-uklad { grid-template-columns: minmax(0, 1fr); } .kierunki-uklad .kierunki-wstep { max-width: 40rem; } }
@media (max-width: 600px) { .kierunki { grid-template-columns: minmax(0, 1fr); } .kierunek { min-height: 0; padding: 24px 22px 20px; } }

/* ---------- tydzien w branzowce ---------- */
.tydzien-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.przelacznik { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--podklad-ciemny); border: 1px solid var(--linia-ciemna); margin-bottom: 22px; flex-wrap: wrap; }
.przelacznik button {
  min-height: 44px; padding: 8px 20px; border-radius: 999px; border: 0;
  background: transparent; color: var(--na-ciemnym); font-weight: 700; cursor: pointer;
}
.przelacznik button[aria-selected="true"] { background: var(--zloto); color: var(--ciemny); }
.tydzien { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dzien { border-radius: 12px; padding: 18px 10px 16px; text-align: center; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; }
.dzien svg { width: 30px; height: 30px; }
.dzien b { font-size: 15px; line-height: 1.25; }
.dzien--szkola { background: var(--szkola-dzien); color: var(--ciemny); }
.dzien--praca { background: var(--zloto); color: var(--ciemny); }
.tydzien-podpis { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 15px; color: var(--na-ciemnym-mute); }
.tydzien-podpis span { display: inline-flex; align-items: center; gap: 8px; }
.kropka { width: 14px; height: 14px; border-radius: 999px; display: inline-block; flex: none; }
.kropka--szkola { background: var(--szkola-dzien); }
.kropka--praca { background: var(--zloto); }
.kurs-info { margin-top: 24px; padding: 18px 22px; border-radius: 12px; background: var(--podklad-ciemny); border: 1px solid var(--linia-ciemna); }
.kurs-info p { color: var(--na-ciemnym); }
.przelacznik--jasny { background: var(--bg); border-color: var(--linia); }
.przelacznik--jasny button { color: var(--ink); }
.przelacznik--jasny button[aria-selected="true"] { background: var(--ciemny); color: var(--na-ciemnym); }
.tydzien--jasny .dzien--szkola { background: var(--sand); }
.tydzien-podpis--jasny { color: var(--muted); }
.tydzien-podpis--jasny .kropka--szkola { background: var(--sand); box-shadow: inset 0 0 0 1px var(--pole-ramka); }
@media (max-width: 900px) { .tydzien-uklad { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .tydzien { gap: 5px; }
  .dzien { min-height: 118px; padding: 12px 4px; }
  .dzien svg { width: 24px; height: 24px; }
  .dzien b { font-size: 13px; }
}
@media (max-width: 400px) {
  .przelacznik { flex-wrap: nowrap; max-width: 100%; }
  .przelacznik button { padding-inline: 14px; font-size: 15px; }
  .tydzien { gap: 4px; }
  .dzien { padding-inline: 2px; }
}
@media (max-width: 360px) {
  .wyspa-ciemna { padding-inline: 14px; }
  .dzien { min-height: 92px; justify-content: center; }
  .dzien svg { width: 28px; height: 28px; }
  .dzien b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- zawody ---------- */
.zawody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .zawody { grid-template-columns: 1fr; } }
.zawod-grupa { padding: 28px 30px 20px; border-radius: 12px; background: var(--card); border: 1px solid var(--p-linia-karty); box-shadow: var(--p-cien-karta); }
.zawod-grupa h3 { margin: 0 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.zawod-grupa h3 small { font-family: var(--f-tekst); font-size: 14px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.zawod-lista { list-style: none; display: grid; gap: 0; }
.zawod-lista li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linia); max-width: none; line-height: 1.35; font-weight: 700; }
.zawod-lista li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--zloto); box-shadow: 0 0 0 4px var(--zloto-tint); }

/* ---------- zdjecie + tekst ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6.7vw, 120px); align-items: center; }
.feature--odwrot .feature-foto { order: 2; }
.feature-foto { position: relative; margin: 0; aspect-ratio: 974 / 645; max-width: 974px; }
.feature-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 20px; }
.feature-foto--dekor { isolation: isolate; }
.feature-foto--dekor::before { content: ''; position: absolute; z-index: -1; right: -24px; bottom: -24px; width: 46%; height: 52%; border-radius: 20px; background: var(--zloto-tint); }
.feature-tekst h2 { margin-bottom: 22px; }
.feature-tekst > p { color: var(--muted); }
.feature-tekst .cta-rzad { margin-top: 30px; }
@media (max-width: 1024px) {
  .feature { grid-template-columns: 1fr; }
  .feature--odwrot .feature-foto { order: 0; }
  .feature-foto { max-width: min(100%, 646px); }
}
@media (max-width: 600px) { .feature-foto--dekor::before { display: none; } }

/* ---------- lista faktow z datami ---------- */
.fakty { list-style: none; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 16px; margin-top: 26px; }
.fakty li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; max-width: none; }
@media (max-width: 480px) {
  .fakty { grid-template-columns: minmax(0, 1fr); }
  .fakty li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fakty-data { justify-self: start; }
  .fakty li span:last-child { padding-top: 0; }
}
.fakty-data { font-family: var(--f-nagl); font-weight: 700; font-size: 14.5px; min-width: 80px; padding: 5px 12px; border-radius: 999px; background: var(--zloto-tint); color: var(--ink); text-align: center; white-space: nowrap; }
.fakty li span:last-child { padding-top: 3px; }

/* ---------- karty ogolne ---------- */
.siatka { display: grid; gap: clamp(14px, 1.95vw, 24px); }
.siatka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siatka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1339px) { .siatka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .siatka--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) and (min-width: 641px) { .siatka--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .siatka--4, .siatka--3, .siatka--2 { grid-template-columns: 1fr; } }
.karta { padding: clamp(24px, 2.4vw, 34px); border-radius: 12px; background: var(--card); }
.karta h3 { margin: 0 0 12px; }
.karta p { color: var(--muted); }
.karta-ikona { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 28px; background: var(--zloto-tint); color: var(--ciemny); }
.karta-ikona svg { width: 24px; height: 24px; stroke-width: 1.7; }
.karta-link { display: block; text-decoration: none; color: inherit; }
.ramka-lista { padding: clamp(24px, 2.4vw, 34px); border-radius: 12px; background: var(--card); border: 1px solid var(--p-linia-karty); }
.ramka-lista h3 { margin: 0 0 16px; }

/* ---------- przedmioty rozszerzone ---------- */
.przedmioty { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.przedmioty li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 28px 8px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--p-linia-karty);
  font-family: var(--f-nagl); font-weight: 700; font-size: 1.2rem; max-width: none; }
.przedmioty .karta-ikona { margin: 0; width: 48px; height: 48px; }

/* ---------- kroki ---------- */
.kroki { list-style: none; counter-reset: krok; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.95vw, 24px); }
.kroki li { counter-increment: krok; position: relative; padding: 30px 26px 28px; border-radius: 12px; background: var(--card); max-width: none; }
.kroki li::before {
  content: counter(krok, decimal-leading-zero); display: block; margin-bottom: 26px;
  font-family: var(--f-nagl); font-weight: 700; font-size: 38px; line-height: 1; color: var(--zloto-ciemne); letter-spacing: -.02em;
}
.kroki h3 { margin: 0 0 8px; }
.kroki p { font-size: 16px; color: var(--muted); }
@media (max-width: 1100px) { .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kroki { grid-template-columns: 1fr; } }

/* ---------- sciezka: ktora szkola ---------- */
.sciezka { max-width: 960px; margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: 20px; background: var(--card); border: 1px solid var(--p-linia-karty); box-shadow: var(--p-cien-karta); }
.sciezka-krok + .sciezka-krok { margin-top: 30px; }
.sciezka-pyt { font-family: var(--f-nagl); font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin: 0 0 16px; }
.sciezka-opcje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sciezka-opcje button {
  text-align: left; min-height: 72px; padding: 16px 18px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--linia); background: var(--bg); color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.4;
  transition: border-color .2s ease, background-color .2s ease;
}
.sciezka-opcje button[aria-pressed="true"] { border-color: var(--ciemny); background: var(--zloto-tint); }
.sciezka-wynik { margin-top: 28px; padding: clamp(22px, 3vw, 34px); border-radius: 20px; background: var(--ciemny); color: var(--na-ciemnym); }
.sciezka-wynik h3 { color: var(--na-ciemnym); margin: 6px 0 12px; }
.sciezka-wynik p { color: var(--na-ciemnym-mute); }
.sciezka-wynik ul { list-style: none; display: grid; gap: 8px; margin: 14px 0 22px; }
.sciezka-wynik li { display: flex; gap: 12px; align-items: flex-start; color: var(--na-ciemnym); max-width: none; }
.sciezka-wynik li svg { width: 20px; height: 20px; color: var(--zloto); flex: none; margin-top: 3px; }
.sciezka-etykieta { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zloto); }
.sciezka-wynik :focus-visible { outline-color: var(--zloto); }
@media (max-width: 760px) { .sciezka-opcje { grid-template-columns: 1fr; } }

/* ---------- aktualnosci (karty z generatora i z karta_html() w inc/wspolne.php) ---------- */
.wpisy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.95vw, 28px); }
@media (max-width: 1000px) { .wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wpisy { grid-template-columns: 1fr; } }
@media (max-width: 1000px) and (min-width: 641px) {
  .wpisy > .wpis-karta:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpisy > .wpis-karta:last-child:nth-child(odd) .wpis-foto { aspect-ratio: auto; min-height: 260px; margin: 8px 0 8px 8px; }
}
.wpis-karta {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--p-linia-karty);
  transition: translate .22s ease, box-shadow .22s ease;
}
.wpis-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); margin: 8px 8px 0; border-radius: 8px; }
.wpis-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease; }
.wpis-foto--znak { display: grid; place-items: center; background-color: var(--ciemny); color: var(--zloto); }
.wpis-foto--znak svg { width: 64px; height: 64px; stroke-width: 1.5; }
.wpis-tresc { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.wpis-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; color: var(--muted); font-weight: 700; }
@media (max-width: 400px) { .wpis-meta { flex-direction: column; align-items: flex-start; gap: 6px; } }
.wpis-kat { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: 999px; background: var(--zloto-tint); color: var(--ink); }
.wpis-kat--wydarzenie { background: var(--ciemny); color: var(--na-ciemnym); }
.wpis-karta .wpis-termin { font-weight: 700; color: var(--ink); font-size: 15px; }
.wpis-karta h3 { font-size: clamp(19px, 1.45vw, 21px); line-height: 1.3; }
.wpis-karta p { font-size: 16px; color: var(--muted); margin: 0; }
.wpis-karta:focus-visible { outline-offset: 3px; }
/* Lista ma rozna liczbe kart (kategoria, strona) - ostatni rzad domyka sie sam.
   Baza szesciu kolumn: karta zajmuje dwie, dwie ostatnie po trzy, samotna ostatnia caly rzad. */
@media (min-width: 1001px) {
  .wpisy { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wpisy > .wpis-karta { grid-column: span 2; }
  .wpisy > .wpis-karta:nth-child(3n+1):nth-last-child(2), .wpisy > .wpis-karta:nth-child(3n+1):nth-last-child(2) + .wpis-karta { grid-column: span 3; }
  .wpisy > .wpis-karta:nth-child(3n+1):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpisy > .wpis-karta:nth-child(3n+1):last-child .wpis-foto { aspect-ratio: auto; min-height: 280px; margin: 8px 0 8px 8px; }
}

/* ---------- artykul ---------- */
.artykul-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 5.6vw, 96px); align-items: start; }
.artykul { max-width: 70ch; font-size: 18px; }
.artykul h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 38px 0 14px; }
.artykul p { margin-bottom: 1.1em; }
.artykul ul { list-style: none; display: grid; gap: 8px; margin: 0 0 1.2em; }
.artykul ul > li { position: relative; padding-left: 24px; }
.artykul ul > li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 9px; height: 9px; border-radius: 999px; background: var(--zloto); }
.artykul h3 { font-size: clamp(20px, 1.8vw, 24px); margin: 30px 0 10px; }
.artykul ol { display: grid; gap: 8px; margin: 0 0 1.2em; padding-left: 1.5em; }
.artykul ol > li { padding-left: 4px; }
.artykul ol > li::marker { color: var(--zloto-ciemne); font-weight: 700; }
.artykul blockquote { margin: 26px 0; padding: 18px 24px; border-radius: 12px; background: var(--zloto-mgla); font-size: 1.06em; color: var(--ink); }
.artykul blockquote p:last-child { margin-bottom: 0; }
.artykul img { width: auto; max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; }
.artykul-foto img { margin: 0; }
.artykul a:not(.btn) { color: var(--akcent-ciemny); text-underline-offset: 3px; }
.wydarzenie-info { display: grid; gap: 4px; margin: 0 0 26px; padding: 18px 22px; border-radius: 12px; background: var(--zloto-mgla); }
.wydarzenie-info p { margin: 0; }
.podglad-pasek { margin: 0 0 24px; padding: 12px 18px; border-radius: 12px; background: var(--luka-tlo); color: var(--luka-ink); font-weight: 700; font-size: 15.5px; }
.artykul-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 30px 0; }
.artykul-foto figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--sand); }
.artykul-foto figure.poziome { aspect-ratio: 4 / 3; }
.artykul-foto figure > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.artykul-foto--jedno { grid-template-columns: minmax(0, 420px); }
.artykul-zrodlo { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linia); font-size: 15px; color: var(--muted); }
.boczna { position: sticky; top: calc(var(--naglowek-h) + 24px); display: grid; gap: 18px; }
.boczna .karta { padding: 26px; border: 1px solid var(--p-linia-karty); }
.boczna h3 { font-size: 1.15rem; }
.boczna ul { list-style: none; display: grid; gap: 2px; }
.boczna li a { display: block; padding: 10px 0; text-decoration: none; font-weight: 700; line-height: 1.35; color: var(--ink); border-bottom: 1px solid var(--linia); }
.boczna li:last-child a { border-bottom: 0; }
.boczna li span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); font-weight: 400; }
@media (max-width: 960px) { .artykul-uklad { grid-template-columns: 1fr; } .boczna { position: static; } }

/* ---------- porownanie kierunkow ---------- */
.tabela-kontener { border-radius: 20px; background: var(--card); border: 1px solid var(--p-linia-karty); overflow: hidden; }
.tabela { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabela th, .tabela td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linia); }
.tabela thead th { padding-block: 20px 16px; border-bottom: 2px solid var(--ciemny); color: var(--ink); font-family: var(--f-tekst); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.tabela tbody th { font-family: var(--f-nagl); font-size: 1.08rem; width: 17%; }
.tabela thead th:nth-child(3) { width: 27%; }
.tabela tbody th a { color: var(--ink); }
.tabela tr:last-child td, .tabela tr:last-child th { border-bottom: 0; }
@media (max-width: 900px) { .tabela-kontener { background: transparent; border: 0; overflow: visible; border-radius: 0; } }

/* ---------- dokumenty ---------- */
.dok-uklad { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
.dok-zakladki { display: grid; gap: 8px; }
.dok-zakladki button {
  text-align: left; min-height: 56px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linia); background: var(--card); color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.3;
}
.dok-zakladki button[aria-selected="true"] { border-color: var(--ciemny); background: var(--ciemny); color: var(--na-ciemnym); }
.dok-panel { padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: var(--card); border: 1px solid var(--p-linia-karty); }
.dok-panel h3 { margin-bottom: 16px; }
.dok-lista { list-style: none; display: grid; gap: 4px; margin-bottom: 20px; }
.dok-lista label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; cursor: pointer; min-height: 44px; }
.dok-lista input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ciemny); }
.dok-lista span { line-height: 1.45; }
@media (max-width: 800px) { .dok-uklad { grid-template-columns: 1fr; } .dok-zakladki { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dok-zakladki button { border-radius: 12px; } }
@media (max-width: 460px) { .dok-zakladki { grid-template-columns: 1fr; } }
.dok { display: flex; gap: 16px; align-items: flex-start; padding: 24px 24px; border-radius: 12px; background: var(--card); border: 1px solid var(--p-linia-karty); }
.dok-ikona { width: 48px; height: 48px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--luka-tlo); color: var(--luka-ink); }
.dok-ikona svg { width: 24px; height: 24px; }
.dok h3 { margin: 0 0 10px; font-size: 1.12rem; }
.dok p { font-size: 15.5px; color: var(--muted); margin: 0; }
.dok .dok-plik { margin-top: 8px; }

/* ---------- FAQ ---------- */
.faq { max-width: 1140px; margin-inline: auto; display: grid; gap: 13px; }
.faq details { border-radius: 12px; background: var(--zloto-mgla); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 12px 10px 24px; min-height: 64px; font-family: var(--f-tekst); font-weight: 700; font-size: 17px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 44px; height: 44px; padding: 14px; flex: none; transition: transform .25s ease; color: var(--ink); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq-odp { padding: 0 24px 22px; color: var(--ink); }
@media (max-width: 600px) { .faq summary { padding-left: 18px; } .faq-odp { padding-inline: 18px; } }

/* ---------- pas statusu (swiadectwa panstwowe) ---------- */
.status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 44px); border-radius: 12px; background: var(--zloto-mgla); }
.status img { width: 60px; height: auto; }
.status h2 { font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 6px; }
.status p { color: var(--muted); }
@media (max-width: 760px) { .status { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---------- kontakt ---------- */
.kontakt-karty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.95vw, 24px); }
@media (max-width: 1100px) { .kontakt-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kontakt-karty { grid-template-columns: 1fr; } }
.kontakt-karta {
  display: flex; flex-direction: column; gap: 6px; padding: clamp(24px, 2.4vw, 32px); border-radius: 12px;
  background: var(--card); border: 1px solid var(--p-linia-karty); box-shadow: var(--p-cien-karta);
  text-decoration: none; color: var(--ink); transition: translate .22s ease, box-shadow .22s ease;
}
.kontakt-karta .karta-ikona { margin-bottom: 18px; }
.kontakt-karta b + span { margin-top: 2px; }
.kontakt-karta small { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kontakt-karta b { font-size: 1.1rem; line-height: 1.35; }
.kontakt-karta span { font-size: 15px; color: var(--muted); }
.kontakt-karta .nw { font-size: inherit; color: inherit; }
.kontakt-uklad { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
@media (max-width: 900px) { .kontakt-uklad { grid-template-columns: 1fr; } }
.formularz { padding: clamp(24px, 3.6vw, 44px); border-radius: 20px; background: var(--card); border: 1px solid var(--p-linia-karty); }
.formularz h2 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 10px; }
.formularz > p { color: var(--muted); }
.form-rzad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .form-rzad { grid-template-columns: 1fr; gap: 0; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.field label { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--pole-ramka); background: var(--card); color: var(--ink); font-size: 16px;
}
.field select {
  padding-right: 44px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B4D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.zgoda { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pulapka { position: absolute; left: -9999px; top: auto; width: 240px; overflow: hidden; }
.form-stopka { margin-top: 22px; }
.form-msg { display: none; margin: 18px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--zloto-mgla); border: 1px solid var(--luka-ramka); color: var(--ink); font-size: 15.5px; }
.form-msg.jest { display: block; }
.form-msg--blad { background: var(--luka-tlo); border-color: var(--luka-ramka); color: var(--luka-ink); }
.mapa { border-radius: 20px; overflow: hidden; border: 1px solid var(--p-linia-karty); background: var(--sand); min-height: clamp(340px, 48vh, 560px); position: relative; display: flex; }
.mapa iframe { width: 100%; min-height: clamp(340px, 48vh, 560px); border: 0; flex: 1; }
.mapa-zgoda { margin: auto; max-width: 420px; padding: 28px 24px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.mapa-zgoda p { color: var(--muted); font-size: 15.5px; }
.mapa-zgoda svg { width: 44px; height: 44px; color: var(--ciemny); stroke-width: 1.5; }
.mapa-zgoda a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.kolumna-boczna { display: flex; flex-direction: column; gap: 16px; }
.kolumna-boczna .mapa { flex: 1 1 auto; }

/* ---------- zjazdy liceum dla doroslych (stan zjazdu dopisuje js/app.js) ---------- */
.zjazdy { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.zjazd { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--p-linia-karty); max-width: none; }
.zjazd-nr { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 999px; background: var(--zloto-tint); color: var(--ink); font-family: var(--f-nagl); font-weight: 700; font-size: 15px; }
.zjazd b { font-family: var(--f-nagl); font-size: clamp(18px, 1.35vw, 21px); font-weight: 700; line-height: 1.25; color: var(--ink); }
.zjazd-opis { font-size: 14px; line-height: 1.4; color: var(--muted); }
.zjazd-stan { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zjazd--minal { background: var(--sand); border-color: var(--sand); }
.zjazd--minal .zjazd-nr { background: var(--card); }
.zjazd--najblizszy { background: var(--ciemny); border-color: var(--ciemny); }
.zjazd--najblizszy b { color: var(--na-ciemnym); }
.zjazd--najblizszy .zjazd-opis, .zjazd--najblizszy .zjazd-stan { color: var(--na-ciemnym-mute); }
.zjazd--najblizszy .zjazd-nr { background: var(--zloto); color: var(--ciemny); }
@media (max-width: 999px) { .zjazdy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) and (max-width: 1199px) { .zjazd { padding-inline: 16px; } .zjazd-stan { letter-spacing: .04em; } }
@media (max-width: 480px) { .zjazdy { gap: 10px; } .zjazd { padding: 16px 14px 14px; } .zjazd b { font-size: 16px; } .zjazd-stan { font-size: 13px; letter-spacing: .04em; } }

/* ---------- os czasu ---------- */
.os { list-style: none; display: grid; gap: 0; max-width: 900px; margin-inline: auto; }
.os li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; padding: 0 0 30px; position: relative; max-width: none; }
.os li::before { content: ''; position: absolute; left: 118px; top: 0; bottom: 0; width: 1px; background: var(--linia); }
.os li:first-child::before { top: 10px; }
.os li:last-child::before { bottom: auto; height: 10px; }
.os-rok { font-family: var(--f-nagl); font-weight: 700; font-size: 1.5rem; color: var(--zloto-ciemne); text-align: right; line-height: 1.2; }
.os-tresc { padding-left: 24px; position: relative; }
.os-tresc::before { content: ''; position: absolute; left: -12px; top: 7px; width: 13px; height: 13px; border-radius: 999px; background: var(--zloto); box-shadow: 0 0 0 5px var(--bg); }
.os-tresc h3 { margin: 0 0 6px; }
.os-tresc p { color: var(--muted); font-size: 16px; }
@media (max-width: 560px) {
  .os li { grid-template-columns: 1fr; gap: 4px; padding-left: 28px; }
  .os li::before { left: 6px; }
  .os-rok { text-align: left; }
  .os-tresc { padding-left: 0; }
  .os-tresc::before { left: -28px; }
  .os li:first-child::before { top: calc(1.8rem + 17px); }
  .os li:last-child::before { height: calc(1.8rem + 17px); }
}

/* ---------- dane rejestrowe ---------- */
.dane { list-style: none; display: grid; gap: 14px; }
.dane li { padding: 22px 26px; border-radius: 12px; background: var(--card); border: 1px solid var(--p-linia-karty); max-width: none; }
.dane h3 { font-size: 1.08rem; line-height: 1.3; margin-bottom: 8px; }
.dane dl { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; font-size: 15.5px; }
.dane dt { color: var(--muted); font-weight: 700; }
.dane dd { margin: 0 0 0 6px; }
.dane dl div { display: flex; }

/* ---------- galeria (kadry) ---------- */
.kadry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kadry figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--ciemny); }
.kadry figure > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kadry figure::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgb(10 19 56 / 0) 34%, rgb(10 19 56 / .86) 64%, rgb(10 19 56 / .95) 100%); }
.kadry figcaption { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; color: var(--na-ciemnym); font-size: 15px; line-height: 1.35; font-weight: 700; }
@media (max-width: 1024px) { .kadry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- tresc prawna ---------- */
.prawne { max-width: 78ch; }
.prawne h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 38px 0 12px; }
.prawne ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; margin-bottom: 1em; }
.uwaga { padding: 16px 22px; border-radius: 12px; background: var(--luka-tlo); color: var(--luka-ink); border: 1px solid var(--luka-ramka); margin-bottom: 28px; font-size: 15.5px; }

/* ---------- stopka: uklad (kolory daje schemat stopki PANORAMY) ---------- */
.ft { padding: 64px 0 calc(24px + var(--safe-b)); font-size: 15.5px; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(26px, 3vw, 44px); }
.ft h2 { font-family: var(--f-tekst); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
.ft a { text-decoration: none; }
.ft-kolumna a { display: flex; align-items: center; min-height: 40px; padding-block: 4px; line-height: 1.35; }
.ft .ft-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ft-logo img { width: 58px; height: 58px; border-radius: 50%; background: var(--card); }
.ft-opis { max-width: 34em; }
.ft-soc { display: flex; gap: 10px; margin-top: 18px; }
.ft .ft-soc a { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; min-height: 0; padding: 0; }
.ft-soc svg { width: 20px; height: 20px; }
.ft-dane p { margin: 0 0 10px; }
.ft-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linia-ciemna); font-size: 14px; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-copy { flex-direction: column; }
}

/* ---------- drobne ---------- */
.lead-duzy { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); max-width: 40rem; line-height: 1.6; }
.akapity { max-width: 72ch; }
.akapity p { color: var(--muted); }
.dwie-kol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5.6vw, 96px); align-items: start; }
@media (max-width: 900px) { .dwie-kol { grid-template-columns: 1fr; } .dwie-kol:has(> .akapity) { row-gap: 1em; } }
.ptaszki { list-style: none; display: grid; gap: 12px; }
.ptaszki li { display: flex; gap: 12px; align-items: flex-start; max-width: none; }
.ptaszki svg { width: 24px; height: 24px; flex: none; margin-top: 1px; padding: 5px; border-radius: 999px; background: var(--zloto-tint); color: var(--ciemny); stroke-width: 2.6; }
.plakietka { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--zloto-tint); color: var(--ink); font-weight: 700; font-size: 14px; }
.blad-404 { text-align: center; padding-block: clamp(44px, 9vw, 120px); }
.blad-404 h1 { max-width: 7.5em; margin-inline: auto; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.02em; }
.blad-404 .liczba { margin: 0 0 12px; font-family: var(--f-nagl); font-size: clamp(80px, 16vw, 144px); line-height: 1; color: var(--zloto-ciemne); font-weight: 700; }
@media print {
  .demobar, .nav, .ft, .pod-hero, .dok-zakladki, .btn, .pasek-szkol { display: none !important; }
  body { background: var(--card); }
  .dok-uklad { display: block; }
  .dok-panel { box-shadow: none; border: 0; }
}

/* ---------- aktualnosci z panelu: filtry, stronicowanie, wydarzenia, komunikat ---------- */
.filtry { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; }
.filtry button, .filtry--linki a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1.5px solid var(--linia); background: var(--card); color: var(--ink); font-weight: 700; font-size: 15.5px;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.filtry button[aria-pressed="true"], .filtry--linki a[aria-current="page"] { background: var(--ciemny); border-color: var(--ciemny); color: var(--na-ciemnym); }
@media (max-width: 600px) {
  .filtry { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 4px 16px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .filtry::-webkit-scrollbar { display: none; }
  .filtry[data-koniec] { -webkit-mask-image: none; mask-image: none; }
  .filtry button, .filtry--linki a { flex: none; scroll-snap-align: start; }
  .filtry button:focus-visible, .filtry--linki a:focus-visible { outline-offset: -5px; }
}
.lista-pusta { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 24px 0; margin: 0; }
.stronicowanie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 34px; }
.stronicowanie > :first-child { justify-self: start; }
.stronicowanie > :last-child { justify-self: end; }
.stronicowanie-licznik { color: var(--muted); font-weight: 700; font-size: 15px; }
@media (max-width: 560px) {
  .stronicowanie { grid-template-columns: 1fr 1fr; }
  .stronicowanie-licznik { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}
/* flex, nie siatka: jedno wydarzenie nie moze zostawiac dwoch pustych kolumn */
.wydarzenia { display: flex; flex-wrap: wrap; gap: 14px; }
.wydarzenie {
  flex: 1 1 300px; max-width: 440px; display: flex; gap: 16px; align-items: center; padding: 14px 20px 14px 14px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--p-linia-karty); border-radius: 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wyd-data { flex: none; width: 64px; height: 64px; border-radius: 12px; display: grid; place-content: center; text-align: center; background: var(--ciemny); color: var(--na-ciemnym); line-height: 1; }
.wyd-data b { font-family: var(--f-nagl); font-size: 1.6rem; }
.wyd-data span { font-size: 13px; font-weight: 700; color: var(--zloto); margin-top: 4px; }
.wyd-opis { display: grid; gap: 4px; min-width: 0; }
.wyd-tytul { font-family: var(--f-nagl); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.wyd-szczegoly { font-size: 15px; color: var(--muted); }

.komunikat { background: var(--zloto); color: var(--ciemny); font-size: 15px; line-height: 1.45; }
.komunikat-in { display: flex; align-items: center; gap: 12px; padding-block: 8px; }
.komunikat-lista { flex: 1; display: grid; gap: 4px; min-width: 0; }
.komunikat p { margin: 0; max-width: none; }
.komunikat a { color: var(--ciemny); font-weight: 700; }
.komunikat a:focus-visible, .komunikat-zamknij:focus-visible { outline-color: var(--ciemny); }
.komunikat-zamknij { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--ciemny); cursor: pointer; margin-right: -10px; }
.komunikat-zamknij svg { width: 20px; height: 20px; }

/* ---------- najechanie kursorem: jeden blok, tylko przy prawdziwej myszy ---------- */
@media (hover: hover) and (pointer: fine) {
  .okruszki a:hover, .boczna li a:hover { text-decoration: underline; }
  .kierunek:hover { background: var(--ciemny-stopka); }
  .kierunek:hover .kierunek-link svg, .btn:hover svg { translate: 4px 0; }
  .kierunki--jasne .kierunek:hover { background: var(--card); translate: 0 -4px; box-shadow: var(--p-cien-karta-hover); }
  .wpis-karta:hover, .kontakt-karta:hover { translate: 0 -4px; box-shadow: var(--p-cien-karta-hover); }
  .wpis-karta:hover .wpis-foto > img { transform: scale(1.04); }
  .dok-lista label:hover { background: var(--bg); }
  .filtry button:hover, .filtry--linki a:not([aria-current]):hover, .sciezka-opcje button:hover { border-color: var(--ciemny); }
  .wydarzenie:hover { border-color: var(--ciemny); box-shadow: var(--p-cien-karta-hover); }
  .komunikat-zamknij:hover { background: var(--podklad-ciemny); }
  .nav .nav-tel:hover { background: var(--ciemny); color: var(--na-ciemnym); }
}