/* ============================================================
   Emléktérkép — stílus
   ============================================================ */

:root{
  --bazalt:#23201c;      /* tinta */
  --kod:#dfe3dc;         /* lapháttér */
  --lap:#fbfaf7;         /* kártyafelület */
  --arany:#a8802c;       /* kiemelés */
  --szilva:#6b3f4e;      /* másodlagos kiemelés */
  --lomb:#6f7d68;        /* halk zöld */
  --vonal:#c7ccc0;
  --halk:#6a665e;
  --piros:#8c3b2e;
  --zold:#4f6b4a;

  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans Condensed","Segoe UI",-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--kod);
  color:var(--bazalt);
  font:400 17px/1.65 var(--serif);
}

/* ---------- Fejléc-kép ---------- */

/* Oldalszéles, keskeny sáv a lap tetején. Bármilyen arányú képet feltölthetsz:
   a magasság kötött, a szélek középről vágódnak. */
.fejlec-kep{
  width:100%;
  background:#d5d9d1;
  overflow:hidden;
  line-height:0;
}
.fejlec-kep img{
  display:block;
  width:100%;
  height:clamp(150px,22vw,320px);
  object-fit:cover;
  object-position:center;
}
@supports not (height:clamp(150px,22vw,320px)){
  .fejlec-kep img{height:260px}
}

/* ---------- Fejléc ---------- */

.fejlec{
  max-width:1400px;
  margin:0 auto;
  padding:44px 28px 26px;
}
.eyebrow{
  font:600 12px/1 var(--sans);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--arany);
  margin-bottom:16px;
}
.fejlec h1{
  font:600 46px/1.05 var(--serif);
  font-size:clamp(34px,5.5vw,56px);
  letter-spacing:-.02em;
  margin:0;
}
.fejlec h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--szilva);
}
.alcim{
  font-style:italic;
  color:var(--halk);
  margin:6px 0 0;
  font-size:19px;
}
.bevezeto{
  max-width:56ch;
  margin:20px 0 0;
  color:#453f38;
}

/* Középre igazított fejléc — az adminban kapcsolható.
   Itt a bevezető a teljes lapszélességet kapja: középre zárva a keskeny
   szövegoszlop magas és vékony lenne. */
.fejlec.kozepre{text-align:center}
.fejlec.kozepre .bevezeto{
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Elrendezés ---------- */

.torzs{
  max-width:1400px;
  margin:0 auto;
  padding:14px 28px 70px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  grid-template-areas:
    "terkep  jobbfent"
    "ballent jobblent";
  gap:22px;
  align-items:stretch;
}
.terkep-keret{grid-area:terkep}
.jobb-fent{grid-area:jobbfent}
.bal-lent{grid-area:ballent;align-self:start}
.jobb-lent{grid-area:jobblent;align-self:start}
.doboz{
  border:1px solid var(--vonal);
  background:var(--lap);
  min-width:0;
}
.doboz[hidden]{display:none}

/* ---------- Térkép ---------- */

.terkep-keret{
  position:relative;
  border:1px solid var(--vonal);
  background:var(--lap);
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:440px;
}
#terkep{
  flex:1 1 auto;
  /* A minimális magasság a KERETEN van, nem itt: így a térkép meg tud
     zsugorodni, és a jelmagyarázat soha nem lóg ki a doboz alján. */
  min-height:240px;
  background:#e9ebe5;
}
.jelmagyarazat{
  border-top:1px solid var(--vonal);
  padding:11px 16px;
  font:400 13.5px/1.4 var(--sans);
  color:var(--halk);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.jelpelda{display:inline-flex;align-items:center}
.jelpelda + .jelpelda{margin-left:26px}
.jelpelda .jelpont{margin-right:9px}
.jeldoboz{width:19px;height:19px;display:block;margin-right:9px;color:var(--arany);flex:0 0 auto}

/* Helyajánló: saját sáv a jelmagyarázat alatt, a térképdobozon belül.
   Külön blokk, hogy semmiképp ne ütközzön a térkép rétegeivel. */
.ajanlo-sav{
  position:relative;
  z-index:1;
  border-top:1px solid var(--vonal);
  padding:13px 16px;
  background:var(--lap);
}
.ajanlo{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.ajanlo-cimke{
  margin:0 10px 0 0;
  font:400 13.5px/1.4 var(--sans);
  color:var(--halk);
  letter-spacing:.01em;
}
.ajanlo input[type=text]{
  width:240px;
  max-width:100%;
  padding:6px 10px;
  font:400 14px/1.4 var(--sans);
  border:1px solid #b9bfb3;
  border-radius:2px;
  background:#fff;
  margin-right:8px;
}
.ajanlo input[type=text]:focus{outline:2px solid var(--arany);outline-offset:1px;border-color:var(--arany)}
.ajanlo button{
  background:var(--lap);
  color:var(--bazalt);
  border:1px solid var(--bazalt);
  padding:6px 14px;
  border-radius:2px;
  font:600 13.5px/1.4 var(--sans);
  letter-spacing:.03em;
  cursor:pointer;
}
.ajanlo button:hover:not(:disabled){background:var(--bazalt);color:var(--lap)}
.ajanlo button:disabled{opacity:.5;cursor:default}
.ajanlo button:focus-visible{outline:2px solid var(--arany);outline-offset:2px}
#ajanlo-jelzes:not(:empty){
  flex:1 1 100%;
  margin-top:10px;
  font:400 14px/1.5 var(--sans);
}
#ajanlo-jelzes .siker{color:var(--zold)}
#ajanlo-jelzes .baj{color:var(--piros)}
.jelpont{
  width:14px;height:14px;border-radius:50%;
  background:var(--arany);
  box-shadow:0 0 0 2px var(--lap),0 0 0 3px var(--arany);
}
.jelpont.telt{box-shadow:0 0 0 2px var(--lap),0 0 0 6px rgba(168,128,44,.35)}

/* Térképjelölő */
.pont{background:none!important;border:0!important}
.pont-mag{
  position:relative;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.pont-mag i{
  position:relative;
  display:block;
  width:13px;height:13px;
  border-radius:50%;
  background:var(--arany);
  border:2px solid var(--lap);
  box-shadow:0 1px 3px rgba(35,32,28,.45);
  transition:transform .16s ease;
}
.pont-mag:hover i,.pont-mag:focus-visible i{transform:scale(1.35)}
.pont-gyuru{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  border-radius:50%;
  background:rgba(168,128,44,.22);
  transform:scale(0);
}
.pont-mag.aktiv i{background:var(--szilva);transform:scale(1.45)}

/* Ajándékdoboz — ahova már került kép. A szín a CSS currentColor-on
   keresztül jut le az SVG-be, így a kiválasztott állapot egy sorból megvan. */
.pont-mag.dobozos{color:var(--arany)}
.pont-doboz{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  transition:transform .16s ease;
}
.pont-mag.dobozos:hover .pont-doboz,
.pont-mag.dobozos:focus-visible .pont-doboz{transform:scale(1.18)}
.pont-mag.dobozos.aktiv{color:var(--szilva)}
.pont-mag.dobozos.aktiv .pont-doboz{transform:scale(1.22)}

.leaflet-container{font-family:var(--sans)}
.leaflet-tooltip.cimke{
  background:var(--bazalt);
  color:var(--lap);
  border:0;
  border-radius:2px;
  box-shadow:none;
  font:600 12.5px/1 var(--sans);
  letter-spacing:.04em;
  padding:5px 9px;
}
.leaflet-tooltip.cimke::before{display:none}

/* ---------- Panel ---------- */

/* Az üres állapot is négyzetes, hogy a térkép magassága ne ugráljon,
   amikor a látogató helyet vált. */
.ures{
  position:relative;
  width:100%;
  padding-top:100%;
  color:var(--halk);
}
.ures > div{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  text-align:center;
}
.ures svg{margin-bottom:16px;opacity:.5}
.ures p{margin:0;font-style:italic;font-size:18px}

.panel-fej{
  padding:26px 30px 20px;
  border-bottom:1px solid var(--vonal);
}
.panel-fej .eyebrow{margin-bottom:9px}
.panel-fej h2{
  font:600 30px/1.1 var(--serif);
  letter-spacing:-.015em;
  margin:0;
}
.panel-fej p{margin:10px 0 0;color:#453f38;font-size:16px}

/* A hely képe mindig négyzet, bármilyen arányú képet töltesz fel.
   A padding-top:100% a régi böngészőkben is pontos négyzetet ad. */
.kep-doboz{
  position:relative;
  width:100%;
  padding-top:100%;
  background:#d5d9d1;
  border-bottom:1px solid var(--vonal);
  overflow:hidden;
}
.kep-doboz img{
  position:absolute;
  top:0;left:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Ha a helyhez nincs kép, a négyzet üresen marad — így az elrendezés áll. */
.kep-doboz.nincs-kep{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0;
  aspect-ratio:1/1;
  background:#e2e5dd;
  color:var(--halk);
  font:400 15px/1.5 var(--sans);
  letter-spacing:.03em;
}
@supports not (aspect-ratio:1/1){
  .kep-doboz.nincs-kep{display:block;padding-top:100%}
  .kep-doboz.nincs-kep span{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center}
}

.szakasz{padding:24px 30px}
.szakasz + .szakasz{border-top:1px solid var(--vonal)}

.szakasz-cim{
  font:600 12px/1 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--arany);
  margin:0 0 16px;
  display:flex;align-items:center;gap:10px;
}
.szakasz-cim::after{
  content:"";flex:1;height:1px;background:var(--vonal);
}

/* ---------- Emlékek ---------- */

.emlekek{margin:0;padding:0;list-style:none}
.emlek{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:16px;
  padding:16px 0;
}
.emlek + .emlek{border-top:1px dotted var(--vonal)}
.emlek-mikor{
  font:600 15px/1.25 var(--sans);
  color:var(--arany);
  letter-spacing:.02em;
  padding-top:3px;
  word-break:break-word;
}
.emlek-mikor.nincs{color:var(--vonal);font-weight:400}
.emlek-szoveg{margin:0;white-space:pre-wrap;max-width:74ch}
.emlek-ki{
  margin:8px 0 0;
  font:400 14px/1 var(--sans);
  color:var(--halk);
  letter-spacing:.03em;
}
.emlek-ki::before{content:"— "}

.nincs-emlek{
  margin:0;color:var(--halk);font-style:italic;
}

/* ---------- Űrlap ---------- */

.urlap{margin:0}
.mezo{margin-bottom:18px}
.mezo:last-of-type{margin-bottom:22px}
label{
  display:block;
  font:600 13px/1 var(--sans);
  letter-spacing:.06em;
  margin-bottom:7px;
}
.sugo{
  display:block;
  font:400 13px/1.4 var(--sans);
  color:var(--halk);
  margin-top:5px;
  letter-spacing:.01em;
}
input[type=text],textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #b9bfb3;
  border-radius:2px;
  background:#fff;
  font:400 16px/1.55 var(--serif);
  color:var(--bazalt);
}
textarea{resize:vertical;min-height:118px}
input[type=text]:focus,textarea:focus{
  outline:2px solid var(--arany);
  outline-offset:1px;
  border-color:var(--arany);
}
.csapda{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

button.kuld{
  background:var(--bazalt);
  color:var(--lap);
  border:0;
  padding:13px 28px;
  border-radius:2px;
  font:600 15px/1 var(--sans);
  letter-spacing:.05em;
  cursor:pointer;
  transition:background .16s ease;
}
button.kuld:hover:not(:disabled){background:var(--szilva)}
button.kuld:disabled{opacity:.5;cursor:default}
button.kuld:focus-visible{outline:2px solid var(--arany);outline-offset:2px}

.jog{
  margin:16px 0 0;
  font:400 13px/1.5 var(--sans);
  color:var(--halk);
}

.jelzes{
  margin:16px 0 0;
  padding:12px 15px;
  border-left:3px solid var(--vonal);
  font-size:15.5px;
}
.jelzes.siker{border-color:var(--zold);background:#eaf0e8}
.jelzes.baj{border-color:var(--piros);background:#f7ece9}

/* ---------- Mobil ---------- */

@media (max-width:960px){
  .fejlec-kep img{height:clamp(120px,32vw,200px)}
  .torzs{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"terkep" "jobbfent" "ballent" "jobblent";
    gap:18px;
  }
  #terkep{flex:0 0 auto;height:58vh;min-height:360px}
  .ajanlo input[type=text]{flex:1 1 auto;width:auto;min-width:140px}
  .ajanlo-cimke{flex:1 1 100%;margin:0 0 7px}
  .fejlec{padding:32px 20px 20px}
  .torzs{padding:12px 20px 56px}
  .panel-fej,.szakasz{padding-left:22px;padding-right:22px}
  .emlek{grid-template-columns:minmax(0,1fr);gap:4px}
  .emlek-mikor.nincs{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}