/* =========================================================
   KONTAKT — page-contact.php
   Wzorzec: webmountain-ux/system-strony.html → Szablony podstron → Kontakt
   Kolory wyłącznie z core/tokens.css.
========================================================= */

/* --- Hero: forest, tekst biały --- */
.contactHero{
  background:var(--wm-forest);
  color:var(--wm-white);
  padding:40px 0 56px;
}
.contactHero .kicker{ margin-top:24px; }
.contactHero .h1{ color:var(--wm-white); max-width:20ch; }
.contactHero__lead{ font-size:18px; line-height:1.6; max-width:56ch; margin:12px 0 0; }

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

/* --- Sekcje --- */
.contactSec{ padding:64px 0; }
.contactSec--cream{ background:var(--wm-cream); }
.contactSec h2{ margin:0 0 8px; }

/* --- Dwie drogi obok siebie --- */
.contactWays{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.contactWay{
  border-radius:var(--radius);
  background:var(--wm-forest);
  color:var(--wm-white);
  padding:32px;
  display:grid;
  gap:12px;
  align-content:start;
  justify-items:start;
}
.contactWay h2{ font-size:24px; color:var(--wm-white); }
.contactWay p{ margin:0; line-height:1.6; color:var(--wm-forest-10); }
.contactWay--line{
  background:var(--wm-white);
  color:var(--wm-forest);
  border:1px solid var(--wm-forest);
}
.contactWay--line h2{ color:var(--wm-forest); }
.contactWay--line p{ color:var(--muted); }
.contactWay__email a{
  font-size:20px;
  font-weight:600;
  color:var(--wm-neoblue);
  text-decoration:underline;
  text-underline-offset:3px;
  word-break:break-word;
}

/* Przycisk „Skopiuj adres” + komunikat po skopiowaniu */
.contactCopy{ cursor:pointer; }
.contactWay .contactCopy__status{ min-height:1.5em; font-size:15px; font-weight:600; color:var(--wm-forest); }

/* --- Co dalej: kroki (jak .aboutSteps) --- */
.contactSteps{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  counter-reset:s;
}
.contactSteps li{
  counter-increment:s;
  background:var(--wm-white);
  border:1px solid var(--wm-forest-25);
  border-radius:var(--radius);
  padding:20px;
  display:grid;
  gap:6px;
  align-content:start;
}
.contactSteps li::before{
  content:counter(s);
  width:34px; height:34px;
  border-radius:50%;
  background:var(--wm-forest);
  color:var(--wm-white);
  display:grid; place-items:center;
  font-weight:700; font-size:14px;
  margin-bottom:6px;
}
.contactSteps b{ font-size:16px; }
.contactSteps span{ font-size:15px; color:var(--muted); }

/* --- Telefon --- */
@media (max-width: 760px){
  .contactWays,
  .contactSteps{ grid-template-columns:minmax(0,1fr); }
  .contactWay{ padding:24px; }
  .contactHero__lead{ font-size:16px; }
}