/* ==========================================================================
   ORWAK – Kapcsolat
   Figma: node 678:2102 (1440 × 2447)
   style.css → pages.css → ez a fájl

   A terv függőleges ritmusa végig 78px (hero alja → cím, űrlap alja → kollégák,
   kollégák alja → footer), tehát a .psec alapértelmezett --psec-gap-ja pontos,
   nincs felülírva.
   ========================================================================== */

/* A kollégák sávjának a terven nincs látható címe, de a szekció cím nélkül
   nem navigálható — a .sr-only a style.css-ből jön, itt nem duplikáljuk. */

/* --------------------------------------------------------------------------
   1. Hero

   A geometria megegyezik a pages.css alapértékeivel (fotó 0→571, panel
   327→755, panelszélesség --gut + 841), ezért csak a szöveg szélessége és a
   tervbeli sortörések kellenek. A lead a terven három, kézzel tört sorban áll
   734px-en belül; 900px alatt a törések kikapcsolnak, hogy ne szakadjon szét.
   -------------------------------------------------------------------------- */
.phero__lead { max-width: 734px; }

/* --------------------------------------------------------------------------
   2. „Keress minket bizalommal…"

   A terven a kétsoros cím sormagassága 61px (50px-es törzsön), nem az
   aloldalak alapértelmezett 1.12-je — arányként írjuk fel, hogy a kisebb
   töréspontokon együtt csökkenjen a betűmérettel.
   -------------------------------------------------------------------------- */
.kap-title { line-height: 1.22; }

/* --------------------------------------------------------------------------
   3. Az elérhetőség + térkép + űrlap blokk

   A terven ez a blokk NEM a tartalomoszlop bal szélétől indul: 114px-cel
   beljebb kezdődik, és jobbra ~100px-et szabadon hagy (a footer viszont a
   teljes oszlopot kitölti — ez a tervben így van, nem hiba a leolvasásban).
   A behúzás min()-nel van megadva, hogy szűkebb nézetben arányosan fogyjon,
   ne lökje ki az űrlapot. Vízszintes fix px oldalszéltől nincs: minden a
   .container tartalomdobozához mérve áll.

     bal oszlop  (térkép, 623px)   a tartalomoszlop 114. pixelétől
     jobb oszlop (űrlap,  410px)   a 764. pixeltől
   -------------------------------------------------------------------------- */
.kap-block { margin-top: 45px; }

.kap-info,
.kap-grid {
  padding-left: min(114px, 9%);
  max-width: 1173px;           /* 114 + 623 + 26 + 410 */
}

/* A .contact-info alapból egyoszlopos flex — a terven két oszlop, soronként
   bal: cím/székhely, jobb: telefon/e-mail. */
.kap-info {
  display: grid;
  grid-template-columns: minmax(0, 623fr) minmax(0, 410fr);
  column-gap: 26px;
  row-gap: 27px;
}

.kap-grid {
  margin-top: 51px;
  display: grid;
  grid-template-columns: minmax(0, 623fr) minmax(0, 410fr);
  column-gap: 26px;
  align-items: start;
}

/* Térkép — a Figma kivágása bele van égetve a képbe (623 × 494). */
.kap-map { aspect-ratio: 623 / 494; background: var(--bg-alt); }
.kap-map img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   4. Űrlap

   A .contact-form a főoldalon kétoszlopos; itt a terv szerint egy oszlop,
   27px-es sorközzel. A mezők együtt pont akkorák, mint a mellettük álló
   térkép (494px), ezért a küldés gomb fölé kell a 13px extra.
   -------------------------------------------------------------------------- */
.kap-form { grid-template-columns: 1fr; row-gap: 27px; }

/* Az adatkezelési sor a terven egyetlen sor: Effra Regular 16px, a mondat
   373px (Figma 678:2273), nálunk mérve 372,6px. A jelölőnégyzettel és a 9px
   közzel együtt 395,6px, tehát a 410px-es űrlaposzlopba magától befér — a
   Figtree korából itt maradt -10px negatív jobb margóra nincs többé szükség.

   A böngésző alapértelmezett 3/4px-es margója a négyzet körül viszont 20px-re
   hizlalná a sort (a terven 16), és 4px-cel beljebb tolná a beviteli mezők bal
   széléhez képest. A terven a négyzet pontosan a mezőkkel egy vonalban áll. */
.kap-form .check input { margin: 0; }

.kap-form__submit { margin-top: 13px; }
.kap-form__submit > .btn { align-self: flex-start; }

/* A terven a gomb pillje fix 193 × 46, nyíl nélkül (a PNG-n mérve x 846→1039,
   y 1626→1672). A style.css .btn--wide pontosan ezt adja: min-width 193px,
   középre zárt felirat, 0 31px padding — itt nem írjuk újra. */

/* --------------------------------------------------------------------------
   5. Kollégáink

   3 × 2-es rács a teljes tartalomoszlopon. A terv oszlopkezdetei a
   tartalomoszlop 8. / 433. / 866. pixelén állnak; egyenlő harmadok 20px-es
   köze és 6px behúzás ezt 4px-en belül visszaadja, és nem fix px-ből él.
   -------------------------------------------------------------------------- */
.team {
  padding-left: 6px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 45px;
}

.team__item {
  display: flex;
  align-items: flex-start;
  gap: 27px;
}

.team__photo {
  width: 75px;
  height: 75px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.team__body { min-width: 0; }
.team__name,
.team__role,
.team__mail {
  display: block;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: .2px;
}
.team__name { font-weight: 700; color: var(--text); }
.team__role { font-weight: 400; color: var(--text); }
.team__mail {
  font-weight: 400;
  color: var(--orange);
  text-decoration: underline;
  overflow-wrap: anywhere;
  transition: color var(--d-fast) var(--ease);
}
.team__mail:hover { color: #b23c18; }

/* --------------------------------------------------------------------------
   6. Reszponzív
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* A behúzás itt már csak vizuális ballaszt lenne: az oszlopoknak kell a hely. */
  .kap-info, .kap-grid { padding-left: min(64px, 6%); }
  .team { column-gap: 16px; }
  .team__item { gap: 20px; }
}

@media (max-width: 992px) {
  .kap-info, .kap-grid { padding-left: 0; }
  .kap-grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .kap-map { max-width: 623px; }
  .kap-form { max-width: 560px; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}

@media (max-width: 900px) {
  /* A hero folyó elrendezésre vált (pages.css) — a kézi sortörések ott már
     rossz helyre esnének. A markupban a <br> előtt szóköz áll, így elrejtve
     sem tapadnak össze a szavak. */
  .phero__lead br { display: none; }
}

@media (max-width: 768px) {
  /* A tervbeli kétsoros törés itt már nem fér ki: az első sor „bizalom-mal"-ra
     választódna el. Folyjon szabadon. */
  .kap-title br { display: none; }
  .kap-block { margin-top: 32px; }
  .kap-info {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .kap-grid { margin-top: 36px; }
  .team {
    padding-left: 0;
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .team__name, .team__role, .team__mail { font-size: 17px; }
}