/**
 * Zsengezöld – template-rolunk.php oldalstílusok
 *
 * Korábban a sablon <style> blokkjában volt, ami minden
 * oldalletöltéssel újra letöltődött. Külön fájlként a böngésző
 * egyszer tölti le és utána gyorsítótárazza.
 */

/* ---------- személy szekciók ---------- */
.zs-rolunk-person { background: var(--cream); }
.zs-rolunk-person--alt { background: var(--light); }

.zs-rolunk .person-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
/*
 * Négyzetes portrék, a terv szerint. A feltöltött képek is 1:1 arányúak,
 * így egyáltalán nem vágódnak. Ha valaki mégis álló képet tölt fel, a
 * felső élhez igazítás miatt a fej akkor is a képen marad – a vágás
 * alulról történik, ahol kevesebb a lényeg.
 */
.zs-rolunk .person-img,
.zs-rolunk .person-img--empty {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px; background: var(--placeholder);
}

/* ---------- filozófia ---------- */
.zs-rolunk-filo { background: var(--cream); padding-bottom: 0 !important; }
.zs-rolunk .filo-band { margin: 40px 0; line-height: 0; }
.zs-rolunk .filo-band__img {
  display: block; width: 100%; height: 320px; object-fit: cover;
  background: var(--placeholder);
}
/*
 * A filozófia szekció alsó margóját ez a rács adja (a szekcióé 0, hogy a
 * képsáv teljes szélességben kifuthasson). 40 px, mert alatta az
 * összegzés AZONOS hátterű – ott a szűkebb, 40+40 px-es térköz a helyes.
 */
.zs-rolunk .pillar-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px; padding-bottom: 40px;
}
.zs-rolunk .pillar__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zs-rolunk .pillar__icon {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
}
.zs-rolunk .pillar h3 { margin: 0; }

/* ---------- összegzés ---------- */
/*
 * Azonos hátterű a fölötte lévő filozófia szekcióval -> szűkebb térköz.
 * A .zs-rolunk előtag kell, hogy verje a .zs-page .zs-section alapszabályt.
 */
.zs-rolunk .zs-rolunk-ossz { background: var(--cream); padding-top: 40px; }


/* ---------- reszponzív ---------- */
@media (max-width: 1199px) {
  .zs-rolunk .person-grid { gap: 40px; }
  .zs-rolunk .pillar-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .zs-rolunk .filo-band__img { height: 240px; }
}

@media (max-width: 767px) {
  .zs-rolunk .person-grid,
  .zs-rolunk .person-grid--reverse { grid-template-columns: 1fr; gap: 24px; }
  /* mobilon mindig a kép legyen elöl */
  .zs-rolunk .person-grid .person-media { order: -1; }
  .zs-rolunk .filo-band { margin: 24px 0; }
  .zs-rolunk .filo-band__img { height: 180px; }
  .zs-rolunk .pillar-grid { padding-bottom: 40px; }
}