/* =========================================================
   CERTYFIKATY I SZKOLENIA — page-certificates.php
   Wzorzec: webmountain-ux/system-strony.html → Szablony podstron → Certyfikaty i szkolenia
   Kolory wyłącznie z core/tokens.css.
========================================================= */

/* --- Hero: forest, tekst biały (jak O mnie) --- */
.certHero{
  background:var(--wm-forest);
  color:var(--wm-white);
  padding:40px 0 64px;
}
.certHero .h1{ color:var(--wm-white); margin-top:24px; }
/* Lead jak na stronie głównej (BRANDBOOK §2) */
.certHero__lead{
  font-size:18px;
  line-height:1.6;
  max-width:62ch;
  margin:0;
}
@media (max-width:760px){ .certHero__lead{ font-size:16px; } }

/* Okruszki na ciemnym: neoblue nie jako tekst na forest (BRANDBOOK §1) → biały */
.certHero .breadcrumbs a{ color:var(--wm-white); text-decoration:underline; text-underline-offset:3px; }
.certHero .breadcrumbs,
.certHero .breadcrumbs li::after{ color:var(--wm-forest-25); }

/* --- Sekcje --- */
.certSec{ padding:72px 0; }
.certSec--soft{ background:var(--wm-forest-10); }
.certSec h2{ margin:0 0 24px; }
.certSec__topic{ margin:36px 0 14px; font-size:20px; font-weight:700; }
.certSec h2 + .certSec__topic{ margin-top:0; }

/* --- Karty: obrys forest-25 na jasnym, biała karta na forest-10 --- */
.certGrid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.certGrid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.certCard{
  border:1px solid var(--wm-forest-25);
  border-radius:var(--radius);
  background:var(--wm-white);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.certCard h3{ margin:0; font-size:17px; font-weight:700; line-height:1.4; color:var(--wm-forest); }
.certCard p{ margin:0; font-size:15px; line-height:1.6; }
.certCard__meta{ color:var(--muted); font-size:14px !important; }
.certCard__link{
  margin-top:auto;
  padding-top:6px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--wm-neoblue);
  font-weight:600;
}

@media (max-width:960px){
  .certGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .certSec{ padding:48px 0; }
  .certGrid,
  .certGrid--2{ grid-template-columns:minmax(0,1fr); }
}