/* ============================================================
 * strony.css — style podstron informacyjnych (szablony Template Name):
 *   05 KPO, 06 Wolontariat, 07 Dołącz do nas, 08 Programy i inicjatywy,
 *   09 Kontakt.
 *
 * Reużywa tokenów (granat --primary*), .container, .btn*, .eq, .cta*
 * z tokens/base/components/sections. Ponieważ projekty.css i home.css
 * NIE są tu ładowane, hero (.page-hero/.breadcrumb/.page-title) oraz
 * akordeon (.faq-*) są tu odtworzone 1:1 (kolory granatowe). Akordeony
 * używają klas FAQ, więc steruje nimi globalny main.js (initFaq).
 *
 * Mobile-first w sensie: bazowe reguły + breakpointy z makiet (max-width).
 * Kolory wyłącznie granatowe (--primary*), bez teal. Bez Google Fonts.
 * Klasy 1:1 z makietami 05–09.
 * ============================================================ */

/* Hero leży tuż pod stałym nagłówkiem. .site-main ma już padding-top var(--header-h)
   (components.css) — dlatego hero NIE dostaje własnego marginesu, by uniknąć
   podwójnego odstępu. */
.site-main > .page-hero { margin-top: 0; }

/* ════════════════════════════════════════════════════════════
 * 1. HERO (wspólny dla 05–09)
 * ════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--primary);
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 5vw, 64px);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(76, 176, 80, .08), transparent 50%, rgba(232, 146, 46, .06));
}
.page-hero::after {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 146, 46, .08), transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: .76rem;
  color: rgba(255, 255, 255, .75);
  font-weight: 300;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255, 255, 255, .85); transition: color .2s; }
.breadcrumb a:hover { color: var(--leaf-orange); }
.breadcrumb svg { width: 12px; height: 12px; stroke: rgba(255, 255, 255, .6); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .9); }

.page-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.page-desc {
  font-size: .92rem;
  color: rgba(255, 255, 255, .7);
  max-width: 620px;
  font-weight: 300;
  line-height: 1.8;
}

/* Pasek logotypów UE/KPO w hero (05) */
.eu-bar {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  margin-top: 28px;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(0, 52, 103, .08);
}
.eu-bar img { height: clamp(28px, 3.5vw, 40px); width: auto; flex-shrink: 0; }

/* Przyciski w hero (06) */
.hero-btns { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* Licznik w hero (08) */
.hero-stat-row { display: flex; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.hero-stat { display: flex; align-items: baseline; gap: 6px; }
.hero-stat-num { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--white); }
.hero-stat-label { font-size: .78rem; color: rgba(255, 255, 255, .55); font-weight: 300; }

/* ════════════════════════════════════════════════════════════
 * 2. UKŁAD (dwie kolumny: treść + lepki sidebar)
 * ════════════════════════════════════════════════════════════ */
.page-layout { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px); }
.page-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(32px, 4vw, 48px);
  align-items: start;
}
.page-grid--contact { grid-template-columns: 1fr 380px; }

/* ════════════════════════════════════════════════════════════
 * 3. KARTA TREŚCI + typografia
 * ════════════════════════════════════════════════════════════ */
.content-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 44px);
  min-width: 0;
}
.content-card h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  margin: 32px 0 14px;
  line-height: 1.3;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-light);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
/* Kotwice „Przejdź do” w sidebarze Programów celują w .faq-item, nie w h2,
   więc bez własnego odstępu nagłówek chowa się pod stałym paskiem. Wartość
   liczona ze zmiennej, żeby nie rozjechała się przy zmianie wysokości paska
   (wcześniej było tu na sztywno 88 px przy pasku wysokim na 100 px). */
.faq-item[id],
.content-card [id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.content-card > h2:first-child,
.content-card > .prog-intro:first-child + h2 { margin-top: 0; }
.content-card p { font-size: .9rem; color: var(--text-mid); font-weight: 300; line-height: 1.85; margin-bottom: 14px; }
.content-card strong { font-weight: 500; color: var(--text); }
.content-card em { font-style: italic; color: var(--text-mid); }
.content-card ul:not(.check-list):not(.topic-list) { margin: 12px 0 18px; padding-left: 20px; }
.content-card ul:not(.check-list):not(.topic-list) li { font-size: .88rem; color: var(--text-mid); font-weight: 300; line-height: 1.8; margin-bottom: 6px; padding-left: 4px; }
.content-card ul:not(.check-list):not(.topic-list) li::marker { color: var(--leaf-orange); }
.content-card a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.content-card a:not(.btn):hover { color: var(--primary-mid); }
.content-card > p.intro,
.content-card .prog-intro { font-size: .95rem; color: var(--text-mid); font-weight: 300; line-height: 1.85; margin-bottom: 28px; }
.content-card .prog-intro p { font-size: .95rem; color: var(--text-mid); font-weight: 300; line-height: 1.85; margin-bottom: 14px; }
.content-card .prog-intro p:last-child { margin-bottom: 0; }
.content-outro { margin-top: 20px; }

/* ── Highlight / cytat (05) ── */
.highlight {
  background: linear-gradient(135deg, rgba(0, 52, 103, .03), rgba(232, 146, 46, .03));
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--leaf-orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 24px;
  margin: 20px 0;
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.85;
  font-weight: 300;
}
.highlight strong { color: var(--primary); font-weight: 600; }
.highlight em { color: var(--text); }

/* ── Kluczowa kwota (05) ── */
.key-figure {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--primary);
  color: var(--white);
  padding: 4px 14px;
  border-radius: var(--r);
  font-size: .92rem;
  font-weight: 600;
  font-family: var(--serif);
}

/* ── Lista z „ptaszkami” (05) ── */
.check-list { list-style: none; padding-left: 0; margin: 16px 0 20px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .88rem;
  color: var(--text-mid);
  font-weight: 300;
  line-height: 1.7;
}
.check-list li:last-child { border-bottom: none; }
.check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(76, 176, 80, .08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.check-icon svg { width: 12px; height: 12px; stroke: var(--leaf-green); fill: none; stroke-width: 2; }

/* ── Hashtagi (05) ── */
.hashtags { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.hashtags span { font-size: .82rem; font-weight: 600; color: var(--leaf-blue); background: rgba(59, 143, 212, .06); padding: 4px 12px; border-radius: var(--r); }

/* ════════════════════════════════════════════════════════════
 * 4. AKORDEON (klasy FAQ → steruje globalny main.js initFaq)
 *    Odtworzone z home.css (kolory granatowe) + wariant numerowany.
 * ════════════════════════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; }
.faq-item { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item:hover { border-color: var(--border); }
.faq-item.open { border-color: var(--primary); box-shadow: 0 6px 24px rgba(0, 52, 103, .06); }
.faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  -webkit-user-select: none;
  user-select: none;
}
.faq-q:hover { background: rgba(0, 52, 103, .03); }
.faq-q-text { flex: 1; font-size: .92rem; font-weight: 500; color: var(--text); line-height: 1.4; transition: color .3s; }
.faq-item.open .faq-q-text { color: var(--primary); font-weight: 600; }
.faq-toggle {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .3s, transform .3s;
}
.faq-item.open .faq-toggle { background: var(--primary); transform: rotate(45deg); }
.faq-toggle svg { width: 11px; height: 11px; stroke: var(--text-muted); stroke-width: 2; fill: none; transition: stroke .3s; }
.faq-item.open .faq-toggle svg { stroke: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-item.open .faq-a { max-height: 1200px; }
.faq-a-inner { padding: 4px 20px 20px; font-size: .88rem; color: var(--text-light); font-weight: 300; line-height: 1.85; }
.faq-a-inner p { margin-bottom: .75em; }
.faq-a-inner p:last-child { margin-bottom: 0; }

/* Wariant numerowany (06, 07, 08) */
.acc-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--cream);
  color: var(--text-muted);
  transition: background .3s, color .3s;
}
.faq-item.open .acc-num { background: var(--leaf-orange); color: #fff; }
.acc-numbered .faq-a-inner { padding-left: 62px; }

/* Cykliczne kolory numerów (08) */
.acc-cycle .faq-item:nth-child(5n+1).open .acc-num { background: var(--leaf-orange); }
.acc-cycle .faq-item:nth-child(5n+2).open .acc-num { background: var(--leaf-green); }
.acc-cycle .faq-item:nth-child(5n+3).open .acc-num { background: var(--leaf-blue); }
.acc-cycle .faq-item:nth-child(5n+4).open .acc-num { background: var(--leaf-purple); }
.acc-cycle .faq-item:nth-child(5n+5).open .acc-num { background: var(--leaf-pink); }

/* ════════════════════════════════════════════════════════════
 * 5. SIDEBAR (wspólny)
 * ════════════════════════════════════════════════════════════ */
.sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 24px); }
.side-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; }
.side-card-head { padding: 16px 20px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 8px; }
.side-card-head svg { width: 16px; height: 16px; stroke: var(--leaf-orange); fill: none; stroke-width: 1.5; flex-shrink: 0; }
.side-card-title { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); }
.side-card-body { padding: 20px; }

.side-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: background .2s, color .2s;
  font-size: .88rem; font-weight: 500;
  color: var(--text-mid);
}
.side-nav-item:last-child { border-bottom: none; }
.side-nav-item:hover { background: rgba(0, 52, 103, .05); color: var(--primary); }
.side-nav-item.active { background: rgba(232, 146, 46, .04); color: var(--primary); border-left: 3px solid var(--leaf-orange); }
.side-nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }

/* Kontakt w sidebarze */
.side-contact { display: flex; flex-direction: column; gap: 8px; }
.side-contact-link { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-mid); transition: color .2s; }
.side-contact-link svg { color: var(--text-muted); flex-shrink: 0; }
.side-contact-link:hover { color: var(--leaf-orange); }
.side-contact-addr { font-style: normal; font-size: .82rem; color: var(--text-light); font-weight: 300; margin-top: 4px; line-height: 1.5; }

/* Przycisk CTA pod sidebarem */
.side-cta-btn { width: 100%; justify-content: center; padding: 16px 28px; }

/* Szybkie linki (06) */
.quick-links { display: flex; flex-direction: column; }
.quick-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  font-size: .84rem; color: var(--text-mid); font-weight: 400;
  transition: background .2s, color .2s;
}
.quick-link:last-child { border-bottom: none; }
.quick-link:hover { background: rgba(0, 52, 103, .05); color: var(--primary); }
.quick-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }

/* Lista „Przejdź do” (08) */
.jump-list { display: flex; flex-direction: column; }
.jump-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-light);
  font-size: .82rem; color: var(--text-mid); font-weight: 400;
  transition: background .2s, color .2s;
  cursor: pointer;
}
.jump-link:last-child { border-bottom: none; }
.jump-link:hover { background: rgba(0, 52, 103, .05); color: var(--primary); }
.jump-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }

/* ── Lista informacji w sidebarze (05) ── */
.info-list { display: flex; flex-direction: column; gap: 14px; }
.info-item { display: flex; align-items: flex-start; gap: 10px; }
.info-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.info-icon--o { background: rgba(232, 146, 46, .08); color: var(--leaf-orange); }
.info-icon--g { background: rgba(76, 176, 80, .08); color: var(--leaf-green); }
.info-icon--b { background: rgba(59, 143, 212, .08); color: var(--leaf-blue); }
.info-icon--p { background: rgba(123, 94, 167, .08); color: var(--leaf-purple); }
.info-icon--t { background: rgba(0, 52, 103, .06); color: var(--primary); }
.info-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 1px; }
.info-value { font-size: .88rem; color: var(--text); font-weight: 500; line-height: 1.35; }
.info-value--sm { font-size: .82rem; }

/* ── Siatka wyników (05) ── */
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-card {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
  transition: border-color .3s, transform .3s;
}
.result-card:hover { border-color: var(--primary-light); transform: translateY(-2px); }
.result-num { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--primary); line-height: 1; }
.result-label { font-size: .68rem; color: var(--text-light); font-weight: 400; margin-top: 3px; line-height: 1.3; }

/* ── Statystyka w sidebarze (06) ── */
.side-stat { text-align: center; padding: 8px 0; }
.side-stat-num { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--primary); line-height: 1; }
.side-stat-label { font-size: .76rem; color: var(--text-light); font-weight: 400; margin-top: 4px; }
.side-stat-bar { height: 3px; border-radius: 2px; background: var(--border-light); margin-top: 10px; overflow: hidden; }
.side-stat-fill { height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--leaf-orange), var(--leaf-green)); }

/* ── Kroki w sidebarze (07) ── */
.steps-list { display: flex; flex-direction: column; }
.step-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-light); }
.step-item:last-child { border-bottom: none; }
.step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: .82rem; font-weight: 700; flex-shrink: 0; }
.step-item:nth-child(1) .step-num { background: rgba(232, 146, 46, .1); color: var(--leaf-orange); }
.step-item:nth-child(2) .step-num { background: rgba(76, 176, 80, .1); color: var(--leaf-green); }
.step-item:nth-child(3) .step-num { background: rgba(59, 143, 212, .1); color: var(--leaf-blue); }
.step-title { font-size: .84rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.step-desc { font-size: .76rem; color: var(--text-light); font-weight: 300; line-height: 1.5; margin-top: 2px; }

/* ── Tagi obszarów w sidebarze (07) ── */
.areas-grid { display: flex; flex-direction: column; gap: 8px; }
.area-tag {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid var(--border-light);
  font-size: .82rem; font-weight: 500; color: var(--text-mid);
  transition: border-color .2s, color .2s;
}
.area-tag:hover { border-color: var(--primary-light); color: var(--primary); }
.area-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
 * 6. WOLONTARIAT — pasek zdjęć + zagadnienia (06)
 * ════════════════════════════════════════════════════════════ */
.photo-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.photo-strip img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--r-md); }

.topic-list { list-style: none; padding: 0; margin: 16px 0 24px; }
.topic-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.topic-item:last-child { border-bottom: none; }
.topic-icon { width: 36px; height: 36px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.topic-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.topic-icon--o { background: rgba(232, 146, 46, .08); color: var(--leaf-orange); }
.topic-icon--b { background: rgba(59, 143, 212, .08); color: var(--leaf-blue); }
.topic-icon--p { background: rgba(123, 94, 167, .08); color: var(--leaf-purple); }
.topic-title { font-size: .88rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.topic-desc { font-size: .82rem; color: var(--text-light); font-weight: 300; line-height: 1.65; }

/* ════════════════════════════════════════════════════════════
 * 7. DOŁĄCZ DO NAS — korzyści, zdjęcia, ramka kontaktu (07)
 * ════════════════════════════════════════════════════════════ */
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 8px; }
.benefit-card {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 20px;
  transition: border-color .3s, transform .3s;
}
.benefit-card:hover { border-color: var(--primary-light); transform: translateY(-3px); }
.benefit-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: .9rem; font-weight: 700;
  margin-bottom: 12px;
}
.benefit-title { font-size: .92rem; font-weight: 600; color: var(--primary); margin-bottom: 8px; line-height: 1.35; }
.benefit-desc { font-size: .82rem; color: var(--text-light); font-weight: 300; line-height: 1.7; }

.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.photo-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--r-md); }

.contact-box {
  background: linear-gradient(135deg, rgba(0, 52, 103, .03), rgba(232, 146, 46, .03));
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 24px;
  margin-top: 8px;
}
.contact-box p { margin-bottom: 10px; }
.contact-box p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
 * 8. KONTAKT — formularz, mapa, dane (09)
 * ════════════════════════════════════════════════════════════ */
.form-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; min-width: 0; }
.form-header { padding: 28px clamp(24px, 3vw, 40px) 0; margin-bottom: 24px; }
.form-header-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.form-header-desc { font-size: .86rem; color: var(--text-light); font-weight: 300; }
.form-header-desc p { font-size: .86rem; color: var(--text-light); font-weight: 300; line-height: 1.7; margin-bottom: 8px; }
.form-header-desc p:last-child { margin-bottom: 0; }
.form-body { padding: 0 clamp(24px, 3vw, 40px) clamp(28px, 3vw, 40px); }

/* Klasy formularza z makiety (gdyby użyto ich w shortcode/HTML) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group--full { grid-column: 1 / -1; }
.form-label { font-size: .78rem; font-weight: 500; color: var(--text-mid); }
.form-label .req { color: var(--primary); }
.form-input, .form-textarea, .form-select { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); font-family: var(--sans); font-size: .88rem; color: var(--text); background: var(--white); transition: border-color .2s, box-shadow .2s; }
.form-textarea { resize: vertical; min-height: 120px; }
.form-submit { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--r); font-size: .88rem; font-weight: 500; border: none; cursor: pointer; font-family: var(--sans); transition: background .3s, transform .3s, box-shadow .3s; background: var(--leaf-orange); color: var(--primary); margin-top: 8px; }
/* Tak samo jak `.btn-orange`: napis granatowy, a hover rozjaśnia zamiast
   przyciemniać (patrz base.css). */
.form-submit:hover { background: #EE9C3C; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(232, 146, 46, .3); }
.form-note { font-size: .72rem; color: var(--text-light); margin-top: 12px; font-weight: 300; line-height: 1.6; }
.form-note a { color: var(--primary); text-decoration: underline; }

/* Komunikaty i walidacja formularza kontaktowego. */
.form-alert {
  padding: 12px 16px;
  border-radius: var(--r);
  font-size: .84rem;
  line-height: 1.5;
  margin-bottom: 20px;
  border: 1px solid;
}
.form-alert--ok  { background: rgba(76, 176, 80, .08);  border-color: rgba(76, 176, 80, .35);  color: #2E8B33; }
.form-alert--err { background: rgba(212, 91, 79, .07);  border-color: rgba(212, 91, 79, .35);  color: #B84234; }
.form-error { font-size: .74rem; color: #B84234; }
.form-input.is-error, .form-textarea.is-error, .form-select.is-error { border-color: #B84234; }
.form-input.is-error:focus, .form-textarea.is-error:focus, .form-select.is-error:focus { box-shadow: 0 0 0 3px rgba(212, 91, 79, .12); }
/* Pole-pułapka na boty: musi zostać w drzewie dokumentu, ale poza zasięgiem
   wzroku i czytników ekranu (stąd też aria-hidden i tabindex w markupie). */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Stylizacja dowolnego formularza (np. Contact Form 7) wewnątrz .form-body */
.form-body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-body textarea,
.form-body select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--text);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  margin-top: 4px;
}
.form-body textarea { resize: vertical; min-height: 120px; }
.form-body input:focus, .form-body textarea:focus, .form-body select:focus,
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(0, 52, 103, .06); }

/* Fokus klawiatury na polach formularza.
   Wcześniej reguły wyżej ustawiały `outline: none` bezwarunkowo i, ładując się
   po base.css, kasowały ramkę fokusu zadeklarowaną tam w :focus-visible.
   Zostawała ledwo widoczna poświata, a formularz kontaktowy to główna ścieżka
   kontaktu z fundacją. Teraz outline znika WYŁĄCZNIE przy kliknięciu myszą
   (:focus bez :focus-visible), a przy nawigacji Tabem ramka z base.css działa. */
.form-body input:focus:not(:focus-visible),
.form-body textarea:focus:not(:focus-visible),
.form-body select:focus:not(:focus-visible),
.form-input:focus:not(:focus-visible),
.form-textarea:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible) { outline: none; }
.form-body input::placeholder, .form-body textarea::placeholder,
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); font-weight: 300; }
/* Ten sam przycisk co `.form-submit`, tylko po selektorze typu — i to ON wygrywał,
   więc napis zostawał biały mimo poprawki wyżej. Trzymaj oba w zgodzie. */
.form-body input[type="submit"], .form-body button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--r); font-size: .88rem; font-weight: 500; border: none; cursor: pointer; font-family: var(--sans); background: var(--leaf-orange); color: var(--primary); transition: background .3s, transform .3s, box-shadow .3s; margin-top: 8px; }
.form-body input[type="submit"]:hover, .form-body button:hover { background: #EE9C3C; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(232, 146, 46, .3); }

/* Osadzona mapa */
.map-embed { width: 100%; height: 220px; background: var(--cream-warm); border-top: 1px solid var(--border-light); position: relative; overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: none; display: block; }

/* Dane kontaktowe w sidebarze */
.contact-list { display: flex; flex-direction: column; gap: 16px; }
.contact-item { display: flex; align-items: flex-start; gap: 12px; }
.contact-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.contact-icon--o { background: rgba(232, 146, 46, .08); color: var(--leaf-orange); }
.contact-icon--g { background: rgba(76, 176, 80, .08); color: var(--leaf-green); }
.contact-icon--b { background: rgba(59, 143, 212, .08); color: var(--leaf-blue); }
.contact-icon--p { background: rgba(123, 94, 167, .08); color: var(--leaf-purple); }
.contact-item-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 2px; }
.contact-item-value { font-size: .9rem; color: var(--text); font-weight: 500; line-height: 1.4; font-style: normal; }
.contact-item-value a { color: var(--text); transition: color .2s; }
.contact-item-value a:hover { color: var(--leaf-orange); }
.contact-item-value small { font-size: .82rem; font-weight: 300; color: var(--text-light); display: block; margin-top: 1px; }
.contact-item-value small a { color: var(--text-light); }

/* Godziny pracy */
.hours-grid { display: flex; flex-direction: column; gap: 8px; }
.hours-row { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; gap: 12px; }
.hours-day { color: var(--text-mid); font-weight: 400; }
.hours-time { color: var(--primary); font-weight: 600; font-size: .82rem; }
.hours-closed { color: var(--text-muted); font-weight: 300; font-style: italic; font-size: .82rem; }
.hours-text { font-size: .84rem; color: var(--text-mid); font-weight: 300; line-height: 1.7; }

/* ════════════════════════════════════════════════════════════
 * 9. RESPONSYWNOŚĆ (breakpointy z makiet)
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .page-grid,
  .page-grid--contact { grid-template-columns: 1fr; gap: 24px; }
  .sidebar { position: static; top: auto; order: -1; }
}

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .eu-bar { gap: 12px; }
  .eu-bar img { height: 24px; }
  .acc-numbered .faq-a-inner { padding-left: 20px; }
}

/* ── Zgoda RODO i klauzula informacyjna przy formularzu ──────
   Pole wyboru musi być łatwe do trafienia i czytelne, a klauzula dostępna
   bez opuszczania strony. <details> daje działanie z klawiatury bez JS. */
.form-consent { margin-top: 18px; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-mid);
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.form-check .req { color: var(--primary); }
.form-check.is-error { color: #B84234; }
.form-check.is-error input[type="checkbox"] { outline: 2px solid #B84234; outline-offset: 2px; }
.form-consent .form-error { display: block; margin: 6px 0 0 28px; }

.form-rodo { margin-top: 18px; border-top: 1px solid var(--border-light); padding-top: 14px; }
.form-rodo summary {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}
.form-rodo summary::-webkit-details-marker { display: none; }
/* Strzałka rysowana znakiem, żeby nie dokładać kolejnego SVG do markupu. */
.form-rodo summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s;
  flex-shrink: 0;
}
.form-rodo[open] summary::before { transform: rotate(45deg); }
.form-rodo summary:hover { color: var(--primary); }
.form-rodo-tresc { font-size: .76rem; line-height: 1.65; color: var(--text-light); padding: 10px 0 0 13px; }
.form-rodo-tresc ul { margin: 0; padding-left: 16px; }
.form-rodo-tresc li { margin-bottom: 6px; }
.form-rodo-tresc a { color: var(--primary); text-decoration: underline; }