/* =========================================================
   O MNIE — page-about.php
   Wzorzec: webmountain-ux/system-strony.html → Szablony podstron → O mnie
   Kolory wyłącznie z core/tokens.css.
========================================================= */

/* --- Hero: forest, tekst biały, akcenty lime jako wypełnienie --- */
.aboutHero{
  background:var(--wm-forest);
  color:var(--wm-white);
  padding:40px 0 64px;
}
.aboutHero .h1{ color:var(--wm-white); }
.aboutHero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:48px;
  align-items:center;
  margin-top:24px;
}
/* Lead jak na stronie głównej (BRANDBOOK §2): 18px, dopowiedzenie 15px przygaszone */
.aboutHero__lead{
  font-size:18px;
  line-height:1.6;
  max-width:56ch;
  margin:0 0 14px;
}
.aboutHero__sub{ margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.85); }
@media (max-width:760px){ .aboutHero__lead{ font-size:16px; } }
.aboutHero__media img{
  display:block;
  width:100%;
  max-width:420px;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
  margin-left:auto;
}

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

/* --- Sekcje --- */
.aboutSec{ padding:72px 0; }
.aboutSec--cream{ background:var(--wm-cream); }
.aboutSec--line{ border-top:1px solid var(--line); }
/* Wąska kolumna tekstu, ale lewa krawędź taka jak w hero i „Jak pracuję” */
.aboutSec__narrow > *{ max-width:820px; }
.aboutSec__head{ max-width:760px; }
.aboutSec__h3{ margin:36px 0 8px; font-size:20px; font-weight:700; }
.aboutSec__after{ margin-top:18px; }

/* --- Droga: oś z kilkoma punktami --- */
.aboutPath{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  display:grid;
  gap:0;
}
.aboutPath li{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:24px;
  padding:20px 0;
  border-top:1px solid var(--wm-forest-25);
}
.aboutPath li:last-child{ border-bottom:1px solid var(--wm-forest-25); }
.aboutPath__year{
  font-family:var(--wm-font-display);
  font-size:28px;
  line-height:1.1;
  color:var(--wm-forest);
}
.aboutPath__year .aboutGap{ font-family:var(--wm-font); }
.aboutPath h3{ margin:0 0 6px; font-size:18px; font-weight:700; }
.aboutPath p{ margin:0; color:var(--muted); }

/* --- Jak pracuję: proces (jak .steps we wzorcu) --- */
.aboutSteps{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  counter-reset:s;
}
.aboutSteps 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;
}
.aboutSteps 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;
}
.aboutSteps b{ font-size:16px; }
.aboutSteps span{ font-size:15px; color:var(--muted); }

.aboutCards{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.aboutCard{
  border-radius:var(--radius);
  background:var(--wm-forest);
  color:var(--wm-white);
  padding:24px;
}
.aboutCard h3{ margin:0 0 8px; font-size:18px; font-weight:700; color:var(--wm-white); }
.aboutCard p{ margin:0; color:var(--wm-forest-10); line-height:1.6; }
.aboutCard--line{
  background:transparent;
  color:var(--wm-forest);
  border:1px solid var(--wm-forest);
}
.aboutCard--line h3{ color:var(--wm-forest); }
.aboutCard--line p{ color:var(--muted); }

/* --- Doświadczenie w liczbach: kafle .proof ze wzorca (liczba Anton + kontekst) --- */
.aboutProof{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.aboutProof .proof{
  border-radius:var(--radius);
  background:var(--wm-forest-10);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.aboutProof .big{
  font-family:var(--wm-font-display);
  font-size:44px;
  line-height:1;
  color:var(--wm-forest);
}
.aboutProof p{ margin:0; font-size:15px; line-height:1.6; color:var(--muted); }
.aboutProof a{ color:var(--wm-neoblue); font-weight:600; }
@media (max-width: 560px){
  .aboutProof{ grid-template-columns:minmax(0,1fr); }
}

/* --- Poza kampaniami: tekst + zdjęcie 4:5 po prawej (WebP, leniwe ładowanie — BRANDBOOK §5.6) --- */
.aboutSplit{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:48px;
  align-items:center;
}
.aboutSplit__text > *{ max-width:60ch; }
.aboutSplit__media{ margin:0; }
.aboutSplit__media img{
  display:block;
  width:100%;
  max-width:380px;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
  margin-left:auto;
}
@media (max-width: 860px){
  .aboutSplit{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .aboutSplit__media img{ margin:0; max-width:420px; }
}

/* --- W co wierzę: wyróżnienie lime (wypełnienie, tekst forest) --- */
.aboutBelief{
  background:var(--wm-lime);
  color:var(--wm-forest);
  border-radius:var(--radius);
  padding:40px;
}
.aboutBelief__label{
  margin:0 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.aboutBelief__lead{
  margin:0 0 16px;
  font-size:clamp(20px, 1vw + 16px, 26px);
  font-weight:700;
  line-height:1.4;
}
.aboutBelief p:last-child{ margin-bottom:0; }

/* --- Na czym się znam: pigułki --- */
.aboutTopics{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.aboutTopics li{
  padding:8px 16px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:var(--wm-forest-10);
  color:var(--wm-forest);
  font-weight:600;
  font-size:15px;
}

/* --- Luki do uzupełnienia (podgląd roboczy) --- */
.aboutGap{
  display:inline;
  padding:1px 6px;
  border-radius:6px;
  border:1px dashed var(--wm-forest-50);
  background:var(--wm-forest-10);
  color:var(--wm-forest);
  font-size:.92em;
}
.onDark .aboutGap{
  border-color:var(--wm-forest-25);
  background:transparent;
  color:var(--wm-white);
}

/* --- Telefon --- */
@media (max-width:900px){
  .aboutHero__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .aboutHero__media img{ max-width:300px; margin-left:0; }
  .aboutSteps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .aboutCards{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  .aboutHero{ padding:24px 0 48px; }
  .aboutSec{ padding:48px 0; }
  .aboutPath li{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .aboutSteps{ grid-template-columns:minmax(0,1fr); }
  .aboutBelief{ padding:28px 22px; }
}