/* ==========================================================================
   Redesign 2026 — Kladionice listing + review (designs 11d + 11j chrome).
   All values from css/design-tokens.css. Mobile-first; desktop at 1024px.
   ========================================================================== */

.kl-kladionice {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-24);
  background: var(--kl-surface);
  min-height: 60vh;
}



/* --- Listing rows (11d-v6): logo | content + bonus | CTA ------------------- */
.kl-book-list {
  margin-top: var(--kl-sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-14);
}

.kl-book-row {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface);
  display: flex;
  flex-direction: column;
}

.kl-book-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  overflow: hidden;
  border-bottom: 1px solid var(--kl-divider);
}

.kl-book-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kl-book-logo-text {
  font: 800 var(--kl-fs-16) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-book-main {
  flex: 1;
  min-width: 0;
  padding: var(--kl-sp-16) var(--kl-sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}

.kl-book-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kl-sp-10);
}

.kl-book-name {
  font: 800 var(--kl-fs-16) var(--kl-font-display);
  margin: 0;
}

.kl-book-name a { color: var(--kl-ink); text-decoration: none; }
.kl-book-name a:hover { text-decoration: underline; }

.kl-book-rating {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-6);
}

.kl-book-stars {
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  letter-spacing: 1px;
  color: var(--kl-amber-bright);
}

.kl-book-star-off { color: var(--kl-border-strong); }

.kl-book-score {
  font: 800 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-book-sponsor {
  flex-shrink: 0;
  font: 700 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-green);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--kl-green-tint);
  border-radius: var(--kl-r-pill);
  padding: 3px 9px;
}

.kl-book-excerpt {
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: 1.55;
  margin: 0;
}

.kl-book-bonus {
  background: var(--kl-blue-tint);
  border-radius: var(--kl-r-12);
  padding: var(--kl-sp-10) var(--kl-sp-14);
}

.kl-book-bonus-title {
  font: 800 var(--kl-fs-15) var(--kl-font-display);
  color: var(--kl-blue);
  margin: 0;
}

.kl-book-bonus-note {
  font: 400 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
  line-height: 1.55;
  margin: var(--kl-sp-4) 0 0 0;
}

.kl-book-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-12);
  border-top: 1px solid var(--kl-divider);
  padding: var(--kl-sp-12) var(--kl-sp-16);
}

.kl-book-visit {
  flex-shrink: 0;
  font: 700 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-on-dark);
  background: var(--kl-blue);
  border-radius: var(--kl-r-8);
  padding: var(--kl-sp-8) var(--kl-sp-20);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.kl-book-visit:hover { filter: brightness(0.95); }

.kl-book-review-link {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  text-decoration: none;
  white-space: nowrap;
}
.kl-book-review-link:hover { color: var(--kl-ink); }

.kl-book-disclaimer {
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-4);
  margin: var(--kl-sp-24) 0 0 0;
  text-align: center;
}

/* --- Review page (11j chrome) ---------------------------------------------- */
.kl-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-6);
  font: 500 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-4);
  margin-bottom: var(--kl-sp-10);
}

.kl-breadcrumb a { color: var(--kl-text-2); text-decoration: none; }
.kl-breadcrumb a:hover { color: var(--kl-ink); }

.kl-book-review-cta {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-12);
  margin-top: var(--kl-sp-12);
}

.kl-book-review-cta span {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
}

.kl-book-content {
  margin-top: var(--kl-sp-16);
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.65;
}

.kl-book-content h2,
.kl-book-content h3,
.kl-book-content h4 {
  font-family: var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.3;
  margin: var(--kl-sp-20) 0 var(--kl-sp-8) 0;
}

.kl-book-content p { margin: 0 0 var(--kl-sp-12) 0; }

.kl-book-content a { color: var(--kl-blue); }

.kl-book-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--kl-r-14);
}

.kl-book-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--kl-sp-12) 0;
  font-size: var(--kl-fs-13);
}

.kl-book-content table td,
.kl-book-content table th {
  border: 1px solid var(--kl-border);
  padding: var(--kl-sp-8) var(--kl-sp-10);
}

/* --- Desktop ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kl-kladionice { padding: var(--kl-sp-28) var(--kl-sp-40) var(--kl-sp-48) var(--kl-sp-40); }
  .kl-kladionice .kl-page-title { font-size: 28px; }

  .kl-kladionice .kl-page-head { max-width: 720px; }

  .kl-book-list { margin-top: var(--kl-sp-20); }

  /* Full-width horizontal row: 300px logo | flexible content | 190px CTA. */
  .kl-book-row { flex-direction: row; align-items: stretch; }

  .kl-book-logo {
    width: 300px;
    height: auto;
    flex-shrink: 0;
    border-bottom: none;
  }

  .kl-book-main {
    border-right: 1px solid var(--kl-divider);
    gap: var(--kl-sp-6);
  }

  .kl-book-cta {
    width: 190px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--kl-sp-8);
    border-top: none;
    padding: var(--kl-sp-16);
  }

  .kl-book-review .kl-breadcrumb,
  .kl-book-review .kl-page-title,
  .kl-book-review-cta,
  .kl-book-content,
  .kl-book-disclaimer { max-width: 800px; margin-left: auto; margin-right: auto; }

  .kl-book-review .kl-page-title,
  .kl-book-review-cta { display: block; }
  .kl-book-review-cta { display: flex; }
}