/* ============================================================================
   FLEKOUT — sekcija 02 "Zašto Flekout"

   Lista paralelnih tvrdnji, bez numeracije i bez linije — to je namerna razlika
   prema Procesu, koji je niz i ima redosled. Ovde nijedna tvrdnja ne vodi u
   sledeću.

   Potpisni potez: oznaka stoji ispod sive ploče koja se obriše ulevo-udesno i
   otkrije je. Kosa ivica ploče nosi 2-3px plavog — sečivo. To je jedino mesto
   na sajtu gde ime firme postane radnja.

   Rez pod 16.8° ovde pripada porodici "ivica / maska", zajedno sa kadrom u
   tamnoj traci. Druga porodica je "kontejner sa tekstom" — nav i jezičci.
============================================================================ */
.why{--cut-ratio:.3014;padding:110px 6vw 120px;background:#fff;overflow-x:clip}
.why-inner{max-width:1560px;margin:0 auto}

/* Naslov koristi isti sklop kao Usluge (.h2-lead / .h2-punch iz service-rail.css),
   samo jedan stepen tiši — ovo je sekcija predaha i ne sme da viče jednako. */
.why h2{margin:40px 0 0;font-weight:500;line-height:1.06;letter-spacing:-.05em;
  font-size:clamp(36px,3.8vw,56px);max-width:22ch}
.why .h2-lead{font-size:.62em}

.facts{list-style:none;margin:64px 0 0;padding:0;border-bottom:1px solid #e6e8e9}
.fact{display:grid;grid-template-columns:minmax(240px,32%) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:center;
  padding:34px 0;border-top:1px solid #e6e8e9}

/* Levo — krupna oznaka. Omotač mora da viri levo od teksta bar za širinu
   kosine, jer ploča pri dnu počinje pomerena udesno — inače bi dno oznake
   provirivalo ispod ploče. Zato NE sme da postoji overflow:hidden iznad
   ovog nivoa: odsekao bi levi prepust, a s njim i gornju polovinu kosine.
   Prepusti su manji od 6vw koliko sekcija ima sa strane, pa ništa ne curi
   preko ivice ekrana. */
.fact-wrap{position:relative;overflow:visible;display:flex;align-items:center;
  /* Keep the slanted left overhang visible, but clip the exiting plate on the right. */
  clip-path:inset(0 0 0 -80px);
  margin:-8px -24px -8px -12px;padding:8px 24px 8px 12px}
.fact-label{font-size:clamp(26px,2.4vw,36px);line-height:1.12;font-weight:500;letter-spacing:-.04em;
  color:#1b2226;white-space:normal}

/* desno — rečenica */
.fact-text{font-size:17px;line-height:1.7;color:#5f686d;max-width:46ch;margin:0}

/* ── brisanje vezano za skrol ──────────────────────────────────────────
   Pali se tek kad JS javi da je spreman. Bez toga sekcija stoji otkrivena,
   pa ako skripta zakaže tekst se i dalje čita.
   --p (0 do 1) za svaki red računa why.js iz položaja reda na ekranu:
   0 = ploča prekriva oznaku, 1 = ploča je izašla, red je čist. Nema CSS
   tranzicije: pokret prati skrol, a glatkoću daje JS (sustizanje po kadru). */
.plate{display:none}
.why.is-ready .plate{display:block;position:absolute;inset:0;
  --cut:calc(var(--wrap-h,90px) * var(--cut-ratio));
  left:calc(-1 * var(--cut));right:calc(-1 * var(--cut));
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% 100%,var(--cut) 100%);
  background:#168ccd;transform:translate3d(calc(var(--p,0) * 102%),0,0);will-change:transform}
/* Sečivo: plava ploča i siva preko nje, pomerena za 3px. Duž kose ivice ostane
   tačno 3px plavog. Gradijentom ne može — gradijent prati ugao svoje ose, ne
   kosinu clip-path-a. */
.why.is-ready .plate i{position:absolute;inset:0 0 0 3px;background:#eceff1;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% 100%,var(--cut) 100%)}

/* rečenica desno ulazi u drugoj polovini brisanja, kad je oznaka već čitljiva */
.why.is-ready .fact-text{opacity:calc((var(--p,0) - .45) * 2.2);transform:translate3d(0,calc((1 - var(--p,0)) * 14px),0)}

@media(max-width:800px){
  .why{padding:72px 6vw 80px}
  .why h2{margin-top:28px;font-size:clamp(30px,6.6vw,42px)}
  .facts{margin-top:40px}
  .fact{grid-template-columns:1fr;gap:12px;align-items:start;padding:24px 0}
  .fact-label{font-size:clamp(25px,6vw,30px);white-space:normal}
  .fact-wrap{margin:-8px -18px -8px -8px;padding:8px 18px 8px 8px}
  .fact-text{font-size:15px;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .why.is-ready .plate{display:none}
  .why.is-ready .fact-text{opacity:1;transform:none}
}