/* ── /dla-ngo — hero, trzy kafle, kwalifikacja obok formularza ──
   Reużywa komponentów .kontakt-* (kontakt.css). Tokeny z main.css. */

html { scroll-behavior: smooth; }
#zgloszenie { scroll-margin-top: 84px; }

.ngo-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

.ngo-hero { padding-top: 76px; text-align: center; }
.ngo-hero h1 { margin: 0 0 18px; font-family: var(--font-heading); font-size: var(--fs-hero); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); line-height: 1.1; color: var(--text); max-width: 20ch; margin-left: auto; margin-right: auto; }
.ngo-hero p { margin: 0 auto; max-width: 56ch; font-size: 18px; line-height: 1.6; color: var(--text); }
.ngo-hero-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding: 14px 26px; border-radius: var(--btn-radius); background: var(--brand); color: #fff; font-size: 15.5px; font-weight: 700; text-decoration: none; transition: filter .15s, transform .15s; }
.ngo-hero-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ngo-hero-cta svg { width: 14px; height: 14px; }

.ngo-tiles { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ngo-tile { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); padding: 26px; }
.ngo-tile-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--chip-radius); background: var(--brand-soft); color: var(--brand); margin-bottom: 16px; }
.ngo-tile-ic svg { width: 20px; height: 20px; }
.ngo-tile h3 { margin: 0 0 8px; font-family: var(--font-body); font-size: 17.5px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--text); }
.ngo-tile p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }

.ngo-grid { margin-top: 72px; padding-bottom: 92px; display: grid; grid-template-columns: 0.85fr 1.15fr; grid-template-rows: auto auto; column-gap: 44px; row-gap: 16px; align-items: start; }
/* Naglowek siedzi w pierwszym wierszu lewej kolumny, obie karty startuja w drugim
   - dzieki temu gorna krawedz formularza rowna sie z szarym panelem. */
.ngo-grid-head { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-heading); font-size: var(--fs-subhead, 1.6rem); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); line-height: 1.12; color: var(--text); }
.ngo-grid > .ngo-col { grid-column: 1; grid-row: 2; }
.ngo-grid > .kontakt-form-card { grid-column: 2; grid-row: 2; }
.ngo-who-panel { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 24px 26px; }
.ngo-who-panel p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--text); }
.ngo-col .kontakt-info { margin-top: 16px; }
.ngo-col .kontakt-info-link { display: block; margin-top: 2px; }

.ngo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.ngo-who-panel span { display: block; margin-top: 10px; font-size: 15px; color: var(--text-light); }

@media (max-width: 900px) {
  .ngo-wrap { padding: 0 20px; }
  .ngo-hero { padding-top: 48px; }
  .ngo-tiles { grid-template-columns: 1fr; margin-top: 40px; }
  .ngo-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; margin-top: 48px; padding-bottom: 64px; }
  .ngo-grid-head, .ngo-grid > .ngo-col, .ngo-grid > .kontakt-form-card { grid-column: 1; grid-row: auto; }
  .ngo-grid > .kontakt-form-card { margin-top: 16px; }
  .ngo-row { grid-template-columns: 1fr; }
}

/* Arkusz CF7 ma wyzsza specyficznosc niz .kontakt-form-card (.wpcf7 form
   .wpcf7-response-output), wiec ramke komunikatu zdejmujemy tutaj. */
.ngo-page .kontakt-form-card .wpcf7-response-output { border: 0; }