/* OSCAR — wygląd strony oscar.edu.pl (wersja 2, 03.10.2026)
   Wygląd odwzorowany ze stron zak.edu.pl i lomza.zak.edu.pl (pomiar 03.10.2026, plik zrodla/ZAK_STRONA_GLOWNA.md):
   granat #006C8E (nagłówki, menu, przyciski), ciemny tekst #0C2E3B, czerwień #8E2C3A (tylko zapis i wyróżnienia),
   błękity #DFF4FA i #B3E2EE, białe tło. Wielkości w rem — rem rośnie z szerokością ekranu jak u Żaka.
   Czcionka: systemowa (zaokrąglona na iPhonie i Macu); własną czcionkę marki wybierze podręcznik OSCAR. */

:root {
  color-scheme: light;
  --granat: #006C8E;
  --granat-pas: #005A78;
  --tekst: #0C2E3B;
  --tekst-2: #4A6672;
  --czerwony: #8E2C3A;
  --czerwony-2: #74222F;
  --blekit: #DFF4FA;
  --blekit-2: #E5F6FB;
  --blekit-tekst: #005575;
  --linia: #B3E2EE;
  --tlo: #FFFFFF;
  --brak-tlo: #E6E6E6;
  --brak-tekst: #5E5E5E;
  --margines: 2rem;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Arial, sans-serif;
}
html { font-size: clamp(0.875rem, 4vw, 1.0625rem); -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (min-width: 768px) { html { font-size: 0.9375rem; } :root { --margines: 2.857rem; } }
@media (min-width: 1200px) { html { font-size: calc(0.25rem + 0.707vw); } :root { --margines: 8.42rem; } }
@media (min-width: 1921px) { html { font-size: 1.2rem; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: var(--font); font-weight: 300; font-size: 1.07rem; line-height: 1.45; padding-bottom: 6rem; }
@media (min-width: 1200px) { body { font-size: 1.12rem; line-height: 1.55; padding-bottom: 4.5rem; } }
img { max-width: 100%; height: auto; }
a { color: var(--granat); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tekst); }
:focus-visible { outline: 3px solid var(--czerwony); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { color: var(--granat); font-weight: 500; line-height: 1.1; text-wrap: balance; margin: 0 0 .6em; }
h1 { font-size: 2.08rem; letter-spacing: -.01em; }
h2 { font-size: 1.71rem; letter-spacing: -.02em; }
h3 { font-size: 1.25rem; margin-top: 1.2em; }
@media (min-width: 768px) { h1 { font-size: 2.7rem; } h2 { font-size: 2rem; } }
@media (min-width: 1200px) { h1 { font-size: 3.75rem; } h2 { font-size: 2.53rem; } h3 { font-size: 1.56rem; } }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
.kontener { width: 100%; padding-inline: var(--margines); }
.ukryty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: -9999px; top: 0; background: var(--granat); color: #fff; padding: 10px 16px; z-index: 300; }
.pomin:focus { left: 8px; top: 8px; }
.pasek-podglad { background: #FFF4CC; color: #4A3B00; font-size: .85rem; text-align: center; padding: 6px 16px; }

/* ---------- nagłówek (jak Żak: logo + telefon, pod spodem menu między granatowymi kreskami) ---------- */
.naglowek { background: var(--tlo); position: relative; z-index: 60; border-bottom: 1px solid var(--granat); }
.naglowek__gora { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; min-height: 4.5rem; }
.logo { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--granat); }
.logo img { height: 3.1rem; width: auto; display: block; }
.logo__haslo { display: none; border-left: 2px solid var(--granat); padding-left: .9rem; font-size: .95rem; line-height: 1.2; font-weight: 300; color: var(--granat); }
.naglowek__kontakt { display: none; }
.menu-przycisk { grid-column: 1; justify-self: start; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px 8px; margin-left: -8px; background: none; border: 0; cursor: pointer; color: var(--granat); }
.menu-przycisk span { display: block; height: 2px; width: 22px; background: currentColor; border-radius: 2px; }
.menu-przycisk b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pasek-oddzial { background: var(--blekit); font-size: .85rem; }
.pasek-oddzial__w { display: flex; gap: 1.2rem; align-items: center; min-height: 3rem; flex-wrap: wrap; color: var(--granat); }
.pasek-oddzial a { font-weight: 500; text-decoration: none; }
.pasek-oddzial svg, .naglowek svg.i { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .35em; }

/* menu — telefon: panel na całą wysokość */
.menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--tlo); min-height: calc(100vh - 4.5rem); padding: .5rem var(--margines) 2rem; border-top: 1px solid var(--linia); overflow-y: auto; }
.menu.otwarte { display: block; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu__poz { border-bottom: 1px solid var(--linia); position: relative; }
.menu__poz > a { display: flex; align-items: center; min-height: 2.8rem; font-size: 1.07rem; font-weight: 500; color: var(--granat); text-decoration: none; padding-right: 3rem; }
.menu__poz--dom { display: none; }
.menu__rozwin { position: absolute; right: 0; top: 0; width: 2.8rem; height: 2.8rem; background: none; border: 0; color: var(--granat); cursor: pointer; }
.menu__rozwin::before { content: ""; display: block; width: .55rem; height: .55rem; margin: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s; }
.menu__rozwin[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-2px, -2px); }
.menu .menu__pod { display: none; background: var(--blekit); margin: 0 calc(-1 * var(--margines)); padding: .2rem var(--margines); }
.menu__pod.otwarte { display: block; }
.menu__pod a { display: block; padding: .55rem 0; color: var(--granat); text-decoration: none; font-weight: 300; }
.menu__oddzial { display: none; }
.menu__dodatkowe { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.pigulka-jasna { display: inline-flex; align-items: center; gap: .4rem; background: var(--blekit); color: var(--granat-pas); text-transform: uppercase; font-size: .82rem; font-weight: 500; letter-spacing: -.01em; padding: .62rem 1.1rem .55rem 1rem; border-radius: .5rem; text-decoration: none; }
.pigulka-jasna:hover { background: var(--linia); color: var(--granat-pas); }

@media (min-width: 1024px) {
  .naglowek { border-bottom: 0; }
  .naglowek__gora { grid-template-columns: auto 1fr; min-height: 5.88rem; padding-inline: var(--margines); }
  .logo { grid-column: 1; justify-self: start; }
  .logo img { height: 3.6rem; }
  .logo__haslo { display: block; }
  .menu-przycisk { display: none; }
  .naglowek__kontakt { display: flex; grid-column: 2; justify-self: end; align-items: center; gap: 1.6rem; }
  .naglowek__tel { font-size: 1.56rem; font-weight: 500; color: var(--granat); text-decoration: none; white-space: nowrap; }
  .naglowek__tel svg { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .3em; color: var(--granat-pas); }
  .pasek-oddzial { display: none; }
  .menu { display: flex !important; position: static; min-height: 0; padding: 0 var(--margines); border-top: 2px solid var(--granat); border-bottom: 2px solid var(--granat); align-items: stretch; justify-content: space-between; overflow: visible; }
  .menu > ul { display: flex; align-items: stretch; }
  .menu__poz { border: 0; display: flex; align-items: center; }
  .menu__poz--dom { display: flex; }
  .menu__poz > a { min-height: 0; font-size: 1.07rem; font-weight: 500; padding: 1.4rem .8rem 1.3rem; border-radius: 1rem 1rem 0 0; }
  .menu__poz--dom > a { padding-inline: .8rem; }
  .menu__poz--dom svg { width: 1.1rem; height: 1.1rem; }
  .menu__poz--wyrozniony > a { background: var(--czerwony); color: #fff; border-radius: 10px; padding: 1rem .8rem .9rem; margin: .45rem .5rem .45rem 0; }
  .menu__poz:hover > a, .menu__poz:focus-within > a { background: var(--granat); color: #fff; }
  .menu__poz--wyrozniony:hover > a, .menu__poz--wyrozniony:focus-within > a { border-radius: 1rem 1rem 0 0; margin-bottom: 0; padding-bottom: 1.35rem; }
  .menu__rozwin { display: none; }
  .menu .menu__pod { display: none !important; position: absolute; top: 100%; left: 0; min-width: 18rem; margin: 0; padding: 0 1.2rem; background: #fff; border: .1rem solid var(--granat); border-top: 2px solid var(--granat); border-radius: 0 0 1rem 1rem; z-index: 70; }
  .menu__poz:hover > .menu__pod, .menu__poz:focus-within > .menu__pod { display: block !important; }
  .menu__pod li + li { border-top: 1px solid var(--linia); }
  .menu__pod a { padding: .75rem 0; font-size: 1.07rem; transition: padding .15s; }
  .menu__pod a:hover { font-weight: 500; padding-left: .8rem; }
  .menu__oddzial { display: flex; align-items: center; gap: 1.2rem; font-size: .94rem; color: var(--granat); white-space: nowrap; }
  .menu__oddzial a { text-decoration: none; font-weight: 500; }
  .menu__oddzial svg { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .3em; }
  .menu__dodatkowe { display: none; }
}

/* okruszki */
.okruszki { font-size: .83rem; color: var(--tekst-2); padding-block: 1.2rem .4rem; }
.okruszki ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.okruszki li + li::before { content: "›"; margin: 0 8px; }
.okruszki a { color: var(--tekst-2); text-decoration: none; }
.okruszki a:hover { text-decoration: underline; }

/* ---------- przyciski (jak Żak: granatowy z białą strzałką; czerwony = zapis) ---------- */
.przyciski { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.6rem 0; align-items: center; }
.przyciski--srodek { justify-content: center; }
.przycisk { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; min-height: 3.6rem; padding: .8rem 3.4rem .95rem 1.6rem; border-radius: .7rem; font-family: inherit; font-weight: 300; font-size: 1.3rem; line-height: 1.2; text-decoration: none; text-align: left; border: 0; cursor: pointer; background: var(--granat); color: #fff; }
.przycisk::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.3rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.przycisk:hover { background: var(--tekst); color: #fff; }
.przycisk--zapis { background: var(--czerwony); color: #fff; }
.przycisk--zapis:hover { background: var(--czerwony-2); color: #fff; }
.przycisk--tel { background: var(--granat); color: #fff; }
.przycisk--jasny { background: var(--blekit-2); color: var(--blekit-tekst); }
.przycisk--jasny:hover { background: var(--linia); color: var(--blekit-tekst); }
.przycisk--duzy { font-size: 1.45rem; min-height: 3.9rem; }
@media (max-width: 767px) { .przyciski .przycisk { width: 100%; } }
@media (min-width: 1200px) { .przycisk { font-size: 1.56rem; } .przycisk--duzy { font-size: 1.75rem; } }

/* ---------- slider na stronie głównej (jak Żak: 2+ slajdy, przenikanie 1 s, zmiana co 6 s, kropki) ---------- */
.slider { position: relative; margin-top: 2.4rem; }
.slider__lista { list-style: none; margin: 0; padding: 0; position: relative; height: 28rem; }
.slajd { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; display: flex; flex-direction: column; align-items: center; text-align: center; }
.slajd.aktywny { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; z-index: 1; }
.slajd__tekst { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.slajd__tytul { font-size: 2.08rem; font-weight: 500; color: var(--granat); line-height: 1.1; margin: 0 0 .5rem; }
.slajd__pod { font-size: 1.4rem; font-weight: 300; color: var(--tekst); line-height: 1.15; margin: 0 0 1rem; }
.slajd__obraz { order: 2; width: 100%; max-width: 22rem; height: 9.1rem; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.slajd__obraz svg { height: 100%; width: auto; max-width: 100%; }
.slajd__tekst .przycisk { order: 3; }
.slider__kropki { display: flex; justify-content: center; gap: .75rem; margin-top: 1.2rem; }
.slider__kropka { width: .83rem; height: .83rem; padding: 0; border: 0; border-radius: .83rem; background: var(--linia); cursor: pointer; transition: width .3s, background .3s; }
.slider__kropka[aria-current="true"] { width: 1.7rem; background: var(--granat); }
.slajd__tekst { width: 100%; }
@media (max-width: 1023px) {
  .slajd { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; }
  .slajd__tekst { display: contents; }
  .slajd__tytul { grid-row: 1; } .slajd__pod { grid-row: 2; } .slajd__obraz { grid-row: 3; height: 100%; max-height: 12rem; } .slajd__tekst .przycisk { grid-row: 4; }
}
@media (min-width: 1024px) {
  .slider { margin-top: 0; }
  .slider__lista { height: 26rem; }
  .slajd { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .slajd__tekst { position: static; align-items: flex-start; width: 60%; padding-bottom: 3.6rem; }
  .slajd__tytul, .slajd__pod, .slajd__tekst .przycisk { position: relative; z-index: 1; }
  .slajd__tytul { font-size: 3.75rem; padding-top: 1.4rem; }
  .slajd__pod { font-size: 2.5rem; margin-bottom: 1.6rem; }
  .slajd__obraz { order: 0; position: absolute; right: 4.3rem; top: 0; bottom: 0; width: 26rem; max-width: 38%; height: auto; margin: 0; z-index: 0; }
  .slider__kropki { justify-content: flex-start; position: absolute; left: var(--margines); bottom: 0; margin: 0; z-index: 2; }
  .slider .kontener { position: relative; }
}

/* ---------- strona główna ---------- */
.kreska { border: 0; border-top: 1px solid var(--linia); margin: 4rem var(--margines) 0; }
@media (max-width: 767px) { .kreska { display: none; } }
.sekcja-glowna { margin-top: 3.6rem; margin-bottom: 3.6rem; }
@media (min-width: 1200px) { .sekcja-glowna { margin-top: 5.5rem; } }
.sekcja-glowna > h2 { margin-bottom: 2.2rem; }
.wpisy { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wpisy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 2.6rem; } }
.wpis { position: relative; }
.wpis > a, .wpis > div { display: grid; grid-template-columns: 6rem 1fr; gap: 0 1rem; text-decoration: none; color: inherit; height: 100%; }
.wpis__ikona { grid-row: 1 / span 6; width: 6rem; height: 4.2rem; border-radius: .5rem; background: var(--granat); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 2rem; }
.wpis__ikona svg { width: 4rem; height: 4rem; }
.wpis__ikona svg [stroke="#006C8E"] { stroke: #fff; }
.wpis__ikona svg [fill="#fff"] { fill: none; }
.wpis__ikona svg [fill="#006C8E"] { fill: #fff; }
.wpis__data { font-size: .83rem; color: var(--granat); margin-bottom: .9rem; display: block; }
.wpis__tytul { font-size: 1.56rem; font-weight: 500; color: var(--granat); line-height: 1.1; margin: 0; }
.wpis__pod { font-size: 1.25rem; font-weight: 300; color: var(--granat); margin: .2rem 0 0; line-height: 1.2; }
.wpis__linia { display: block; width: 3.65rem; height: 2px; background: var(--tekst); margin: .9rem 0; }
.wpis__opis { font-size: 1.04rem; line-height: 1.45; color: var(--tekst); margin: 0; }
.wpis > a:hover .wpis__tytul { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .wpis > a, .wpis > div { grid-template-columns: 1fr; }
  .wpis__ikona { grid-row: auto; width: 4.8rem; height: 3.4rem; margin: 0 0 .9rem; }
  .wpis__ikona svg { width: 3.2rem; height: 3.2rem; }
}
.o-oscar { margin-top: 3rem; }
.o-oscar h2 { text-align: center; margin-top: 3.4rem; margin-bottom: 2.4rem; }
.o-oscar__w { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .o-oscar__w { grid-template-columns: minmax(0, 1fr) 25rem; gap: 4rem; } }
.o-oscar p { font-size: 1.05rem; line-height: 1.55; }
.pole-zdjecia { margin: 0; aspect-ratio: 4 / 3; max-width: 100%; background: var(--blekit); border-radius: .2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--granat); text-align: center; padding: 1rem; font-size: .9rem; }
.pole-zdjecia svg { width: 38%; height: auto; max-height: 60%; }
.pas { background: var(--granat-pas); color: #fff; text-align: center; margin-top: 4.2rem; padding: 2.6rem var(--margines) 3rem; position: relative; overflow: hidden; }
.pas h2 { color: #fff; margin-bottom: 1.2rem; }
.pas p { max-width: 42rem; margin: 0 auto .9rem; font-size: 1.05rem; line-height: 1.55; letter-spacing: .045rem; }
.pas__akcent { color: var(--czerwony); font-weight: 500; }
.pas a { color: #fff; }
.pas .przyciski { margin-bottom: 0; }
.pas__ozdoba { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 14rem; height: 12rem; color: var(--czerwony); }
.pas__ozdoba--l { left: var(--margines); } .pas__ozdoba--p { right: var(--margines); }
@media (min-width: 1200px) { .pas { padding: 3.2rem 17rem 3.8rem; } .pas__ozdoba { display: block; } }

/* ---------- strona kierunku / kursu (jak Żak: tytuł, wartości oddzielone kreskami, przyciski, zdjęcie z prawej) ---------- */
.kurs__gora { display: grid; gap: 1.6rem; padding-block: .8rem 1rem; }
@media (min-width: 1024px) { .kurs__gora { grid-template-columns: minmax(0, 1fr) 24rem; gap: 3.5rem; align-items: start; } }
.kurs__fakty h1 { margin-bottom: 1.2rem; }
.kafelki { margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.kafelek { padding: .9rem 0 1rem; border-bottom: 2px solid var(--granat); }
.kafelek:last-child { border-bottom: 0; }
.kafelek dt { font-size: 1.2rem; font-weight: 300; color: var(--tekst); }
.kafelek dd { margin: .15rem 0 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--granat); }
@media (min-width: 1024px) {
  .kafelki { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; }
  .kafelek { border-bottom: 0; border-left: 2px solid var(--granat); padding: .2rem 1.6rem .3rem; }
  .kafelek:first-child { border-left: 0; padding-left: 0; }
  .kafelek dt { font-size: 1.2rem; } .kafelek dd { font-size: 1.5rem; }
}
.ramka { font-size: 1.07rem; line-height: 1.45; color: var(--tekst); max-width: 45rem; margin: 0 0 1em; }
.kurs__zdjecie { margin: 0; }
.kurs__zdjecie .pole-zdjecia { aspect-ratio: 1 / 1; }
.kurs__foto { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .2rem; }
@media (max-width: 1023px) { .kurs__zdjecie { max-width: 22rem; width: 100%; justify-self: center; } }
.kurs__tresc { max-width: calc(58rem + 2 * var(--margines)); }
.wstep { font-size: 1.25rem; line-height: 1.5; margin-block: 2rem; color: var(--tekst); }
.sekcja { margin-block: 2.8rem; scroll-margin-top: 16px; }
.sekcja + .sekcja { padding-top: 2.4rem; border-top: 1px solid var(--linia); }
.sekcja h2 { font-size: 1.71rem; }
@media (min-width: 1200px) { .sekcja h2 { font-size: 2.1rem; } }
.lista { padding-left: 0; list-style: none; margin: 0 0 1em; }
.lista li { position: relative; padding-left: 1.5rem; margin-bottom: .45em; }
.lista li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .45rem; height: .45rem; background: var(--granat); border-radius: 50%; }
.kroki { list-style: none; padding: 0; margin: 0 0 1em; counter-reset: krok; }
.kroki li { counter-increment: krok; position: relative; padding-left: 3.2rem; margin-bottom: 1rem; min-height: 2.3rem; }
.kroki li::before { content: counter(krok); position: absolute; left: 0; top: -.1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--granat); color: #fff; font-weight: 500; display: grid; place-items: center; }

/* pas ikon (jak Żak: ikony bez tła, kreska nad blokiem) */
.pas-ikon { margin-block: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--granat); }
.ikony { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
.ikony li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.ikony svg { width: 2.85rem; height: 2.85rem; color: var(--granat); }
.ikony__e { font-size: 1.07rem; color: var(--tekst); }
.ikony__w { font-weight: 500; color: var(--granat); font-size: 1.25rem; line-height: 1.25; }
.ikony li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .ikony { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ikony li:last-child:nth-child(odd) { grid-column: auto; } }

/* pytania i rozwijane */
.faq details, .rozwijane { border-bottom: 1px solid var(--linia); }
.faq summary, .rozwijane summary { cursor: pointer; list-style: none; font-weight: 500; color: var(--granat); padding: 1rem 2.6rem 1rem 0; position: relative; }
.faq summary::-webkit-details-marker, .rozwijane summary::-webkit-details-marker { display: none; }
.faq summary::after, .rozwijane summary::after { content: ""; position: absolute; right: .6rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.45rem; border-right: 2px solid var(--granat); border-bottom: 2px solid var(--granat); transform: rotate(45deg); transition: transform .3s; }
.faq details[open] summary::after, .rozwijane[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.faq details p { margin: 0 0 1rem; }
.rozwijane summary h2 { display: inline; margin: 0; }

/* tabele */
.tabela-w { overflow-x: auto; margin: 0 0 1em; }
table { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
th, td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--linia); vertical-align: top; }
th { font-weight: 500; color: var(--granat); border-bottom: 2px solid var(--granat); }
.cennik td:first-child { width: 62%; }
.cennik__kw { font-weight: 500; color: var(--granat); font-variant-numeric: tabular-nums; }
td small { color: var(--tekst-2); }

/* karty oferty */
.karty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem 2rem; }
.karta { border-top: 2px solid var(--granat); padding: 1rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.karta h3 { margin: 0 0 .2rem; font-size: 1.4rem; }
.karta h3 a { text-decoration: none; }
.karta h3 a:hover { text-decoration: underline; }
.karta p { margin: 0; }
.karta__e { color: var(--tekst-2); }
.karta__cena { font-weight: 500; color: var(--granat) !important; font-size: 1.2rem; margin-top: .2rem !important; }
.karta .przycisk { margin-top: auto; align-self: flex-start; min-height: 2.9rem; font-size: 1.07rem; padding: .55rem 2.6rem .65rem 1.1rem; }
.karta .przycisk::after { right: 1.1rem; width: .45rem; height: .45rem; margin-top: -.22rem; }
.kategorie { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.kategorie a { display: inline-block; padding: .5rem 1rem; background: var(--blekit); border-radius: .5rem; text-decoration: none; font-weight: 500; }
.kategorie a:hover { background: var(--linia); }
.spis ul { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.spis a { display: inline-block; padding: .5rem 1rem; background: var(--blekit); border-radius: .5rem; text-decoration: none; font-weight: 500; }
.spis a:hover { background: var(--linia); }
.podtytul { color: var(--tekst-2); }

/* koniec strony kursu — zapis */
.cta-koniec { border-top: 1px solid var(--linia); margin-top: 3.4rem; padding-block: 2.8rem 1rem; text-align: center; }
.cta-koniec h2 { font-size: 1.71rem; }
@media (min-width: 1200px) { .cta-koniec h2 { font-size: 2.2rem; } }

/* strony tekstowe, kontakt, formularz */
.tekst-strona { max-width: calc(52rem + 2 * var(--margines)); padding-bottom: 1.6rem; }
.tekst-strona h1, .kontener > h1 { margin-top: .6rem; }
.kontakt__siatka { display: grid; gap: 2.4rem; }
@media (min-width: 1024px) { .kontakt__siatka { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.lista-kontakt { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.lista-kontakt li { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--linia); }
.lista-kontakt span { color: var(--tekst-2); }
.lista-kontakt a { font-weight: 500; }
.zapis { max-width: calc(42rem + 2 * var(--margines)); padding-bottom: 1.6rem; }
.formularz { display: grid; gap: .4rem; max-width: 36rem; }
.formularz label { font-weight: 500; color: var(--granat); margin-top: .7rem; }
.formularz input[type="text"], .formularz input[type="tel"], .formularz input[type="email"], .formularz select { width: 100%; min-height: 3.3rem; padding: .6rem .9rem; font: inherit; font-weight: 400; color: var(--tekst); background: #fff; border: 2px solid var(--linia); border-radius: .6rem; }
.formularz input:focus, .formularz select:focus { border-color: var(--granat); outline: none; box-shadow: 0 0 0 3px rgba(0, 108, 142, .2); }
.formularz .zgoda { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; font-weight: 300; color: var(--tekst); font-size: .95rem; margin-top: 1rem; }
.formularz .zgoda input { width: 1.3rem; height: 1.3rem; margin-top: .1rem; accent-color: var(--granat); }
.formularz button { margin-top: 1.1rem; width: 100%; }
.formularz__info { font-size: .95rem; color: var(--tekst-2); margin-top: .5rem; }
.formularz__bledy { background: #FDEEEB; border: 1px solid #F2B8AE; color: #7A1E10; border-radius: .6rem; padding: .8rem 1rem; }
.formularz__bledy p { margin: 0 0 .25rem; font-weight: 500; }
.formularz__bledy ul { margin: 0; padding-left: 1.2rem; }
.pole-ukryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pole-wyksztalcenie[hidden] { display: none; }

/* braki danych (tylko w wersji roboczej) i „zapytaj w biurze” */
.brak { display: inline; background: var(--brak-tlo); color: var(--brak-tekst); font-size: .8em; font-weight: 400; padding: 1px 6px; border-radius: 4px; line-height: 1.6; }
.zapytaj { color: var(--tekst-2); font-weight: 300; font-size: .95em; }

/* ---------- stopka (jak Żak: biała, menu w kolumnach, duży telefon, ikony serwisów) ---------- */
.stopka { border-top: 1px solid var(--linia); margin-top: 2.2rem; padding-top: 2.4rem; color: var(--granat); }
.stopka a { color: var(--granat); text-decoration: none; }
.stopka a:hover { text-decoration: underline; }
.stopka__w { display: grid; gap: 1.6rem; }
.stopka__logo { height: 4.6rem; width: auto; }
.stopka__kol h2 { font-size: 1.04rem; font-weight: 500; margin: 0 0 .5rem; letter-spacing: 0; }
.stopka__kol ul { list-style: none; padding: 0; margin: 0; }
.stopka__kol li { font-size: .95rem; line-height: 1.75; font-weight: 300; }
.stopka__kontakt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2.4rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--linia); }
.stopka__serwisy { display: flex; gap: .8rem; }
.stopka__serwisy a { width: 3rem; height: 3rem; border-radius: 50%; background: var(--granat); color: #fff; display: grid; place-items: center; transition: transform .2s; }
.stopka__serwisy a:hover { transform: scale(1.12); text-decoration: none; }
.stopka__serwisy svg { width: 1.4rem; height: 1.4rem; }
.stopka__tel { font-size: 1.71rem; font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; }
.stopka__tel svg { width: 1.4em; height: 1.4em; }
.stopka__godziny { display: block; font-size: .85rem; color: var(--tekst); font-weight: 400; margin-top: .2rem; }
.stopka__dol { text-align: center; font-size: .83rem; color: var(--tekst); padding-block: 1.6rem 1rem; }
@media (min-width: 768px) { .stopka__w { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .stopka__w { grid-template-columns: 12rem repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .stopka__kol li { font-size: .9rem; line-height: 1.6rem; }
  .stopka__tel { font-size: 2.53rem; }
}

/* ---------- stałe przyciski: czerwona kopuła „Zapisz się online” + okrągły telefon (jak Żak: kopuła + czat) ---------- */
.kopula { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 150; width: 6.95rem; padding: .95rem .4rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: var(--czerwony); color: #fff; text-align: center; text-transform: uppercase; font-size: .8rem; font-weight: 600; line-height: 1.1; text-decoration: none; border-radius: 6.95rem 6.95rem 0 0; box-shadow: 0 -2px 10px rgba(30, 39, 74, .18); }
.kopula:hover { background: var(--czerwony-2); color: #fff; }
.dymek-tel { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 149; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--granat); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(30, 39, 74, .25); }
.dymek-tel:hover { background: var(--tekst); color: #fff; }
.dymek-tel svg { width: 1.6rem; height: 1.6rem; }
@media (min-width: 1024px) { .kopula { width: 10.42rem; font-size: 1.25rem; font-weight: 500; padding: 1.4rem .5rem .8rem; border-radius: 10.42rem 10.42rem 0 0; } .dymek-tel { width: 60px; height: 60px; right: 20px; bottom: 20px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kopula, .dymek-tel, .menu, .menu-przycisk, .slider__kropki { display: none !important; } }

/* KOLORYSTYKA: wersja 6 — Karaibski błękit i bordo (wybór Adriana 05.10.2026) */
.menu__poz--wyrozniony > a, body .przycisk--zapis, body .przycisk--zapis:hover, .pas .przycisk--zapis, .pas .przycisk--zapis:hover, .kopula, .kopula:hover { color: #FFFFFF; }
:focus-visible { outline-color: #006C8E; }
.pas__akcent, .pas__ozdoba { color: #A8E6F4; }

/* RABATY pod ramką ceny (prawo jazdy, 06.10.2026) */
.rabaty { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rabaty li { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 400; line-height: 1.35; color: var(--tekst); }
.rabaty__znak { flex: none; background: var(--czerwony); color: #FFFFFF; font-weight: 700; border-radius: 8px; padding: 4px 10px; }

/* OSCAR | OSK (prawkowlomzy.pl) — znak tekstowy zamiast logo szkoły „OSZ” */
.logo__znak { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; color: var(--czerwony); }
.logo__znak b { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 2rem; letter-spacing: .04em; }
.logo__znak small { margin-top: .25rem; font-size: .78rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--granat); }
.logo__znak--stopka b { font-size: 2.4rem; }
@media (min-width: 768px) { .logo--osk .logo__znak b { font-size: 2.3rem; } }