/*barvy: #f6f5e9 svetla, #0c0b05 cerna, #b9ae50 zlata, #ab9f32 tmave zlata */

html {
  box-sizing: border-box;
  overflow-x: hidden; /* Zakáže horizontální posuvník */
  width: 100%; /* 100vw by zahrnoval i šířku posuvníku */
  scroll-behavior: smooth;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  background-color: #0c0b05;
}

.title {
  background-color: #0c0b05;
  width: 100%;
  height: 60px;
  color: #b9ae50;
  padding: 0;
  margin: 0;
  border-radius: 0 0 15px 15px;
}
H1 {
  font-family:
    raleway,
    sans- serif;
  font-weight: 300;
  font-style: italic;
  font-size: 35px;
  text-align: left;
  margin: 0;
  padding: 5px 2rem;
}

/* banner s běžícím textem */
.banner {
  background-color: #50b9ad;
  color: #0c0b05;
  overflow: hidden;
  white-space: nowrap;
  font-family: Syne, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.5rem 0;
}
.banner-track {
  display: inline-flex;
  animation: marquee 15s linear infinite;
}
.banner-track span {
  padding-right: 4rem;
}
@keyframes marquee {
  to {
    transform: translateX(-25%); /* 4 stejné kopie textu = plynulá smyčka */
  }
}
@media (prefers-reduced-motion: reduce) {
  .banner-track {
    animation-duration: 60s;
  }
}

.hero {
  width: 100%;
  height: 80vh;
  display: grid;
  grid-template-columns: 30% 1fr;
  background: #0c0b05;
}

.heroimg {
  --r: 35vh; /* poloměr koule */
  --w: 23vh; /* šířka karty */
  --h: 17vh; /* výška karty */
  --tilt: 15deg; /* náklon osy koule k divákovi */
  --roll: 35deg; /* sklon dráhy: přední karty jdou zleva shora doprava dolů */
  --sx: 1.4; /* vodorovné roztažení (1 = koule) */
  --sy: 1; /* svislé roztažení (1 = koule) */
  position: relative;
  min-height: 0;
  perspective: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(8vw); /* posun koule doprava */
}

/* aktuální otočení koule; karty ho dědí a vyrovnávají, aby zůstaly čelem k divákovi */
@property --a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/* otáčející se koule; děti jsou rozmístěné po jejím povrchu */
.globe {
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: rotateZ(var(--roll)) rotateX(calc(var(--tilt) * -1))
    rotateY(var(--a));
  animation: orbit 60s linear infinite;
}

/* funguje pro <div class="photo"> i pro <img> */
.globe > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  /* odraz pod kartou (stejným směrem jako stín), zeslabuje se s odstupem;
     přední karty (--t >= 0.8) ho nemají, zadní (--t <= 0.3) ho mají plný;
     bez podpory ve Firefoxu, tam se prostě nezobrazí */
  --refl: clamp(0, calc((0.8 - var(--t)) / 0.5), 1);
  -webkit-box-reflect: below 4px
    linear-gradient(
      transparent 35%,
      rgba(255, 255, 255, calc(0.65 * var(--refl)))
    );
  /* 0 = zadní karta, 1 = přední; přední karty vrhají větší a měkčí stín */
  --t: calc((var(--depth) + 1) / 2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 6px rgba(84, 83, 83, 0.4),
    0 calc(14px + 36px * var(--t)) calc(26px + 64px * var(--t))
      rgba(0, 0, 0, calc(0.3 + 0.3 * var(--t)));
  /* --lon / --lat / --s nastavuje index.js
     umístění na kouli, pak zpětné natočení (karta se netočí s koulí) */
  --depth: calc(cos(var(--lat, 0deg)) * cos(calc(var(--lon, 0deg) + var(--a))));
  /* roztažení koule: svisle v rámu koule, vodorovně v rámu obrazovky */
  transform: translateY(
      calc(sin(var(--lat, 0deg)) * var(--r) * (var(--sy) - 1) * -1)
    )
    rotateY(var(--lon, 0deg)) rotateX(var(--lat, 0deg)) translateZ(var(--r))
    rotateX(calc(var(--lat, 0deg) * -1)) rotateY(calc(var(--lon, 0deg) * -1))
    rotateY(calc(var(--a) * -1)) rotateX(var(--tilt))
    rotateZ(calc(var(--roll) * -1))
    translateX(
      calc(
        cos(var(--lat, 0deg)) * sin(calc(var(--lon, 0deg) + var(--a))) *
          var(--r) * (var(--sx) - 1)
      )
    )
    scale(var(--s, 1));
  /* zadní karty jsou tmavší a trochu průhledné, přední jasné a plné
     (průhlednost je ve filtru, ne v opacity, ten se kvůli fade-in přechází) */
  filter: brightness(calc(0.6 + 0.4 * (var(--depth) + 1) / 2))
    opacity(calc(0.75 + 0.25 * (var(--depth) + 1) / 2));
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

.globe > .visible {
  opacity: 1;
}

@keyframes orbit {
  to {
    --a: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe {
    animation-duration: 240s;
  }
}

.hero > .intro {
  opacity: 0;
  transition: opacity 1.5s ease-in;
  align-self: center;
  position: relative;
  z-index: 1; /* překryje i karty v .heroimg */
  margin: 0 1rem;
  padding: 1rem;
  font-family: Raleway, sans-serif;
  color: #f6f5e9;
}
h2 {
  font-family: Syne, sans-serif;
  /*text-decoration:overline;
    text-decoration-thickness: 2px;
    text-decoration-color: #b9ae50;*/
  text-transform: uppercase;
  font-size: 4rem;
  letter-spacing: 0.08em;
  color: #b9ae50;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.329);
}
.hero > .intro.visible {
  opacity: 1;
}

/* desktop: nadpis je širší než sloupec intra a přetéká přes karty v .heroimg */
@media (min-width: 769px) {
  .hero > .intro h2 {
    width: 48vw;
    pointer-events: none; /* karty pod nadpisem zůstanou dostupné */
  }
}

/* mobil: intro nad koulí s kartami */
@media (max-width: 768px) {
  /* intro i koule sdílejí jednu buňku, intro leží přes karty */
  h1 {
    font-size: 1.75rem;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
  }
  .hero {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "stack";
  }

  .hero > .intro,
  .heroimg {
    grid-area: stack;
  }

  .hero > .intro {
    align-self: center;
    margin: 1rem;
    /* průhledné sklo v rámečku */
    background: rgba(255, 255, 255, 0.588);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  /* nadpis: plynulá velikost, menší rozestupy a tmavší barva pro čitelnost na skle */
  .hero > .intro h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 7.5vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    color: #ab9f32; /* kontrast ≥ 4,5:1 na světlém skle */
    text-shadow: 0 1px 1px rgba(27, 28, 22, 0.6);
  }

  .heroimg {
    --r: 30vw;
    --w: 32vw;
    --h: 24vw;
    --sx: 1.15;
    --sy: 2.5;
    height: 140vw;
    transform: none;
  }

  .globe {
    animation-duration: 28s;
  }
}

.dropdown {
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

.dropdown.visible {
  opacity: 1;
}

.photo:nth-child(1) {
  background-color: #f7c6d0;
}
.photo:nth-child(2) {
  background-color: #fde2b8;
}
.photo:nth-child(3) {
  background-color: #fdf6b2;
}
.photo:nth-child(4) {
  background-color: #c8ecc9;
}
.photo:nth-child(5) {
  background-color: #b9e6e0;
}
.photo:nth-child(6) {
  background-color: #bcd8f5;
}
.photo:nth-child(7) {
  background-color: #d6c9f2;
}
.photo:nth-child(8) {
  background-color: #efc7ec;
}
.photo:nth-child(9) {
  background-color: #e3d3c4;
}

.dropdown {
  padding: 0 1rem;
  position: relative;
  display: flex;
  gap: 12px;
  width: 100%;
}

.dropdown button,
.dropdown a {
  flex: 1;
  min-height: 56px;
  font-family: Syne, sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  padding: 0.75em 1.5em;
  border: 3px solid #b9ae50;
  border-radius: 2px;
  position: relative;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.1);
  color: #b9ae50;
  background-color: #0c0b05;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
}
@media (max-width: 768px) {
  .dropdown {
    flex-direction: column;
  }

  .dropdown button,
  .dropdown a {
    flex: none;
    min-height: 48px;
    letter-spacing: 1px;
  }
}

.dropdown button::after,
.dropdown a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.8em;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

button:before,
.dropdown a:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #b9ae50;
  z-index: -1;
}

button:hover,
button:focus,
.dropdown a:hover,
.dropdown a:focus {
  color: #f6f5e9;
}

button:hover:before,
button:focus:before,
.dropdown a:hover:before,
.dropdown a:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

button:active,
.dropdown a:active {
  transform: scale(0.9);
}

.map {
  background-color: #0c0b05;
  margin-top: 1.5rem;
  height: 70vh;
  width: 100%;
}

@media (max-width: 768px) {
  .map {
    margin-top: 1rem;
    height: 60vh;
    min-height: 300px;
  }
}

/* Karta místa na mapě */
.place-popup .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}
.place-popup .leaflet-popup-content {
  margin: 0;
  width: 220px !important;
}
.place-card img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.place-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}
.place-card-name {
  font-family: Syne, sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.place-card-go {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #b9ae50;
  color: #fff !important;
  font-size: 20px;
  text-decoration: none;
}
.place-card-go:hover {
  background: #000;
}