/* Óvári Patikák — a közös "térkép-utazás" hero komponens stílusai.
   A hozzá tartozó viselkedést lásd map-journey.js. A markup-konvenciót
   (elem id-k) minden patika-oldal ugyanígy használja. */

.map-journey{
  position:relative;
  height:300vh;
  background:#0c1613;
  /* Ugyanaz a "lap" (panel) keret, mint a többi szekciónál — de FONTOS:
     overflow/border-radius NEM ide kerül, mert egy sticky gyerek fölötti
     overflow:hidden eltörné a sticky viselkedést (a böngésző ilyenkor a
     legközelebbi overflow!=visible őshöz, nem a valódi scroll-viewporthoz
     rögzíti). A kerekítés ezért a .journey-stage-en (magán a sticky elemen)
     van, ahol ez a probléma nem áll fenn. */
  max-width:var(--panel-max);
  margin-inline:auto;
  margin-block-end:var(--panel-gap);
}
.journey-stage{
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
  border-radius:var(--panel-radius);
}
.journey-map{
  position:absolute; inset:0;
  background:#dfe4dd;
}
.journey-map .maplibregl-map{ width:100%; height:100%; filter:saturate(.82) brightness(1.02) blur(.5px); }
.journey-map .maplibregl-ctrl-attrib{ font-size:10px; opacity:.6; }
.journey-photo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transform:scale(1.08);
  /* Kritikus: opacity:0 NEM tiltja a kattintást — enélkül ez a láthatatlan
     réteg elnyelte a térkép-pinekre szánt kattintásokat is, mert a DOM-ban
     a .journey-map UTÁN áll, tehát fölötte van a rétegsorrendben. */
  pointer-events:none;
}
.journey-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,22,19,.12) 0%, rgba(12,22,19,.42) 58%, rgba(12,22,19,.86) 100%);
  pointer-events:none;
}
.journey-map-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 760px 480px at 20% 24%, rgba(12,22,19,.4) 0%, rgba(12,22,19,0) 62%),
    linear-gradient(165deg, rgba(20,110,102,.16) 0%, rgba(20,110,102,.06) 45%, rgba(12,22,19,.13) 100%);
  pointer-events:none;
}

.journey-intro{
  position:absolute; left:0; right:0; top:16%;
  z-index:2;
  padding-inline:26px;
  max-width:640px;
  pointer-events:none;
  transition:opacity .35s ease;
}
.journey-intro.is-hidden{ opacity:0; }
.journey-intro-kicker{
  margin-top:14px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat', sans-serif;
  font-weight:700; font-size:.86rem;
  letter-spacing:.01em;
  color:var(--pink);
  text-shadow:0 2px 10px rgba(12,22,19,.3);
}
.journey-intro-kicker::before{
  content:''; width:16px; height:2px; border-radius:1px;
  background:var(--pink);
  box-shadow:0 0 10px rgba(251,65,113,.6);
}
.journey-intro-title{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3.3rem);
  line-height:1.1;
  color:var(--paper);
  text-shadow:0 1px 2px rgba(12,22,19,.25), 0 18px 40px rgba(12,22,19,.35);
  text-wrap:balance;
}

/* körbeutazó kártya a helyszín-bemutatóhoz */
.tour-card{
  position:absolute; left:50%; bottom:150px;
  z-index:3;
  width:min(360px, 82vw);
  background:rgba(245,246,241,.97);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 26px 52px -22px rgba(12,22,19,.55);
  opacity:0;
  transform:translate(-50%, 14px) scale(.96);
  pointer-events:none;
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.8,.2,1);
}
.tour-card.is-open{ opacity:1; transform:translate(-50%, 0) scale(1); }
.tour-card-media{ height:118px; background-size:cover; background-position:center; }
.tour-card-body{ padding:14px 18px 16px; }
.tour-card-name{ font-weight:800; font-size:1rem; color:var(--ink); }
.tour-card-hours{ margin-top:5px; font-size:.82rem; font-weight:700; color:var(--teal-text); }
.tour-card-addr{ margin-top:2px; font-size:.8rem; color:var(--ink-soft); }

.journey-hint{
  position:absolute; left:0; right:0; bottom:36px;
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(18,33,29,.72);
  font-size:.78rem; font-weight:700;
  text-align:center;
  pointer-events:none;
}
.journey-hint .curl{
  width:28px; height:28px;
  border:1px solid rgba(18,33,29,.25);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,246,241,.7);
  backdrop-filter: blur(6px);
  animation: journey-bob 2.4s ease-in-out infinite;
}
@keyframes journey-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

.journey-content{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding-bottom:72px;
  color:var(--paper);
  opacity:0;
  pointer-events:none;
}
.journey-content h1{
  margin-top:20px;
  font-size:clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight:800;
  line-height:1.06;
}
.journey-content .subhead{
  margin-top:20px;
  max-width:46ch;
  font-size:1.08rem;
  line-height:1.65;
  color:rgba(245,246,241,.78);
}

/* "bolti séta" — a hero folytatása, ahol a patika belseje a "térkép" */
.journey-story{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:0 26px 72px;
  opacity:0;
}
.journey-story-inner{ max-width:640px; }
.journey-story h2{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.7rem, 4vw, 2.6rem);
  line-height:1.15;
  color:var(--paper);
  text-shadow:0 1px 2px rgba(12,22,19,.25), 0 18px 40px rgba(12,22,19,.35);
  text-wrap:balance;
}
.journey-story p{
  margin-top:14px;
  font-size:1.02rem;
  line-height:1.65;
  color:rgba(245,246,241,.85);
  max-width:52ch;
}
@media (max-width:640px){
  .journey-story{ padding:0 18px 48px; }
}

/* map pins */
.map-pin{
  all:unset; cursor:pointer; box-sizing:border-box;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:var(--pin-color, var(--teal));
  box-shadow:0 8px 18px -6px rgba(12,22,19,.55), 0 0 0 3px rgba(245,246,241,.9);
  transition: transform .18s ease, opacity .35s ease;
}
.map-pin:hover, .map-pin:focus-visible{ transform:scale(1.14); }
.map-pin--main{ width:44px; height:44px; background:var(--pin-color, var(--pink)); border-radius:12px; }
.map-pin-cross{ width:60%; height:60%; display:block; }
.map-pin--health{
  width:18px; height:18px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 6px 14px -6px rgba(12,22,19,.5), 0 0 0 3px rgba(245,246,241,.9);
  transition: opacity .35s ease;
}
.map-pin-dot{ width:7px; height:7px; border-radius:50%; background:#fff; display:block; }

.map-pin-label{
  all:unset; box-sizing:border-box;
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-weight:700; font-size:.72rem;
  color:var(--ink);
  background:rgba(245,246,241,.92);
  padding:4px 11px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(12,22,19,.4);
  transition: opacity .35s ease;
}
.map-pin-label--main{
  font-size:.82rem; font-weight:800;
  color:var(--pin-label-color, var(--pink-text));
  padding:5px 13px;
}

.maplibregl-popup-content{
  font-family:'Montserrat', sans-serif;
  font-size:.86rem; line-height:1.5;
  color:var(--ink);
  padding:12px 14px;
  border-radius:12px;
}