/* ============================================================
   Szakemberek aloldal – a szakember-lista saját elrendezése.
   Hero, gombok, kapcsolat-sáv: lásd css/style.css.
   ============================================================ */

/* ---------- HERO (rövidebb, mint a fejlesztőházon) ---------- */
/* ---------- SZAKEMBER LISTA (3 oszlop, nagyobb kör fotó + név + titulus) ---------- */
.sz-lista { padding: clamp(30px, 4vw, 54px) 0 clamp(36px, 5vw, 70px); }
.sz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 44px) 5.5%;
  max-width: 1080px;
  margin-inline: auto;
}
.sz-person {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sz-person-photo {
  flex: none;
  display: block;
  width: clamp(72px, 8vw, 92px);
  border-radius: 50%;
  overflow: hidden;
}
.sz-person-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.sz-person-name {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 6px;
}
.sz-person-name a { color: var(--green-dark); transition: color .25s var(--ease); }
.sz-person-name a:hover { color: var(--sand-dark); }
.sz-person-role {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
}
.sz-person-role em { font-style: italic; }
.sz-person-role a { font-weight: 600; color: var(--sand-dark); }
.sz-person-role a:hover { text-decoration: underline; }

/* ---------- KAPCSOLAT / IDŐPONT (élő oldali eltérések) ---------- */
.sz-idopont .fh-cta h2 { color: var(--sand-dark); font-size: 1.5rem; }

/* ---------- Sötét elérhetőség-sáv (a .contact-strip--dark kerekített kártyaként ül itt) ---------- */
.sz-strip { padding: clamp(40px, 5vw, 70px) 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .sz-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sz-grid { grid-template-columns: 1fr; }
}