/* zazitky.css */

@import url('aktuality.css');

/* Záměrně je to 1:1 kopie vzhledu z aktuality.css (import přes @import by přidával request a může být blokovaný CSP). */

/* Veřejná stránka Zážitky: badge/chip nechceme zobrazovat */
.news-chip{ display:none !important; }

/* Veřejná stránka Zážitky: jiné hero pozadí než aktuality */
.hero{
  background: url("Images/backgrounds/alan_frijns-sunset-7500076.jpg") center / cover no-repeat !important;
  width: 100% !important;
}

/* Úvodní text nad gridem */
.zazitky-intro{
  margin: 18px 0 18px 0;
}

.zazitky-intro__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.zazitky-intro__text{
  margin: 0;
  color: #111111;
  font-size: 18px;
  line-height: 1.55;
}

@media (max-width: 600px){
  .zazitky-intro__inner{ padding: 14px 14px; }
  .zazitky-intro__text{ font-size: 16px; }
}

/*
  Na této stránce nechceme trvalou rezervaci pro scrollbar.
  `aktuality.css` nastavuje `html{ scrollbar-gutter: stable; }`, což může nechat vpravo pruh
  i když stránka nemá žádný vertikální scroll.
*/
html{ scrollbar-gutter: auto; }

/* Pokud prohlížeč umí :has(), zapni gutter jen když je skutečně potřeba scroll (obsah je delší než viewport). */
@supports selector(html:has(body)){
  html{ scrollbar-gutter: auto; }
  html:has(body){ scrollbar-gutter: auto; }
  html:has(body:where(:not(.modal-open):not(.mobile-nav-open):not(.lightbox-open))){ scrollbar-gutter: auto; }
  html:has(body){
    /* když je stránka scrollovatelná, necháme pro výchozí OS scrollbar prostor přirozeně */
  }
}

/*
  Mobilní Safari/Chrome: když je otevřený modal a body má overflow:hidden,
  musí být scroll uvnitř modalu na správném vnořeném kontejneru.
  aktuality.css to řeší v @media (max-width:760px), ale protože tady je to přes @import,
  některé prohlížeče/keše to mohou na mobilu držet ve staré verzi.
  Proto přidáváme zajišťovací pravidla i sem.
*/
@media (max-width: 760px){
  .modal__content{
    overflow: hidden; /* scroll only in inner section */
    display: flex;
    flex-direction: column;
    min-height: 0;
    touch-action: pan-y;
  }

  .modal__topline,
  .modal__story,
  .modal__footer{
    flex: 0 0 auto;
  }

  .modal__section{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* iOS pojistka: když flex výpočet selže, pořád máme limit výšky */
    max-height: calc(100dvh - 36dvh - 140px);
  }

  .modal__body{
    overflow-wrap: anywhere; /* dlouhé řetězce a URL na mobilu */
  }
}