/* ==========================================================================
   O NAMA — sekcije za o-nama.html (Figma frame 115:46)
   Sve mere su iz fajla. Svi kontejneri sede na x=120 / width=1200.
   ========================================================================== */

.page--o-nama { --section-gap: var(--sp-32); }         /* Figma: 32px na ovom frame-u */
.page--o-nama .nav { --nav-accent: var(--c-coral); }   /* koral ovde, mint na Home */

/* --- 1. Hero (116:54) -----------------------------------------------------
   Container 1200x360. Levo 541 (y=62 => vertikalno centrirano), slika 600x360.
   Razmak 59. Unutra: H1 112 + 36 + podnaslov 68, padding 10.            */

.hero-about { --section-pt: var(--sp-80); --section-pb: var(--sp-80); overflow: hidden; }

.hero-about__inner { display: flex; align-items: center; gap: 59px; }

.hero-about__text {
  display: flex;
  flex: 0 1 541px;
  flex-direction: column;
  gap: var(--sp-36);
  padding: var(--sp-10);
  color: var(--c-ink-soft);
}

.hero-about__subhead {
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-hero-sub);
}

.hero-about__media {
  flex: 0 1 600px;
  height: 360px;
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* Isprekidana linija je u Figmi - oznaka za prazno mesto za fotografiju.
   Obrisati ovu klasu iz HTML-a kada stigne prava slika. */
.hero-about__media--placeholder { border: 1px dashed var(--c-placeholder-border); }

.hero-about__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
  .hero-about__inner { flex-direction: column; gap: var(--sp-40); }
  .hero-about__text { flex: 1 1 auto; }
  .hero-about__media { flex: 1 1 auto; width: 100%; height: auto; aspect-ratio: 600 / 360; }
}

/* --- 2. Intro band (116:61) -----------------------------------------------
   Figma: tekst na x=120 w=1200, padding-block 40. Horizontalni padding je
   uklonjen - suzavao je .container ispod 1200.                          */

.intro-band {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-40);
}

.intro-band__text {
  color: var(--c-ink-soft);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
}

/* --- 3. Bio kartice (117:54, 117:67) --------------------------------------
   Kartica 1200, padding 48, razmak 48, foto 480x681, bio 576.
   Foto je vertikalno centrirana (Dana: y=80 u kartici od 841).
   Razmak izmedu pasusa: 20.                                            */

.bio-section { --section-pt: var(--sp-40); --section-pb: var(--sp-40); }

/* Pozadine su uklonjene, pa je otpao i horizontalni padding od 48 - bez
   njega sadrzaj sedi na istih 1200 kao ostale sekcije.
   Fotografija se rasteze na visinu teksta (stretch), sa 681 iz Figme kao
   podom da se ne skupi kad je tekst kratak. */
.bio {
  --split-gap: var(--sp-48);
  --split-media-w: 480px;
  --split-align: stretch;
  --split-media-h: auto;
  --split-media-min-h: 681px;
  --split-media-ratio: 480 / 681;
  --split-body-gap: var(--sp-20);
  padding-block: var(--sp-48);
  color: var(--c-ink-soft);
}

.bio__name {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-name);
}

.bio__role {
  font-family: var(--ff-body);
  font-size: var(--fs-tagline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-role);
}

.bio__text { display: flex; flex-direction: column; gap: var(--sp-20); }

@media (max-width: 899px) { .bio { padding-block: var(--sp-24); } }

/* --- 4. Filozofija (118:54) -----------------------------------------------
   Container 1200, padding-block 96, razmak 32 izmedu svih blokova.
   Dugme ima jos 16 odozgo (Buttons frame y=293, dugme y=16).           */

.philosophy { --section-pt: var(--sp-96); --section-pb: var(--sp-96); }

.philosophy__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-32);
  color: var(--c-ink-soft);
  text-align: center;
}

.philosophy__statement {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-40);
}

.philosophy__body { max-width: 900px; }
.philosophy__actions { padding-block-start: var(--sp-16); }

/* --- 5. Zašto Danas Trening (135:63) --------------------------------------
   Container 1200 sa padding-block 10 (BEZ horizontalnog).
   Heading padding-block 24. Kartice: 4 x 285 + 3 x 20 = tacno 1200.
   Sve cetiri se rastezu na visinu najvise (591 u Figmi).                */

.why { --section-pt: var(--sp-80); --section-pb: var(--sp-80); }

.why__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-10);
}

.why__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--sp-24);
  color: var(--c-ink-soft);
  text-align: center;
}

.why__title { max-width: 969px; padding-block-start: var(--sp-10); }
.why__lead { max-width: 968px; }

.why__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-20);
  width: 100%;
  padding-block: var(--sp-10);
}

/* min-height je pod iz Figme; grid stretch izjednacava sve cetiri na visinu
   najvise kartice, pa nema kracih kolona. */
.why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  min-height: 500px;
  padding: var(--sp-48) var(--sp-10) var(--sp-24);
  border-radius: var(--r-md);
  color: var(--c-ink-soft);
  text-align: center;
}

.why-card__title { max-width: 183px; padding: var(--sp-20) var(--sp-10); }
.why-card__body { max-width: 250px; padding: var(--sp-10); }

@media (max-width: 1199px) {
  .why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-card { min-height: 0; }
}

@media (max-width: 599px) { .why__cards { grid-template-columns: 1fr; } }

/* --- 6. Iskustva članova (120:55) -----------------------------------------
   Container 1200, razmak 24 izmedu svih blokova. Intro 960 centrirano.
   Mreza: 3 x 378.67 + 2 x 32 = 1200, red 315 visok, razmak redova 32.   */

.testimonials { --section-pt: var(--sp-80); --section-pb: var(--sp-80); }

.testimonials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  color: var(--c-ink-soft);
  text-align: center;
}

.testimonials__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  max-width: 960px;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-32);
  width: 100%;
}

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-24);
  min-height: 315px;
  padding: var(--sp-24);
  border-radius: var(--r-lg);
  text-align: start;
}

.testimonial__quote {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

.testimonial__author { font: inherit; }

.testimonial__name {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-color: var(--c-coral);
  text-decoration-thickness: var(--underline-w);
  text-underline-position: from-font;
}

@media (max-width: 1023px) { .testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 599px) {
  .testimonials__grid { grid-template-columns: 1fr; }
  .testimonial { min-height: 0; }
}

/* --- 7. Kontakt ikonice ---------------------------------------------------
   Iste ikonice imaju RAZLICITE dimenzije na dva frame-a. Home koristi
   32.67x44.33 i 46.7x46.69, O nama 56.67x54.33 i 56.7x56.69. Zajednicka
   komponenta drzi Home vrednosti, pa ih ovde gazimo samo za ovu stranicu. */

.page--o-nama .contact__icon--pin   { width: 56.67px; height: 54.33px; }
.page--o-nama .contact__icon--phone { width: 56.7px;  height: 56.69px; }

/* --- 8. Mobile section spacing ---------------------------------------------
   Same fix as Home: desktop section paddings (80/96/40) never scaled down
   for narrow screens, so gaps between sections read as oversized. Halved
   (roughly) below 767px to match Home's mobile rhythm.                    */
@media (max-width: 767px) {
  .page--o-nama { --section-gap: var(--sp-16); }

  .hero-about,
  .why,
  .testimonials { --section-pt: var(--sp-40); --section-pb: var(--sp-40); }

  .bio-section { --section-pt: var(--sp-24); --section-pb: var(--sp-24); }
  .intro-band { padding-block: var(--sp-24); }

  .philosophy { --section-pt: var(--sp-48); --section-pb: var(--sp-48); }
}