/* ══════════════════════════════════════════════════════════════
   Katalog hotelů — Design System CSS
   ══════════════════════════════════════════════════════════════ */

/* ── Google Fonts are loaded in header.php ── */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --kh-ink:      #0B2046;
  --kh-ink-2:    #1A3266;
  --kh-text-2:   #475569;
  --kh-text-3:   #94A3B8;
  --kh-bg:       #F8FAFC;
  --kh-surface:  #FFFFFF;
  --kh-surface-2:#F1F5F9;
  --kh-border:   #E2E8F0;
  --kh-orange:   #FF6B35;
  --kh-orange-2: #E85D2A;
  --kh-turquoise:#00B4D8;
  --kh-lt-blue:  #90E0EF;
  --kh-mint:     #DEF7F0;
  --kh-peach:    #FFE8DC;
  --kh-sun:      #FFB800;
  --kh-success:  #10B981;
  --kh-error:    #EF4444;

  --radius-sm:   0.625rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  --shadow-sm:   0 4px 20px -8px rgba(11,32,70,.07);
  --shadow-md:   0 8px 32px -8px rgba(11,32,70,.12);
  --shadow-lg:   0 18px 40px -12px rgba(11,32,70,.18);
  --shadow-cta:  0 8px 24px -8px rgba(255,107,53,.5);

  --transition:  .2s ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--kh-bg);
  color: var(--kh-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--kh-ink);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p  { color: var(--kh-text-2); }

/* ── Layout ─────────────────────────────────────────────────── */
.kh-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media(min-width:640px)  { .kh-container { padding: 0 1.5rem; } }
@media(min-width:1024px) { .kh-container { padding: 0 2rem; } }

.kh-section { padding: 4rem 0; }
@media(min-width:768px) { .kh-section { padding: 6rem 0; } }

.kh-grain {
  background-image: radial-gradient(rgba(11,32,70,.04) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.kh-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--kh-border);
  height: 4.5rem;
}
.kh-navbar .inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.kh-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--kh-ink);
  flex-shrink: 0;
}
.kh-logo .dot {
  width: 2rem; height: 2rem;
  background: var(--kh-ink);
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
}
.kh-logo .dot::after {
  content: '';
  width: .6rem; height: .6rem;
  background: var(--kh-orange);
  border-radius: 50%;
}
.kh-logo span { color: var(--kh-turquoise); }

.kh-nav-links {
  display: none;
  align-items: center;
  gap: .25rem;
  flex: 1;
}
@media(min-width:1024px) { .kh-nav-links { display: flex; } }

.kh-nav-links a {
  padding: .4rem .85rem;
  border-radius: var(--radius-full);
  font-size: .875rem;
  font-weight: 500;
  color: var(--kh-text-2);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.kh-nav-links a:hover,
.kh-nav-links a.active {
  background: var(--kh-ink);
  color: #fff;
}

.kh-nav-search {
  display: none;
  margin-left: auto;
}
@media(min-width:1024px) { .kh-nav-search { display: flex; } }

.kh-nav-search input {
  background: var(--kh-surface-2);
  border: 1.5px solid var(--kh-border);
  border-radius: var(--radius-full);
  padding: .45rem 1rem .45rem 2.5rem;
  font-size: .875rem;
  width: 18rem;
  transition: border-color var(--transition), background var(--transition);
  outline: none;
}
.kh-nav-search input:focus {
  border-color: var(--kh-turquoise);
  background: #fff;
}
.kh-nav-search-wrap {
  position: relative;
}
.kh-nav-search-wrap svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kh-text-3);
  pointer-events: none;
}

.kh-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md);
  color: var(--kh-ink);
  margin-left: auto;
}
@media(min-width:1024px) { .kh-menu-btn { display: none; } }
.kh-menu-btn:hover { background: var(--kh-surface-2); }

.kh-mobile-menu {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--kh-border);
  padding: 1rem 0 1.5rem;
}
.kh-mobile-menu.open { display: block; }
.kh-mobile-menu a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--kh-text-2);
  border-radius: var(--radius-md);
  margin: 0 .5rem;
  transition: background var(--transition);
}
.kh-mobile-menu a:hover { background: var(--kh-surface-2); }
.kh-mobile-menu .mobile-search {
  margin: .75rem 1.25rem 0;
}
.kh-mobile-menu .mobile-search input {
  width: 100%;
  background: var(--kh-surface-2);
  border: 1.5px solid var(--kh-border);
  border-radius: var(--radius-full);
  padding: .55rem 1rem;
  outline: none;
}

/* ── Hero ───────────────────────────────────────────────────── */
.kh-hero {
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media(min-width:768px) { .kh-hero { min-height: 92vh; } }

.kh-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}
.kh-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,32,70,.15) 0%,
    rgba(11,32,70,.55) 60%,
    rgba(11,32,70,.88) 100%);
}

.kh-hero-blob-orange {
  position: absolute;
  width: 40vmax; height: 40vmax;
  background: radial-gradient(circle, rgba(255,107,53,.3) 0%, transparent 70%);
  top: -10%; right: -10%;
  pointer-events: none;
}
.kh-hero-blob-teal {
  position: absolute;
  width: 30vmax; height: 30vmax;
  background: radial-gradient(circle, rgba(0,180,216,.25) 0%, transparent 70%);
  bottom: 5%; left: -5%;
  pointer-events: none;
}

.kh-hero-content {
  position: relative;
  z-index: 2;
  padding: 3rem 0 4rem;
  width: 100%;
}
@media(min-width:768px) { .kh-hero-content { padding: 4rem 0 6rem; } }

.kh-hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  max-width: 20ch;
  margin-bottom: 1.25rem;
}
.kh-hero h1 .gold { color: var(--kh-sun); }

.kh-hero .sub {
  color: rgba(255,255,255,.85);
  font-size: clamp(.9375rem, 1.5vw, 1.125rem);
  max-width: 48ch;
  margin-bottom: 2rem;
}

.kh-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.kh-quick-links a {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: var(--radius-full);
  padding: .35rem .9rem;
  font-size: .8125rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  transition: background var(--transition);
}
.kh-quick-links a:hover { background: rgba(255,255,255,.25); }

/* ── Search Bar ─────────────────────────────────────────────── */
.kh-searchbar {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-full);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.35);
  padding: .5rem;
  max-width: 72rem;
  width: 100%;
}
.kh-searchbar-inner {
  display: flex;
  align-items: stretch;
  gap: .25rem;
}
.kh-search-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .5rem 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition);
  min-width: 0;
}
.kh-search-field:hover { background: var(--kh-surface-2); }
.kh-search-field label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kh-ink);
  display: flex; align-items: center; gap: .35rem;
}
.kh-search-field label svg { color: var(--kh-orange); }
.kh-search-field input,
.kh-search-field select {
  background: none;
  border: none;
  outline: none;
  font-size: .9375rem;
  color: var(--kh-text-2);
  width: 100%;
  padding: 0;
}
.kh-search-field select { cursor: pointer; }
.kh-search-btn {
  background: var(--kh-orange);
  color: #fff;
  border-radius: var(--radius-full);
  padding: .85rem 1.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  display: flex; align-items: center; gap: .5rem;
  box-shadow: var(--shadow-cta);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.kh-search-btn:hover {
  background: var(--kh-orange-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(255,107,53,.55);
}
.kh-searchbar-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media(min-width:640px) {
  .kh-searchbar-compact { grid-template-columns: 1fr 1fr; }
}
@media(min-width:1024px) {
  .kh-searchbar-compact { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
}

/* ── Chips ──────────────────────────────────────────────────── */
.kh-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: var(--radius-full);
  background: var(--kh-surface-2);
  border: 1px solid var(--kh-border);
  color: var(--kh-text-2);
  font-size: .8125rem;
  font-weight: 500;
}
.kh-chip-mint  { background: var(--kh-mint);  border-color: transparent; color: #006C72; }
.kh-chip-peach { background: var(--kh-peach); border-color: transparent; color: #B23E0B; }

/* ── Buttons ────────────────────────────────────────────────── */
.kh-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .9375rem;
  padding: .7rem 1.5rem;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition);
  cursor: pointer;
}
.kh-btn-cta {
  background: var(--kh-orange);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.kh-btn-cta:hover {
  background: var(--kh-orange-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(255,107,53,.55);
}
.kh-btn-outline {
  background: transparent;
  color: var(--kh-ink);
  border: 1.5px solid var(--kh-border);
}
.kh-btn-outline:hover {
  background: var(--kh-surface-2);
  border-color: var(--kh-ink);
}
.kh-btn-ghost {
  background: transparent;
  color: var(--kh-text-2);
}
.kh-btn-ghost:hover { background: var(--kh-surface-2); }
.kh-btn-sm { padding: .45rem 1rem; font-size: .8125rem; }
.kh-btn-lg { padding: .9rem 2rem; font-size: 1.0625rem; }

/* ── Section heading ─────────────────────────────────────────── */
.kh-section-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.kh-section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-top: .75rem;
  margin-bottom: .75rem;
}
.kh-section-head p {
  font-size: 1.0625rem;
  max-width: 52ch;
  margin: 0 auto;
}

/* ── Hotel Card ─────────────────────────────────────────────── */
.kh-hotel-card {
  background: var(--kh-surface);
  border: 1px solid var(--kh-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.kh-hotel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.kh-hotel-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.kh-hotel-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.kh-hotel-card:hover .kh-hotel-card-img img { transform: scale(1.06); }
.kh-hotel-card-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--kh-ink);
  color: #fff;
  border-radius: var(--radius-full);
  padding: .2rem .65rem;
  font-size: .75rem;
  font-weight: 700;
}
.kh-hotel-card-fav {
  position: absolute;
  top: .75rem; right: .75rem;
  width: 2.2rem; height: 2.2rem;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background var(--transition);
}
.kh-hotel-card-fav:hover { background: #fff; }
.kh-hotel-card-fav svg { color: var(--kh-text-3); }
.kh-hotel-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.kh-hotel-stars { display: flex; gap: .125rem; }
.kh-hotel-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--kh-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.kh-hotel-location {
  display: flex; align-items: center; gap: .35rem;
  color: var(--kh-text-3);
  font-size: .8125rem;
}
.kh-hotel-location svg { color: var(--kh-turquoise); flex-shrink: 0; }
.kh-hotel-amenities {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-top: .25rem;
}
.kh-amenity-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--kh-surface-2);
  border-radius: var(--radius-full);
  padding: .2rem .6rem;
  font-size: .75rem;
  color: var(--kh-text-2);
}
.kh-hotel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .75rem;
  border-top: 1px solid var(--kh-border);
  margin-top: auto;
}
.kh-rating-badge {
  display: flex; align-items: center; gap: .35rem;
  background: var(--kh-ink);
  color: #fff;
  border-radius: var(--radius-full);
  padding: .3rem .7rem;
  font-weight: 700;
  font-size: .875rem;
}
.kh-rating-label {
  font-size: .75rem;
  color: var(--kh-text-3);
  line-height: 1.2;
}
.kh-hotel-price {
  text-align: right;
}
.kh-price-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--kh-orange);
}
.kh-price-label {
  font-size: .75rem;
  color: var(--kh-text-3);
}

/* ── Destination Card ────────────────────────────────────────── */
.kh-dest-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
  aspect-ratio: 3/4;
  background: var(--kh-surface-2);
}
.kh-dest-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.kh-dest-card:hover img { transform: scale(1.05); }
.kh-dest-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
}
.kh-dest-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.kh-dest-card-content h3 {
  color: #fff;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.2;
}
.kh-dest-card-content p {
  color: rgba(255,255,255,.75);
  font-size: .8125rem;
  margin-top: .2rem;
}
.kh-dest-arrow {
  width: 2.5rem; height: 2.5rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: background var(--transition);
}
.kh-dest-card:hover .kh-dest-arrow { background: var(--kh-orange); border-color: var(--kh-orange); }

/* ── Magazine Card ───────────────────────────────────────────── */
.kh-mag-card {
  background: var(--kh-surface);
  border: 1px solid var(--kh-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.kh-mag-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kh-mag-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  flex-shrink: 0;
}
.kh-mag-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.kh-mag-card:hover .kh-mag-card-img img { transform: scale(1.04); }
.kh-mag-cat-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: rgba(255,255,255,.92);
  color: var(--kh-ink);
  border-radius: var(--radius-full);
  padding: .2rem .7rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kh-mag-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.kh-mag-card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--kh-ink);
  line-height: 1.35;
  transition: color var(--transition);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kh-mag-card:hover .kh-mag-card-title { color: var(--kh-orange); }
.kh-mag-card-excerpt {
  font-size: .875rem;
  color: var(--kh-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kh-mag-meta {
  display: flex; align-items: center; gap: .75rem;
  font-size: .75rem;
  color: var(--kh-text-3);
  margin-top: auto;
  flex-wrap: wrap;
}
.kh-mag-meta span { display: flex; align-items: center; gap: .25rem; }

/* Feature magazine card */
.kh-mag-card-feature { flex-direction: row; }
.kh-mag-card-feature .kh-mag-card-img {
  aspect-ratio: auto;
  width: 50%;
  flex-shrink: 0;
}
.kh-mag-card-feature .kh-mag-card-title { font-size: 1.375rem; -webkit-line-clamp: 4; }
@media(max-width:767px) {
  .kh-mag-card-feature { flex-direction: column; }
  .kh-mag-card-feature .kh-mag-card-img { width: 100%; aspect-ratio: 16/10; }
}

/* ── Category Card ───────────────────────────────────────────── */
.kh-cat-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  display: block;
}
.kh-cat-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.kh-cat-card:hover img { transform: scale(1.06); }
.kh-cat-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,32,70,.8) 0%, transparent 60%);
}
.kh-cat-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.25rem 1rem;
  color: #fff;
}
.kh-cat-card-content h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: .2rem;
}
.kh-cat-card-content p {
  font-size: .75rem;
  color: rgba(255,255,255,.75);
}

/* ── Filters sidebar ─────────────────────────────────────────── */
.kh-filters {
  background: var(--kh-surface);
  border: 1px solid var(--kh-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  position: sticky;
  top: 5rem;
  align-self: start;
}
.kh-filter-group { margin-bottom: 1.5rem; }
.kh-filter-group:last-child { margin-bottom: 0; }
.kh-filter-group h4 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kh-text-3);
  margin-bottom: .75rem;
}
.kh-filter-btn {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: var(--radius-full);
  background: var(--kh-surface-2);
  border: 1.5px solid transparent;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--kh-text-2);
  margin: .2rem .2rem .2rem 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
}
.kh-filter-btn:hover { border-color: var(--kh-border); }
.kh-filter-btn.active {
  background: var(--kh-ink);
  color: #fff;
  border-color: var(--kh-ink);
}
.kh-filter-stars.active {
  background: var(--kh-sun);
  color: var(--kh-ink);
  border-color: var(--kh-sun);
}
.kh-range {
  width: 100%;
  accent-color: var(--kh-orange);
  cursor: pointer;
}
.kh-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--kh-text-3);
  margin-top: .35rem;
}
.kh-checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}
.kh-checkbox-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}
.kh-checkbox-item input { accent-color: var(--kh-turquoise); }
.kh-checkbox-item span {
  font-size: .8125rem;
  color: var(--kh-text-2);
}

/* ── Grid layouts ────────────────────────────────────────────── */
.kh-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.kh-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.kh-grid-4 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.kh-grid-6 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media(min-width:640px) {
  .kh-grid-3 { grid-template-columns: repeat(2,1fr); }
  .kh-grid-6 { grid-template-columns: repeat(3,1fr); }
}
@media(min-width:768px) {
  .kh-grid-2 { grid-template-columns: repeat(2,1fr); }
  .kh-grid-4 { grid-template-columns: repeat(3,1fr); }
}
@media(min-width:1024px) {
  .kh-grid-3 { grid-template-columns: repeat(3,1fr); }
  .kh-grid-4 { grid-template-columns: repeat(4,1fr); }
  .kh-grid-6 { grid-template-columns: repeat(6,1fr); }
}

/* ── Hotels page layout ──────────────────────────────────────── */
.kh-hotels-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media(min-width:1024px) {
  .kh-hotels-layout { grid-template-columns: 280px 1fr; }
}

/* ── Sort / View toggle bar ──────────────────────────────────── */
.kh-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.kh-sort-bar select {
  background: var(--kh-surface);
  border: 1.5px solid var(--kh-border);
  border-radius: var(--radius-full);
  padding: .45rem 1rem;
  font-size: .875rem;
  color: var(--kh-text-2);
  cursor: pointer;
  outline: none;
}
.kh-view-toggle {
  display: flex;
  gap: .25rem;
}
.kh-view-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--kh-border);
  color: var(--kh-text-3);
  transition: background var(--transition), color var(--transition);
}
.kh-view-btn.active, .kh-view-btn:hover {
  background: var(--kh-ink);
  color: #fff;
  border-color: var(--kh-ink);
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.kh-breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--kh-text-3);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.kh-breadcrumb a { color: var(--kh-text-3); transition: color var(--transition); }
.kh-breadcrumb a:hover { color: var(--kh-ink); }
.kh-breadcrumb .sep { color: var(--kh-border); }
.kh-breadcrumb .current { color: var(--kh-ink); font-weight: 500; }

/* ── Map CTA ─────────────────────────────────────────────────── */
.kh-map-cta {
  background: var(--kh-ink);
  border-radius: var(--radius-xl);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media(min-width:1024px) {
  .kh-map-cta { grid-template-columns: 1fr 1fr; padding: 4rem 3rem; }
}
.kh-map-cta-blob {
  position: absolute;
  width: 35vmax; height: 35vmax;
  background: radial-gradient(circle, rgba(255,107,53,.15) 0%, transparent 70%);
  top: -20%; right: -10%;
  pointer-events: none;
}
.kh-map-cta h2 { color: #fff; }
.kh-map-cta p { color: rgba(255,255,255,.7); font-size: 1.0625rem; margin: 1rem 0 2rem; }
.kh-map-cta-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  opacity: .8;
  border: 1px solid rgba(255,255,255,.1);
}
.kh-map-cta-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Footer ──────────────────────────────────────────────────── */
.kh-footer {
  background: var(--kh-ink);
  color: rgba(255,255,255,.7);
  padding: 4rem 0 0;
}
@media(min-width:768px) { .kh-footer { padding: 6rem 0 0; } }

.kh-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media(min-width:640px) {
  .kh-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1024px) {
  .kh-footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; }
}

.kh-footer h4 {
  color: rgba(255,255,255,.6);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}
.kh-footer a {
  display: block;
  color: rgba(255,255,255,.7);
  font-size: .9375rem;
  padding: .2rem 0;
  transition: color var(--transition);
}
.kh-footer a:hover { color: #fff; }

.kh-footer-logo { margin-bottom: 1rem; }
.kh-footer-logo .kh-logo { color: #fff; }
.kh-footer-logo .kh-logo .dot { background: rgba(255,255,255,.15); }

.kh-footer-desc {
  font-size: .9375rem;
  line-height: 1.7;
}

.kh-newsletter-input {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}
.kh-newsletter-input input {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: var(--radius-full);
  padding: .6rem 1rem;
  font-size: .875rem;
  outline: none;
  transition: border-color var(--transition);
}
.kh-newsletter-input input::placeholder { color: rgba(255,255,255,.4); }
.kh-newsletter-input input:focus { border-color: rgba(255,255,255,.4); }
.kh-newsletter-input button {
  background: var(--kh-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: .6rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.kh-newsletter-input button:hover { background: var(--kh-orange-2); }

.kh-social-links {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
}
.kh-social-links a {
  width: 2.25rem; height: 2.25rem;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  font-size: 1rem;
  transition: background var(--transition), color var(--transition);
}
.kh-social-links a:hover { background: rgba(255,255,255,.18); color: #fff; }

.kh-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.4);
}
.kh-footer-bottom-links {
  display: flex; gap: 1.25rem;
}
.kh-footer-bottom-links a {
  color: rgba(255,255,255,.4);
  font-size: .8125rem;
  transition: color var(--transition);
}
.kh-footer-bottom-links a:hover { color: rgba(255,255,255,.7); }

/* ── Hotel detail ────────────────────────────────────────────── */
.kh-hotel-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
@media(min-width:768px) {
  .kh-hotel-gallery {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto;
    height: 28rem;
  }
  .kh-hotel-gallery .main-img {
    grid-row: 1 / 3;
  }
  .kh-hotel-gallery .thumb-img { }
}
.kh-hotel-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity var(--transition);
}
.kh-hotel-gallery img:hover { opacity: .9; }
.kh-hotel-gallery .main-img { aspect-ratio: 4/3; }
.kh-hotel-gallery .thumb-img { aspect-ratio: 16/9; }
@media(min-width:768px) {
  .kh-hotel-gallery .main-img,
  .kh-hotel-gallery .thumb-img { aspect-ratio: auto; }
}

.kh-hotel-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media(min-width:1024px) {
  .kh-hotel-detail-layout { grid-template-columns: 1fr 340px; }
}

.kh-hotel-booking-box {
  background: var(--kh-surface);
  border: 1.5px solid var(--kh-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  position: sticky;
  top: 5rem;
  box-shadow: var(--shadow-md);
}
.kh-booking-price {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--kh-orange);
}
.kh-booking-price span { font-size: .9rem; color: var(--kh-text-3); font-weight: 400; }

.kh-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}
@media(min-width:640px) {
  .kh-amenities-grid { grid-template-columns: repeat(3, 1fr); }
}
.kh-amenity-item {
  display: flex; align-items: center; gap: .6rem;
  background: var(--kh-surface-2);
  border-radius: var(--radius-md);
  padding: .65rem .85rem;
  font-size: .875rem;
  color: var(--kh-text-2);
}
.kh-amenity-item svg { color: var(--kh-turquoise); flex-shrink: 0; }

.kh-review-card {
  background: var(--kh-surface-2);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.kh-review-header {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .75rem;
}
.kh-review-avatar {
  width: 2.5rem; height: 2.5rem;
  background: var(--kh-ink);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .875rem;
  flex-shrink: 0;
}
.kh-review-rating {
  background: var(--kh-sun);
  color: var(--kh-ink);
  border-radius: var(--radius-full);
  padding: .15rem .6rem;
  font-weight: 700;
  font-size: .875rem;
}

.kh-room-card {
  display: flex; gap: 1rem; align-items: center;
  background: var(--kh-surface);
  border: 1px solid var(--kh-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  transition: box-shadow var(--transition);
}
.kh-room-card:hover { box-shadow: var(--shadow-md); }
.kh-room-img {
  width: 6rem; height: 5rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.kh-room-img img { width: 100%; height: 100%; object-fit: cover; }
.kh-room-info { flex: 1; min-width: 0; }
.kh-room-info h4 { font-size: .9375rem; }
.kh-room-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--kh-orange);
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* ── Breakdown bar ───────────────────────────────────────────── */
.kh-breakdown-bar {
  height: .5rem;
  background: var(--kh-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex: 1;
}
.kh-breakdown-fill {
  height: 100%;
  background: var(--kh-turquoise);
  border-radius: var(--radius-full);
}

/* ── Map page ────────────────────────────────────────────────── */
#kh-map {
  height: 70vh;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 30px -10px rgba(11,32,70,.25) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ── Compare ─────────────────────────────────────────────────── */
.kh-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.kh-compare-table th, .kh-compare-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--kh-border);
  vertical-align: middle;
}
.kh-compare-table th {
  background: var(--kh-surface-2);
  font-weight: 600;
  text-align: left;
  font-size: .8125rem;
}
.kh-compare-table tr:hover td { background: var(--kh-surface-2); }
.kh-compare-check { color: var(--kh-success); }
.kh-compare-cross { color: var(--kh-text-3); }

/* ── City detail ─────────────────────────────────────────────── */
.kh-city-cover {
  height: 40vh;
  min-height: 280px;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.kh-city-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.kh-city-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,32,70,.7) 0%, transparent 60%);
}
.kh-city-cover-content {
  position: absolute;
  bottom: 2rem; left: 2rem; right: 2rem;
  color: #fff;
}
.kh-city-cover-content h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); }
.kh-city-cover-content p { color: rgba(255,255,255,.85); font-size: 1.125rem; margin-top: .5rem; }

/* ── Article detail ──────────────────────────────────────────── */
.kh-article-cover {
  aspect-ratio: 16/7;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.kh-article-cover img { width: 100%; height: 100%; object-fit: cover; }
.kh-article-body {
  max-width: 72ch;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--kh-text-2);
}
.kh-article-body h2, .kh-article-body h3 {
  margin: 2rem 0 .75rem;
  color: var(--kh-ink);
}
.kh-article-body p { margin-bottom: 1.25rem; }
.kh-article-body ul, .kh-article-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  list-style: disc;
}
.kh-article-body ul li, .kh-article-body ol li { margin-bottom: .4rem; }
.kh-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media(min-width:1024px) {
  .kh-article-layout { grid-template-columns: 1fr 300px; }
}
.kh-article-sidebar {
  position: sticky;
  top: 5.5rem;
}

/* ── Author card ─────────────────────────────────────────────── */
.kh-author-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--kh-surface-2);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
.kh-author-avatar {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.kh-author-avatar-placeholder {
  width: 3rem; height: 3rem;
  background: var(--kh-ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
}
.kh-author-name { font-weight: 700; font-size: .9375rem; }
.kh-author-role { font-size: .8125rem; color: var(--kh-text-3); }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: .35rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.page-btn {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--kh-surface);
  border: 1.5px solid var(--kh-border);
  color: var(--kh-text-2);
  font-size: .875rem;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.page-btn:hover, .page-btn.active {
  background: var(--kh-ink);
  color: #fff;
  border-color: var(--kh-ink);
}

/* ── Empty state ─────────────────────────────────────────────── */
.kh-empty {
  text-align: center;
  padding: 4rem 1rem;
}
.kh-empty svg { color: var(--kh-text-3); margin: 0 auto 1rem; }
.kh-empty h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.kh-empty p { color: var(--kh-text-3); margin-bottom: 1.5rem; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes kh-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kh-rise   { animation: kh-rise .6s cubic-bezier(.16,1,.3,1) both; }
.kh-rise-1 { animation-delay: .08s; }
.kh-rise-2 { animation-delay: .16s; }
.kh-rise-3 { animation-delay: .24s; }
.kh-rise-4 { animation-delay: .32s; }

/* ── Utility ─────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-orange { color: var(--kh-orange); }
.text-teal   { color: var(--kh-turquoise); }
.text-muted  { color: var(--kh-text-3); }
.mt-1  { margin-top: .25rem; }
.mt-2  { margin-top: .5rem; }
.mt-3  { margin-top: .75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-2  { margin-bottom: .5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.gap-4 { gap: 1rem; }
.flex  { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.hidden { display: none; }

/* ── Region map badge ────────────────────────────────────────── */
.kh-region-badge {
  background: var(--kh-ink);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.2);
  white-space: nowrap;
}

/* ── Stranka (static page) ───────────────────────────────────── */
.kh-page-content {
  max-width: 72ch;
  margin: 0 auto;
  padding: 3rem 0 5rem;
}
.kh-page-content h1 { margin-bottom: 1.5rem; }
.kh-page-content h2 { margin: 2rem 0 .75rem; }
.kh-page-content p  { margin-bottom: 1.25rem; }