/* ============================================================
   Oldal-specifikus stílusok
   ============================================================ */

@import url('variables.css');
@import url('layout.css');
@import url('buttons.css');

/* ============================================================
   FŐOLDAL — egyetlen, teljes-jelenetes háttérkép, rajta láthatatlan,
   de a jelenethez igazodó kattintható területekkel ("image map"-szerű
   gombok). Deszktopon és mobilon eltérő kép + eltérő hotspot-elrendezés
   — ezért két külön .hero-scene blokk van a HTML-ben, amik közül a
   media query mindig csak az egyiket jeleníti meg.
   ============================================================ */

.hero-scene {
  position: relative;
  line-height: 0; /* hogy az <img> alatt ne maradjon extra hézag */
}

.hero-scene__img {
  display: block;
  width: 100%;
  height: auto; /* a kép saját arányát megtartva méreteződik át */
}

/* Alapból csak a deszktop jelenet látszik; a mobil verzió 768px alatt
   veszi át a helyét (lásd media query lent). */
.hero-scene--mobile {
  display: none;
}

@media (max-width: 768px) {
  .hero-scene--desktop {
    display: none;
  }
  .hero-scene--mobile {
    display: block;
    max-width: 600px;
    margin: 0 auto; /* középre igazítva, ha a viewport szélesebb a képnél */
  }
}

/* ---------------- Kattintható hotspot-gombok ---------------- */

.hero-hotspot {
  position: absolute;
  display: block;
  cursor: pointer;
  border-radius: 10px;
  outline: none;
  /* Alapállapotban láthatatlan — a jelenet fotórealisztikus, nem
     szeretnénk rácsot/dobozt rajzolni rá. A kattinthatóságot a
     hover/fókusz "kiemelkedő" hatása jelzi. */
  background: transparent;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

/* "Térhatás": a gomb enyhén megemelkedik és kidomborodik a felületből,
   mint egy megvilágított dombormű — bal-felső highlight, jobb-alsó
   árnyék, plusz egy lágy emelkedő mozgás és fényerő-növelés. */
.hero-hotspot:hover,
.hero-hotspot:focus-visible {
  transform: translateY(-4px) scale(1.035);
  filter: brightness(1.15) saturate(1.15);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.45),
    inset 0 3px 6px rgba(255, 255, 255, 0.55),
    inset 0 -4px 8px rgba(0, 0, 0, 0.4);
}
.hero-hotspot:active {
  transform: translateY(-1px) scale(1.01);
}
.hero-hotspot:focus-visible {
  outline: 2px solid var(--c-cream);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-hotspot {
    transition: filter 220ms ease;
  }
  .hero-hotspot:hover,
  .hero-hotspot:focus-visible {
    transform: none;
  }
}

/* --- Deszktop hotspot-koordináták (a /images/background.jpg 1600×900
   képéhez pixelre bemérve, %-ban megadva, hogy a kép átméreteződésével
   együtt skálázódjanak) --- */
.hotspot-desktop-leiras {
  left: 0%;
  top: 0%;
  width: 12.1875%;
  height: 91.11%;
}
.hotspot-desktop-ferfi {
  left: 12.375%;
  top: 1.67%;
  width: 17.5%;
  height: 86.11%;
}
.hotspot-desktop-info {
  left: 28%;
  top: 79.44%;
  width: 27.75%;
  height: 10.78%;
}
.hotspot-desktop-noi {
  left: 55.94%;
  top: 0.56%;
  width: 17.81%;
  height: 88.33%;
}

/* --- Mobil hotspot-koordináták (a /images/background_mobil.jpg
   807×1600 képéhez bemérve) --- */
.hotspot-mobile-noi {
  left: 23.55%;
  top: 23.44%;
  width: 22.92%;
  height: 16.56%;
}
.hotspot-mobile-ferfi {
  left: 54.53%;
  top: 17.19%;
  width: 25.4%;
  height: 22.81%;
}
.hotspot-mobile-info {
  left: 7.43%;
  top: 79.06%;
  width: 86.74%;
  height: 7.81%;
}
.hotspot-mobile-leiras {
  left: 0%;
  top: 89.375%;
  width: 100%;
  height: 10.625%;
}

/* ---------------- LEÍRÁS oldal ---------------- */

.leiras {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5);
}
.leiras h1 {
  font-size: var(--fs-2xl);
  text-align: center;
  margin-bottom: var(--sp-6);
}
.leiras p {
  margin: 0 0 var(--sp-5);
  text-align: justify;
  hyphens: auto;
}
.leiras p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.6em;
  float: left;
  line-height: 0.85;
  padding: 0.05em 0.12em 0 0;
  color: var(--c-gold);
}
.leiras__zaro-gombok {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-7);
  flex-wrap: wrap;
}

/* ---------------- Toast / visszajelzés ---------------- */

.toast {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  background: var(--c-ink);
  color: var(--c-cream);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  z-index: 1000;
  max-width: 320px;
  transform: translateY(20px);
  opacity: 0;
  transition: all var(--transition);
  pointer-events: none;
}
.toast.mutat {
  transform: translateY(0);
  opacity: 1;
}
.toast.hiba { background: #7a2b1f; }

.uzenet-sav {
  max-width: 700px;
  margin: var(--sp-5) auto;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--c-sand);
  border: 1px solid var(--c-border);
}
.uzenet-sav.hiba { background: #f6d9d3; border-color: #7a2b1f; }
.uzenet-sav.siker { background: #d9ecd9; border-color: var(--c-green); }