{"id":3325,"date":"2025-10-18T16:23:01","date_gmt":"2025-10-18T14:23:01","guid":{"rendered":"https:\/\/hilaris-blonie.pl\/?page_id=3325"},"modified":"2026-10-04T17:50:11","modified_gmt":"2026-10-04T15:50:11","slug":"aktualna-galeria","status":"publish","type":"page","link":"https:\/\/hilaris-blonie.pl\/?page_id=3325","title":{"rendered":"Galeria"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3325\" class=\"elementor elementor-3325\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a0b140 e-flex e-con-boxed e-con e-parent\" data-id=\"6a0b140\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37358c1 elementor-widget elementor-widget-html\" data-id=\"37358c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================================================\r\n     HILARIS \u2014 GALERIA WYDARZE\u0143 (page_id=3325)\r\n     Jeden widget HTML w Elementorze. Blok jest w pe\u0142ni samodzielny:\r\n     nie wymaga rdzenia (hilaris-CORE) ani \u017cadnych dodatkowych plik\u00f3w.\r\n     ---------------------------------------------------------------------------\r\n     Utrzymany w tej samej konwencji co \u201eMisja i wizja\u201d oraz \u201eDwuj\u0119zyczno\u015b\u0107\u201d:\r\n     granatowy nag\u0142\u00f3wek ze z\u0142otym akcentem, szeryfowe tytu\u0142y (Source Serif 4),\r\n     wy\u015brodkowane nag\u0142\u00f3wki sekcji, kafle reaguj\u0105ce na najechanie, animacje\r\n     wej\u015bcia sterowane przewijaniem i dolny pasek szybkich akcji na telefonie.\r\n     ---------------------------------------------------------------------------\r\n     CA\u0141A TRE\u015a\u0106 SIEDZI W HTML \u2014 strona czyta si\u0119 poprawnie nawet z wy\u0142\u0105czonym\r\n     JavaScriptem. Skrypt tylko o\u017cywia: animacje wej\u015bcia i delikatny ruch\r\n     zdj\u0119cia w panelu archiwum.\r\n     ---------------------------------------------------------------------------\r\n     \u25b8 GDZIE DODA\u0106 NOWE WYDARZENIE\r\n     Wystarczy skopiowa\u0107 jeden blok <a class=\"gl-k\"> \u2026 <\/a> w sekcji\r\n     \u201eROK SZKOLNY 2026\/2027\u201d i podmieni\u0107 trzy rzeczy:\r\n       \u2022 href       \u2014 adres podstrony z galeri\u0105 (?page_id=\u2026)\r\n       \u2022 src \/ alt  \u2014 zdj\u0119cie ok\u0142adkowe i jego opis\r\n       \u2022 tytu\u0142      \u2014 tekst w <span class=\"gl-k__tyt\">\u2026<\/span>\r\n     Najnowsze wydarzenie stawiamy na g\u00f3rze jako du\u017cy kafel (klasa\r\n     \u201egl-k--duzy\u201d), a poprzednie przesuwamy pod nie jako zwyk\u0142e kafle.\r\n     Uk\u0142ad jest najr\u00f3wniejszy, gdy w siatce pod wyr\u00f3\u017cnionym kaflem stoi\r\n     wielokrotno\u015b\u0107 trzech kafli (na komputerze siatka ma trzy kolumny).\r\n     ---------------------------------------------------------------------------\r\n     \u25b8 NOWY ROK SZKOLNY \u2014 CO ZROBI\u0106 ZA ROK\r\n     Sekcje s\u0105 dwie: bie\u017c\u0105ca (\u201eRok szkolny 2026\/2027\u201d, tu\u017c pod granatowym\r\n     nag\u0142\u00f3wkiem) i poprzednia (\u201eRok szkolny 2025\/2026\u201d). Podpis\r\n     \u201eNajnowsze wydarzenia z \u017cycia szko\u0142y.\u201d stoi zawsze pod BIE\u017b\u0104CYM rokiem.\r\n     Za rok wystarczy doda\u0107 now\u0105 sekcj\u0119 na g\u00f3rze, przenie\u015b\u0107 do niej ten podpis\r\n     i poprawi\u0107 plakietk\u0119 z rokiem w granatowym nag\u0142\u00f3wku.\r\n     ---------------------------------------------------------------------------\r\n     \u25b8 SZYBKO\u015a\u0106 WCZYTYWANIA\r\n     Ok\u0142adki wskazuj\u0105 na pe\u0142nowymiarowe pliki (\u201e-scaled.jpg\u201d), bo takie adresy\r\n     ma biblioteka medi\u00f3w. Je\u015bli strona mia\u0142aby si\u0119 wczytywa\u0107 szybciej, mo\u017cna\r\n     podmieni\u0107 je na miniatury generowane przez WordPressa \u2014 ten sam adres\r\n     z dopiskiem rozmiaru przed rozszerzeniem, np. \u201e\u2026-1024x768.jpg\u201d.\r\n     ========================================================================== -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\"\r\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap\">\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   STYLE ZAPASOWE \u2014 DZIA\u0141ANIE BEZ RDZENIA\r\n   Regu\u0142y w :where() maj\u0105 ZEROW\u0104 moc: gdy rdze\u0144 hilaris-CORE jest wczytany,\r\n   wygrywaj\u0105 jego ustawienia; gdy go nie ma, blok wygl\u0105da tak samo.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:where(.hx-gal){\r\n  --navy:#0E2B4D; --gold:#C9A227; --gold-l:#F0D98A; --paper:#ffffff;\r\n  --mist:#F3F6F8; --line:#E2E8EC; --ink:#12324B; --ink-2:#5A6E7E;\r\n  --r:16px; --pad:18px;\r\n  display:block;color:var(--ink,#12324B);\r\n  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;\r\n  line-height:1.55;\r\n}\r\n:where(.hx-gal) .hx-app{max-width:520px;margin:0 auto;background:#fff;}\r\n:where(.hx-gal) .hx-sec{padding:34px var(--pad,18px);}\r\n:where(.hx-gal) .hx-sec--mist{background:var(--mist,#F3F6F8);}\r\n:where(.hx-gal) .hx-h{font-size:clamp(1.35rem,3vw,2rem);margin:0 0 8px;\r\n  color:var(--navy,#0E2B4D);line-height:1.2;}\r\n:where(.hx-gal) .hx-sub{color:var(--ink-2,#5A6E7E);margin:0 0 20px;font-size:.95rem;line-height:1.6;}\r\n:where(.hx-gal) .hx-kicker{color:var(--gold-l,#F0D98A);font-weight:800;letter-spacing:.14em;\r\n  text-transform:uppercase;font-size:.7rem;margin:0;}\r\n:where(.hx-gal) .hx-back{display:inline-flex;gap:8px;align-items:center;\r\n  padding:12px var(--pad,18px);color:var(--ink-2,#5A6E7E);text-decoration:none;\r\n  font-weight:700;font-size:.9rem;}\r\n:where(.hx-gal) .hx-back svg{width:18px;height:18px;}\r\n:where(.hx-gal) .hx-grid{display:grid;gap:12px;\r\n  grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));}\r\n:where(.hx-gal) .hx-tile{display:block;padding:18px;background:var(--paper,#fff);\r\n  border:1px solid var(--line,#E2E8EC);border-radius:var(--r,16px);\r\n  text-decoration:none;color:inherit;}\r\n:where(.hx-gal) .hx-tile b{display:block;margin-top:9px;font-weight:700;font-size:.98rem;\r\n  color:var(--navy,#0E2B4D);}\r\n:where(.hx-gal) .hx-tile u{text-decoration:none;display:block;font-size:.8rem;\r\n  color:var(--ink-2,#5A6E7E);margin-top:2px;}\r\n:where(.hx-gal) .hx-ic svg{width:26px;height:26px;stroke:var(--c,#2E86C8);fill:none;stroke-width:1.9;}\r\n:where(.hx-gal) .hx-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;\r\n  max-width:520px;margin:0 auto;background:#fff;border-top:1px solid var(--line,#E2E8EC);\r\n  padding-bottom:env(safe-area-inset-bottom);}\r\n:where(.hx-gal) .hx-bar a{flex:1;display:grid;place-items:center;gap:3px;padding:9px 6px;\r\n  font-size:.7rem;text-decoration:none;color:var(--ink,#12324B);font-weight:600;}\r\n:where(.hx-gal) .hx-bar svg{width:20px;height:20px;stroke:currentColor;fill:none;}\r\n:where(.hx-gal) .hx-bar a.is-main{color:var(--navy,#0E2B4D);}\r\n@media (min-width:900px){\r\n  :where(.hx-gal) .hx-app{max-width:1140px;}\r\n  :where(.hx-gal) .hx-grid{grid-template-columns:repeat(var(--cols-d,3),minmax(0,1fr));}\r\n  :where(.hx-gal) .hx-bar{display:none;}\r\n}\r\n<\/style>\r\n<style>\r\n.hx-gal,.hx-gal *,.hx-gal *::before,.hx-gal *::after{box-sizing:border-box;}\r\n\/* \u2500\u2500 CZCIONKA NAG\u0141\u00d3WK\u00d3W (bez ozdobnego \u201eJ\u201d) \u2500\u2500 *\/\r\n.hx-gal h1,.hx-gal h2,.hx-gal h3,.hx-gal .hx-h,\r\n.hx-gal .gl-k__tyt,.hx-gal .gl-arch__t,.hx-gal .gl-licz b{\r\n  font-family:'Source Serif 4',Georgia,'Times New Roman',serif !important;\r\n}\r\n.hx-gal .hx-h{text-align:center;}\r\n.hx-gal .hx-sub{text-align:center;max-width:64ch;margin-left:auto;margin-right:auto;}\r\n\/* Nag\u0142\u00f3wek sekcji bez podpisu pod spodem (np. \u201eRok szkolny 2025\/2026\u201d)\r\n   potrzebuje w\u0142asnego odst\u0119pu \u2014 normalnie dawa\u0142 go podpis .hx-sub. *\/\r\n.hx-gal .hx-h--sam{margin-bottom:20px;}\r\n\/* zapas na dolny pasek szybkich akcji (tylko telefon) *\/\r\n.hx-gal .hx-app{padding-bottom:calc(48px + env(safe-area-inset-bottom));}\r\n\/* \u2500\u2500 SZEROKO\u015a\u0106 NA KOMPUTERZE \u2500\u2500 *\/\r\n@media (min-width:900px){\r\n  .hx-gal .hx-app{padding-bottom:0;\r\n    max-width:min(1140px,94vw) !important;width:100%;\r\n    margin-left:auto !important;margin-right:auto !important;}\r\n  .hx-gal{--pad:40px;}\r\n}\r\n@media (min-width:1400px){\r\n  .hx-gal .hx-app{max-width:min(1280px,94vw) !important;}\r\n}\r\n.hx-gal .hx-grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr));}\r\n@media (min-width:900px){\r\n  .hx-gal .hx-grid{grid-template-columns:repeat(var(--cols-d),minmax(0,1fr));}\r\n}\r\n.hx-gal .hx-tile{min-width:0;overflow-wrap:anywhere;}\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   ANIMACJE WEJ\u015aCIA\r\n   Sterowane skryptem, nie \u201eanimation-timeline: view()\u201d. Ten drugi wariant\r\n   na telefonie nie dochodzi\u0142 do ko\u0144ca przy ostatnich sekcjach strony (nie ma\r\n   ju\u017c czego przewija\u0107) i d\u00f3\u0142 strony zostawa\u0142 wyblak\u0142y. Tutaj skrypt ods\u0142ania\r\n   element, gdy tylko wjedzie w kadr, po 4 s ods\u0142ania wszystko na wszelki\r\n   wypadek, a po animacji USUWA atrybut data-anim \u2014 dzi\u0119ki temu p\u00f3\u017aniejsze\r\n   efekty najechania (uniesienie kafla) nie przegrywaj\u0105 z resztkow\u0105 regu\u0142\u0105.\r\n   Gdyby skrypt si\u0119 nie wykona\u0142, klasa .gl-js nie zostanie dodana i nic nie\r\n   b\u0119dzie ukryte \u2014 strona po prostu wy\u015bwietli si\u0119 bez animacji.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hx-gal.gl-js [data-anim]{opacity:0;transform:translateY(22px);\r\n  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}\r\n.hx-gal.gl-js [data-anim].in{opacity:1;transform:none;}\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   NAG\u0141\u00d3WEK STRONY\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hx-gal .gl-hero{background:var(--navy,#0E2B4D);color:#fff;\r\n  padding:30px var(--pad,18px) 34px;position:relative;overflow:hidden;}\r\n.hx-gal .gl-hero::after{content:\"\";position:absolute;right:-90px;top:-90px;\r\n  width:260px;height:260px;border-radius:50%;background:rgba(217,164,23,.13);}\r\n.hx-gal .gl-hero > *{position:relative;z-index:2;}\r\n.hx-gal .gl-hero > .hx-kicker{margin:0 0 4px !important;}\r\n.hx-gal .gl-hero > h1{margin:0 !important;line-height:1.16;color:#fff;\r\n  font-size:clamp(1.8rem,7.2vw,2.3rem);}\r\n.hx-gal .gl-lead{color:#C6D7E5;font-size:.95rem;margin:12px 0 0;line-height:1.7;max-width:60ch;}\r\n\/* pasek z liczbami \u2014 liczba wydarze\u0144 przelicza si\u0119 w skrypcie *\/\r\n.hx-gal .gl-licz{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none;}\r\n.hx-gal .gl-licz li{display:inline-flex;align-items:baseline;gap:7px;\r\n  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);\r\n  border-radius:999px;padding:8px 15px;font-size:.78rem;color:#C6D7E5;}\r\n.hx-gal .gl-licz b{font-size:1.02rem;font-weight:700;color:var(--gold-l,#F0D98A);}\r\n@media (min-width:900px){\r\n  .hx-gal .gl-hero{padding:52px var(--pad,18px) 54px;\r\n    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);\r\n    column-gap:clamp(28px,3.4vw,52px);row-gap:0;align-items:center;\r\n    grid-template-rows:auto auto 1fr;}\r\n  .hx-gal .gl-hero > .hx-kicker{grid-column:1;grid-row:1;align-self:end;}\r\n  .hx-gal .gl-hero > h1{grid-column:1;grid-row:2;align-self:start;}\r\n  .hx-gal .gl-hero > .gl-licz{grid-column:1;grid-row:3;align-self:start;margin-top:24px;}\r\n  .hx-gal .gl-lead{grid-column:2;grid-row:1 \/ span 3;align-self:center;margin:0;font-size:1.02rem;}\r\n}\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   KAFLE WYDARZE\u0143\r\n   ---------------------------------------------------------------------------\r\n   Ka\u017cdy kafel to zdj\u0119cie ok\u0142adkowe z przyciemnieniem u do\u0142u i tytu\u0142em na nim.\r\n   Wysoko\u015b\u0107 kafla podana jest W PIKSELACH (nie w \u201evh\u201d), \u017ceby kadr wygl\u0105da\u0142 tak\r\n   samo przy ka\u017cdym powi\u0119kszeniu przegl\u0105darki i na ka\u017cdym monitorze.\r\n   Po najechaniu: zdj\u0119cie powoli si\u0119 przybli\u017ca, przyciemnienie ust\u0119puje,\r\n   kafel unosi si\u0119, z\u0142ota kreska rozsuwa si\u0119 na ca\u0142\u0105 szeroko\u015b\u0107 tytu\u0142u,\r\n   a przy podpisie wysuwa si\u0119 strza\u0142ka.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hx-gal .gl-siatka{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);}\r\n.hx-gal .gl-k{position:relative;display:block;overflow:hidden;\r\n  border-radius:var(--r,16px);background:var(--navy,#0E2B4D);\r\n  height:240px;text-decoration:none;color:#fff;isolation:isolate;\r\n  box-shadow:0 18px 40px -30px rgba(14,43,77,.9);\r\n  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;}\r\n.hx-gal .gl-k--duzy{height:300px;}\r\n.hx-gal .gl-k img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;\r\n  object-position:var(--kadr,center);display:block;\r\n  transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .5s ease;}\r\n\/* przyciemnienie: mocne u do\u0142u pod napisem, przezroczyste u g\u00f3ry *\/\r\n.hx-gal .gl-k__tlo{position:absolute;inset:0;pointer-events:none;\r\n  background:linear-gradient(180deg,rgba(10,31,58,.10) 0%,rgba(10,31,58,.28) 42%,\r\n    rgba(10,31,58,.86) 100%);\r\n  transition:background .45s ease;}\r\n.hx-gal .gl-k__tresc{position:absolute;left:0;right:0;bottom:0;z-index:2;\r\n  padding:20px 20px 18px;display:block;}\r\n.hx-gal .gl-k__tyt{display:block;font-weight:700;line-height:1.25;\r\n  font-size:clamp(1.02rem,4vw,1.2rem);text-shadow:0 2px 14px rgba(0,0,0,.55);}\r\n\/* z\u0142ota kreska pod tytu\u0142em \u2014 rozsuwa si\u0119 przy najechaniu *\/\r\n.hx-gal .gl-k__kreska{display:block;height:2px;width:34px;margin:10px 0 0;\r\n  border-radius:2px;background:linear-gradient(90deg,var(--gold-l,#F0D98A),var(--gold,#C9A227));\r\n  transition:width .5s cubic-bezier(.22,1,.36,1);}\r\n.hx-gal .gl-k__akcja{display:inline-flex;align-items:center;gap:7px;margin-top:10px;\r\n  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--gold-l,#F0D98A);\r\n  opacity:.92;transition:gap .3s ease,opacity .3s ease;}\r\n.hx-gal .gl-k__akcja svg{width:15px;height:15px;stroke:currentColor;fill:none;\r\n  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;\r\n  transition:transform .35s ease;}\r\n\/* przelot \u015bwiat\u0142a po kaflu *\/\r\n.hx-gal .gl-k::after{content:\"\";position:absolute;inset:-40%;z-index:3;pointer-events:none;\r\n  opacity:0;background:linear-gradient(100deg,rgba(255,255,255,0) 42%,\r\n    rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 58%);\r\n  transform:translateX(-140%) skewX(-14deg);}\r\n@keyframes gl-blysk{\r\n  from{transform:translateX(-140%) skewX(-14deg);}\r\n  to{transform:translateX(150%) skewX(-14deg);}\r\n}\r\n@media (hover:hover){\r\n  .hx-gal .gl-k:hover{transform:translateY(-6px);\r\n    box-shadow:0 30px 56px -30px rgba(14,43,77,.95);}\r\n  .hx-gal .gl-k:hover img{transform:scale(1.07);filter:brightness(1.05);}\r\n  .hx-gal .gl-k:hover .gl-k__tlo{\r\n    background:linear-gradient(180deg,rgba(10,31,58,.04) 0%,rgba(10,31,58,.20) 42%,\r\n      rgba(10,31,58,.80) 100%);}\r\n  .hx-gal .gl-k:hover .gl-k__kreska{width:100%;}\r\n  .hx-gal .gl-k:hover .gl-k__akcja{gap:11px;opacity:1;}\r\n  .hx-gal .gl-k:hover .gl-k__akcja svg{transform:translateX(3px);}\r\n  .hx-gal .gl-k:hover::after{opacity:1;animation:gl-blysk 1.05s ease-out;}\r\n}\r\n.hx-gal .gl-k:active{transform:scale(.99);}\r\n.hx-gal .gl-k:focus-visible{outline:3px solid var(--gold,#C9A227);outline-offset:3px;}\r\n@media (min-width:600px){\r\n  .hx-gal .gl-siatka{grid-template-columns:repeat(2,minmax(0,1fr));}\r\n  .hx-gal .gl-k--duzy{grid-column:1 \/ -1;height:340px;}\r\n}\r\n@media (min-width:900px){\r\n  .hx-gal .gl-siatka{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}\r\n  .hx-gal .gl-k{height:270px;}\r\n  .hx-gal .gl-k--duzy{grid-column:1 \/ -1;height:400px;}\r\n  .hx-gal .gl-k--duzy .gl-k__tresc{padding:30px 32px 28px;}\r\n  .hx-gal .gl-k--duzy .gl-k__tyt{font-size:1.75rem;max-width:22ch;}\r\n  .hx-gal .gl-k__tresc{padding:22px 22px 20px;}\r\n  .hx-gal .gl-k__tyt{font-size:1.14rem;}\r\n}\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PANEL \u201eGALERIA ARCHIWALNA\u201d\r\n   Dwie kolumny na komputerze (tekst + zdj\u0119cie), jedna pod drug\u0105 na telefonie.\r\n   Zdj\u0119cie jest wy\u017csze od ramki i przesuwa si\u0119 w rytm przewijania \u2014 ten sam\r\n   zabieg co w panelu \u201emi\u0119dzynarodowe \u015brodowisko\u201d na stronie o misji.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hx-gal .gl-arch{background:var(--navy,#0E2B4D);color:#fff;position:relative;overflow:hidden;\r\n  padding:32px var(--pad,18px) 34px;display:grid;gap:24px;}\r\n.hx-gal .gl-arch::after{content:\"\";position:absolute;right:-110px;bottom:-130px;\r\n  width:300px;height:300px;border-radius:50%;background:rgba(217,164,23,.10);\r\n  pointer-events:none;}\r\n.hx-gal .gl-arch__txt{position:relative;z-index:2;min-width:0;}\r\n.hx-gal .gl-arch__t{margin:0;color:#fff;font-weight:700;letter-spacing:-.01em;\r\n  font-size:clamp(1.3rem,5vw,1.7rem);line-height:1.28;}\r\n.hx-gal .gl-arch__p{margin:12px 0 0;color:#C3D3E3;max-width:48ch;\r\n  font-size:.95rem;line-height:1.62;}\r\n.hx-gal .gl-cta{display:inline-flex;align-items:center;gap:9px;margin-top:20px;\r\n  background:linear-gradient(180deg,var(--gold-l,#F0D98A),var(--gold,#C9A227));\r\n  color:#3B2A00;text-decoration:none;font-weight:800;font-size:.86rem;\r\n  border-radius:999px;padding:12px 22px;\r\n  box-shadow:0 14px 30px -18px rgba(201,162,39,.9);\r\n  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,gap .3s ease;}\r\n.hx-gal .gl-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;\r\n  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s ease;}\r\n@media (hover:hover){\r\n  .hx-gal .gl-cta:hover{transform:translateY(-2px);gap:13px;\r\n    box-shadow:0 20px 38px -18px rgba(201,162,39,1);}\r\n  .hx-gal .gl-cta:hover svg{transform:translateX(3px);}\r\n}\r\n.hx-gal .gl-cta:active{transform:scale(.98);}\r\n.hx-gal .gl-arch__foto{position:relative;overflow:hidden;border-radius:16px;\r\n  aspect-ratio:4\/3;background:#08172C;\r\n  box-shadow:0 30px 60px -34px rgba(0,0,0,.85);}\r\n.hx-gal .gl-arch__foto img{position:absolute;left:0;top:0;width:100%;height:145%;\r\n  display:block;object-fit:cover;object-position:center top;will-change:transform;}\r\n@media (min-width:900px){\r\n  .hx-gal .gl-arch{padding:52px var(--pad,18px) 56px;align-items:center;\r\n    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);\r\n    gap:clamp(30px,3.6vw,54px);}\r\n  .hx-gal .gl-arch__t{font-size:clamp(1.55rem,2.3vw,2.05rem);}\r\n  .hx-gal .gl-arch__p{font-size:1.02rem;margin-top:14px;}\r\n  .hx-gal .gl-arch__foto{aspect-ratio:5\/4;}\r\n}\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   KAFLE \u201ePOWI\u0104ZANE STRONY\u201d \u2014 uk\u0142ad i reakcja na najechanie\r\n   ---------------------------------------------------------------------------\r\n   Kafel jest kolumn\u0105 wy\u015brodkowan\u0105 w poziomie: ikona, tytu\u0142, podpis.\r\n   Podpis ma \u201emargin-top:auto\u201d, wi\u0119c dosuwa si\u0119 do do\u0142u kafla \u2014 dzi\u0119ki temu\r\n   wszystkie podpisy w rz\u0119dzie le\u017c\u0105 w JEDNEJ LINII, tak\u017ce wtedy, gdy tytu\u0142\r\n   nad jednym z nich \u0142amie si\u0119 na dwa wiersze.\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hx-gal .hx-tile{position:relative;overflow:hidden;\r\n  display:flex;flex-direction:column;align-items:center;text-align:center;\r\n  transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease,\r\n             border-color .38s ease;}\r\n.hx-gal .hx-tile b{width:100%;}\r\n\/* Podpis jest w\u0105ski \u201ena miar\u0119 tekstu\u201d i wy\u015brodkowany przez align-items.\r\n   UWAGA: strza\u0142ka \u2192 siedzi POZA tokiem tekstu (position:absolute). Gdyby\r\n   by\u0142a zwyk\u0142ym elementem w linii, zajmowa\u0142aby miejsce mimo opacity:0\r\n   i przesuwa\u0142a napis o kilkana\u015bcie pikseli w lewo. *\/\r\n.hx-gal .hx-tile u{display:inline-block;width:auto;max-width:100%;\r\n  margin-top:auto;padding-top:4px;position:relative;transition:color .3s ease;}\r\n.hx-gal .hx-tile .hx-ic{display:inline-grid;place-items:center;\r\n  transition:transform .45s cubic-bezier(.34,1.56,.64,1);}\r\n.hx-gal .hx-tile u::after{content:\"\u2192\";position:absolute;left:100%;bottom:0;\r\n  margin-left:6px;display:inline-block;\r\n  opacity:0;transform:translateX(-5px);color:var(--c,#2E86C8);font-weight:800;\r\n  transition:opacity .3s ease,transform .35s ease;}\r\n.hx-gal .hx-tile::before{content:\"\";position:absolute;inset:-40%;pointer-events:none;opacity:0;\r\n  background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,\r\n    rgba(255,255,255,0) 60%);\r\n  transform:translateX(-140%) skewX(-14deg);}\r\n@media (hover:hover){\r\n  .hx-gal .hx-tile:hover{transform:translateY(-5px);border-color:var(--c,#2E86C8);\r\n    box-shadow:0 20px 34px -22px color-mix(in srgb,var(--c,#2E86C8) 60%,transparent);}\r\n  .hx-gal .hx-tile:hover .hx-ic{transform:scale(1.16) rotate(-7deg);}\r\n  .hx-gal .hx-tile:hover b{color:var(--c,#2E86C8);}\r\n  .hx-gal .hx-tile:hover u{color:var(--c,#2E86C8);}\r\n  .hx-gal .hx-tile:hover u::after{opacity:1;transform:translateX(0);}\r\n  .hx-gal .hx-tile:hover::before{opacity:1;animation:gl-blysk 1.1s ease-out;}\r\n}\r\n.hx-gal .hx-tile:active{transform:scale(.985);}\r\n\/* \u2500\u2500 SZANUJEMY SYSTEMOWE OGRANICZENIE RUCHU \u2500\u2500 *\/\r\n@media (prefers-reduced-motion:reduce){\r\n  .hx-gal.gl-js [data-anim]{opacity:1;transform:none;}\r\n  .hx-gal .gl-k,.hx-gal .gl-k img,.hx-gal .hx-tile,.hx-gal .gl-cta{transition:none;}\r\n  .hx-gal .gl-k:hover{transform:none;}\r\n  .hx-gal .gl-k:hover img{transform:none;}\r\n  .hx-gal .hx-tile:hover{transform:none;}\r\n  .hx-gal .gl-k::after,.hx-gal .hx-tile::before{display:none;}\r\n}\r\n<\/style>\r\n<section class=\"hx hx-gal\" id=\"hil-gal\" lang=\"pl\">\r\n <div class=\"hx-app\">\r\n  <a class=\"hx-back\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H6M11 6l-6 6 6 6\"\/><\/svg>\r\n    Szko\u0142a Podstawowa\r\n  <\/a>\r\n  <!-- \u2550\u2550 NAG\u0141\u00d3WEK \u2550\u2550 -->\r\n  <div class=\"gl-hero\">\r\n    <p class=\"hx-kicker\">Galeria<\/p>\r\n    <h1>Galeria wydarze\u0144<\/h1>\r\n    <p class=\"gl-lead\">Uroczysto\u015bci, wyjazdy, wyst\u0119py i zwyczajne szkolne dni \u2014 zebrane w jednym\r\n      miejscu. Prosimy wybra\u0107 wydarzenie, aby zobaczy\u0107 pe\u0142n\u0105 galeri\u0119 zdj\u0119\u0107.<\/p>\r\n    <ul class=\"gl-licz\">\r\n      <li>rok szkolny <b>2026\/2027<\/b><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <!-- \u2550\u2550 ROK SZKOLNY 2026\/2027 (BIE\u017b\u0104CY) \u2550\u2550\r\n       Sekcja bie\u017c\u0105cego roku stoi NAD rokiem poprzednim, tu\u017c pod granatowym\r\n       nag\u0142\u00f3wkiem \u2014 najnowsze wydarzenia wida\u0107 od razu po wej\u015bciu na stron\u0119.\r\n       Pierwszy kafel ma dodatkowo klas\u0119 \u201egl-k--duzy\u201d \u2014 jest wy\u017cszy i zajmuje\r\n       ca\u0142\u0105 szeroko\u015b\u0107 siatki. Kolejne wydarzenia stoj\u0105 pod nim BEZ tej klasy;\r\n       wtedy ustawiaj\u0105 si\u0119 w rz\u0119dach po trzy (na komputerze). -->\r\n  <div class=\"hx-sec\">\r\n    <h2 class=\"hx-h\" data-anim>Rok szkolny 2026\/2027<\/h2>\r\n    <p class=\"hx-sub\" data-anim>Najnowsze wydarzenia z \u017cycia szko\u0142y.<\/p>\r\n    <div class=\"gl-siatka\" id=\"glSiatka2627\">\r\n      <!-- \u25b8 NAJNOWSZE WYDARZENIE (du\u017cy kafel): Rodzinny Rajd Hilaris 2026\r\n           Ok\u0142adka: ...\/2026\/10\/224-scaled.jpg -->\r\n      <a class=\"gl-k gl-k--duzy\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=8467\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/10\/224-scaled.jpg\"\r\n             alt=\"Rodzinny Rajd Hilaris 2026\"\r\n             loading=\"lazy\" decoding=\"async\" style=\"--kadr:center 40%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Rodzinny Rajd Hilaris 2026<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n      <!-- Rozpocz\u0119cie roku szkolnego 2026\/2027 \u2014 zwyk\u0142y kafel pod wyr\u00f3\u017cnionym.\r\n           Ok\u0142adka z biblioteki medi\u00f3w WordPressa (ta sama co na stronie g\u0142\u00f3wnej\r\n           szko\u0142y w sekcji \u201eWybrane wydarzenia\u201d). -->\r\n      <a class=\"gl-k\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=7911\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/09\/IMG-20260901-WA0033.jpg\"\r\n             alt=\"Rozpocz\u0119cie roku szkolnego 2026\/2027 w Szkole Hilaris\"\r\n             loading=\"lazy\" decoding=\"async\" style=\"--kadr:center 45%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Rozpocz\u0119cie roku szkolnego 2026\/2027<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 ROK SZKOLNY 2025\/2026 (POPRZEDNI) \u2550\u2550\r\n       Sekcja bez podpisu pod nag\u0142\u00f3wkiem \u2014 napis \u201eNajnowsze wydarzenia z \u017cycia\r\n       szko\u0142y.\u201d przeniesiony zosta\u0142 do sekcji bie\u017c\u0105cego roku. -->\r\n  <div class=\"hx-sec\">\r\n    <h2 class=\"hx-h hx-h--sam\" data-anim>Rok szkolny 2025\/2026<\/h2>\r\n    <div class=\"gl-siatka\" id=\"glSiatka\">\r\n      <!-- Ok\u0142adka: kadr z wyst\u0119pu (uczniowie w kostiumach przy mikrofonach).\r\n           Inne zdj\u0119cia z tej galerii: ...\/2026\/05\/40-scaled.jpg,\r\n           ...\/2026\/05\/95-scaled.jpg, ...\/2026\/05\/150-scaled.jpg -->\r\n      <a class=\"gl-k gl-k--duzy\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=5214\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/05\/57-scaled.jpg\"\r\n             alt=\"Musical angloj\u0119zyczny \u201eAntoniusz i Kleopatra\u201d w Szkole Hilaris\"\r\n             loading=\"lazy\" decoding=\"async\" style=\"--kadr:center 40%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Musical angloj\u0119zyczny \u201eAntoniusz i Kleopatra\u201d<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n      <a class=\"gl-k\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=3902\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/11\/109-scaled.jpg\"\r\n             alt=\"Obchody 10-lecia Szko\u0142y Hilaris\" loading=\"lazy\" decoding=\"async\"\r\n             style=\"--kadr:center 35%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Obchody 10-lecia Szko\u0142y HILARIS<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n      <a class=\"gl-k\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4376\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/11\/Zdjecie-WhatsApp-2025-10-19-o-16.47.20_61f44b95.jpg\"\r\n             alt=\"Uroczyste rozdanie certyfikat\u00f3w j\u0119zykowych\" loading=\"lazy\" decoding=\"async\"\r\n             style=\"--kadr:center 35%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Uroczyste rozdanie certyfikat\u00f3w j\u0119zykowych<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n      <!-- Ok\u0142adka: kadr z trasy rajdu (dzieci w plenerze, maskotka lwa).\r\n           Inne zdj\u0119cia z tej galerii: ...\/2025\/10\/342-scaled.jpg,\r\n           ...\/2025\/10\/120-scaled.jpg, ...\/2025\/10\/300-scaled.jpg -->\r\n      <a class=\"gl-k\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=3351\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/10\/227-1.jpg\"\r\n             alt=\"IX Rodzinny Rajd Pieszy \u201eW boskim towarzystwie\u201d\" loading=\"lazy\" decoding=\"async\"\r\n             style=\"--kadr:center 40%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">IX Rodzinny Rajd Pieszy \u201eW boskim towarzystwie\u201d<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n      <a class=\"gl-k\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4937\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/10\/14-1-scaled.jpg\"\r\n             alt=\"Uroczysto\u015b\u0107 \u015blubowania uczni\u00f3w klas pierwszych\" loading=\"lazy\" decoding=\"async\"\r\n             style=\"--kadr:center 35%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Uroczysto\u015b\u0107 \u015blubowania uczni\u00f3w klas I<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n      <a class=\"gl-k\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4414\" data-anim>\r\n        <!-- Kadr ustawiony na sylwetki przy mikrofonie (g\u00f3rna cz\u0119\u015b\u0107 zdj\u0119cia).\r\n             --kadr dzia\u0142a jak suwak po zdj\u0119ciu w pionie: 0% = sama g\u00f3ra,\r\n             100% = sam d\u00f3\u0142. Je\u015bli twarze maj\u0105 by\u0107 wy\u017cej lub ni\u017cej w kaflu,\r\n             wystarczy poruszy\u0107 t\u0119 jedn\u0105 liczb\u0119 o kilka punkt\u00f3w. -->\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/11\/IMG-20251019-WA0061.jpg\"\r\n             alt=\"Rozpocz\u0119cie roku szkolnego 2025\/2026\" loading=\"lazy\" decoding=\"async\"\r\n             style=\"--kadr:center 30%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Rozpocz\u0119cie roku szkolnego 2025\/2026<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n      <a class=\"gl-k\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=5055\" data-anim>\r\n        <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/02\/kopia-obraz-codziennosc.jpg\"\r\n             alt=\"Hilarisowa codzienno\u015b\u0107 \u2014 zdj\u0119cia ze zwyk\u0142ych szkolnych dni\"\r\n             loading=\"lazy\" decoding=\"async\" style=\"--kadr:center 40%\">\r\n        <span class=\"gl-k__tlo\" aria-hidden=\"true\"><\/span>\r\n        <span class=\"gl-k__tresc\">\r\n          <span class=\"gl-k__tyt\">Hilarisowa codzienno\u015b\u0107<\/span>\r\n          <span class=\"gl-k__kreska\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"gl-k__akcja\">Zobacz zdj\u0119cia\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/span>\r\n        <\/span>\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 GALERIA ARCHIWALNA \u2550\u2550 -->\r\n  <div class=\"gl-arch\" id=\"glArch\">\r\n    <div class=\"gl-arch__txt\">\r\n      <p class=\"hx-kicker\">Poprzednie lata<\/p>\r\n      <h2 class=\"gl-arch__t\">Galeria wydarze\u0144 archiwalnych<\/h2>\r\n      <p class=\"gl-arch__p\">Tu znajduj\u0105 si\u0119 najciekawsze zdj\u0119cia z naszej dzia\u0142alno\u015bci\r\n        z poprzednich lat.<\/p>\r\n      <a class=\"gl-cta\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=3117\">Przejd\u017a do archiwum\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/a>\r\n    <\/div>\r\n    <div class=\"gl-arch__foto\">\r\n      <img src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/received_9753887631373914.jpeg\"\r\n           alt=\"Archiwalne zdj\u0119cie z wydarzenia w Szkole Hilaris\" loading=\"lazy\" decoding=\"async\">\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 POWI\u0104ZANE STRONY \u2550\u2550 -->\r\n  <div class=\"hx-sec\">\r\n    <h2 class=\"hx-h\" data-anim>Powi\u0105zane strony<\/h2>\r\n    <div class=\"hx-grid\" style=\"--cols:2;--cols-d:4\">\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=2702\" style=\"--c:#D9A417\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2.5\"\/><path d=\"M8 2.5v5M16 2.5v5M3 10h18\"\/><\/svg><\/span>\r\n        <b>Kalendarz roku<\/b><u>terminy i wydarzenia<\/u><\/a>\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=339\" style=\"--c:#3E8E5A\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"8.6\"\/><circle cx=\"12\" cy=\"12\" r=\"4.4\"\/><circle cx=\"12\" cy=\"12\" r=\"1\"\/><\/svg><\/span>\r\n        <b>Misja i wizja<\/b><u>w co wierzymy<\/u><\/a>\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=357\" style=\"--c:#8B54C4\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2.9 2.9 7.5 12 12.1l9.1-4.6z\"\/><path d=\"m2.9 12.1 9.1 4.6 9.1-4.6\"\/><path d=\"m2.9 16.5 9.1 4.6 9.1-4.6\"\/><\/svg><\/span>\r\n        <b>Dwuj\u0119zyczno\u015b\u0107<\/b><u>jak uczymy j\u0119zyk\u00f3w<\/u><\/a>\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=342\" style=\"--c:#2E86C8\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8.6\" r=\"3.2\"\/><path d=\"M2.9 19.4c0-3.4 2.7-5.6 6.1-5.6s6.1 2.2 6.1 5.6\"\/><circle cx=\"17.6\" cy=\"10.2\" r=\"2.4\"\/><path d=\"M15.9 19.4c0-2.6 1.9-4.2 4.2-4.2\"\/><\/svg><\/span>\r\n        <b>Nasz zesp\u00f3\u0142<\/b><u>kto uczy w Hilaris<\/u><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 PASEK SZYBKICH AKCJI (telefon) \u2550\u2550 -->\r\n  <nav class=\"hx-bar\" aria-label=\"Szybkie akcje\">\r\n    <a href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H6M11 6l-6 6 6 6\"\/><\/svg>\r\n      Szko\u0142a<\/a>\r\n    <a class=\"is-main\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4127\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2.5\"\/><path d=\"M8 2.5v5M16 2.5v5M3 10h18\"\/><path d=\"M9 15.2l2.1 2.1L15.4 13\"\/><\/svg>\r\n      Spotkanie<\/a>\r\n    <a href=\"tel:+48224985525\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z\"\/><\/svg>\r\n      Zadzwo\u0144<\/a>\r\n  <\/nav>\r\n <\/div>\r\n<\/section>\r\n<script>\r\n\/* ==========================================================================\r\n   HILARIS \u2014 GALERIA: interakcje\r\n   Skrypt tylko ULEPSZA stron\u0119. Gdyby si\u0119 nie wykona\u0142, ca\u0142a tre\u015b\u0107 i tak jest\r\n   widoczna (siedzi w HTML) \u2014 zniknie jedynie animacja wej\u015bcia i ruch zdj\u0119cia\r\n   w panelu archiwum.\r\n   ========================================================================== *\/\r\n(function(){\r\n  'use strict';\r\n  function start(){\r\n    var ROOT = document.getElementById('hil-gal');\r\n    if(!ROOT || ROOT.getAttribute('data-gotowe')) return;\r\n    ROOT.setAttribute('data-gotowe','1');\r\n    var q  = function(s){ return ROOT.querySelector(s); };\r\n    var qa = function(s){ return Array.prototype.slice.call(ROOT.querySelectorAll(s)); };\r\n    var maloRuchu = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    \/* \u2550\u2550 1. ANIMACJE WEJ\u015aCIA \u2550\u2550\r\n       Po zako\u0144czeniu animacji usuwamy atrybut data-anim, \u017ceby element wr\u00f3ci\u0142\r\n       do zupe\u0142nie zwyk\u0142ego stanu \u2014 inaczej jego regu\u0142a \u201etransform:none\u201d by\u0142aby\r\n       silniejsza ni\u017c uniesienie kafla przy najechaniu i efekt by nie zadzia\u0142a\u0142. *\/\r\n    function odslon(el){\r\n      el.classList.add('in');\r\n      window.setTimeout(function(){ el.removeAttribute('data-anim'); }, 800);\r\n    }\r\n    if(!maloRuchu && 'IntersectionObserver' in window){\r\n      ROOT.classList.add('gl-js');\r\n      var io = new IntersectionObserver(function(w){\r\n        w.forEach(function(x, n){\r\n          if(!x.isIntersecting) return;\r\n          io.unobserve(x.target);\r\n          window.setTimeout(function(){ odslon(x.target); }, n * 70);\r\n        });\r\n      }, {threshold:.12, rootMargin:'0px 0px -5% 0px'});\r\n      qa('[data-anim]').forEach(function(el){ io.observe(el); });\r\n      \/* bezpiecznik: po 4 s wszystko jest widoczne, cokolwiek by si\u0119 sta\u0142o *\/\r\n      window.setTimeout(function(){ qa('[data-anim]').forEach(odslon); }, 4000);\r\n    }\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       2. PRZESUWANIE ZDJ\u0118CIA W PANELU ARCHIWUM\r\n       ---------------------------------------------------------------------\r\n       Zdj\u0119cie jest wy\u017csze od swojej ramki (145%, patrz CSS), wi\u0119c ma zapas:\r\n       przewijaj\u0105c stron\u0119, widzimy kolejne partie fotografii zamiast ci\u0105gle\r\n       tego samego wycinka. ZASIEG m\u00f3wi, jaka CZ\u0118\u015a\u0106 tego zapasu jest\r\n       wykorzystana \u2014 celowo nie ca\u0142o\u015b\u0107, \u017ceby na ko\u0144cach ruchu kadr nie\r\n       doje\u017cd\u017ca\u0142 do samej kraw\u0119dzi zdj\u0119cia.\r\n       Trzy rzeczy, przez kt\u00f3re to nie szarpie:\r\n         a) wysoko\u015b\u0107 okna zapami\u0119tujemy, zamiast czyta\u0107 przy ka\u017cdej klatce \u2014\r\n            na telefonie pasek adresu chowa si\u0119 w trakcie przewijania i okno\r\n            ro\u015bnie o kilkadziesi\u0105t pikseli, co dawa\u0142oby przeskok obrazu;\r\n         b) najpierw robimy pomiar, potem zapis stylu \u2014 przeplatanie jednego\r\n            z drugim zmusza przegl\u0105dark\u0119 do przeliczania uk\u0142adu strony;\r\n         c) sta\u0142e wymiary mierzymy raz, nie co klatk\u0119.\r\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    var ZASIEG = 0.62;\r\n    var PROG_OKNA = 150;   \/* o ile px musi zmieni\u0107 si\u0119 wysoko\u015b\u0107 okna, \u017ceby\r\n                              uzna\u0107 to za obr\u00f3t ekranu, a nie pasek adresu *\/\r\n    var foto = qa('.gl-arch__foto img').map(function(img){\r\n      return {img:img, ramka:img.parentNode, H:0, C:0, ost:null};\r\n    });\r\n    if(foto.length && !maloRuchu){\r\n      var czeka = false, WH = window.innerHeight, WW = window.innerWidth;\r\n      function zmierz(){\r\n        foto.forEach(function(o){\r\n          o.H = o.img.offsetHeight;\r\n          o.C = o.ramka.offsetHeight;\r\n        });\r\n      }\r\n      function przesun(){\r\n        var plan = [], i;\r\n        for(i = 0; i < foto.length; i++){\r\n          plan.push({o:foto[i], r:foto[i].ramka.getBoundingClientRect()});\r\n        }\r\n        for(i = 0; i < plan.length; i++){\r\n          var o = plan[i].o, r = plan[i].r;\r\n          if(!o.H || !o.C || o.H <= o.C + 4){ o.img.style.transform = ''; continue; }\r\n          if(r.bottom < -200 || r.top > WH + 200) continue;\r\n          var p = (WH * 0.90 - (r.top + r.height \/ 2)) \/ (WH * 0.72);\r\n          p = Math.max(0, Math.min(1, p));\r\n          var y = (o.C - o.H) * ZASIEG * (1 - p);\r\n          var txt = 'translate3d(0,' + y.toFixed(1) + 'px,0)';\r\n          if(txt === o.ost) continue;\r\n          o.ost = txt;\r\n          o.img.style.transform = txt;\r\n        }\r\n      }\r\n      window.addEventListener('scroll', function(){\r\n        if(czeka) return; czeka = true;\r\n        window.requestAnimationFrame(function(){ przesun(); czeka = false; });\r\n      }, {passive:true});\r\n      window.addEventListener('resize', function(){\r\n        var nW = window.innerWidth, nH = window.innerHeight;\r\n        if(nW === WW && Math.abs(nH - WH) < PROG_OKNA) return;\r\n        WW = nW; WH = nH;\r\n        zmierz(); przesun();\r\n      });\r\n      foto.forEach(function(o){\r\n        if(o.img.complete) return;\r\n        o.img.addEventListener('load', function(){ zmierz(); przesun(); }, {once:true});\r\n      });\r\n      zmierz();\r\n      przesun();\r\n    }\r\n    \/* je\u017celi na stronie jest rdze\u0144 Hilaris, korzystamy z jego funkcji porz\u0105dkuj\u0105cej *\/\r\n    if(window.HX && HX.sierotki){ try{ HX.sierotki(ROOT); }catch(e){} }\r\n  }\r\n  function odpal(){\r\n    try{ start(); }\r\n    catch(e){ if(window.console && console.error) console.error('Hilaris \u2014 galeria:', e); }\r\n  }\r\n  if(document.readyState === 'loading'){\r\n    document.addEventListener('DOMContentLoaded', odpal);\r\n  } else {\r\n    odpal();\r\n  }\r\n  \/* Elementor potrafi wstawi\u0107 widget po za\u0142adowaniu strony (podgl\u0105d na \u017cywo) *\/\r\n  if(window.jQuery){ jQuery(window).on('elementor\/frontend\/init', odpal); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Szko\u0142a Podstawowa Galeria Galeria wydarze\u0144 Uroczysto\u015bci, wyjazdy, wyst\u0119py i zwyczajne szkolne dni \u2014 zebrane w jednym miejscu. Prosimy wybra\u0107 wydarzenie, aby zobaczy\u0107 pe\u0142n\u0105 galeri\u0119 zdj\u0119\u0107. rok szkolny 2026\/2027 Rok szkolny 2026\/2027 Najnowsze wydarzenia z \u017cycia szko\u0142y. Rodzinny Rajd Hilaris 2026 Zobacz zdj\u0119cia Rozpocz\u0119cie roku szkolnego 2026\/2027 Zobacz zdj\u0119cia Rok szkolny 2025\/2026 Musical angloj\u0119zyczny \u201eAntoniusz i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":345,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3325","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/3325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3325"}],"version-history":[{"count":101,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/3325\/revisions"}],"predecessor-version":[{"id":8474,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/3325\/revisions\/8474"}],"up":[{"embeddable":true,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/345"}],"wp:attachment":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}