/* =========================================================
   Vecsés Dental — Rendelőnk (Clean 1.x Final)
   Kiegészítő réteg a közös vd designrendszer fölé.
   Saját prefix: cl- (galéria) és lb- (lightbox). 0 ütközés.
   ========================================================= */

/* ---------------- hero ---------------- */
.cl-hero{
  position:relative;
  padding-block:clamp(34px,4vw,58px) clamp(24px,3vw,38px);
  background:radial-gradient(120% 90% at 18% 0%,#eef7fc 0%,#fff 64%);
  overflow:hidden;
}
.cl-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(26,140,190,.10),transparent) 88% 16%/240px 240px no-repeat,
    radial-gradient(closest-side,rgba(26,140,190,.07),transparent) 97% 66%/170px 170px no-repeat;
}
.cl-hero__in{position:relative;z-index:1;max-width:720px}
.cl-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;margin:12px 0 16px;line-height:1.08}
.cl-hero__lead{font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.65;max-width:58ch;color:var(--body)}
.cl-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,30px)}

/* ---------------- szekciófej ---------------- */
.cl-head{margin-bottom:clamp(20px,2.4vw,30px);max-width:70ch}
.cl-head h2{
  font-family:var(--f-head);
  font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:800;color:var(--ink);
  line-height:1.2;margin-top:10px;
}
.cl-head__lead{margin-top:12px;font-size:1rem;line-height:1.65;color:var(--body);max-width:62ch}

/* ---------------- galéria ---------------- */
.cl-sec--gal{padding-block:clamp(26px,3vw,44px) clamp(34px,4vw,58px)}

.cl-gal{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.cl-gal__item{
  display:block;position:relative;
  aspect-ratio:3/2;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--tint);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  cursor:zoom-in;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.cl-gal__item img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .45s var(--ease);
}
.cl-gal__item:hover{transform:translateY(-3px);border-color:#cfe2ee;box-shadow:var(--sh)}
.cl-gal__item:hover img{transform:scale(1.04)}
.cl-gal__item:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}

/* nagyító jel a jobb alsó sarokban */
.cl-gal__zoom{
  position:absolute;right:10px;bottom:10px;
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--brand);
  box-shadow:var(--sh-sm);
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.cl-gal__zoom svg{width:17px;height:17px}
.cl-gal__item:hover .cl-gal__zoom,
.cl-gal__item:focus-visible .cl-gal__zoom{opacity:1;transform:translateY(0)}

/* ---------------- térkép ---------------- */
.cl-sec--map{padding-block:0 clamp(34px,4vw,58px)}
.cl-mapwrap{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh);background:var(--tint);
}
.cl-mapwrap .vd-map{width:100%;height:clamp(320px,36vw,460px)}

/* ---------------- záró CTA ---------------- */
.cl-sec--cta{padding-block:0 clamp(56px,6vw,88px)}
.cl-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);
  padding:clamp(24px,2.6vw,36px) clamp(24px,3vw,44px);
  background:linear-gradient(150deg,var(--tint-2) 0%,#f4fafd 100%);
  border:1px solid #dbeaf4;border-radius:var(--r-xl);box-shadow:var(--sh-sm);
}
.cl-cta__t{min-width:0}
.cl-cta h2{
  font-family:var(--f-head);
  font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:800;color:var(--ink);
  line-height:1.25;margin-bottom:8px;
}
.cl-cta p{font-size:.95rem;line-height:1.6;color:var(--body);max-width:62ch;margin:0}
.cl-cta__btn{flex:0 0 auto}

/* =========================================================
   LIGHTBOX — saját vanilla implementáció
   ========================================================= */
.lb{
  position:fixed;inset:0;z-index:200;
  display:none;
  align-items:center;justify-content:center;
  padding:clamp(16px,3vw,40px);
  background:rgba(8,41,58,.92);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.lb[data-open]{display:flex}

.lb__fig{
  position:relative;z-index:1;
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(92vw,640px);
}
.lb__img{
  display:block;width:100%;height:auto;
  max-height:72vh;object-fit:contain;
  border-radius:var(--r);
  background:#0b3a52;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.lb__cap{
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.9);
  font-variant-numeric:tabular-nums;
}

.lb__btn{
  position:absolute;
  display:grid;place-items:center;
  width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;
  transition:background-color .2s var(--ease);
}
.lb__btn:hover{background:rgba(255,255,255,.28)}
.lb__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lb__btn svg{width:22px;height:22px}
.lb__prev{left:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lb__prev svg{transform:rotate(180deg)}
.lb__close{
  right:clamp(8px,2vw,28px);top:clamp(8px,2vw,28px);
  font-size:26px;line-height:1;
}

/* ---------------- reszponzív ---------------- */
@media (max-width:1099px){
  .cl-hero__in{max-width:none}
}
@media (max-width:1024px){
  .cl-gal{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .cl-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-cta{flex-direction:column;align-items:flex-start}
  .cl-cta__btn{width:100%}
}
@media (max-width:620px){
  .cl-gal{grid-template-columns:1fr;gap:14px}
  .cl-hero__cta .btn{width:100%}
  .lb__prev{left:6px}
  .lb__next{right:6px}
  .lb__btn{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .cl-gal__item,.cl-gal__item img,.cl-gal__zoom{transition:none}
  .cl-gal__item:hover{transform:none}
  .cl-gal__item:hover img{transform:none}
}

/* A térkép-library saját vezérlői érintésre kicsik — felnagyítjuk. */
@media (pointer:coarse){
  .cl-mapwrap .maplibregl-ctrl button{width:44px;height:44px}
  .cl-mapwrap .maplibregl-popup-close-button{width:40px;height:40px;font-size:22px}
}

/* =========================================================================
   LIGHTBOX — a nagy kép mérete a viewporthoz igazodik
   ELŐTTE: `.lb__fig{max-width:min(92vw,640px)}` + `.lb__img{width:100%}` —
   a 640px-es FIX plafon miatt a fotó 1920px-en is csak 640x427 volt (a
   viewport 33%-a). Ez akkor keletkezett, amikor a lightbox is a 300px-es
   bélyegképet töltötte; az 1600px-es képekhez már indokolatlan.
   MOST: magát a KÉPET méretezzük (`width:auto`), így a doboz pontosan a kép
   mérete — nincs üres sáv mellette, és `width:auto` miatt FELNAGYÍTÁS SEM
   történhet a natív 1600px fölé. A 3:2 arányt a böngésző tartja.
   A `max-width:100%` a `.lb` saját paddingjából adódik, ezért a kép soha nem
   ér a viewport széléig — a nyilak és a bezáró gomb szabadon maradnak.
   ========================================================================= */
.lb__fig{max-width:100%;width:auto;min-width:0}
.lb__img{
  width:auto;height:auto;
  max-width:100%;
  max-height:calc(88vh - 56px);   /* 56px: a számláló sora + a 14px gap + tartalék */
}
@media (max-width:768px){
  .lb__img{max-height:calc(80vh - 50px)}
}
@media (max-width:430px){
  .lb__img{max-height:calc(76vh - 46px)}
}