/* chalo.pl — wygląd odwzorowany ze strony na Wixie (2026-10-04), bez jej usterek; komputer i telefon */
:root {
  --zolty: #fbc70e;
  --zolty-jasny: #ffd45a;
  --zolty-autor: #ffee90;
  --granat: #152040;
  --niebieski: #2f4890;
  --tekst: #332c2b;
  --braz: #8c5b12;
  --oliwka: #483d00;
  --czarny: #080808;
  --bialy: #fff;
  --szer: 1180px;
  --waska: 790px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 1.7; color: var(--tekst); background: var(--granat); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; line-height: 1.25; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
.pomin { position: absolute; left: -9999px; top: 0; background: var(--bialy); padding: 8px 12px; z-index: 100; }
.pomin:focus { left: 8px; }
.kontener { max-width: var(--szer); margin: 0 auto; padding: 0 24px; }
.waska { max-width: var(--waska); margin: 0 auto; padding: 0 24px; }

/* ---------- nagłówek ---------- */
.naglowek-strony { background: var(--zolty); position: sticky; top: 0; z-index: 50; }
.naglowek-strony .kontener { display: flex; align-items: center; gap: 24px; min-height: 134px; }
.logo { display: block; width: 136px; flex: 0 0 auto; }
.logo img { width: 136px; height: auto; }
.menu-przelacznik { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-przelacznik span { display: block; width: 28px; height: 3px; background: var(--tekst); margin: 5px 0; transition: .2s; }
.menu { margin-left: auto; }
.menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.menu li { position: relative; }
.menu a { display: block; text-decoration: none; font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 14.5px;
          color: var(--tekst); padding: 9px 10px; border-radius: 1px; white-space: nowrap; }
.menu a:hover, .menu a:focus-visible { color: var(--bialy); background: var(--granat); }
.menu a.aktywny { background: var(--granat); color: var(--bialy); }
.menu ul ul { display: none; position: absolute; left: 0; top: 100%; min-width: 280px; list-style: none; margin: 0; padding: 6px 0;
              background: var(--zolty); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.menu li:hover > ul, .menu li:focus-within > ul { display: block; }
.menu ul ul a { font-weight: 400; padding: 7px 16px; }
.fb-ikona { flex: 0 0 auto; width: 31px; margin-left: 28px; }
.fb-ikona img { width: 31px; height: 31px; }

@media (max-width: 1080px) {
  .naglowek-strony .kontener { min-height: 84px; flex-wrap: wrap; }
  .logo, .logo img { width: 96px; }
  .menu-przelacznik { display: block; }
  .fb-ikona { margin-left: 4px; order: 2; }
  .menu { display: none; width: 100%; order: 3; margin: 0 0 12px; }
  .menu.otwarte { display: block; }
  .menu > ul { flex-direction: column; align-items: stretch; }
  .menu a { font-size: 16px; padding: 12px 8px; }
  .menu ul ul { display: block; position: static; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
}

/* ---------- przyciski ze strzałką (jak na Wixie) ---------- */
.przycisk { display: inline-block; position: relative; text-decoration: none; font-family: 'Poppins', Arial, sans-serif;
            font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--tekst); background: var(--zolty);
            padding: 10px 46px 10px 26px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
            transition: filter .15s; }
.przycisk:hover, .przycisk:focus-visible { filter: brightness(1.08); }
.przycisk.duzy { font-size: 20px; padding: 10px 60px 10px 36px; }
.przycisk.ciemny { background: var(--czarny); color: var(--zolty); }
.przyciski { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.srodek .przyciski, .przyciski.srodek { justify-content: center; }

/* ---------- tła sekcji ---------- */
.tlo-granat { background: var(--granat); color: var(--bialy); }
.tlo-niebieski { background: var(--niebieski); color: var(--bialy); }
.tlo-zolty { background: var(--zolty); color: var(--tekst); }
.tlo-czarny { background: var(--czarny); color: var(--bialy); }
.tlo-bialy { background: var(--bialy); color: var(--tekst); }
.odstep { height: 40px; }

/* ---------- baner z tytułem podstrony ---------- */
.baner-podstrony { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center;
                   background: var(--granat) center / cover no-repeat; text-align: center; color: var(--bialy); padding: 40px 24px; }
.baner-podstrony .tytul { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: clamp(42px, 7vw, 92px); line-height: 1.1;
                          margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.25); white-space: pre-line; }

/* ---------- treść (granatowe tło jak na Wixie) ---------- */
.tresc { padding: 72px 0; }
.tresc h2 { font-size: 23px; font-weight: 400; color: inherit; }
.tresc h2.zolty, .tresc .zolty { color: var(--zolty); }
.tresc h3 { font-size: 15px; font-weight: 700; color: var(--zolty-jasny); margin: 1.6em 0 .2em; font-family: 'Poppins', Arial, sans-serif; }
.tresc .duzy { font-size: 40px; font-weight: 600; line-height: 1.2; margin: 1.2em 0 .5em; font-family: 'Poppins', Arial, sans-serif; }
.tresc p, .tresc li { font-family: 'Poppins', Arial, sans-serif; font-weight: 300; }
.tresc strong { font-weight: 600; }
.tresc a { color: var(--zolty); }
.tlo-bialy .tresc a, .tresc.tlo-bialy a, .tresc.tlo-zolty a { color: var(--niebieski); }
.tresc ul { padding-left: 1.3em; }
.tresc .obraz-prawo { float: right; margin: 0 0 20px 32px; }
.tresc .obraz-lewo { float: left; margin: 0 32px 20px 0; }
.tresc .okragly img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.tresc .clear { clear: both; }
.tresc .obraz-pelny { margin: 24px 0; }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* ---------- artykuł ---------- */
.artykul h1 { font-size: 30px; color: var(--zolty); margin-bottom: .3em; }
.artykul .autor { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 14px; color: var(--zolty-autor); margin-bottom: 40px; }
.artykul .wstep { min-height: 236px; }

/* ---------- lista artykułów / projektów ---------- */
.lista .wstep h2 { color: var(--zolty); font-size: 20px; font-weight: 400; margin-bottom: .3em; }
.lista .pozycja { display: grid; grid-template-columns: 160px 1fr; gap: 34px; align-items: center; margin: 70px 0; text-decoration: none; color: inherit; }
.lista .pozycja img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.lista .pozycja.kwadrat img { border-radius: 0; object-fit: contain; background: var(--bialy); }
.lista .autor { font-size: 13px; color: var(--zolty-autor); margin: 0; font-family: 'Poppins', Arial, sans-serif; }
.lista .pozycja h2 { font-size: 20px; color: var(--zolty); font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; margin: 2px 0 18px; }
.lista .pozycja:hover h2 { text-decoration: underline; }
.lista .pozycja p { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 14px; margin: 0; }

/* ---------- strona główna ---------- */
.baner { position: relative; background: var(--granat) center / cover no-repeat; color: var(--bialy); }
.baner .kontener { display: flex; min-height: inherit; align-items: center; }
.baner.glowny { min-height: 749px; }
.baner.glowny .kol { max-width: 470px; margin-left: 100px; padding: 70px 0; }
.baner.glowny h1 { font-size: clamp(54px, 7vw, 88px); line-height: 1; color: var(--braz); margin: 0 0 .25em; }
.baner.glowny .lead { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 26px; line-height: 1.38; margin: 0 0 .3em; }
.baner.glowny .opis { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.55; letter-spacing: .02em; }
.baner.glowny .przycisk { min-width: 570px; text-align: center; }
.pasek { padding: 22px 0 26px; }
.pasek .tytul { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 20px; margin: 0 0 .4em; }
.pasek p { font-family: 'Poppins', Arial, sans-serif; font-weight: 200; font-size: 16px; margin: 0; }
.pasek strong { font-weight: 400; }
.baner.srodek { text-align: center; padding: 50px 0 120px; }
.baner.srodek .kontener { flex-direction: column; }
.baner.srodek h2 { font-family: 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 36px; letter-spacing: .03em; line-height: 1.5; }
.baner.srodek h2::after { content: ''; display: block; width: 220px; height: 3px; background: var(--bialy); margin: 4px auto 0; }
.baner.srodek .tekst { max-width: 910px; margin: 60px auto 0; text-align: left; font-family: 'Poppins', Arial, sans-serif; font-weight: 200; font-size: 16px; }
.o-nas { background: var(--czarny) top center / 100% 180px no-repeat; padding-top: 50px; color: var(--bialy); }
.o-nas h2 { text-align: center; font-family: 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 40px; color: var(--oliwka); margin-bottom: 18px; }
.o-nas .lead { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.38; color: var(--bialy); }
.o-nas .tekst p { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.95; }
.o-nas .przyciski { justify-content: center; padding-bottom: 54px; }
.uczniowie { padding: 50px 0 60px; }
.uczniowie > .kontener > h2 { text-align: center; font-family: 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 40px; color: var(--oliwka); margin-bottom: 40px; }
.karty { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1206px; margin: 0 auto; }
.karta { min-height: 613px; display: flex; flex-direction: column; justify-content: flex-start; padding: 300px 25px 50px;
         background: center / cover no-repeat; color: var(--bialy); }
.karta h3 { font-size: 22px; text-shadow: 0 1px 6px rgba(0,0,0,.45); margin-bottom: .9em; min-height: 2.5em; }
.karta p { flex: 1; }
.karta p { font-weight: 400; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.karta .przycisk { font-size: 15px; align-self: flex-start; padding: 10px 46px 10px 46px; }
.uczniowie .przyciski { justify-content: center; margin-top: 50px; }
.cytaty { padding: 64px 0 50px; }
.cytaty .okno { position: relative; max-width: 1180px; margin: 0 auto; }
.cytaty .slajdy { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cytaty .slajdy::-webkit-scrollbar { display: none; }
.cytaty figure { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: grid; grid-template-columns: 1fr 216px; gap: 36px;
                 align-items: center; padding: 0 140px; }
.cytaty blockquote { margin: 0; text-align: right; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 25px; line-height: 1.44; }
.cytaty figcaption { text-align: right; font-size: 20px; margin-top: 4px; }
.cytaty img { width: 216px; height: 216px; object-fit: cover; }
.cytaty .strzalka { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: 10px; }
.cytaty .strzalka.lewa { left: 0; } .cytaty .strzalka.prawa { right: 0; }
.cytaty .strzalka svg { width: 30px; height: 52px; stroke: var(--bialy); fill: none; stroke-width: 2; }
.cytaty .kropki { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.cytaty .kropki button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; }
.cytaty .kropki button[aria-current="true"] { background: var(--bialy); }
.rekrutacja { background: #152040 top center / 100% 180px no-repeat; padding: 70px 0 70px; }
.rekrutacja .kontener { display: grid; grid-template-columns: 500px 1fr; gap: 80px; align-items: start; }
.rekrutacja h2 { font-size: 50px; line-height: 1.36; color: var(--niebieski); text-align: center; margin-top: 50px; }
.rekrutacja .przyciski { justify-content: center; }
.rekrutacja .fb { min-height: 300px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); color: var(--bialy); }
.rekrutacja .fb a { color: var(--zolty); }
.rekrutacja .fb p { text-align: center; padding: 20px; }
.przedszkole { padding: 56px 0; }
.przedszkole .kontener { display: grid; grid-template-columns: 147px 1fr; gap: 32px; align-items: center; max-width: 900px; }
.przedszkole h2 { color: var(--zolty); font-size: 28px; font-weight: 600; }
.przedszkole p { font-size: 13px; font-weight: 400; line-height: 1.95; margin: 0; }
.mapa iframe { display: block; width: 100%; height: 452px; border: 0; }

/* ---------- kadra, galeria ---------- */
.osoby { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 44px 34px; margin-top: 30px; }
.osoba img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.osoba h3 { color: var(--zolty); font-size: 18px; margin: 0; }
.osoba .rola { font-weight: 600; font-size: 14px; margin: 0 0 .6em; color: var(--zolty-autor); }
.osoba p { font-size: 14px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 30px 0; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- stopka ---------- */
.stopka-info { background: var(--bialy); color: var(--tekst); padding: 46px 0; }
.stopka-info .kontener { display: grid; grid-template-columns: 220px 1fr 1fr 1.4fr; gap: 36px; align-items: start; }
.stopka-info .logo-stopka img { width: 217px; }
.stopka-info .partner img { height: 46px; width: auto; margin-bottom: 10px; }
.stopka-info .partner p { font-family: 'Poppins', Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.45; }
.stopka-info .partner a { text-decoration: none; }
.stopka-info .kontakt p { margin: 0; font-family: 'Poppins', Arial, sans-serif; font-weight: 300; }
.stopka-info .kontakt .nazwa { color: var(--niebieski); font-weight: 600; margin-bottom: .4em; }
.stopka-info .kontakt .odstep-m { margin-top: .9em; }
.stopka-info .kontakt a { color: var(--niebieski); }
.stopka-info .fb-maly img { width: 26px; height: 26px; margin-top: 10px; }
.pasek-zolty { height: 40px; background: var(--zolty); }
.stopka { background: var(--granat); color: var(--bialy); text-align: center; padding: 26px 0 30px; font-family: 'Poppins', Arial, sans-serif; font-weight: 300; }
.stopka p { margin: 0 0 10px; }
.stopka img { width: 90px; margin: 14px auto 0; }
.stopka .linki a { color: var(--bialy); margin: 0 10px; font-size: 13px; }
.stopka button.linkowy { background: none; border: 0; color: var(--bialy); text-decoration: underline; font: inherit; font-size: 13px; cursor: pointer; }

/* ---------- zgody na cookies ---------- */
.zgody { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--bialy); color: var(--tekst);
         box-shadow: 0 -4px 24px rgba(0,0,0,.2); padding: 18px 0; font-size: 14px; }
.zgody[hidden] { display: none; }
.zgody .kontener { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.zgody .tekst { flex: 1 1 420px; margin: 0; }
.zgody .ustawienia { flex: 1 1 100%; display: none; gap: 18px; flex-wrap: wrap; }
.zgody.rozwiniete .ustawienia { display: flex; }
.zgody button { font: inherit; font-weight: 600; padding: 9px 18px; border: 2px solid var(--granat); background: var(--bialy); color: var(--granat); cursor: pointer; }
.zgody button.glowny { background: var(--granat); color: var(--bialy); }

/* ---------- telefon i tablet ---------- */
@media (max-width: 900px) {
  .baner.glowny { min-height: 0; background-position: 70% center; }
  .baner.glowny .kol { margin: 0; padding: 50px 0 60px; max-width: 100%; }
  .baner.glowny .lead { font-size: 21px; }
  .baner.glowny .przycisk, .przycisk.duzy { min-width: 0; width: 100%; font-size: 17px; }
  .karty { grid-template-columns: 1fr; }
  .karta { min-height: 460px; padding-top: 200px; }
  .cytaty figure { grid-template-columns: 1fr; padding: 0 44px; justify-items: center; }
  .cytaty blockquote, .cytaty figcaption { text-align: center; font-size: 19px; }
  .cytaty img { grid-row: 1; width: 160px; height: 160px; }
  .rekrutacja .kontener { grid-template-columns: 1fr; gap: 30px; }
  .rekrutacja h2 { font-size: 34px; margin-top: 10px; }
  .rekrutacja .fb { order: 2; }
  .przedszkole .kontener { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .stopka-info .kontener { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .lista .pozycja { grid-template-columns: 96px 1fr; gap: 18px; margin: 44px 0; }
  .lista .pozycja img { width: 96px; height: 96px; }
  .tresc .obraz-prawo, .tresc .obraz-lewo { float: none; margin: 0 auto 24px; }
  .dwie-kolumny { grid-template-columns: 1fr; }
  .tresc { padding: 48px 0; }
  .tresc .duzy { font-size: 30px; }
  .baner.srodek h2 { font-size: 26px; }
  .o-nas .lead { font-size: 19px; }
}

/* tło sekcji spotkań — gradient skopiowany z Wixa */
.tlo-kola { background: radial-gradient(circle at 0% 100%, rgba(151, 180, 157, 0.23) 0%, 24%, rgba(151, 180, 157, 0) 24%), radial-gradient(circle at 3.96973% 36.1003%, rgba(39, 120, 79, 0.23) 0%, 35%, rgba(39, 120, 79, 0) 35%), radial-gradient(circle at 27.4967% 92.7799%, rgba(0, 70, 35, 0.23) 0%, 40%, rgba(0, 70, 35, 0) 40%), radial-gradient(circle at 53.3838% 100%, rgba(215, 53, 1, 0.227) 0%, 50%, rgba(215, 53, 1, 0) 50%), radial-gradient(circle at 42.2868% 20.6152%, rgba(255, 68, 1, 0.23) 0%, 70%, rgba(255, 68, 1, 0) 70%), radial-gradient(circle at 93.6865% 11.4258%, rgba(255, 185, 147, 0.23) 0%, 70%, rgba(255, 185, 147, 0) 70%), radial-gradient(circle at 48.9014% 49.5215%, rgba(8, 8, 8, 0.23) 0%, 100%, rgba(8, 8, 8, 0) 100%), var(--zolty); }

/* kadra: zdjęcie po lewej, opis i imię po prawej (jak na Wixie) */
.osoby-wiersze { max-width: 980px; margin: 50px auto 0; }
.osoby-wiersze .osoba { display: grid; grid-template-columns: 490px 1fr; gap: 53px; align-items: center; margin-bottom: 36px; }
.osoby-wiersze .osoba img { width: 490px; height: auto; }
.osoby-wiersze .opis p { font-family: 'Poppins', Arial, sans-serif; font-weight: 300; font-size: 15px; }
.osoby-wiersze .opis h2 { font-family: 'Poppins', Arial, sans-serif; font-size: 16px; font-weight: 600; color: var(--zolty); margin-top: 18px; }
@media (max-width: 900px) {
  .osoby-wiersze .osoba { grid-template-columns: 1fr; gap: 18px; }
  .osoby-wiersze .osoba img { width: 100%; }
}

/* zdjęcia obok siebie w treści (projekty) */
.tresc .zdjecia { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; justify-content: center; }
.tresc .zdjecia .obraz-pelny { margin: 0; flex: 1 1 260px; max-width: 460px; }
.tresc figure { margin: 0; }
.tresc .obraz-pelny img { margin: 0 auto; }
.tresc h2 { margin-top: 1.2em; }
.tresc h1.zolty { color: var(--zolty); font-size: 30px; }
.tresc a.przycisk, .tlo-bialy a.przycisk { color: var(--tekst); text-decoration: none; }
.tresc a.przycisk.ciemny { color: var(--zolty); }

/* telefon: zdjęcie nad tekstem tam, gdzie napisy nachodziły na zdjęcia */
@media (max-width: 900px) {
  .baner.glowny { background-color: #cfa157; background-size: auto 330px; background-position: 74% top; padding-top: 330px; }
  .baner.glowny h1 { color: var(--braz); }
  .o-nas { background-size: 100% 110px; padding-top: 34px; }
  .o-nas h2 { margin-bottom: 52px; font-size: 34px; }
  .rekrutacja { background-size: 100% 120px; padding-top: 130px; }
  .rekrutacja h2 { margin-top: 0; }
}
.tresc button.linkowy { background: none; border: 0; padding: 0; font: inherit; color: var(--zolty); text-decoration: underline; cursor: pointer; }
.tresc code { font-size: .92em; background: rgba(255,255,255,.1); padding: 0 4px; }

/* poprawki po przeglądzie 2026-10-04 */
.dwie-kolumny.srodkuj { align-items: center; margin: 28px 0; }
.dwie-kolumny.srodkuj .przyciski, .dwie-kolumny.srodkuj > p { margin: 0; }
.kontakt-uklad { display: grid; grid-template-columns: 1fr 186px; gap: 40px; align-items: start; }
.kontakt-uklad .logo-kontakt { background: var(--bialy); padding: 0; }
.kontakt-uklad .logo-kontakt img { width: 186px; }
.rekrutacja h2 { color: #6f8fe8; }
.fb-ikona { padding: 6px; margin-left: 22px; }
.stopka-info .fb-maly { display: inline-block; padding: 8px; }
.stopka-info .fb-maly img { margin: 0; }
@media (max-width: 900px) {
  .karta { min-height: 0; padding-top: 330px; background-position: center top; }
  .kontakt-uklad { grid-template-columns: 1fr; }
  .kontakt-uklad .logo-kontakt { order: -1; justify-self: start; width: 120px; }
  .kontakt-uklad .logo-kontakt img { width: 120px; }
  .stopka-info .fb-maly { margin: 0 auto; }
  .dwie-kolumny.srodkuj { gap: 12px; }
}