/*  -----------------------------------General-----------------------------------------------  */

.sub-page{padding-top:30px;}

.sub-header{
  margin-top: 3vh;
  margin-bottom: 30px;

  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 24px);
}
.sub-header .cleaner{ display:none; }

.subpage-icon{
  float: none;
  margin-right: 0;
  height: auto;
  padding-top: 2em;
  /*flex: 0 0 clamp(48px, 8vw, 99px);*/
  width: 12vh !important;
}

.header-text{
  float: none;
  width: auto;
  flex: 1 1 auto;
  padding-left: 0;
  padding-top: 1em;
  min-width: 0;
}


.breadcrumb, .arrows.text a {clear:both;font-size:0.8em;opacity:0.6;}
.breadcrumb a, .arrows.text a {text-decoration: underline;}
.subpage-title strong{clear:both;display:block; color:black; font-size:0.45em;font-weight:600;line-height:1.5em;}
.subpage-title{display:block; float:left;}

.sidebar-nav li {padding:10px 0;width:100%;}
.sidebar-nav ul ul li {border-bottom:3px solid white; text-decoration: none;}
/*.sidebar-nav ul ul li a {text-decoration: none;}*/
.sidebar-nav li ul {margin-left:10%;}
.sidebar-nav .active {padding-bottom:0;}
.sidebar-nav .active a {color:#c20116;font-weight:bold;}
.sidebar-nav .active li a  {color:black;font-weight:normal;}
.sidebar-nav .active .active  a  {color:#c20116;font-weight:bold;}
.sidebar-nav .active li:last-child{border-bottom:0px;}
.sidebar-nav-mobile {display:none;background-color:#f1f1f1;padding:30px 0 !important;margin:30px 0 !important;}
.overlay .sidebar-nav-mobile a{font-size: 16px; line-height:1.2em;}

.news-detail-gallery a {width:20%;display:block;float:left;}
.news-detail-gallery a img {width:98%;margin-right:2%;}
#seznamy h3 a {text-decoration: underline;}
#seznamy h2 {padding-top: 1em;}

.three-layout {background: url(/program_files/img/img-system/subpages/bg-three.jpg) repeat-y top ; background-size: contain;}

.calendar-search-set img.title-icon-img {width: 21px;height: 21px;float: left;padding-top: calc(1.5em - 19px);margin-right: 4px;}
.calendar-search-set h2.title-icon {width: calc(100% - 25px);display: inline-block;}
#list-akce-wrap p span {border-radius: 1000px;}
#list-akce-wrap p span.privatni {background-color:#8c000f!important}

/*  -----------------------------------Kalendář-----------------------------------------------  */

#kalendar .wrap-main{background-color: #F1F1F1 !important;}
#kalendar-detail .wrap-main{background-color: #F1F1F1 !important;}
#kalendar .wrap-side{background-color: #EAEAEA !important;}
#kalendar-detail .wrap-side{background-color: #EAEAEA !important;}


#kalendar .sub-header{min-height:145px;}
.sub-header-side{min-height:45px;}
#kalendar .sub-header-side{min-height:155px;}

.cal-item-detail {
    position: relative;
    height: auto;
    width: 100%;
    background-color: white;
    box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.35);
    margin-bottom: 2px;
    border-left: 5px solid #c20116;
  }
.cal-detail-icon{float:left;width:8%;}
.cal-detail-text {float:left;width:61%;margin-top:30px;padding-bottom:30px;font-size:0.9em;}
.cal-detail-text p.canceled {font-weight: 700; color: #c20116;}
.cal-detail-text h4 {font-size:1.4em;}
.cal-detail-text a {text-decoration: none !important;}
.cal-detail-image {float:left;width:18%;margin-left:2%;margin-right:3%;}

.cal-detail-link {
    position: absolute;
    top: 0;
    right: 0;
    width: 8%;
    height: 100%;
    background: #c20116 url(/program_files/img/img-system/title/dots.png) no-repeat center;
    text-align: center;
    z-index: 0;
  }
  
.cal-detail-icon img {width:70%;margin-left:15%;margin-top:40px;}
.cal-detail-image img {width:100%;margin-top:30px;}

.cal-date-location,.cal-date-location a {color: #c20116;}
.cal-perex {margin-top:10px;margin-bottom:10px;}
.cal-perex-links a{color: #c20116;font-size:0.8em;display:block; float:left;line-height:25px;margin-right:10px;}
.cal-perex-links img {width:16px;margin-top:5px;float:left;margin-right:5px;margin-left:5px;}
.cal-google-link {border:1px solid #c20116; float:left;display:block;display:block; padding:2px;}
#continuous-events h3{color:#c20116;margin-top:5vh;font-size:1.4em;}
#continuous-events .cal-item-detail{background-color:transparent;box-shadow: none;border-left-color:#f1f1f1;border-bottom:3px solid #d4d4d4;}
#continuous-events .cal-detail-link{
    box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.35);
    background: white url(/program_files/img/img-system/calendar/red-dots.png) no-repeat center;
}

/* === DESKTOP / normální režim: quicklinky POD SEBOU === */
#cal-quicklinks-target{
  clear: both;
  width: 100%;
}

#cal-quicklinks{
  display: block;
  padding-top: 40px;
  padding-bottom: 20px;
}

#cal-quicklinks .cal-lilie-link{
  display: block;
  clear: both;
  margin: 12px 0;
  padding-top: 0px;
}

#cal-quicklinks .cal-lilie-link img{
  float: left;
  width: 70px;
  height: auto;
}

#cal-quicklinks .cal-lilie-link strong{
  display: block;
  margin-left: 92px;  /* 70px + ~22px mezera */
  margin-top: 6px;
}

#cal-quicklinks .cal-lilie-link span{
  display: block;
  font-size: 0.8em;
  font-weight: normal;
  margin-top: 4px;
}

/* clearfix kvůli floatu */
#cal-quicklinks .cal-lilie-link::after{
  content:"";
  display:block;
  clear:both;
}

.calendar-search {margin-bottom:0px;clear:both;float:none;}
.calendar-search-set input, .calendar-search-set select {width:100%;max-width:100%;}
.form-compensate-padding input{width:94%;}
.calendar-search-set label {clear:both;width:100%;display:block;}
.calendar-search-set form div {margin-bottom:15px;}
footer .calendar-search-set form {padding-left: 7px; padding-top: 5px; margin-top: 10px;}

.calendar-search-set form {display:none;}

/* Na desktopu tlačítko ani overlay nechceme */
.cal-search-toggle{ display:none; }
.cal-search-overlay{ display:none; }


/* === Vyhledávání: taby === NOVÉ ****************************/

.calendar-search-set .search-type .cal-type-trigger{
  background:#fff !important;
  color:#c20116 !important;
  border: 1px solid #c20116 !important;
  padding: 0 !important;
  line-height: 38px;
}

.calendar-search-set .search-type .cal-type-trigger.search-active,
.calendar-search-set .search-type .cal-type-trigger:hover{
  background:#c20116 !important;
  color:#fff !important;
}

.calendar-search-set .search-type{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 14px;
}

/* jednotlivý tab */
.calendar-search-set .cal-type-trigger{
  appearance:none;
  -webkit-appearance:none;
  border: 1px solid #c20116;
  padding: 0;
  height: 38px;
  line-height: 38px;
  border-radius: 8px;
  background:#fff;
  font: inherit;
}

/* active + hover */
.calendar-search-set .cal-type-trigger.search-active,
.calendar-search-set .cal-type-trigger:hover{
  background:#c20116;
  color:#fff;
}

/* všechna pole full width */
.calendar-search-set input[type="text"],
.calendar-search-set select,
.calendar-search-set input[type="submit"]{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}



.calendar-search-set .form-row{
  margin-bottom: 14px;
}

/* MĚSÍC: 2 sloupce, typ + submit přes celou šířku */
#calendar-search-month{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#calendar-search-month .form-row--full{
  grid-column: 1 / -1;
}

/* === Vyhledávání – pole === */
.calendar-search-set input[type="text"],
.calendar-search-set select{
  height: 2em !important;
  padding: 0 14px;
  font-size: 16px;
  border: 1px solid #c20116;
  border-radius: 8px;
  background: #fff;
  color: #333;
  box-sizing: border-box;
}

/* placeholder */
.calendar-search-set input::placeholder{
  color:#999;
}

.calendar-search-set input:focus,
.calendar-search-set select:focus{
  outline: none;
  border-color: #c20116;
  box-shadow: 0 0 0 2px rgba(194,1,22,0.15);
}

.calendar-search-set input[type="submit"]{
  height: 46px;
  background:#c20116;
  color:#fff;
  font-size:16px;
  font-weight:700;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.calendar-search-set input[type="submit"]:hover{
  background:#a10012;
}



/* Styl pro input s ikonou kalendáře */
#calendar-search-day .datepicker {
    display: block;
    background: white url('/program_files/img/img-system/calendar/calendar-search.png') no-repeat !important;
    background-position: 10px center !important;
    background-size: 22px !important;
    padding-left: 40px; /* Odsazení textu od ikony */
    width:100% !important;
    box-sizing:border-box;
    padding-left:40px;
    font-size: 16px;
    cursor: pointer;
}

/* Oprava Flatpickr, který mění styl inputu */
.flatpickr-input {
    background: inherit !important; /* Dědí styl z #calendar-search-day .datepicker */
    background-color: white !important;
    padding-left: 40px !important;
}

/* Přidání efektu při otevření kalendáře */
.flatpickr-open {
    background-color: white !important;
}

.calendar-search-set {max-width:301px;}
.overlay {overflow-y:auto;}
.arrow-right {float: right;}
.arrow-rotate {-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}

#list-akce-wrap b{color:#c20116}

#kalendar-detail .date,#kalendar-detail .location,#kalendar-detail .person,#kalendar-detail .festival{width:48%;margin-right:2%;float:left;}

.u-sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}


/*  -----------------------------------Aktuality-----------------------------------------------  */

.perex {font-size:1.4em; margin-bottom:15px;}
.news-detail-images{
    float: right;
  width: 360px;
  margin: 0 0 16px 24px;
}
.img-news-main{width:95%;}
.news-detail-gallery{width:95%;}
.news-detail-footer {margin-bottom:30px;margin-top:30px;}


/*  -----------------------------------Kalendář detail-----------------------------------------------  */

#kalendar-detail a {text-decoration: underline; overflow-wrap: break-word;}
#kalendar-detail a.cal-google-link {text-decoration: none;}
.main-info .date, .main-info .location, .main-info .person {float: left; margin-right: 3%;}
#kalendar-detail .news-detail-images{
    width:360px;
    float:right;
}
#kalendar-detail .text-content {
    width: auto; 
    overflow: visible;
}
/* clearfix – aby float “nepropadal” do dalších částí stránky */
#kalendar-detail .text-content::after{
  content: "";
  display: block;
  clear: both;
}
#kalendar-detail .text-content .u-gridtable{
  overflow: hidden;
  clear: right;
}

.hline {background: url(../img/img-system/layout/bg-gray.jpg) repeat-y top right; height: 1px; margin-top: 5px; margin-bottom: 5px;}
#kalendar-detail .date{clear:both; width:100%;margin-bottom:20px;}
#kalendar-detail #mapa {margin-top:45px;clear:both;}

/*  -----------------------------------Three cols-----------------------------------------------  */

.wrap-main-three,.wrap-side-three {float:left;}
.wrap-main-three {width:48%;}
.wrap-side-three {width:26%;}


/*  -----------------------------------Youtube-----------------------------------------------  */

.youtube-video-container { position: relative;  overflow: hidden;  width: 50%;clear: both;  margin: 0 auto;margin-top:30px;}
.youtube-video-container::after {display: block;content: '';padding-top: 56.25%;}
.youtube-video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


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


@media screen and (max-width: 1350px) {
    .cal-detail-icon{width:7%;}
    .cal-detail-text {width:60%;}
    .cal-detail-image {width:21%;}
    .cal-detail-link {width:7%;}
	footer .calendar-search-set form {padding-left: 5%;}
}


@media screen and (max-width: 1100px) {
    .cal-detail-text {width:58%;}
    .cal-detail-image {width:23%;}

}


@media screen and (max-width: 950px) {

  #kalendar .wrap-main{
    grid-template-columns: 1fr;
  }

  #kalendar .wrap-side{
    position: static;
    width: auto;
    min-width: 0;
  }

    .subpage-icon{ display:none !important; }

    .subpage-title  {font-size:1.8em;}
    h2 {color:#c20116;font-size:1.3em;}
    h3 {font-size:1.1em;}
    h4 {font-size:0.9em;}
    #kalendar .sub-header {width:100%;}

    #kalendar .wrap-side{min-width:246px;position:absolute; top:0px; right:5px;width:35%;height:auto !important; }
    #kalendar .wrap-side .pad-main-right{max-width:100% !important;padding-top:30px !important;padding-left:0px !important;padding-right:0px !important; padding-bottom:0px !important; }
    .calendar-search {margin-bottom:10px !important;width:100%;}
    
    .cal-lilie-link{
        display: flex;
        align-items: flex-start;   /* ne center – ať text nezačne uprostřed ikony */
        gap: 12px;
    }
    .cal-lilie-link strong{
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sub-header-side{min-height:60px !important;max-height:60px !important;}

    .cal-social{display:none;}
    #kalendar .sub-header-side {display:none;}

    /*#kalendar .subpage-title {font-size:1.2em;}*/
    #kalendar .subpage-title.arrows {font-size: 0.6em;}
    #kalendar .arrows img {max-height: 15px;}
    .calendar-search-set form div{margin-bottom:1px;}

    .wrap-side-three-left {display:none;}
    .wrap-side-three-center {width:72%;}

    .three-layout{background: url(../img/img-system/layout/bg-gray.jpg) repeat-y top right; background-size: contain;}
    .sidebar-nav-mobile {display:block;}

    .calendar-search-set .search-type{
    grid-template-columns: repeat(2, 1fr);
  }


  /* zruš “absolutní sidebar”, který ti teď překrývá obsah */
  #kalendar .wrap-side{
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
  }

  /* tlačítko: vpravo, ať nekoliduje s hlavičkou ani FB lištou */
  .cal-search-toggle{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;
    border-radius: 0px;
    border: 2px solid #c20116;
    background: #c20116;
    color: #fff;
    
    box-shadow:
        0 2px 6px rgb(127, 127, 127),        /* oddělení od pozadí */
        0 0 0 3px #fff;

    font-weight: 600;
    cursor: pointer;

    /* pozice vpravo */
    position: fixed;
    top: 66px;              /* uprav si dle výšky headeru */
    right: 40px;            /* odsazení kvůli svislým tlačítkům (FB atp.) */
    z-index: 2000;
  }

    .cal-search-toggle:hover,
    .cal-search-toggle:focus-visible{
    background: #a80012;
    box-shadow:
        0 4px 10px rgba(0,0,0,.35),
        0 0 0 3px #fff;
    }


  .cal-search-toggle__icon{ font-size: 18px; line-height: 1; }

  /* overlay */
  .cal-search-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1990;
  }

  /* panel: rozbalí se POD tlačítkem, zarovnaný doprava */
  #calendar-search{
    position: fixed;
    z-index: 2001;
    display: none;

    /* vzhled + “okraje” */
    border: 2px solid rgba(194, 1, 22, .35);    /* lehce do červena */
    box-shadow: 0 18px 50px rgba(0,0,0,.35);    /* výraznější stín */
    outline: 1px solid rgba(0,0,0,.06);         /* jemná hrana navíc */
    background: #fff;
    
    border-radius: 0px;

    padding: 22px 18px;
    max-height: min(78vh, 560px);
    max-width: 100%;
    overflow: auto;

    /* bezpečné odsazení od okrajů obrazovky */
    margin: 0;

    overflow-x: hidden;
  }

  body.is-search-open #calendar-search{ display:block; }

  #calendar-search,
  #calendar-search *{
    box-sizing: border-box;
  }

  /* v panelu nechceme úzký max-width */
  #calendar-search .calendar-search-set{
    max-width: 100%;
    margin: 0 6px;                     /* ✅ pryč s vnějšími mezerami */
  }

  /* ✅ srovnat vnitřní rozestupy polí */
  #calendar-search .calendar-search-set form > div,
  #calendar-search .calendar-search-set .form-row{
    margin-bottom: 14px;           /* více vzduchu */
  }

  /* volitelné: když chceš i prvky hranaté */
  #calendar-search input,
  #calendar-search select,
  #calendar-search .cal-type-trigger{
    border-radius: 0;
  }

  .cal-search-overlay[hidden]{ display:none; }

    /* dlouhé texty/odkazy (festivaly apod.) ať nezpůsobí přetok */
    #calendar-search a,
    #calendar-search p,
    #calendar-search h2,
    #calendar-search h3{
    overflow-wrap: anywhere;
    word-break: break-word;
    }


/* menší odstup od nadpisu (pokud je quicklinks hned pod h1) */
#cal-quicklinks-target{ margin-top: 8px; padding-top: 0; }

#cal-quicklinks{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;              /* bylo 12px */
  padding-top: 0px;      /* přidá jen malý nádech */
  padding-bottom: 0px;
  margin-top: 6px;       /* menší odstup od nadpisu */
}

/* jednotlivé položky */
.cal-lilie-link{
  display: flex;
  align-items: center;
  gap: 1px;
  float: none;
  padding-left: 5px;
  background: #fff;
  border: 0px solid rgba(0,0,0,.12);
}

/* ikona */
.cal-lilie-link img{
  float: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 48px;
}

/* text */
.cal-lilie-link strong{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
  line-height: 1.15;
}

.cal-lilie-link span{
  line-height: 1.2;
}



  /* bezpečnost: ať se panel nepřilepí na úplně pravý okraj na úzkých mobilech */
  @media screen and (max-width: 450px){
    .cal-search-toggle{ right: 12px; top: 70px; }
    .cal-quicklinks{ grid-template-columns: 1fr; }
    .cal-quicklinks a:nth-child(3){ grid-column: auto; }
  }

}


@media screen and (max-width: 750px) {
    .cal-detail-link{background-size:70% !important;}
    .three-layout{background-image:none; background-color:#f1f1f1;}
    .wrap-side-three-center,.wrap-side-three-right {width:100%;}
}

@media screen and (max-width: 490px) {
	#kalendar .sub-header {width: 40%;}
	#kalendar-detail .text-content {width: 100%;}
	#kalendar-detail .news-detail-images {display: none;}
}

@media screen and (max-width: 450px) {
    .search-type div{font-size:0.9em !important;}
    .calendar-search-set h2 {font-size:1.2em;margin-top:40px;}
    #kalendar .wrap-side {width:95%;position:static;margin-left:5%;}
    #kalendar .subpage-icon {display:block;}
    #kalendar .sub-header {margin-top:0px; width: 100%;}
    #kalendar .subpage-title {font-size:1.8em;}
    #kalendar .sub-header-side {display:block;}
    .calendar-search-mobile-link {display:block;margin-top:-30px;margin-bottom:40px; text-decoration:underline;color:#c20116;}
    .calendar-search-set {margin-bottom:10vh;}
    #calendar-search-month{grid-template-columns: 1fr;}

}