/* ==========================================================================
   pages/o-nas.css — strona „O nas" (templates/page-o-nas-v2.php).

   Reszta strony korzysta z komponentów współdzielonych (przyciski, siatka
   trzech kolumn, pasek CTA) z assets/css/components.css.

   Poprzedni zestaw klas (.on-* i .o2-*) został rozdzielony: wizytówka agenta
   pojechała do components.css (używają jej też produkt i silos), hero i misja
   do pages/lokalna.css, a reszta była martwa.
   ========================================================================== */

/* Cała strona stoi na delikatnym lawendowym tle zamiast na bieli — sekcje są
   jasne, więc potrzebują podkładu, od którego się odcinają. */
.about-page{background:var(--mist-soft)}


/* ==========================================================================
   1. Hero — intro na grafice w tle lub na gradiencie marki
   --------------------------------------------------------------------------
   Pełnoszerokościowy pas w kolorach marki (biały tekst). Bazą jest ZAWSZE
   gradient — nawet bez grafiki hero wygląda pełnoprawnie. Gdy w ACF wskazano
   obraz (.has-bg + --about-hero-bg), kładzie się on pod gradientową nakładką
   (::before) mocniejszą po lewej (pod tekstem) i wygaszaną w prawo, żeby
   fotografia była widoczna — ten sam mechanizm co w hero strony głównej.
   ========================================================================== */
.about-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(340px,44vh,460px);
  padding-block:clamp(48px,7vw,84px);
  background:var(--grad);color:#fff;
}
.about-hero.has-bg{
  --about-hero-overlay:.9;
  background-color:var(--ink);
  background-image:var(--about-hero-bg);
  background-size:cover;background-position:center;
}
.about-hero.has-bg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(17,20,54,.12) 0%,rgba(17,20,54,0) 34%,rgba(17,20,54,.26) 100%),
    linear-gradient(96deg,
      rgba(106,31,201,var(--about-hero-overlay)) 0%,
      rgba(85,52,206,calc(var(--about-hero-overlay) - .04)) 30%,
      rgba(61,99,224,calc(var(--about-hero-overlay) * .6)) 54%,
      rgba(61,99,224,calc(var(--about-hero-overlay) * .16)) 74%,
      rgba(23,194,161,0) 94%);
}
@media (max-width:900px){
  /* Brak miejsca na „odsłonięte” zdjęcie — nakładka wraca do pełnego pokrycia. */
  .about-hero.has-bg::before{
    background:
      linear-gradient(180deg,rgba(17,20,54,.16),rgba(17,20,54,.30)),
      linear-gradient(110deg,
        rgba(106,31,201,var(--about-hero-overlay)) 0%,
        rgba(61,99,224,calc(var(--about-hero-overlay) - .04)) 55%,
        rgba(23,194,161,calc(var(--about-hero-overlay) - .10)) 100%);
  }
}
.about-hero>.wrap{position:relative;z-index:1;width:100%}

/* Kolumna treści trzyma się lewej i jest węższa niż kontener — na grafice
   prawa strona zostaje odsłonięta, a tekst nie rozciąga się na 100%. */
.about-hero__inner{max-width:min(60ch,64%)}
@media (max-width:900px){.about-hero__inner{max-width:100%}}

.about-hero .eyebrow{color:rgba(255,255,255,.82)}
.about-hero__title{
  color:#fff;font-size:clamp(32px,4.6vw,52px);font-weight:800;
  line-height:1.08;letter-spacing:-.03em;margin:0;text-wrap:balance;
}
.about-hero__lead{
  margin:20px 0 0;max-width:52ch;
  color:rgba(255,255,255,.9);font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.65;
}
.about-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}


/* ==========================================================================
   2. Pasek liczb
   --------------------------------------------------------------------------
   auto-fit obsługuje 3 i 4 pozycje bez osobnych media queries — sekcja
   pokazuje tyle liczb, ile wypełniono w panelu.
   ========================================================================== */
.about-stats{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.about-stat{
  display:flex;align-items:center;gap:16px;
  padding:24px clamp(16px,2.4vw,28px);
}
.about-stat + .about-stat{border-left:1px solid var(--line-soft)}
@media (max-width:760px){
  .about-stat + .about-stat{border-left:0;border-top:1px solid var(--line-soft)}
}
.about-stat__icon{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  background:var(--violet-soft);
  display:flex;align-items:center;justify-content:center;
}
.about-stat__icon svg{width:24px;height:24px}
.about-stat__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.about-stat__value{
  font-family:var(--display);font-size:clamp(28px,3.4vw,36px);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.about-stat__label{font-size:13.5px;line-height:1.4;color:var(--slate)}

/* Stagger reveal — stan bazowy widoczny, animacja tylko gdy JS doda klasę. */
.about-stats.is-reveal-on .about-stat,
.about-mission__cards.is-reveal-on .about-mcard{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--d,0) * 90ms);
}
.about-stats.is-reveal-on .about-stat.is-in,
.about-mission__cards.is-reveal-on .about-mcard.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .about-stats.is-reveal-on .about-stat,
  .about-mission__cards.is-reveal-on .about-mcard{opacity:1;transform:none;transition:none}
}


/* ==========================================================================
   3. Bio — „Cześć, jestem …"
   ========================================================================== */
.about-bio__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,56px);align-items:center;
}
@media (max-width:860px){
  .about-bio__grid{grid-template-columns:1fr}
}
/* Bez zdjęcia sekcja nie ma czego stawiać obok tekstu — jedna kolumna. */
.about-bio--noimg .about-bio__grid{grid-template-columns:1fr}
.about-bio--noimg .about-bio__body{max-width:72ch}

/* Portret agenta w przesuniętej ramce — ten sam „obrys marki” co przy zdjęciu
   agenta na stronie głównej, żeby twarz agenta miała spójny język w całym
   serwisie. Obrys to dekoracja (::before), więc nie wpływa na układ. */
.about-bio__media{position:relative;isolation:isolate;max-width:400px}
@media (max-width:860px){
  .about-bio__media{max-width:340px;margin-inline:auto}
}
.about-bio__media::before{
  content:"";position:absolute;z-index:0;
  inset:-14px 14px 14px -14px;
  border:2px solid var(--violet);border-radius:var(--radius-lg);opacity:.5;
}
.about-bio__frame{
  position:relative;z-index:1;margin:0;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-hover);background:var(--mist);
}
.about-bio__frame img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:center top;
}
.about-bio__body h2{font-size:clamp(25px,3vw,34px);line-height:1.15;margin:0 0 18px}
.about-bio__text{color:var(--slate);font-size:15.5px;line-height:1.75;max-width:60ch}
.about-bio__text p{margin:0 0 1em}
.about-bio__text p:last-child{margin-bottom:0}
.about-bio__text strong{color:var(--ink);font-weight:600}

.about-bio__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,32px);
  margin-top:28px;
}
.about-bio__sign{display:inline-flex;align-items:center}
.about-bio__sign img{max-height:56px;width:auto;display:block}
/* Bez grafiki podpisu — imię i nazwisko kursywą. Brandbook nie ma kroju
   odręcznego, więc nie dokładamy nowego fontu tylko dla tego napisu. */
.about-bio__sign--text{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(19px,2.4vw,24px);color:var(--ink);opacity:.8;
}


/* ==========================================================================
   4. Misja — jasny panel z trzema kartami
   ========================================================================== */
.about-mission__panel{
  background:var(--mist);border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,56px) clamp(22px,4vw,48px);
}
.about-mission__head{max-width:64ch;margin:0 auto clamp(28px,4vw,40px);text-align:center}
.about-mission__head h2{font-size:clamp(23px,2.8vw,31px);margin:0 0 16px}
.about-mission__lead{color:var(--slate);font-size:15.5px;line-height:1.7}
.about-mission__lead p{margin:0 0 .8em}
.about-mission__lead p:last-child{margin-bottom:0}
.about-mission__lead strong{color:var(--ink);font-weight:600}

.about-mission__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:820px){.about-mission__cards{grid-template-columns:1fr}}

.about-mcard{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(24px,3vw,30px);
  text-align:center;
}
.about-mcard__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:16px;
}
.about-mcard__icon svg{width:30px;height:30px}
.about-mcard h3{font-size:16.5px;margin:0 0 10px;line-height:1.3}
.about-mcard p{font-size:13.5px;line-height:1.6;color:var(--slate);margin:0}


/* ==========================================================================
   6. Fundacja
   ========================================================================== */
.about-foundation__card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:stretch;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
@media (max-width:860px){
  .about-foundation__card{grid-template-columns:1fr}
  .about-foundation__media{border-left:0;border-top:1px solid var(--line-soft)}
}
.about-foundation__body{padding:clamp(28px,4vw,44px)}
.about-foundation__body h2{font-size:clamp(21px,2.6vw,27px);line-height:1.2;margin:0 0 18px;max-width:22ch}
.about-foundation__text{color:var(--slate);font-size:14px;line-height:1.7}
.about-foundation__text p{margin:0 0 .9em}
.about-foundation__text p:last-child{margin-bottom:0}
.about-foundation__text strong{color:var(--ink);font-weight:600}
.about-foundation__body .btn{margin-top:24px}

/* Zawsze czysta biel za logo — część logotypów ma białe tło wypalone w pliku
   (np. płaski JPG bez przezroczystości) i na przydymionym --mist-soft byłoby
   to widoczne jako brzydka „łata". Cienka linia (border-left, na wąskim
   ekranie border-top — ten sam zabieg co w .trust-strip) zastępuje dawną
   różnicę odcieni jako podział między tekstem a logo. */
.about-foundation__media{
  display:grid;grid-template-columns:1fr;align-items:center;
  background:var(--surface);border-left:1px solid var(--line-soft);
}
/* Ze zdjęciem: logo i fotografia dzielą kolumnę po połowie. */
.about-foundation__media:has(.about-foundation__photo){grid-template-columns:1fr 1fr}
.about-foundation__logo{display:flex;align-items:center;justify-content:center;padding:clamp(28px,4.5vw,52px)}
.about-foundation__logo img{max-width:clamp(280px,38vw,440px);width:100%;height:auto;display:block}
.about-foundation__photo{height:100%}
.about-foundation__photo img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block}

@media (max-width:480px){
  .about-foundation__media:has(.about-foundation__photo){grid-template-columns:1fr}
  .about-foundation__photo img{min-height:180px}
}


/* ==========================================================================
   8. Co możesz z nami załatwić — cztery karty
   ========================================================================== */
.about-services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media (max-width:980px){.about-services__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.about-services__grid{grid-template-columns:1fr}}

.about-service{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(20px,2.6vw,26px);
  box-shadow:var(--shadow-xs);
}
.about-service--link{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.about-service--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--line)}
.about-service__icon{display:inline-flex;width:26px;height:26px;margin-bottom:16px}
.about-service__icon svg{width:100%;height:100%}
.about-service h3{font-size:15.5px;margin:0 0 8px;line-height:1.35;color:var(--ink)}
.about-service p{font-size:13px;line-height:1.55;color:var(--slate);margin:0 0 16px;flex:1}
.about-service__go{
  font-size:18px;line-height:1;color:var(--violet);margin-top:auto;
  transition:transform .15s ease;display:inline-block;
}
.about-service--link:hover .about-service__go{transform:translateX(4px)}