/* mapa.css — štýly len pre túto časť webu, vyčlenené zo style.css 29. 10. 2026.
   Načítava ich komponent <CssCast nazov="mapa" /> (lib/cssVerzia.ts). Nové pravidlá pre túto časť patria sem. */

/* EXPLORE MAP (/mapa) — Airbnb-style split */

body:has(.explore-page) {
  overflow: hidden;
}

body:has(.explore-page) .ks-footer {
  display: none;
}

body:has(.explore-page) main {
  padding: 0;
}

.explore-page {
  --ks-site-chrome: 7.35rem;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--ks-site-chrome));
  height: calc(100dvh - var(--ks-site-chrome));
  background: #fff;
  min-height: 0;
}

@media (min-width: 768px) {
  .explore-page {
    --ks-site-chrome: 11.1rem;
  }
}

.explore-bar {
  flex: none;
  z-index: 6;
  background: #fff;
  border-bottom: 1px solid var(--ks-border);
  padding: 0.85rem clamp(1.1rem, 3vw, 1.75rem) 0.95rem;
}

.explore-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.explore-title {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1c1917;
  margin: 0;
}

.explore-count {
  margin: 0;
  font-size: var(--ks-t-s);
  font-weight: 600;
  color: #78716c;
}

.explore-bar-filters {
  display: grid;
  grid-template-columns: minmax(16rem, 2.4fr) repeat(3, minmax(9.5rem, 1fr)) auto;
  gap: 0.65rem 0.9rem;
  align-items: end;
  width: 100%;
}

.explore-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  padding: 0.28rem 0.35rem 0.28rem 0.95rem;
  color: #78716c;
  min-width: 0;
  width: 100%;
}

.explore-search input {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  background: transparent;
  font-family: var(--ks-font-text);
  font-size: var(--ks-t-sm);
  font-weight: 600;
  color: #1c1917;
}

.explore-search-btn {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: #c43c32;
  color: #fff;
  font-family: var(--ks-font-text);
  font-size: var(--ks-t-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
}

.explore-search-btn:hover {
  background: #a8322a;
}

.explore-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-size: var(--ks-t-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78716c;
  min-width: 0;
  width: 100%;
}

.explore-field select {
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: #fff;
  padding: 0.48rem 0.85rem;
  font-size: var(--ks-t-sm);
  font-weight: 600;
  color: #1c1917;
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
}

.explore-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.95rem;
  padding: 0 0.1rem 0.4rem;
}

.explore-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--ks-t-s);
  font-weight: 700;
  color: #44403c;
  white-space: nowrap;
  cursor: pointer;
}

.explore-check input {
  accent-color: #1a5fa8;
}

@media (max-width: 1199.98px) {
  .explore-bar-filters {
    grid-template-columns: minmax(14rem, 1.6fr) repeat(3, minmax(8.5rem, 1fr));
  }
  .explore-toggles {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }
}

.explore-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.explore-list {
  flex: 0 0 min(42%, 34rem);
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ks-border);
}

.explore-cards {
  padding: 0.9rem 1.15rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.explore-empty {
  margin: 1.5rem 0.2rem;
  color: #78716c;
  font-weight: 600;
  font-size: var(--ks-t-sm);
  line-height: 1.5;
}

.explore-card {
  display: grid;
  grid-template-columns: 9.4rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.55rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ks-border);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.explore-card-media {
  display: block;
  height: 7.4rem;
  border-radius: 12px;
  overflow: hidden;
  background: #efe6d8;
}

.explore-card-media img,
.explore-card-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.explore-card-ph {
  background: linear-gradient(145deg, #e8dcc8, #d7c4a8);
}

.explore-card-body {
  min-width: 0;
  padding: 0.15rem 0.2rem 0.1rem 0;
}

.explore-card-title {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #1c1917;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-decoration: none;
}

.explore-card-title:hover {
  color: #1a5fa8;
}

.explore-card-meta {
  margin-top: 0.28rem;
  font-size: var(--ks-t-xs);
  font-weight: 600;
  color: #78716c;
}

.explore-card-desc {
  margin: 0.35rem 0 0;
  font-size: var(--ks-t-xs);
  line-height: 1.4;
  color: #57534e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.explore-map-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  background: #dce8f2;
}

.explore-map {
  position: absolute;
  inset: 0;
}

.explore-search-area {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1c1917;
  font-weight: 800;
  font-size: 0.84rem;
  padding: 0.55rem 1.05rem;
  box-shadow: 0 8px 24px rgba(28, 18, 8, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.explore-map-busy {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 500;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: var(--ks-t-xs);
  font-weight: 700;
  color: #57534e;
}

@media (max-width: 991.98px) {
  .explore-bar-filters {
    grid-template-columns: 1fr 1fr;
  }
  .explore-search,
  .explore-toggles {
    grid-column: 1 / -1;
  }
  .explore-split {
    flex-direction: column;
  }
  .explore-map-wrap {
    flex: none;
    height: min(42vh, 20rem);
  }
  .explore-list {
    flex: 1 1 auto;
    min-height: 0;
    border-right: 0;
    border-top: 1px solid var(--ks-border);
  }
  .explore-card {
    grid-template-columns: 6.6rem minmax(0, 1fr);
    gap: 0.7rem;
  }
  .explore-card-media {
    height: 5.6rem;
  }
}

@media (max-width: 575.98px) {
  .explore-bar {
    padding: 0.55rem 0.95rem 0.6rem;
  }
  .explore-bar-head {
    margin-bottom: 0.4rem;
    gap: 0.35rem;
  }
  .explore-title {
    font-size: 1.08rem;
  }
  .explore-count {
    font-size: var(--ks-t-xs);
  }
  .explore-bar-filters {
    gap: 0.4rem 0.55rem;
  }
  .explore-search {
    padding: 0.2rem 0.28rem 0.2rem 0.75rem;
  }
  .explore-field select {
    padding: 0.4rem 0.7rem;
  }
  .explore-toggles {
    gap: 0.35rem 0.7rem;
    padding: 0;
  }
  .explore-check {
    font-size: var(--ks-t-xs);
  }
  .explore-map-wrap {
    height: min(28vh, 13.5rem);
  }
}

.explore-field > span {
  font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.8rem);
}

/* ══ koniec bočného panela ═══════════════════════════════════════════════ *//* ============================================================================
   Interaktívna mapa na mobile — zoznam a mapa sa striedajú
   Predtým bolo na obrazovke oboje naraz a filter navyše: z 780 px okna zabral
   filter 261, mapa 216 a na zoznam zostalo 186 — necelá jedna a pol karty zo
   šesťdesiatich. Filter sa teraz rozbaľuje a medzi zoznamom a mapou sa
   prepína plávajúcim tlačidlom.
   Návrat: zmazať blok po značku „koniec mobilnej mapy".
   ========================================================================= *//* Na širokej obrazovke tieto ovládače nepatria — tam je miesta dosť. */

.explore-filters-toggle,
.explore-view-switch {
  display: none;
}

@media (max-width: 767.98px) {
  .explore-bar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
  }
  .explore-bar-head__text {
    min-width: 0;
  }

  .explore-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--ks-border);
    border-radius: 999px;
    background: #fff;
    font-size: var(--ks-t-xs);
    font-weight: 700;
    color: #374151;
    cursor: pointer;
  }
  .explore-filters-toggle[aria-expanded='true'] {
    border-color: var(--ks-blue);
    color: var(--ks-blue);
  }
  .explore-filters-toggle em {
    font-style: normal;
    font-size: var(--ks-t-2xs);
    font-weight: 800;
    color: #fff;
    background: var(--ks-red);
    border-radius: 999px;
    padding: 0.05rem 0.38rem;
  }

  /* Vyhľadávanie ostáva vždy; výbery a prepínače až po rozbalení. */
  .explore-bar-filters .explore-field,
  .explore-bar-filters .explore-toggles {
    display: none;
  }
  .explore-bar-filters.is-open .explore-field {
    /* Pôvodná hodnota — `block` by rozbil stĺpcové usporiadanie popisu a výberu. */
    display: flex;
  }
  .explore-bar-filters.is-open .explore-toggles {
    display: flex;
  }

  /* Zoznam a mapa sa striedajú. Obe vrstvy sú na sebe a majú plný rozmer —
     skrývame ich viditeľnosťou, nie `display: none`. Leaflet totiž počíta
     veľkosť pri vzniku a v skrytom kontajneri by vznikol nulový, takže by
     namiesto mapy zostal prúžok dlaždíc a prázdny výrez. */
  .explore-split {
    position: relative;
  }
  .explore-list,
  .explore-map-wrap {
    position: absolute;
    inset: 0;
    flex: none;
    height: auto;
    min-height: 0;
  }
  .explore-page.is-list .explore-map-wrap,
  .explore-page.is-map .explore-list {
    visibility: hidden;
    pointer-events: none;
  }
  .explore-page.is-list .explore-list,
  .explore-page.is-map .explore-map-wrap {
    visibility: visible;
    pointer-events: auto;
  }
  /* Aby posledná karta nezostala pod plávajúcim tlačidlom. */
  .explore-page.is-list .explore-cards {
    padding-bottom: 4.5rem;
  }

  .explore-view-switch {
    position: fixed;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.35rem;
    border: 0;
    border-radius: 999px;
    background: var(--ks-bluedk);
    color: #fff;
    font-size: var(--ks-t-s);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 26px -8px rgba(9, 24, 45, 0.6);
  }
  .explore-view-switch:active {
    transform: translateX(-50%) translateY(1px);
  }
}

@media (max-width: 767.98px) {
  .explore-check input[type='checkbox'] {
    width: 1.15rem;
    height: 1.15rem;
  }
  .explore-check {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
}

/* ============================================================================
   STRÁNKOVANIE MAPY (/mapa-slovenska, 13. 10. 2026)
   Strana mení zoznam aj body na mape. Plné stránkovanie pod zoznamom,
   kompaktné (‹ 2 / 34 ›) v hlavičke — vidieť aj na mobile v režime mapy.
   Návrat: zmazať blok po značku „koniec stránkovania mapy“.
   ========================================================================= */

.explore-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.2rem 1.15rem 1.6rem;
}

.explore-pager-cisla {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.explore-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  border: 1px solid var(--ks-border);
  border-radius: 999px;
  background: #fff;
  color: #1c1917;
  font-size: var(--ks-t-s);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.explore-pager button:hover:not(:disabled) {
  border-color: #1a5fa8;
  background: #f1f6fc;
}

.explore-pager button:disabled {
  opacity: 0.45;
  cursor: default;
}

.explore-pager .explore-pager-cislo.is-active {
  background: #1a5fa8;
  border-color: #1a5fa8;
  color: #fff;
  opacity: 1;
}

.explore-pager-vynech {
  color: #78716c;
  padding: 0 0.15rem;
}

.explore-pager--kompakt {
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 0;
  margin-top: 0.4rem;
  gap: 0.35rem;
}

.explore-pager--kompakt button {
  min-width: 2rem;
  height: 2rem;
  padding: 0;
}

.explore-pager-stav {
  font-size: var(--ks-t-s);
  font-weight: 700;
  color: #44403c;
  min-width: 3.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Počet a kompaktné stránkovanie v jednom riadku pod nadpisom. */

.explore-bar-head__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
}

.explore-bar-head__text .explore-title {
  flex-basis: 100%;
}

.explore-bar-head__text .explore-pager--kompakt {
  margin-top: 0;
}

.explore-pager--kompakt button {
  min-width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

@media (max-width: 767.98px) {
  /* Filtre ostanú vpravo vedľa nadpisu, počet a strany sa zalomia pod seba. */
  .explore-bar-head {
    flex-wrap: nowrap;
  }
  .explore-bar-head__text {
    flex: 1 1 auto;
  }
}

@media (max-width: 575.98px) {
  .explore-pager-sipka span {
    display: none;
  }
}