/**
 * Zsengezöld – template-kapcsolat.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.
 */

/* ---------- hero: szöveg bal, teljes magas kép jobb ---------- */
.zs-kapcs-hero {
  /* a terven a szöveges oldal kicsit szélesebb, mint a kép */
  display: grid; grid-template-columns: 1.12fr 1fr;
  background: var(--light);
  align-items: center;
}
.zs-kapcs .kapcs-hero__text { padding: 90px 60px 90px 90px; }
.zs-kapcs .kapcs-hero__text h1 { margin-bottom: 20px; }
.zs-kapcs .kapcs-hero__buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
.zs-kapcs .kapcs-hero__media { align-self: stretch; line-height: 0; }
/*
 * Lekerekítés: csak azokon a sarkokon, amelyek BEFELÉ néznek.
 *
 * A hero képe teljes szélességben kifut a lap jobb széléig, és felül-alul
 * a szekció élére ér. Ha mind a négy sarkot lekerekítenénk, a böngésző
 * jobb szélén két apró bevágás keletkezne – az nem díszít, hanem hibának
 * látszik. A két BAL sarok viszont a világos szövegdoboz felé néz: ott a
 * lekerekítés azt mutatja, hogy a kép egy lapon fekvő kártya.
 *
 * A 16 px ugyanaz az érték, mint a főoldali galériacsempéknél és a
 * „Kinek szól" képsávnál – ez a nagy felületek sugara az oldalon.
 */
.zs-kapcs .kapcs-hero__img,
.zs-kapcs .kapcs-hero__img--empty {
  display: block; width: 100%; height: 100%; min-height: 420px;
  object-fit: cover; background: var(--placeholder);
  border-radius: 16px 0 0 16px;
}

/* ---------- elérhetőségek ---------- */
/* Az alatta lévő GYIK azonos hátterű -> szűkebb térköz a találkozásnál */
.zs-kapcs .zs-kapcs-info { background: var(--cream); padding-bottom: 40px; }
.zs-kapcs .info-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
/* A belső margó a kattintható dobozok érintőfelülete miatt kell –
   de mindegyiken ott van, különben nem lennének egy vonalban. */
.zs-kapcs .info-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
  padding: 12px 8px;
}
.zs-kapcs .info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--gold); color: var(--cream);
}
/*
 * Az elérhetőségi adatok kezelőfelületi szövegek, ezért Inter – ahogy a
 * lábléc e-mail címe, a gombok és a GYIK kérdései is. A Fraunces marad a
 * címsoroké és az olvasásra szánt folyószövegé.
 */
.zs-kapcs .info-text {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--brown); text-decoration: none;
}

/*
 * Másodlagos sor a cím alatt (Plus Code). Halkabb, mint a cím maga:
 * kisebb és normál vastagságú, hogy kiegészítő adatnak látsszon, ne
 * második címnek.
 *
 * A szín a barna (#5A473B) 82%-os keveréke a krém háttérrel, fix hexként
 * kiszámolva. Nem color-mix(), mert azt régebbi böngésző eldobná, és akkor
 * a szöveg örökölné a szülő színét. Kontraszt a krém háttéren: 5,06:1 –
 * 13 px-es szövegnél a WCAG AA 4,5-ös küszöbe fölött.
 */
.zs-kapcs .info-sub {
  display: block; margin-top: 4px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400;
  color: #77675C;
  letter-spacing: .01em;
}
/* A szülő doboz hover-színe erre is vonatkozzon, hogy együtt mozogjanak */
.zs-kapcs a.info-item .info-sub { transition: inherit; }
.zs-kapcs a.info-item:hover .info-sub { color: var(--gold); }

/*
 * A kattintható dobozok: az egész elem hivatkozás, ezért az ikon is
 * reagál. A padding nagyobb érintőfelületet ad telefonon.
 */
.zs-kapcs a.info-item {
  text-decoration: none;
  border-radius: 12px;
  transition: background-color .2s ease;
}
.zs-kapcs a.info-item .info-icon,
.zs-kapcs a.info-item .info-text { transition: inherit; }
.zs-kapcs a.info-item:hover { background-color: rgba(184, 147, 98, .1); }
.zs-kapcs a.info-item:hover .info-text { color: var(--gold); }
.zs-kapcs a.info-item:hover .info-icon { background: var(--green); }
.zs-kapcs a.info-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- térkép ---------- */
.zs-kapcs-map { background: var(--cream); }
.zs-kapcs-map .zs-map { border-radius: 0; aspect-ratio: auto; height: 320px; }

/* ---------- GYIK ---------- */
/* Azonos hátterű a fölötte lévő kapcsolati adatokkal -> szűkebb térköz */
.zs-kapcs .zs-kapcs-faq { background: var(--cream); padding-top: 40px; }
.zs-kapcs .faq-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 60px; margin-top: 40px; align-items: start;
}
/* Külön oszlopblokkok: a nyíló válasz csak a saját oszlopát tolja. */
.zs-kapcs .faq-col { display: block; }
.zs-kapcs .faq-item { border-bottom: 1px solid rgba(120, 131, 106, .35); }
.zs-kapcs .faq-question {
  display: flex; align-items: flex-start; gap: 16px; width: 100%;
  padding: 18px 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
  /* csukva zöld, nyitva arany – a terv szerint */
  color: var(--green);
  transition: color .2s ease;
}
.zs-kapcs .faq-question:hover,
.zs-kapcs .faq-question[aria-expanded="true"] { color: var(--gold); }
.zs-kapcs .faq-icon {
  flex: 0 0 auto; color: var(--gold); font-size: 13px; line-height: 1.9;
  transition: transform .2s ease;
}
/* ▸ csukva, nyitva 90 fokkal elfordítva ▾ lesz */
.zs-kapcs .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(90deg); }
.zs-kapcs .faq-answer { padding: 0 0 18px 34px; }
.zs-kapcs .faq-answer p {
  margin: 0 0 12px; font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; line-height: 1.7; color: var(--brown);
}
.zs-kapcs .faq-answer p:last-child { margin-bottom: 0; }

/* ---------- közösségi ---------- */
.zs-kapcs-social { background: var(--light); }
.zs-kapcs .social-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 48px;
  list-style: none; margin: 32px 0 0; padding: 0;
}
.zs-kapcs .social-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
}
.zs-kapcs .social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--gold); color: var(--cream);
  transition: background .2s ease;
}
.zs-kapcs .social-grid a:hover .social-icon { background: var(--green); }
.zs-kapcs .social-name {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--brown);
}

/* ---------- űrlap ---------- */
.zs-kapcs-form { background: var(--cream); }

/* ---------- reszponzív ---------- */
@media (max-width: 1199px) {
  .zs-kapcs .kapcs-hero__text { padding: 60px 40px 60px 60px; }
  .zs-kapcs .info-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .zs-kapcs .faq-grid { grid-template-columns: 1fr; column-gap: 0; }
  .zs-kapcs .social-grid { gap: 32px; }
}

@media (max-width: 767px) {
  .zs-kapcs-hero { grid-template-columns: 1fr; }
  /* mobilon a kép kerüljön felülre */
  .zs-kapcs .kapcs-hero__media { order: -1; }
  /*
   * Mobilon a kép a szöveg FÖLÉ kerül, teljes szélességben: felül a
   * fejléchez ér, alul viszont a világos szövegdobozra fekszik. Ezért itt
   * az alsó két sarok néz befelé – ugyanaz a logika, mint a főoldali
   * „Kinek szól" képsávnál.
   */
  .zs-kapcs .kapcs-hero__img,
  .zs-kapcs .kapcs-hero__img--empty {
    min-height: 260px;
    border-radius: 0 0 16px 16px;
  }
  .zs-kapcs .kapcs-hero__text { padding: 32px 20px 40px; }
  .zs-kapcs .kapcs-hero__buttons { align-items: stretch; }
  .zs-kapcs .info-grid { grid-template-columns: 1fr; gap: 24px; }
  .zs-kapcs-map .zs-map { height: 220px; }
  .zs-kapcs .social-grid { gap: 24px; margin-top: 24px; }
}