/* Főoldal "Örömmel jársz majd hozzánk" kolléga-slider — kizárólag a
   mod_j51news Module ID 138 ("kollegak", bottom-2a pozíció) példányára
   scope-olva a ".j51news138" osztályon keresztül (a vendor modul maga adja
   hozzá ezt az osztályt minden saját instance-hoz, lásd
   html/mod_j51news/kollegak.php). A másik mod_j51news instance-ot (ID 116,
   "J51_News") ez a fájl soha nem érinti, mert az nem ezt a template
   override-ot használja (lásd html/mod_j51news/default.php dispatcher).

   Minden hover-animáció érték ÉLŐ MÉRÉSSEL lett véve a
   diofahazkozpont.hu főoldal kolléga-sliderének TÉNYLEGES, deklarált CSS
   szabályaiból (document.styleSheets bejárással kiolvasva, nem becsülve) —
   az eredeti ott az Elementor "JetElements Banner" widget "lily" hatását
   használja:
     - kép: nyugalmi állapotban translateX(-40px), 50px-szel szélesebb a
       dobozánál (width: calc(100% + 50px)), hoverre translateX(0) — tehát
       egy vízszintes PAN, NEM scale(1.1) vagy egyéb generikus hatás;
     - név: nyugalmi állapotban translateY(40px), hoverre translateY(0);
     - titulus: nyugalmi állapotban opacity:0 + translateY(40px), hoverre
       opacity:1 (0.05s késleltetéssel) + translateY(0) — display:none/block
       váltás helyett, így a kártya magassága sosem változik (layout shift
       0);
     - overlay: nyugalmi opacity 0.1, hoverre 0.2 (nem erős sötétítés);
     - tartalom-doboz: position:absolute, bottom:0, height:50%, padding:2em.
   A nyilak (.j51news-nav/.j51news-prev/.j51news-next) az eredetin mért
   36×36px kör, #7a95a6 háttér, fehér ikon, függőlegesen középre igazítva —
   ez a szín már az eredetin is eltért a Diófa-paletta meleg tónusaitól, de
   mivel ez a kör kifejezetten "ne tervezz újat, reprodukáld az eredetit"
   elven fut, a mért színt vettük át változtatás nélkül. */

body .diofa-kollegak-slider {
  position: relative;
}

body .diofa-kollegak-slider .diofa-kollega-slide {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 208 / 463;
  text-decoration: none;
  outline-offset: -2px;
}

body .diofa-kollegak-slider .diofa-kollega-slide-media {
  position: absolute;
  inset: 0;
  display: block;
}

body .diofa-kollegak-slider .diofa-kollega-slide-media img {
  display: block;
  width: calc(100% + 50px);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(-40px, 0, 0);
  transition: transform 0.35s;
}

/* Kulturált fallback, ha egy kollégának (pl. jelenleg Krausz Zsófiának)
   nincs Intro Image-e — meleg Diófa-tónusú kitöltés, NEM törött <img>, NEM
   kitalált kép. */
body .diofa-kollegak-slider .diofa-kollega-slide-media--empty {
  background-color: #fbf4f1;
}

body .diofa-kollegak-slider .diofa-kollega-slide-overlay {
  position: absolute;
  inset: 0;
  background-color: #000000;
  opacity: 0.1;
  transition: opacity 0.35s;
}

body .diofa-kollegak-slider .diofa-kollega-slide-content {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 50%;
  padding: 2em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
}

body .diofa-kollegak-slider .diofa-kollega-slide-name {
  display: block;
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
  transform: translate3d(0, 40px, 0);
  transition: transform 0.35s;
}

body .diofa-kollegak-slider .diofa-kollega-slide-title {
  display: block;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.2s, transform 0.35s;
}

/* ---- Hover / keyboard-focus állapot — :focus-visible is kiváltja ugyanazt
   a hatást, hogy billentyűzettel navigálva se legyen elérhetetlen a titulus
   (az eredetin ez csak :hover-rel működik). ---- */
body .diofa-kollegak-slider .diofa-kollega-slide:hover .diofa-kollega-slide-overlay,
body .diofa-kollegak-slider .diofa-kollega-slide:focus-visible .diofa-kollega-slide-overlay {
  opacity: 0.2;
}

body .diofa-kollegak-slider .diofa-kollega-slide:hover .diofa-kollega-slide-media img,
body .diofa-kollegak-slider .diofa-kollega-slide:focus-visible .diofa-kollega-slide-media img,
body .diofa-kollegak-slider .diofa-kollega-slide:hover .diofa-kollega-slide-name,
body .diofa-kollegak-slider .diofa-kollega-slide:focus-visible .diofa-kollega-slide-name,
body .diofa-kollegak-slider .diofa-kollega-slide:hover .diofa-kollega-slide-title,
body .diofa-kollegak-slider .diofa-kollega-slide:focus-visible .diofa-kollega-slide-title {
  transform: translate3d(0, 0, 0);
}

body .diofa-kollegak-slider .diofa-kollega-slide:hover .diofa-kollega-slide-title,
body .diofa-kollegak-slider .diofa-kollega-slide:focus-visible .diofa-kollega-slide-title {
  opacity: 1;
  transition-delay: 0.05s;
  transition-duration: 0.35s;
}

body .diofa-kollegak-slider .diofa-kollega-slide:focus-visible {
  outline: 2px solid #d79b7d;
}

/* ---- Mobil/touch — SZÁNDÉKOS, dokumentált eltérés az eredetitől: az
   eredetin a titulus kizárólag :hover-rel érhető el, ami touch-eszközön
   gyakorlatilag soha nem aktiválódik megbízhatóan. Itt a név+titulus
   touch/keskeny nézeten mindig a hover-állapotban látszik, hogy az
   információ sosem legyen csak desktop-hoverrel elérhető — ez kifejezett
   kérés volt ebben a körben. ---- */
@media (hover: none), (max-width: 767px) {
  body .diofa-kollegak-slider .diofa-kollega-slide-name,
  body .diofa-kollegak-slider .diofa-kollega-slide-title {
    transform: translate3d(0, 0, 0);
  }

  body .diofa-kollegak-slider .diofa-kollega-slide-title {
    opacity: 1;
  }
}

/* ==========================================================================
   NYILAK — 36×36px kör, függőlegesen középre, az eredetin mért #7a95a6
   háttér + fehér ikon. A vendor alap .j51news-nav/-prev/-next szabályait
   (modules/mod_j51news/css/style.css) írja felül, csak ennél a modulnál.
   ========================================================================== */
body .diofa-kollegak-slider .j51news-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-self: auto;
  margin: 0;
  padding: 0 20px;
  z-index: 999;
  pointer-events: none;
}

body .diofa-kollegak-slider .j51news-prev,
body .diofa-kollegak-slider .j51news-next {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #7a95a6;
  transition: background-color 0.2s ease;
}

body .diofa-kollegak-slider .j51news-prev svg,
body .diofa-kollegak-slider .j51news-next svg {
  width: 11px;
  height: 22px;
  max-width: none;
  padding: 0;
  opacity: 1;
  fill: #ffffff;
}

body .diofa-kollegak-slider .j51news-prev:hover,
body .diofa-kollegak-slider .j51news-next:hover {
  background-color: #6c8695;
}

body .diofa-kollegak-slider .j51news-prev:focus-visible,
body .diofa-kollegak-slider .j51news-next:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ==========================================================================
   MOBIL — a modul param (columns_mobl/columns_mobp) már önmagában 1
   oszlopra állítja a kártyát; itt csak a tipográfiát finomítjuk kicsit
   kisebbre, hogy a 2em padding ne tűnjön aránytalanul nagynak keskeny
   kártyán.
   ========================================================================== */
@media only screen and (max-width: 767px) {
  body .diofa-kollegak-slider .diofa-kollega-slide-content {
    padding: 1.5em;
  }

  body .diofa-kollegak-slider .diofa-kollega-slide-name {
    font-size: 20px;
  }
}