/*
Theme Name: SP4 Ceglany
Theme URI: https://sp4.zyrardow.pl
Author: HADNET
Author URI: https://hadnet.pl
Description: Nowoczesny, czysty motyw dla Szkoły Podstawowej nr 4 im. Mikołaja Reja w Żyrardowie. Paleta inspirowana ceglanym Żyrardowem (bordo + ciepłe szarości), duże zdjęcie powitalne, redakcyjna siatka aktualności. Klasyczny motyw PHP, łatwy do rozbudowy.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sp4-rej
Tags: education, custom-header, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar
*/

/* =========================================================
   1. PALETA / TOKENY  — kolory motywu w jednym miejscu
   ========================================================= */
:root {
  --brick:   #9E3B2E;   /* ceglany bordo — kolor wiodący */
  --brick-d: #7A2A20;
  --brick-t: #F3E7E4;
  /* paleta uzupełniająca (stonowana, dziedzictwowa) — koduje kategorie/skróty */
  --ochre:   #C08A2B;   /* złamane złoto */
  --ochre-d: #9C6E1E;
  --teal:    #2E7D74;   /* petrol/morska */
  --teal-d:  #225E57;
  --olive:   #5C7C3F;   /* przygaszona zieleń */
  --olive-d: #46612F;
  --indigo:  #3D4E86;   /* atramentowy błękit */
  --indigo-d:#2E3C68;
  --ink:     #1F1B1A;   /* tekst główny (ciepła czerń) */
  --slate:   #5A5550;   /* tekst drugorzędny (zaprawa) */
  --stone:   #EDE8E3;   /* jasne tło sekcji */
  --paper:   #FFFFFF;   /* karty, nagłówek */
  --line:    #E2DAD2;   /* cienkie linie */
  --ink-95:  rgba(31,27,26,.95);
  --ink-55:  rgba(31,27,26,.55);

  --wrap: 1200px;
  --radius: 10px;
  --radius-s: 6px;
  --shadow: 0 1px 2px rgba(31,27,26,.04), 0 12px 28px rgba(31,27,26,.06);
  --shadow-h: 0 6px 14px rgba(31,27,26,.08), 0 20px 44px rgba(31,27,26,.10);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space: clamp(2.4rem, 4.8vw, 3.8rem); /* odstęp między sekcjami */
}

/* =========================================================
   2. RESET / PODSTAWY
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brick); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
p { margin: 0 0 1em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; border-radius: 3px; }
.skip-link { position:absolute; left:8px; top:-60px; z-index:1000; background:var(--ink); color:#fff; padding:10px 16px; border-radius:6px; transition:top .2s; }
.skip-link:focus { top:8px; }

/* eyebrow — sygnatura: ceglana etykieta z kreską */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brick);
  margin: 0 0 1rem;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--brick); display:inline-block; }

/* przyciski — płaskie, nowoczesne */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem; line-height: 1;
  padding: .85em 1.5em; border-radius: var(--radius-s); border: 1.5px solid var(--brick);
  background: var(--brick); color: #fff !important; text-decoration: none !important;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s, color .15s;
}
.btn:hover { background: var(--brick-d); border-color: var(--brick-d); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink) !important; border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.btn--on-photo { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color:#fff !important; backdrop-filter: blur(4px); }
.btn--on-photo:hover { background:#fff; color: var(--ink) !important; border-color:#fff; }
.arrow-link { font-weight: 600; color: var(--brick); display:inline-flex; align-items:center; gap:.4em; }
.arrow-link:hover { text-decoration: none; gap:.7em; }

/* =========================================================
   3. PASEK UŻYTKOWY (utility bar)
   ========================================================= */
.utilbar { background: var(--ink); color: rgba(255,255,255,.7); font-size: .82rem; }
.utilbar__inner { display:flex; align-items:center; gap: 1.5rem; padding: .45rem 0; flex-wrap: wrap; }
.utilbar a { color: rgba(255,255,255,.85); }
.utilbar a:hover { color:#fff; }
.utilbar__spacer { margin-left:auto; }
.utilbar__links { display:flex; gap: 1.2rem; }

/* =========================================================
   4. NAGŁÓWEK / NAWIGACJA
   ========================================================= */
.site-header { background: var(--paper); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--line); }
.site-header__inner { display:flex; align-items:center; gap:1.5rem; padding: 1rem 0; flex-wrap:nowrap; }
.brand { display:flex; align-items:center; gap:.85rem; text-decoration:none !important; }
.brand__logo { width:52px; height:52px; object-fit:contain; }
.brand__mark {
  width:52px; height:52px; flex:0 0 auto; border-radius: var(--radius-s);
  display:grid; place-items:center; background: var(--brick); color:#fff;
  font-family: var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing: -.02em;
}
.brand__text { line-height:1.15; max-width: 12rem; }
.brand__name { font-family: var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink); }
.brand__sub { font-size:.74rem; color:var(--slate); letter-spacing:.01em; }

.nav-toggle { margin-left:auto; display:none; background:var(--stone); border:1px solid var(--line); cursor:pointer; width:46px; height:46px; border-radius:var(--radius-s); padding:0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; margin:0 auto; transition: transform .2s, opacity .2s; position:relative; }
.nav-toggle span::before { position:absolute; top:-6px; }
.nav-toggle span::after { position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.main-nav { margin-left:auto; overflow-x:visible; }
.main-nav > ul { list-style:none; display:flex; align-items:center; gap:.2rem; margin:0; padding:0; flex-wrap:nowrap; white-space:nowrap; }
.main-nav > ul > li { flex:0 0 auto; position:relative; }
.main-nav a { display:block; padding:.5em .85em; border-radius:var(--radius-s); color:var(--ink); font-weight:500; font-size:.98rem; text-decoration:none !important; transition: color .15s, background .15s; white-space:nowrap; }
.main-nav a:hover, .main-nav .current-menu-item > a { color: var(--brick); }
.main-nav .current-menu-item > a { position:relative; }
.main-nav .current-menu-item > a::after {
  content:"";
  position:absolute;
  left:0.85em;
  right:0.85em;
  bottom:0.3em;
  height:2px;
  background:var(--brick);
  border-radius:999px;
}
.main-nav li.menu-item-has-children > a {
  padding-right: 1.7em;
  position: relative;
}
.main-nav li.menu-item-has-children > a::after {
  content: "▾";
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  line-height: 1;
  opacity: 0.75;
}
.main-nav .sub-menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  margin:0.25rem 0 0;
  padding:.35rem;
  list-style:none;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  box-shadow:var(--shadow);
  z-index:200;
  flex-direction:column;
  align-items:stretch;
}
.main-nav li.is-open > .sub-menu {
  display:flex;
}
.main-nav .sub-menu li { width:100%; }
.main-nav .sub-menu a { white-space:normal; }
.main-nav .sub-menu .sub-menu {
  top:0;
  left:100%;
  margin:0 0 0 .25rem;
}

/* =========================================================
   5. HERO — duże zdjęcie powitalne
   ========================================================= */
.hero {
  position: relative; isolation:isolate; min-height: clamp(430px, 70vh, 760px);
  display:flex; align-items:flex-end; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(158,59,46,0.98) 0%, rgba(122,42,32,0.95) 48%, rgba(94,31,23,0.97) 100%);
}
.hero__bg {
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  background-color: var(--brick);
}
.hero__bg--fallback {
  background:
    linear-gradient(135deg, rgba(158,59,46,0.98) 0%, rgba(122,42,32,0.95) 55%, rgba(94,31,23,0.97) 100%);
}
.hero::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.26) 0%, transparent 35%, transparent 70%, rgba(0,0,0,.18) 100%),
    radial-gradient(circle at top left, rgba(255,255,255,.18) 0 14%, transparent 14.5%);
  opacity:.9;
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to top, rgba(31,27,26,.95) 0%, rgba(31,27,26,.70) 38%, rgba(31,27,26,.22) 78%, rgba(31,27,26,.10) 100%);
}
.hero__inner {
  position:relative; z-index:3; color:#fff;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  max-width: 760px;
  margin: clamp(2.2rem, 4vw, 3.4rem) 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}
.hero .eyebrow {
  color:#fff;
  margin-bottom: 1rem;
}
.hero .eyebrow::before { background:#fff; }
.hero__title {
  color:#fff;
  font-size: clamp(2.3rem, 5vw, 4rem);
  margin-bottom:.5em;
  line-height:1.08;
  text-shadow: 0 3px 16px rgba(0,0,0,.25);
}
.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(255,255,255,.95);
  max-width: 60ch;
  margin-bottom: 1.6rem;
}
.hero__cta { display:flex; gap:.8rem; flex-wrap:wrap; }

/* =========================================================
   6. PASEK WAŻNYCH KOMUNIKATÓW
   ========================================================= */
.alerts { background: var(--brick); color:#fff; }
.alerts__inner { display:flex; align-items:center; gap:1.2rem; padding:.9rem 0; flex-wrap:wrap; }
.alerts__label { font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; border:1.5px solid rgba(255,255,255,.6); padding:.3em .7em; border-radius:999px; white-space:nowrap; }
.alerts__list { display:flex; gap:1.5rem; flex-wrap:wrap; flex:1; }
.alerts__item { color:#fff !important; font-weight:500; display:inline-flex; gap:.5em; align-items:center; }
.alerts__item:hover { text-decoration:underline; }
.alerts__item time { opacity:.75; font-size:.85rem; }

/* =========================================================
   7. SEKCJE / NAGŁÓWKI
   ========================================================= */
.section { padding-block: calc(var(--space) * 0.8); }
.section--stone { background: var(--stone); }
.section--alerts {
  background: linear-gradient(135deg, rgba(158,59,46,0.06), rgba(192,138,43,0.08));
  border-block: 1px solid rgba(158,59,46,0.12);
}
.alerts-list {
  display:grid; gap:.8rem;
}
.alerts-list__item {
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(158,59,46,0.12);
  border-radius:var(--radius-s);
  color:var(--ink);
  text-decoration:none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.alerts-list__item:hover {
  transform: translateY(-1px);
  box-shadow:var(--shadow);
  border-color:var(--brick);
  text-decoration:none;
}
.alerts-list__icon {
  flex:0 0 auto; width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; background:var(--brick); color:#fff;
  font-weight:700;
}
.alerts-list__title {
  font-weight:600; line-height:1.3;
}
.section__head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom: 2.5rem; flex-wrap:wrap; }
.section__head h2 { margin:0; }
.section__head p { margin:.3rem 0 0; color:var(--slate); max-width:52ch; }

/* =========================================================
   8. SZYBKIE SKRÓTY — czyste bloki z konturową ikoną
   ========================================================= */
.shortcuts { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.shortcut { display:flex; flex-direction:column; gap:.6rem; padding: clamp(1.4rem,2.5vw,2rem); text-decoration:none !important; color:var(--ink); border-right:1px solid var(--line); transition: background .15s; position:relative; --accent: var(--brick); }
.shortcut:last-child { border-right:0; }
.shortcut::before { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition: transform .2s; }
.shortcut:hover { background: var(--stone); }
.shortcut:hover::before { transform: scaleX(1); }
.shortcut__icon { width:44px; height:44px; color:#fff; background:var(--accent); border-radius:var(--radius-s); display:grid; place-items:center; padding:9px; }
.shortcut__icon svg { width:100%; height:100%; }
.shortcut__title { font-family:var(--font-display); font-weight:600; font-size:1.25rem; }
.shortcut__sub { color:var(--slate); font-size:.92rem; line-height:1.5; }
.shortcut__more { margin-top:auto; color:var(--accent); font-weight:600; font-size:.9rem; display:inline-flex; gap:.35em; }
/* rotacja kolorów skrótów */
.shortcut.s0 { --accent: var(--brick); }
.shortcut.s1 { --accent: var(--ochre); }
.shortcut.s2 { --accent: var(--teal); }
.shortcut.s3 { --accent: var(--olive); }
.shortcut.s4 { --accent: var(--indigo); }

/* =========================================================
   9. AKTUALNOŚCI — redakcyjna siatka kart
   ========================================================= */
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: clamp(1.5rem, 2.5vw, 2.2rem); }
.card { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition: box-shadow .2s, transform .2s, border-color .2s; position:relative; --accent: var(--brick); }
.card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); z-index:2; }
.card:hover { box-shadow:var(--shadow-h); transform: translateY(-3px); border-color: transparent; }
.card__media { aspect-ratio: 16/10; background:var(--stone); overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; transition: transform .35s; }
.card:hover .card__media img { transform: scale(1.04); }
.card__media--empty { display:grid; place-items:center; background: linear-gradient(135deg, var(--stone), #fff); }
.card__media--empty svg { width:44px; height:44px; color:var(--line); }
.card__body { padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card__cat { font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.card__title { font-family:var(--font-display); font-weight:600; font-size:1.28rem; line-height:1.2; margin:0; }
.card__title a { color:var(--ink); text-decoration:none; }
.card:hover .card__title a { color:var(--accent); }
.card__excerpt { color:var(--slate); font-size:.96rem; margin:0; }
.card__date { margin-top:auto; font-size:.85rem; color:var(--slate); }
/* kolor karty wg kategorii */
.card.k0 { --accent: var(--brick); }
.card.k1 { --accent: var(--ochre); }
.card.k2 { --accent: var(--teal); }
.card.k3 { --accent: var(--olive); }
.card.k4 { --accent: var(--indigo); }

/* =========================================================
   10. PASEK PATRONA
   ========================================================= */
.patron { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.patron__media { aspect-ratio: 4/3; background:var(--brick); border-radius:var(--radius); overflow:hidden; position:relative; }
.patron__media img { width:100%; height:100%; object-fit:cover; }
.patron__media--empty { display:grid; place-items:center; color:rgba(255,255,255,.5); font-family:var(--font-display); font-size:5rem; background:linear-gradient(135deg,var(--brick),var(--brick-d)); }
.patron__quote { font-family:var(--font-display); font-size: clamp(1.4rem,2.2vw,1.9rem); line-height:1.35; color:var(--ink); margin:.5rem 0 1rem; }
.patron__cite { color:var(--slate); font-style:normal; font-weight:600; }

/* =========================================================
   11. UKŁAD TREŚCI + SIDEBAR (wpisy/strony/archiwa)
   ========================================================= */
.content-area { padding-block: clamp(2.5rem,5vw,4rem); }
.has-sidebar { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(2rem,4vw,3.5rem); align-items:start; }
.entry { max-width: 100%; }
.entry__cat { color:var(--brick); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.entry__title { margin:.4rem 0 .6rem; }
.entry__meta { color:var(--slate); font-size:.92rem; margin-bottom:1.6rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line); }
.entry__media { margin:0 0 1.8rem; border-radius:var(--radius); overflow:hidden; }
.entry-content { font-size:1.08rem; }
.entry-content > * { margin-bottom:1.1em; }
.entry-content h2 { margin-top:1.6em; font-size:1.7rem; }
.entry-content h3 { margin-top:1.4em; }
.entry-content img { border-radius:var(--radius-s); }
.entry-content a { text-decoration:underline; text-underline-offset:2px; }
.entry-content blockquote { margin:1.6em 0; padding:.4em 0 .4em 1.4em; border-left:3px solid var(--brick); font-family:var(--font-display); font-size:1.3rem; color:var(--ink); }
.entry-content table { width:100%; border-collapse:collapse; font-size:.98rem; }
.entry-content th, .entry-content td { border:1px solid var(--line); padding:.6em .85em; text-align:left; }
.entry-content th { background:var(--stone); font-weight:600; }

.sidebar { display:flex; flex-direction:column; gap:1.8rem; position:sticky; top:90px; }
.widget { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.widget-title { font-family:var(--font-display); font-size:1.15rem; margin:0 0 1rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.widget ul { list-style:none; margin:0; padding:0; }
.widget li { padding:.5rem 0; border-bottom:1px solid var(--line); }
.widget li:last-child { border-bottom:0; }
.widget a { color:var(--ink); }
.widget a:hover { color:var(--brick); }

.search-form { display:flex; gap:.5rem; }
.search-form input[type="search"] { flex:1; border:1px solid var(--line); border-radius:var(--radius-s); padding:.6em .9em; font:inherit; background:#fff; }
.search-form input[type="search"]:focus { border-color:var(--brick); outline:none; }
.search-form button { border:0; background:var(--brick); color:#fff; border-radius:var(--radius-s); padding:0 1.2em; font-weight:600; cursor:pointer; }
.search-form button:hover { background:var(--brick-d); }

.pagination { margin-top: clamp(2rem,4vw,3rem); }
.pagination .nav-links { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; }
.pagination a,
.pagination span,
.pagination .current,
.pagination .dots {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 .8em;
  border-radius:999px; border:1px solid var(--line);
  font-weight:600; color:var(--ink); background:var(--paper);
  text-decoration:none; transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.pagination a:hover,
.pagination a:focus-visible {
  border-color:var(--brick); color:var(--brick); transform:translateY(-1px); text-decoration:none;
}
.pagination .current {
  background:var(--brick); border-color:var(--brick); color:#fff;
}
.pagination .dots {
  border-color:transparent; background:transparent; color:var(--slate); cursor:default;
}

/* =========================================================
   12. STOPKA
   ========================================================= */
.site-footer { margin-top: var(--space); background:var(--ink); color:rgba(255,255,255,.72); border-top:4px solid var(--brick); }
.site-footer a { color:rgba(255,255,255,.9); }
.site-footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem,3vw,2.5rem); padding: clamp(2.5rem,5vw,4rem) 0; }
.footer-col { min-width:0; }
.footer-col h3 { color:#fff; font-size:1.05rem; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--brick); display:inline-block; }
.footer-col:nth-child(2) h3 { border-color: var(--ochre); }
.footer-col:nth-child(3) h3 { border-color: var(--teal); }
.footer-col:nth-child(4) h3 { border-color: var(--olive); }
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { padding:.32rem 0; }
.footer-col .widget,
.footer-col .widget * { color:rgba(255,255,255,.9); }
.footer-col .widget { background:transparent; border:0; padding:0; box-shadow:none; }
.footer-col .widget-title { color:#fff; border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:.6rem; }
.footer-col .search-form { display:flex; gap:.5rem; }
.footer-col .search-form input[type="search"] {
  flex:1; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-s);
  padding:.7em .9em; font:inherit; background:rgba(255,255,255,.12); color:#fff;
}
.footer-col .search-form input[type="search"]::placeholder { color:rgba(255,255,255,.72); }
.footer-col .search-form input[type="search"]:focus {
  border-color:rgba(255,255,255,.45); outline:none; background:rgba(255,255,255,.16);
}
.footer-col .search-form button {
  border:0; background:var(--brick); color:#fff; border-radius:var(--radius-s); padding:0 1.2em; font-weight:600; cursor:pointer;
}
.footer-col .search-form button:hover { background:var(--brick-d); }
.footer-col .widget a { color:rgba(255,255,255,.92); }
.footer-col .widget a:hover { color:#fff; }
.footer-about__name { font-family:var(--font-display); font-size:1.2rem; color:#fff; margin-bottom:.4rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:1.1rem 0; font-size:.86rem; }
.footer-bottom .wrap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* =========================================================
   13. RESPONSYWNOŚĆ
   ========================================================= */
@media (max-width: 980px) {
  .has-sidebar { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .patron { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .shortcut { border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width: 820px) {
  .nav-toggle { display:grid; place-items:center; }
  .site-header__inner { position:relative; }
  .main-nav { position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow); max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .main-nav.is-open { max-height:80vh; overflow:auto; }
  .main-nav > ul { flex-direction:column; align-items:stretch; padding:.6rem 1rem 1rem; gap:.1rem; }
  .main-nav a { padding:.8em 1em; }
  .main-nav .current-menu-item > a { box-shadow:none; color:var(--brick); }
  .hero { min-height: 520px; }
  .hero__inner { margin: 1.4rem 0; padding: 1.35rem 1.2rem; border-radius: 18px; }
  .hero__title { font-size: clamp(1.95rem, 5.4vw, 2.8rem); }
  .hero__lead { font-size: 1.02rem; }
  .hero__cta { flex-direction:column; align-items:flex-start; }
  .hero__cta .btn { width:100%; justify-content:center; }
  .section__head { align-items:flex-start; }
  .shortcuts { grid-template-columns: 1fr 1fr; }
  .shortcut { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .shortcut:nth-child(2n) { border-right:0; }
  .shortcut:nth-last-child(-n+2) { border-bottom:0; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 1rem, var(--wrap)); }
  .utilbar__inner { gap:.6rem; padding:.35rem 0; }
  .brand__name { font-size: 1rem; }
  .brand__sub { display:none; }
  .hero { min-height: 480px; }
  .hero__inner { margin: 1rem 0; padding: 1.1rem .95rem; }
  .hero__title { font-size: clamp(1.65rem, 6.8vw, 2.25rem); }
  .hero__lead { font-size: .96rem; margin-bottom: 1.1rem; }
  .hero__cta .btn { width:100%; justify-content:center; }
  .alerts__inner { align-items:flex-start; flex-direction:column; gap:.65rem; }
  .section { padding-block: clamp(2rem, 7vw, 2.8rem); }
  .shortcuts { grid-template-columns:1fr; }
  .shortcut { border-right:0; border-bottom:1px solid var(--line); }
  .shortcut:last-child { border-bottom:0; }
  .cards { grid-template-columns:1fr; gap:1.1rem; }
  .patron__quote { font-size: 1.2rem; }
  .footer-grid { grid-template-columns:1fr; }
  .utilbar__links { display:none; }
}