/* ==========================================================================
   Település-oldalak („Hol dolgozunk") — prémium megjelenés
   A szolgáltatás-oldalak gf-* dizájn-nyelvét követi: üveg-kártyák, arany
   akcentus, Cinzel címek. Színek KIZÁRÓLAG márkatokenből
   (--text / --muted / --silver / --primary); a rgba(255,255,255,.0x)
   felületi tintek a ház stílusa.
   Korábban ezek a blokkok inline style-lal készültek – az nem volt sem
   karbantartható, sem reszponzív.
   ========================================================================== */

/* ---------- Hero-kiegészítés: a munkák felsorolása a hero alatt ---------- */
.tp-hero__list{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.tp-hero__list li{
  display:flex; align-items:flex-start; gap:10px;
  color: var(--silver); font-size:14.5px; line-height:1.5;
}
.tp-hero__list li::before{
  content:""; flex:0 0 auto; margin-top:7px;
  width:6px; height:6px; border-radius:50%;
  background: var(--primary);
}
.tp-hero__list time{ color: var(--muted); font-size:13px; white-space:nowrap; }

/* ---------- Tény-sáv ---------- */
.tp-tenyek{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tp-teny{
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(255,255,255,.04);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tp-teny:hover{ border-color: rgba(200,164,77,.30); transform: translateY(-2px); }
.tp-teny__ic{
  display:grid; place-items:center;
  width:38px; height:38px; margin-bottom:12px;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(230,200,119,.20), rgba(200,164,77,.10));
  border:1px solid rgba(200,164,77,.26);
  color: var(--primary);
}
.tp-teny__t{ color: var(--muted); font-size:12.5px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; }
.tp-teny__v{
  color: var(--primary); font-size:26px; font-weight:800; line-height:1.15; margin:4px 0 3px;
  font-variant-numeric: tabular-nums;
}
.tp-teny__m{ color: var(--silver); font-size:13px; line-height:1.45; }

/* ---------- Munka-kártya ---------- */
.tp-munka{
  position:relative;
  padding:26px 26px 24px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200,164,77,.07), transparent 55%),
    rgba(255,255,255,.035);
  transition: border-color .25s var(--ease);
}
.tp-munka:hover{ border-color: rgba(200,164,77,.26); }

.tp-munka__fej{ display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; }
.tp-munka__sorszam{
  flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background: rgba(200,164,77,.14);
  border:1px solid rgba(200,164,77,.30);
  color: var(--primary); font-weight:800; font-size:14px;
  font-variant-numeric: tabular-nums;
}
.tp-munka__cim{
  margin:0; color: var(--text);
  font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size:1.22rem; line-height:1.25; text-wrap:balance;
}
.tp-munka__meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:2px 0 16px 48px; color: var(--muted); font-size:12.5px;
}
.tp-munka__meta .tp-dot{ opacity:.5; }
.tp-cimke{
  display:inline-block; padding:2px 9px; border-radius:99px;
  border:1px solid rgba(200,164,77,.28); background: rgba(200,164,77,.08);
  color: var(--primary); font-size:11.5px; font-weight:600; letter-spacing:.2px;
}
.tp-munka__leiras{ color: var(--silver); line-height:1.68; margin:0 0 16px; }

/* „Miért így oldottuk meg" – kiemelt idézet-blokk */
.tp-miert{
  position:relative;
  margin:0 0 18px; padding:14px 18px 14px 20px;
  border-left:3px solid var(--primary);
  border-radius:0 10px 10px 0;
  background: rgba(200,164,77,.06);
  color: var(--silver); line-height:1.68;
}
.tp-miert__cim{
  display:block; margin-bottom:5px;
  color: var(--primary); font-size:11.5px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
}

/* Helyszíni tippek */
.tp-tippek{ margin:0 0 4px; }
.tp-tippek__cim{
  margin:0 0 10px; color: var(--text);
  font-size:.98rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.tp-tippek__cim svg{ color: var(--primary); flex:0 0 auto; }
.tp-tippek__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tp-tippek__lista li{
  display:flex; align-items:flex-start; gap:11px;
  color: var(--silver); font-size:14.5px; line-height:1.6;
}
.tp-tippek__lista li::before{
  content:"→"; flex:0 0 auto; color: var(--primary); font-weight:700; line-height:1.5;
}

/* Galéria a munkán belül */
.tp-galeria{
  display:grid; gap:12px; margin-top:20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tp-galeria figure{ margin:0; }
/* A kép mostantól kattintható gombban ül (`.tp-kepgomb`, lásd kepnezo.css) –
   a méretezés ott van. Ez a szabály csak a gomb NÉLKÜLI esetre marad meg. */
.tp-galeria > figure > img{
  width:100%; height:190px;
  /* contain, nem cover – a projekt dokumentált szabálya: a cover levágta a
     lényeget a vegyes arányú telefonos fotókon */
  object-fit: contain;
  background: rgba(0,0,0,.35);
  border-radius:10px; display:block;
}
.tp-galeria figcaption{
  color: var(--muted); font-size:12.5px; line-height:1.5; padding:8px 2px 0;
}

/* Kép nélküli állapot (lokál fejlesztés) – a feliratok akkor is informálnak */
.tp-feliratok{
  list-style:none; margin:18px 0 0; padding:14px 16px;
  border:1px dashed rgba(255,255,255,.12); border-radius:10px;
  display:flex; flex-direction:column; gap:7px;
}
.tp-feliratok li{ color: var(--muted); font-size:13.5px; line-height:1.55; }

/* ---------- Szolgáltatás-linksor ---------- */
.tp-szolgok{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px;
}
.tp-szolgok a{
  display:inline-block; padding:9px 16px; border-radius:99px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: var(--silver); font-size:14px; font-weight:600; text-decoration:none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.tp-szolgok a:hover, .tp-szolgok a:focus-visible{
  border-color: rgba(200,164,77,.45); background: rgba(200,164,77,.08); color: var(--primary);
}

/* ---------- Település-kártyák (hub + „további településeink") ---------- */
.tp-varosok{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tp-varos{
  display:block; padding:20px 22px;
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  background: rgba(255,255,255,.04);
  text-decoration:none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.tp-varos:hover, .tp-varos:focus-visible{
  border-color: rgba(200,164,77,.34); background: rgba(200,164,77,.06); transform: translateY(-2px);
}
.tp-varos__nev{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 8px; color: var(--text);
  font-family:"Cinzel","Inter",system-ui,sans-serif; font-size:1.1rem;
}
.tp-varos__nev .tp-nyil{ color: var(--primary); font-size:1rem; }
.tp-varos__lead{ color: var(--silver); font-size:13.8px; line-height:1.55; margin:0 0 10px; }
.tp-varos__meta{ display:flex; flex-wrap:wrap; gap:8px; }
.tp-varos__meta span{
  padding:3px 10px; border-radius:99px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  color: var(--muted); font-size:12px; font-weight:600;
}
.tp-varos__meta .is-fo{
  background: rgba(200,164,77,.10); border-color: rgba(200,164,77,.28); color: var(--primary);
}

/* ---------- Mobil ---------- */
@media (max-width: 720px){
  .tp-munka{ padding:20px 18px; }
  .tp-munka__meta{ margin-left:0; }
  .tp-galeria img{ height:auto; max-height:280px; }
  .tp-teny__v{ font-size:23px; }
}

@media (prefers-reduced-motion: reduce){
  .tp-teny, .tp-varos, .tp-munka{ transition:none; }
  .tp-teny:hover, .tp-varos:hover{ transform:none; }
}