/* ============================================================
   MAPA + POP-UP „karta destinácie“
   ============================================================ */
:root{
  --red:#E2001A;
  --navy:#0E3A5F;
  --navy-dark:#092B46;
  --gold:#F9B233;
  --sky:#0093DD;
  --paper:#F2F6FA;
  --ink:#12283C;

  --okno-pad: clamp(22px, 2.6vw, 44px);   /* vnútorné odsadenie karty */
  --vlajka-w: clamp(133px, 9vw, 117px);    /* šírka vlajky v rohu */
}
*{box-sizing:border-box}

h1,h2,h3,.nazov,.pill{letter-spacing:.02em}

.obal{max-width:1550px;margin:0 auto;padding:28px 20px 64px}
.hlavicka h1{margin:0;font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;color:var(--navy)}
.podnadpis{margin:6px 0 18px;color:#496C88;font-size:16px;max-width:56ch}

/* ---------- MAPA ---------- */
.mapa-obal{position:relative;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(14,58,95,.18);background:#DDEFFB}
.mapa-obal img.mapa{display:block;width:100%;height:auto}

.oblasti{position:absolute;left:0;top:0;width:100%;height:100%}
.krajina{cursor:pointer;outline:none}

/* klikacie plochy – vždy neviditeľné */
.krajina .zem,.krajina .znacka{fill:#000;fill-opacity:0;stroke:none;pointer-events:all}

/* zvýraznenie: iba krúžok okolo značky mesta */
.krajina .krug{
  pointer-events:none;
  fill:var(--red);fill-opacity:0;
  stroke:var(--red);stroke-opacity:0;stroke-width:9;
  transform-box:fill-box;transform-origin:center;transform:scale(.8);
  transition:fill-opacity .18s ease,stroke-opacity .18s ease,transform .18s ease;
}
.krajina:hover .krug,
.krajina:focus .krug,
.krajina.je-aktivna .krug{fill-opacity:.18;stroke-opacity:.95;transform:scale(1)}
.krajina:focus .krug{stroke:var(--gold)}
@media (prefers-reduced-motion:reduce){.krajina .krug{transition:none;transform:none}}

.bublina{
  position:absolute;transform:translate(-50%,-160%);
  background:var(--navy-dark);color:#fff;padding:5px 12px;border-radius:999px;
  font-family:"Barlow Condensed",Arial,sans-serif;font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:5;
  box-shadow:0 6px 18px rgba(9,43,70,.35);
}
.bublina.vidno{opacity:1}
.bublina::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--navy-dark)}

/* ---------- ZOZNAM ---------- */
.zoznam-nadpis{margin:34px 0 12px;font-size:22px;text-transform:uppercase;color:var(--navy)}
.zoznam{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.pill{font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:#fff;color:var(--navy);border:2px solid #D3E3F0;border-radius:999px;padding:7px 16px;cursor:pointer;transition:.15s ease}
.pill:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.pill:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ============================================================
   POP-UP – karta destinácie
   ============================================================ */
.prekryv{position:fixed;inset:0;background:rgba(9,43,70,.62);display:none;align-items:center;justify-content:center;padding:16px;z-index:1000;backdrop-filter:blur(2px)}
.prekryv.otvorene{display:flex}

.okno{
  position:relative;
  width:1100px;height:750px;max-width:100%;max-height:100%;
  background:var(--paper);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(9,43,70,.35);
  display:flex;
  animation:prilet .22s ease-out;
}
@keyframes prilet{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.okno{animation:none}}

/* ---- fotografia s oblúkom ---- */
.okno-foto{
  position:absolute;inset:0 0 0 auto;
  width:42%;
  overflow:hidden;
  /* ĽH PH PD ĽD / zvislé polomery – veľký oblúk na ľavej strane */
  border-radius:51% 0 0 21% / 83% 0 0 34%;
  background:linear-gradient(170deg,#4E8FCB 0%,#8FC0E4 45%,#E8C79A 100%);
  border-left: 6px solid #fff;
}
.okno-foto img{display:block;width:100%;height:100%;object-fit:cover;float:none;margin:0;}
.okno.bez-foto .okno-foto{display:none}
.okno.bez-foto .okno-obsah{width:100%}

/* ---- textová časť ---- */
.okno-obsah{
  position:relative;z-index:2;
  width:56%;
  display:flex;flex-direction:column;
  padding:calc(var(--okno-pad) * .8) var(--okno-pad) calc(var(--okno-pad) * .7);
  min-width:0;
}

/* ---- vlajka v rohu ---- */
.okno-vlajka{
  position:absolute;
  top:0;
  left:0;
  width:var(--vlajka-w);
/*  transform:rotate(-4deg);*/
  filter:drop-shadow(0 6px 12px rgba(9,43,70,.28));
  pointer-events:none;
}
.okno-vlajka img{display:block;width:100%;height:auto;border-radius:2px}
.okno-vlajka:empty{display:none}

/* ---- hlavička ---- */
.okno-hlavicka{
  flex:0 0 auto;
  padding-left:120px;
  padding-right:46px;              /* miesto pre krížik */
}
.okno.bez-vlajky .okno-hlavicka{padding-left:0}
.okno-hlavicka .nazov{
  margin:0;
  font-size:clamp(24px,2.7vw,40px);
  line-height:1.06;
  text-transform:uppercase;
  color:var(--navy);
}
.okno-hlavicka .ciara{display:block;width:110px;height:4px;margin-top:12px;border-radius:2px;background:var(--gold)}

.zavriet{
  position:absolute;top:14px;right:14px;z-index:6;
  width:40px;height:40px;border-radius:50%;
  border:none;background:#fff;color:var(--navy);
  font-size:48px;line-height:inherit;cursor:pointer;
  box-shadow:0 6px 18px rgba(9,43,70,.28);
  transition:.15s;

}
.zavriet:hover{background:var(--red);color:#fff}
.zavriet:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.zavriet span {
	 position: relative;
	top: -3px;
	left: 1px;
}

/* ---- telo (obsah z {krajiny}) ---- */
.okno-telo{
  flex:1 1 auto;
  overflow:auto;
  padding:18px 6px 0 0;
  color:var(--ink);
  scrollbar-gutter:stable;
}
.okno-telo > *:first-child{margin-top:0}

.okno-telo .lead{
  float:none;width:auto;
  margin:0 0 18px;
  font-size:17px;line-height:1.6;color:#2A4A63;
  max-width:52ch;
}
/* obrázok sa presúva do fotopanela – tu ho už nezobrazujeme */
.okno-telo .img-mapa{display:none}

.okno-telo h3{
  display:flex;align-items:center;gap:14px;
  margin:22px 0 10px;
  font-size:20px;text-transform:uppercase;color:var(--navy);
  border:none;padding:0;
}
.okno-telo h3::before{
  content:"";
  flex:0 0 auto;
  width:46px;height:46px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F9B233'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 4px 14px rgba(14,58,95,.14);
}

.okno-telo ul{margin:0 0 6px;padding:0 0 0 60px;list-style:none}
.okno-telo li{position:relative;margin:5px 0;padding-left:18px;font-size:17px}
.okno-telo ul li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:50%;background:var(--gold);
}
.okno-telo ol{margin:0 0 6px;padding-left:78px}
.okno-telo ol li{padding-left:0}

/* ---- fakty ako biele boxy s ikonou ---- */
.fakty{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;margin:16px 0 0;
}
.fakty div{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;
  background:#fff;border:none;border-radius:12px;
  padding:12px 16px;
  box-shadow:0 6px 20px rgba(14,58,95,.10);
}
.fakt-ikona{
  grid-column:1;grid-row:span 2;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:24px;
  background:var(--navy-dark);
}
.fakt-ikona svg{width:24px;height:24px;fill:#fff}
.fakty dt{grid-column:2;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#5C7C95}
.fakty dd{grid-column:2;margin:2px 0 0;font-weight:600;line-height:1.35}

.cta{
  display:inline-block;margin-top:20px;
  background:var(--navy);color:#fff;text-decoration:none;
	font-size:15px;
  text-transform:uppercase;letter-spacing:.06em;
  padding:11px 22px;border-radius:8px;transition:.15s;
}
.cta:hover,.cta:focus{background:var(--red);color:#fff!important;text-decoration:none!important}
.cta:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.znacka-txt{
  flex:0 0 auto;
  margin-top:14px;
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:#7D97AB;
}

/* ============================================================
   MOBIL / TABLET
   ============================================================ */
@media (max-width:900px){
  .okno{
    flex-direction:column;
    height:auto;max-height:calc(100vh - 100px);
    overflow:auto;
    margin-top: 30px;
  }
  .okno-foto{
    position:relative;inset:auto;order:-1;
    width:100%;height:clamp(170px,38vw,260px);
    flex:0 0 auto;
    border-radius:0 0 0 55% / 0 0 0 26%;
  }
  .okno-obsah{width:100%;padding-top:calc(var(--okno-pad) * .6)}
  .okno-vlajka{top:0;left:22px;width: 100px;}
  .okno-telo{overflow:visible;padding-right:0;padding-bottom: 100px;}
  .fakty{grid-template-columns:1fr}
  .okno-telo ul{padding-left:22px}
  .okno-telo ol{padding-left:40px}
  .bublina{display:none}
}

@media (max-width:520px){
  .okno-telo h3{gap:10px;font-size:18px}
  .okno-telo h3::before{width:38px;height:38px;background-size:18px}
}