/* ==========================================================================
   Közös képnéző (kepnezo.js). Bármelyik oldalon használható, a
   `[data-kepnezo]` markup-szerződés alapján.
   Színek kizárólag márkatokenből; a megjelenés a referencia-oldali
   nagyítás dizájn-nyelvét követi, hogy a két néző egyformán viselkedjen.
   ========================================================================== */

/* A galéria képei kattinthatók – ezt látni is kell rajtuk. */
.tp-kepgomb{
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: rgba(0,0,0,.35);
  border-radius: 10px; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tp-kepgomb img{
  width: 100%; height: 190px; display: block;
  /* 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;
}
.tp-kepgomb:hover, .tp-kepgomb:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.tp-kepgomb:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- A néző ---------- */
.kn[hidden]{ display: none; }
.kn{
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center; padding: 18px;
}
.kn__hatter{
  position: absolute; inset: 0;
  background: rgba(6,8,10,.90); backdrop-filter: blur(3px);
}
.kn__panel{
  position: relative; width: min(1000px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0c0e11;
}
.kn__zar{
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: var(--text); font-size: 1.3rem; line-height: 1;
}
.kn__zar:hover{ border-color: rgba(200,164,77,.45); color: var(--primary); }

.kn__szinpad{ position: relative; display: grid; place-items: center; min-height: 0; }
.kn__kep{
  max-width: 100%; max-height: 70vh;
  object-fit: contain;          /* a nagyításban a TELJES kép kell */
  border-radius: 10px; display: block; cursor: pointer;
}
.kn__nyil{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(8,10,13,.72);
  color: var(--text); font-size: 1.5rem; line-height: 1;
}
.kn__nyil:hover{ border-color: rgba(200,164,77,.45); color: var(--primary); }
.kn__nyil--elozo{ left: 6px; }
.kn__nyil--kovetkezo{ right: 6px; }
.kn__nyil[disabled]{ opacity: .3; cursor: default; }

.kn__felirat{
  margin: 0; color: var(--silver);
  font-size: .92rem; line-height: 1.6; min-height: 1.6em;
}
.kn__szamlalo{
  margin: 0; color: var(--muted);
  font-size: .76rem; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}

/* Nyitott nézőnél a háttér NEM görgethető.
   A `html`-t IS zárolni kell, `!important`-tal: az `01-base.css`
   `html, body { overflow-y: auto !important }`-ot ír, amit specificitással
   nem lehet felülírni. */
html.kn-nyitva, body.kn-nyitva{ overflow: hidden !important; }

@media (max-width: 720px){
  .kn{ padding: 10px; }
  .kn__panel{ padding: 16px 14px; }
  .kn__kep{ max-height: 58vh; }
  .tp-kepgomb img{ height: auto; max-height: 280px; }
}

@media (prefers-reduced-motion: reduce){
  .tp-kepgomb{ transition: none; }
  .tp-kepgomb:hover{ transform: none; }
}