/* Profilkep crop - frontend. ASCII-only. */

/* ---- Kis megjelenites a profil oldali profilkep-dobozban ----
   A doboz merete es paddingje a rendelo_geocode/listing-header CSS-bol jon
   (180x240, 6px padding -> 168x228 tartalmi terulet). Itt csak a vagast
   ervenyesitjuk, ha van tarolt geometria (.pk-has-crop). A CSS-valtozokat
   (--pk-fx/--pk-fy/--pk-fw/--pk-fh) a Twig allitja be inline a .pk-crop-wrap-en.

   FONTOS: a custom.css-ben van egy .profile-picture img { width/height/object-fit
   !important } szabaly, ezert a vagashoz itt is !important kell, magasabb
   specifikussaggal. */
.node--type-listing .profile-picture.pk-has-crop {
  position: relative;
  overflow: hidden;
}
.node--type-listing .profile-picture.pk-has-crop .pk-crop-wrap {
  position: absolute;
  inset: 6px;
  overflow: hidden;
  border-radius: 6px;
}

/* Ha az "ellenorzott szakember" modul a kepet span-ba csomagolja, az toltse
   ki a teljes vagoteruletet, hogy a zold pipa (badge) a helyen maradjon es a
   kep abszolut pozicionalasa ne ejtse ossze a wrappert. */
.node--type-listing .profile-picture.pk-has-crop .pk-crop-wrap .ellenorzott-wrap {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
}

.node--type-listing .profile-picture.pk-has-crop .pk-crop-wrap img {
  position: absolute !important;
  left: calc(-1 * (var(--pk-fx) / var(--pk-fw)) * 100%) !important;
  top: calc(-1 * (var(--pk-fy) / var(--pk-fh)) * 100%) !important;
  width: calc(100% / var(--pk-fw)) !important;
  height: calc(100% / var(--pk-fh)) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  border-radius: 0 !important;
}

/* A vagott profilkep kattinthato. */
.node--type-listing .profile-picture.profil-kep-lightbox-trigger {
  cursor: zoom-in;
}

/* ---- Onallo nagyito overlay (max. 960px magas, aranyos) ---- */
#pk-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
#pk-zoom-overlay.pk-open {
  display: flex;
}
#pk-zoom-overlay .pk-zoom-box {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
  cursor: default;
  max-width: 100%;
  max-height: 100%;
}
#pk-zoom-overlay .pk-zoom-box img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
}
#pk-zoom-overlay .pk-zoom-close {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 2;
  padding: 0;
  width: 44px;
  height: 44px;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

/* =========================================================================
 *  MOBIL: a profilkep-nagyitas kikapcsolva + a kurzor jelzese (append)
 *  ------------------------------------------------------------------------
 *  Mobilon (<=767.98px) a nagyitas ki van kapcsolva (lasd a frontend JS
 *  pkIsMobile() agat), ezert a kattinthatosagot jelzo kurzort es a
 *  cim-buborekot is semlegesitjuk, hogy ne tunjon kattinthatonak.
 *  A vagas (object-fit/pozicio) VALTOZATLAN marad -- azt a fenti szabalyok
 *  adjak, es a torzulast a listing-header reszponziv doboz-arany javitja.
 *  ASCII-only fajl.
 * ====================================================================== */

@media (max-width: 767.98px) {
  .node--type-listing .profile-picture.profil-kep-lightbox-trigger {
    cursor: default;
    pointer-events: none;
  }
}