/* ===== Lightbox – mobil fixek ===== */
#lightbox{ height:100vh; height:100dvh; overscroll-behavior:contain; }
html.no-scroll, body.no-scroll{ height:100%; overflow:hidden; touch-action:none; }
#close-lightbox{
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 12px); right:calc(env(safe-area-inset-right,0px) + 12px);
  z-index:9999; width:44px; height:44px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); color:#fff; font-size:28px;
}
#close-lightbox:focus{ outline:2px solid #fff; outline-offset:2px; }
#lightbox-image{ max-height:calc(100dvh - 120px); object-fit:contain; }

/* ===== Térkép ===== */
#work-map{ width:100%; height:520px; border-radius:16px; box-shadow:0 20px 45px rgba(0,0,0,.25); overflow:hidden; }
.leaflet-container .leaflet-control-attribution{ display:none; }
.county-outline{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.leaflet-tooltip.county-label{
  background:transparent; border:none; box-shadow:none; color:#0b1f2a; font-weight:800; letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(255,255,255,.8); font-size:12px; padding:0;
}

/* infó panel (ha később kell) */
.county-info{
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:.5rem .75rem;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  font: 600 13px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* „Vissza” gomb a Leaflet kontroll sávban – (régi megoldás, ha kell) */
.leaflet-control .reset-btn{
  display:block; padding:0 .6rem; line-height:30px; font-weight:700; font-size:12px; color:#0b1f2a;
  background:#fff; text-decoration:none; border-radius:4px;
}
.leaflet-control .reset-btn:hover{ background:#f1f5f9; }

/* Város jelölő: zöld pötty + név (divIcon – ha ezt használnád) */
.city-marker{
  font: 700 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#062028; white-space:nowrap; background:rgba(255,255,255,.92);
  border:1px solid #d1fae5; border-radius:9999px; padding:4px 8px; box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.city-marker .city-dot{
  display:inline-block; width:8px; height:8px; border-radius:9999px; background:#16a34a; margin-right:6px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}

/* mobil */
@media (max-width:640px){
  #work-map{ height:58vh; min-height:320px; max-height:440px; }
  .leaflet-tooltip.county-label{ font-size:10px; transform:translateY(-2px); }
  .city-marker{ font-size:11px; padding:3px 7px; }
}

/* ===== Galéria – kis NÉGYZET kártyák, manuális méretállítás ===== */
:root{
  /* Itt állítod a kártyák alap méretét */
  --tile: 170px;         /* pl. 150–220 közé állítsd ízlés szerint */
}

#gallery-container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap: 14px;
  max-width: 1100px;     /* ha szélesebb rács kell, növeld */
  margin-left: auto;
  margin-right: auto;
}

/* mindig négyzet alak */
.gallery-item{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

/* a kép kitölti a kártyát, nem nyúlik el */
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* opcionális: nagyobb kártyák desktopon */
@media (min-width: 1024px){
  :root{ --tile: 200px; }    /* desktop méret */
}

/* --- Map overlay UI --- */
#work-map { position: relative; } /* hogy a gombot ide tudjuk pozicionálni */

/* >>> NAGYOBB „Vissza” gomb – EZ A FRISSÍTETT BLOKK <<< */
.map-back-btn{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2000;                /* Leaflet kontrollok fölé */

  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* MÉRET – ha még nagyobbat szeretnél, a font-size és padding növelhető */
  font-size: 18px;
  padding: 12px 16px;

  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #0c4a6e;               /* cyan-900 */
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.map-back-btn:hover{
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,.22);
}
/* egy picit nagyobb „←” betű */
.map-back-btn::first-letter{ font-size: 22px; }

/* csak megye-nézetben látszódjon */
.map-back-btn.hidden{ display: none; }

/* jobb alsó kis információs badge */
.map-hint{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2000;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 13px;
  color: #0b1f2a;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.map-hint.hidden{ display:none; }

/* Mobilon még nagyobb tappolhatóság a gombnak */
@media (max-width: 640px){
  .map-back-btn{
    font-size: 20px;
    padding: 14px 18px;
  }
}
/* ===== Service cards – felső „betöltő csík” hoverre ===== */
.service-card{ position:relative; overflow:hidden; }
.service-card::before{
  content:""; position:absolute; top:0; left:-40%;
  height:4px; width:40%;
  background:linear-gradient(90deg,transparent,rgba(6,182,212,.95),transparent);
  transform:skewX(-25deg); opacity:0;
}
.service-card:hover::before{ animation:sweep 1.2s ease-out forwards; }

@keyframes sweep{
  0%{ left:-40%; opacity:0 }
  15%{ opacity:1 }
  80%{ left:110%; opacity:1 }
  100%{ left:120%; opacity:0 }
}

/* ===== Testimonials – alsó sáv, kártyák + háttér csúszka ===== */
#ugyfel-velemenyek{ position:relative; }
#testimonials-bg{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.22;
}
.ghost-lane{
  position:absolute; left:0; right:0;
  display:flex; gap:16px; white-space:nowrap;
  top:22%; animation:bgmarquee 45s linear infinite;
}
.ghost-lane.delay{
  top:auto; bottom:16%; animation-duration:55s;
}
.ghost-pill{
  display:inline-block; padding:6px 10px; border-radius:9999px;
  border:1px solid rgba(0,0,0,.08); background:#fff;
  box-shadow:0 8px 16px rgba(0,0,0,.10);
  font:600 13px/1.1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0b1f2a;
}
@keyframes bgmarquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.t-grid{ position:relative; z-index:1; }
.t-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
  transform:translateY(24px); filter:blur(4px); opacity:0;
  transition:transform .6s ease, filter .6s ease, opacity .6s ease;
}
.t-card.show{ transform:translateY(0); filter:none; opacity:1; }
.t-card .who{ font-weight:800; color:#0f172a; margin-bottom:6px; }
.t-card .city{ color:#334155; font-weight:600; font-size:13px; }
.t-card .text{ color:#111827; }

/* ===== Szolgáltatás kártya – felső fénycsík ===== */
.service-card{ position:relative; overflow:hidden; }
.service-card::after{
  content:"";
  position:absolute;
  top:0; left:0;
  height:4px;                 /* a csík vastagsága */
  width:45%;                  /* a csík hossza (szabadon állítható) */
  pointer-events:none;
  z-index:2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  filter: blur(.3px);
  opacity:0;                  /* alapból rejtve (desktopon csak hoverre fusson) */
  transform: translateX(-140%);
  will-change: transform, opacity;
}
@keyframes cardTopSweep{
  to { transform: translateX(140%); }
}

/* Desktop: hoverkor egyszer fusson végig */
.service-card:hover::after{
  opacity:1;
  animation: cardTopSweep 1.6s cubic-bezier(.35,.85,.35,1) forwards;
}

/* Mobil/touch: a csík folyamatos, végtelenített legyen */
@media (hover:none), (pointer:coarse) {
  .service-card::after{
    opacity:.9;
    animation: cardTopSweep 2.2s linear infinite;
  }
}

/* Akik csökkentett animációt kérnek, ott kapcsoljuk ki */
@media (prefers-reduced-motion: reduce){
  .service-card::after{ animation:none !important; opacity:0 !important; }
}

/* Városfelirat (Leaflet tooltip) – ne vágjuk el, pill alak, erősebb kontraszt */
.leaflet-tooltip.city-label{
  max-width: none;            /* ne korlátozzuk a szélességet */
  white-space: nowrap;        /* egy sorban maradjon */
  overflow: visible;          /* semmit ne rejtsen el */
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 9999px;
  padding: 6px 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  color: #0b1f2a;
  font: 800 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}