/* Skryť h1.title – Views template má vlastné nadpisy */
h1.title {
  display: none !important;
}

/* ============================================================
   TURY LISTING – tura-grid karta
   kakac.sk – Barrio subtheme
   ============================================================ */


/* ============================================================
   GLOBÁLNE – žiadny focus outline pri kliknutí myšou
   Klávesnicová navigácia (Tab) si zachová outline (:focus-visible)
   ============================================================ */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Fallback pre staršie prehliadače bez :focus-visible */
nav.facets a:focus,
nav.facets button:focus,
.facet-item a:focus,
.we-mega-menu-li a:focus,
.tura-karta__img-link:focus,
.tura-karta__title a:focus,
#block-exposedformturypage-1 input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Search input – ak chceme jemný ring namiesto čierneho */
#block-exposedformturypage-1 input:focus {
  border-color: #8a8880 !important;
}

/* ---- ŠÍRKA – div#main na 100% ----------------------------- */
#navbar-main,
div#main {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/* ---- PADDING LISTINGU – dýchanie vľavo/vpravo ------------- */
/* .view-tury obaluje celý Views output (nadpis, filtre, grid) */
.view-tury {
  padding: 0;
}

/* ---- GRID -------------------------------------------------- */
.tura-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.tura-grid__empty {
  font-family: 'Lora', serif;
  color: #a09c96;
  font-size: 15px;
  padding: 32px 0;
  text-align: center;
}

/* ---- KARTA -------------------------------------------------- */
.tura-karta {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Celá karta klikateľná (pod titulkom) */
.tura-karta__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
}

/* Žiadny focus outline pri kliknutí na kartu/obrázok/nadpis */
.tura-karta__img-link:focus,
.tura-karta__img-link:focus-visible,
.tura-karta__title a:focus,
.tura-karta__title a:focus-visible,
.tura-karta__img:focus,
.tura-karta *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- OBRÁZOK kontajner (3:2 pomer) ------------------------ */
.tura-karta__img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 7px;
}

/* Vnútorný div – nesie background-image, zoom cez transform */
.tura-karta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #e8e4dc; /* fallback */
  transition: transform 0.35s ease;
}

/* Hover zoom – vtahuje do túry */
.tura-karta:hover .tura-karta__bg {
  transform: scale(1.07);
}

/* Pohorie badge na obrázku */
.tura-karta__pohorie {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  color: #4a4a48;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  pointer-events: none;
}

/* ---- TITULOK ----------------------------------------------- */
.tura-karta__title {
  font-family: 'Lora', serif;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a18;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(12px * 1.4 * 2);
}

.tura-karta__title a {
  color: #1a1a18;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.tura-karta__title a:hover {
  text-decoration: underline;
}

/* ---- PÄTA KARTY – dátum + hviezdy -------------------------- */
.tura-karta__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 3px;
  min-height: 14px;
  line-height: 1;
}

.tura-karta__datum {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #b0aca4;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  z-index: 2;
}

/* ---- FIVESTAR v karte -------------------------------------- */
/* Presná štruktúra podľa skutočného HTML:
   span.tura-karta__stars
     form.fivestar-form
       div.clearfix.fivestar-average-stars.fivestar-form-item
         div.js-form-item.mb-3           ← Bootstrap margin-bottom:12px !
           div.js-form-item.mb-3         ← Bootstrap margin-bottom:12px !
             select (hidden)
             div.fivestar-widget.clearfix
               div.star.on > a
             small.description           ← "Priemer: 5 (5 hlasov)"
       button.js-hide                    ← "Rate"
       input[type=hidden] × 2
*/

/* 1. span obsahuje block <form> → inline-flex
   position + z-index: zabezpečí klikateľnosť nad .tura-karta__link */
.tura-karta__stars {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1;
  vertical-align: middle;
}

/* 2. form: block → inline-flex */
.tura-karta__stars form {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 3. clearfix pseudo-elementy rušia inline-flex */
.tura-karta__stars .clearfix::before,
.tura-karta__stars .clearfix::after {
  display: none !important;
  content: none !important;
  clear: none !important;
}

/* 4. Všetky wrapper divy inline-flex + Bootstrap .mb-3 → margin:0 */
.tura-karta__stars .clearfix,
.tura-karta__stars .fivestar-average-stars,
.tura-karta__stars .fivestar-form-item,
.tura-karta__stars .fivestar-basic,
.tura-karta__stars .mb-3,
.tura-karta__stars .js-form-item,
.tura-karta__stars .form-item,
.tura-karta__stars .js-form-type-fivestar,
.tura-karta__stars .js-form-type-select,
.tura-karta__stars .form-type-fivestar,
.tura-karta__stars .form-type-select {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 5. Skryť: small, hidden inputs, noscript, select
   POZOR: button.js-hide neskrývame cez !important – Fivestar JS ho
   potrebuje kliknúť programaticky cez AJAX submitom. Drupal's js-hide
   ho skryje sám cez jQuery .hide(). */
.tura-karta__stars small,
.tura-karta__stars noscript,
.tura-karta__stars .antibot-no-js,
.tura-karta__stars .antibot-message,
.tura-karta__stars .fivestar-summary,
.tura-karta__stars .description,
.tura-karta__stars input,
.tura-karta__stars select {
  display: none !important;
}

/* Rate button – off-screen, Fivestar JS ho kliká programaticky cez AJAX
   NIKDY nepoužívať display:none !important – zablokuje AJAX submit */
.tura-karta__stars button {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 6. Samotné hviezdy */
.tura-karta__stars .fivestar-widget {
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: auto !important;  /* Fivestar JS potrebuje chytiť klik */
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.tura-karta__stars .fivestar-widget .star {
  display: inline !important;
  line-height: 1;
}

.tura-karta__stars .fivestar-widget .star a {
  display: inline !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  font-size: 9px;
  line-height: 1;
}

.tura-karta__stars .fivestar-widget .star a span {
  display: none !important;
}

/* ============================================================
   TABLET (≤1200px) – 4 karty
   ============================================================ */
@media (max-width: 1200px) {
  .tura-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

/* ============================================================
   TABLET malý (≤768px) – 3 karty
   ============================================================ */
@media (max-width: 768px) {
  .tura-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .tura-karta__title { font-size: 11px; }
}

/* ============================================================
   MOBILE (≤480px) – 2 karty
   ============================================================ */
@media (max-width: 480px) {
  .tura-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .tura-karta__pohorie { display: none; }
}


/* ============================================================
   FACETS MEGA MENU – WE Mega Menu → pill dizajn
   ============================================================ */

nav.facets {
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

nav.facets .container-fluid {
  padding: 0 !important;
}

nav.facets .navbar-header,
nav.facets .navbar-toggle {
  display: none !important;
}

nav.facets .we-mega-menu-ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  float: none !important;
}

nav.facets .we-mega-menu-li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

nav.facets .we-mega-menu-li > a,
nav.facets .we-mega-menu-li > a.we-megamenu-nolink {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border-radius: 16px !important;
  padding: 5px 13px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  color: #3a3a38 !important;
  background: transparent !important;
  border: 0.5px solid #a09c96 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.5 !important;
}

nav.facets .we-mega-menu-li > a::after {
  content: '▾';
  font-size: 9px;
  opacity: 0.5;
  margin-left: 2px;
}

nav.facets .we-mega-menu-li > a:hover,
nav.facets .we-mega-menu-li.facet-active > a,
nav.facets .we-mega-menu-li.open > a,
nav.facets .we-mega-menu-li.active-trail > a {
  background: #3a3a38 !important;
  color: #fff !important;
  border-color: #3a3a38 !important;
}

nav.facets .we-mega-menu-submenu {
  background: #fff !important;
  border: 0.5px solid #e8e4dc !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
  padding: 6px 0 !important;
  min-width: 160px !important;
  z-index: 1000 !important;
}

nav.facets .we-mega-menu-submenu-inner {
  padding: 0 !important;
}

nav.facets .we-mega-menu-row,
nav.facets .we-mega-menu-col {
  padding: 0 !important;
  margin: 0 !important;
}

nav.facets .block-facets h2,
nav.facets .block__title {
  display: none !important;
}

nav.facets .facets-widget-links ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 320px;
  overflow-y: auto;
}

nav.facets .facet-item a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #3a3a38 !important;
  text-decoration: none !important;
  transition: background 0.1s;
  white-space: nowrap;
}

nav.facets .facet-item a:hover,
nav.facets .facet-item a.is-active,
nav.facets .facet-item--active a,
nav.facets .facet-item.facet-item--active a {
  background: #3a3a38 !important;
  color: #fff !important;
  font-weight: 500 !important;
}

nav.facets .facet-item a.is-active .facet-item__count,
nav.facets .facet-item--active a .facet-item__count {
  color: rgba(255,255,255,0.6) !important;
}

nav.facets .facet-item__value {
  flex: 1;
}

nav.facets .facet-item__count {
  font-size: 10px !important;
  color: #a09c96 !important;
  margin-left: 8px;
}

nav.facets .facets-soft-limit-link {
  display: block;
  padding: 4px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #a09c96;
  text-decoration: none;
  border-top: 0.5px solid #f0efe8;
  margin-top: 4px;
}


/* ============================================================
   TURY PAGE HEADER – Túry nadpis + počítadlo výletov
   ============================================================ */
.tury-page-header {
  padding-bottom: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.tury-page-header__title {
  font-family: 'Lora', serif;
  color: #1a1a18;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.8px;
  line-height: 1;
  margin: 0;
}

.tury-page-header__meta {
  font-family: 'Inter', sans-serif;
  color: #a09c96;
  font-size: 12px;
  margin: 4px 0 0;
  letter-spacing: 0.3px;
}

.path-tury .block-page-title-block,
.path-tury #block-kakac-page-title {
  display: none !important;
}

/* ============================================================
   SEARCH FORM – #block-exposedformturypage-1
   ============================================================ */

#block-exposedformturypage-1 {
  display: flex;
  align-items: center;
}

#block-exposedformturypage-1 form {
  display: flex;
  align-items: center;
  gap: 6px;
}

#block-exposedformturypage-1 .d-flex {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

#block-exposedformturypage-1 .mb-3 {
  margin-bottom: 0 !important;
}

#block-exposedformturypage-1 input.form-autocomplete,
#block-exposedformturypage-1 input.form-control[type="text"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #3a3a38 !important;
  background: transparent !important;
  border: 0.5px solid #a09c96 !important;
  border-radius: 16px !important;
  padding: 5px 14px !important;
  height: auto !important;
  line-height: 1.5 !important;
  min-width: 200px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s;
}

#block-exposedformturypage-1 input.form-autocomplete:focus,
#block-exposedformturypage-1 input.form-control:focus {
  border-color: #8a8880 !important;
  box-shadow: none !important;
  outline: none !important;
}

#block-exposedformturypage-1 input::placeholder {
  color: #c0bab4;
}

#block-exposedformturypage-1 button.btn-primary {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: #3a3a38 !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 5px 14px !important;
  color: #fff !important;
  height: auto !important;
  line-height: 1.5 !important;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

#block-exposedformturypage-1 button.btn-primary::before,
#block-exposedformturypage-1 button.btn-primary::after,
#block-exposedformturypage-1 button.btn-primary .icon,
#block-exposedformturypage-1 button.btn-primary .btn-icon {
  display: none !important;
  content: none !important;
}

#block-exposedformturypage-1 button.btn-primary:hover {
  background: #1a1a18 !important;
}

/* ============================================================
   TURY TOOLBAR – filter bar + search pod headerom (po JS reorder)
   ============================================================ */
.tury-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 0;
  border-top: 0.5px solid #e8e4dc;
  border-bottom: 0.5px solid #e8e4dc;
  margin-bottom: 16px;
}

/* Facets: margin-left:auto tlačí blok + search vpravo */
.tury-toolbar #block-facets-2 {
  margin-left: auto !important;
  flex: 0 0 auto;
  width: fit-content !important;
  max-width: fit-content !important;
}

/* Reťazec kontajnerov – auto šírka */
.tury-toolbar #block-facets-2 .content,
.tury-toolbar #block-facets-2 .region-we-mega-menu {
  width: auto !important;
  display: block !important;
}

.tury-toolbar nav.facets,
.tury-toolbar nav.facets.navbar {
  width: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
}

.tury-toolbar .container-fluid {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tury-toolbar .navbar-toggle,
.tury-toolbar .navbar-header,
.tury-toolbar a.navbar-toggle {
  display: none !important;
}

/* Search – vpravo za facets */
.tury-toolbar #block-exposedformturypage-1 {
  flex-shrink: 0;
}

/* ============================================================
   ANIMÁCIA – vstup kariet pri načítaní stránky
   ============================================================ */
@keyframes karta-vstup {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tura-karta {
  animation: karta-vstup 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.tura-karta:nth-child(1) { animation-delay: 0.05s; }
.tura-karta:nth-child(2) { animation-delay: 0.10s; }
.tura-karta:nth-child(3) { animation-delay: 0.15s; }
.tura-karta:nth-child(4) { animation-delay: 0.20s; }
.tura-karta:nth-child(5) { animation-delay: 0.25s; }
.tura-karta:nth-child(6) { animation-delay: 0.30s; }
.tura-karta:nth-child(7) { animation-delay: 0.35s; }
.tura-karta:nth-child(8) { animation-delay: 0.40s; }
.tura-karta:nth-child(9) { animation-delay: 0.45s; }
.tura-karta:nth-child(10) { animation-delay: 0.50s; }
.tura-karta:nth-child(11) { animation-delay: 0.55s; }
.tura-karta:nth-child(12) { animation-delay: 0.60s; }
.tura-karta:nth-child(13) { animation-delay: 0.65s; }
.tura-karta:nth-child(14) { animation-delay: 0.70s; }
.tura-karta:nth-child(15) { animation-delay: 0.75s; }
.tura-karta:nth-child(16) { animation-delay: 0.80s; }
.tura-karta:nth-child(17) { animation-delay: 0.85s; }
.tura-karta:nth-child(18) { animation-delay: 0.90s; }
.tura-karta:nth-child(19) { animation-delay: 0.95s; }
.tura-karta:nth-child(20) { animation-delay: 1.00s; }
.tura-karta:nth-child(21) { animation-delay: 1.05s; }
.tura-karta:nth-child(22) { animation-delay: 1.10s; }
.tura-karta:nth-child(23) { animation-delay: 1.15s; }
.tura-karta:nth-child(24) { animation-delay: 1.20s; }

.tura-karta:hover .tura-karta__bg {
  transform: scale(1.07);
  transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tura-karta {
    animation: none;
  }
}

/* ============================================================
   MOBILE – .tury-toolbar (≤768px)
   WE Mega Menu má vlastný JS pre mobile (trieda mobile-main-menu,
   navbar-toggle) – nechávame ho robiť svoju robotu.
   My riešime len layout toolbaru: 2 riadky + plná šírka facets
   (bez fit-content, ktorý spôsoboval Bootstrap navbar collapse).
   ============================================================ */
@media (max-width: 768px) {

  /* Toolbar: 2 riadky – hore search, dole facets */
  .tury-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  /* Search – horný riadok, plná šírka */
  .tury-toolbar #block-exposedformturypage-1 {
    order: 1;
    width: 100% !important;
    flex: 0 0 100%;
  }

  .tury-toolbar #block-exposedformturypage-1 form,
  .tury-toolbar #block-exposedformturypage-1 .d-flex {
    width: 100%;
  }

  .tury-toolbar #block-exposedformturypage-1 input.form-autocomplete,
  .tury-toolbar #block-exposedformturypage-1 input.form-control[type="text"] {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Facets – dolný riadok, plná šírka
     KĽÚČOVÉ: fit-content (desktop) sa zruší → Bootstrap navbar
     zostane v expanded stave a WE Mega Menu môže fungovať normálne */
  .tury-toolbar #block-facets-2 {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    flex: 0 0 100%;
  }

  .tury-toolbar #block-facets-2 .content,
  .tury-toolbar #block-facets-2 .region-we-mega-menu,
  .tury-toolbar nav.facets,
  .tury-toolbar nav.facets.navbar,
  .tury-toolbar .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }
}





/* Obrázok link – bez overlay */
.tura-karta__img-link {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.tura-karta__body {
  padding: 10px 4px 4px;
}

@media (max-width: 991px) {
nav.facets .we-mega-menu-li > a,
nav.facets .we-mega-menu-li > a.we-megamenu-nolink {
  background: #fff !important;
}

.navbar-we-mega-menu.navbar .nav .open > a,
.navbar-we-mega-menu.navbar .nav .open > a:focus,
.navbar-we-mega-menu.navbar ul a:hover,
.navbar-we-mega-menu.navbar ul a:focus,
.navbar-we-mega-menu.navbar ul .we-megamenu-nolink:hover,
.navbar-we-mega-menu.navbar ul .we-megamenu-nolink:focus {
  color: #000 !important;
}

.overlay {
  background-color: rgba(0,0,0,.6);
}

}