/* guide.css — Poradnik (/poradnik) i krótkie wstępy z danych na /gatunek i /miasto.
   Sternik 2026-09-27. Wyłącznie nowe klasy (.kk-guide*, .kk-intro*); istniejących
   reguł design.css / kk-polish.css nie nadpisujemy. Kolory: tło #080b13, tekst #b8c0ce,
   nagłówki #f8fafc, akcent #9068f6 / przycisk #7b55ee (kontrast ≥ 4,5:1). */

/* ---------- wstępy /gatunek i /miasto ---------- */
/* `.pagehead p` (app/design.css) ma wyższą specyficzność niż sama klasa — stąd p.kk-intro. */
p.kk-intro,
.pagehead p.kk-intro {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: #b8c0ce;
}
p.kk-intro strong { color: #f8fafc; font-weight: 600; }
p.kk-intro a {
  color: #c9b8ff;
  text-decoration: underline;
  text-decoration-color: rgba(201, 184, 255, .45);
  text-underline-offset: 3px;
}
p.kk-intro a:hover { color: #fff; text-decoration-color: #fff; }
p.kk-intro.kk-intro-fact,
.pagehead p.kk-intro.kk-intro-fact { margin-top: 6px; font-size: 14px; color: #9ca7ba; }

/* ---------- poradnik: wspólne ---------- */
.kk-guide-wrap { max-width: 808px; margin: 0 auto; padding-bottom: 56px; }
.kk-guide-wrap .crumb { overflow-wrap: anywhere; }
.kk-guide-wrap .crumb [aria-current] { color: #d8deea; }
.kk-guide { margin: 14px auto 0; overflow-wrap: break-word; }
.page-prose .kk-guide h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.04;
  letter-spacing: .2px;
  margin: 4px 0 12px;
  color: #f8fafc;
}
.kk-guide-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9b8ff;
}
.page-prose .kk-guide .kk-guide-meta { margin: 0 0 14px; font-size: 13px; color: #9ca7ba; }
.page-prose .kk-guide .kk-guide-lead { font-size: 17px; line-height: 1.6; color: #e3e8f1; margin: 0 0 18px; }
.page-prose .kk-guide h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 4.6vw, 28px);
  line-height: 1.12;
  letter-spacing: .2px;
  margin: 34px 0 10px;
  scroll-margin-top: 90px;
}
.page-prose .kk-guide h3 { color: #f8fafc; font-size: 17px; margin: 22px 0 6px; }
.page-prose .kk-guide p,
.page-prose .kk-guide li { font-size: 16px; line-height: 1.72; }
.page-prose .kk-guide ul,
.page-prose .kk-guide ol { padding-left: 22px; }
.page-prose .kk-guide li::marker { color: #9068f6; }
.page-prose .kk-guide strong { color: #eef1f7; }

.kk-guide-toc {
  margin: 6px 0 8px;
  padding: 14px 18px;
  border: 1px solid rgba(144, 104, 246, .35);
  border-radius: 14px;
  background: rgba(144, 104, 246, .08);
}
.page-prose .kk-guide .kk-guide-toc p {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9b8ff;
}
.page-prose .kk-guide .kk-guide-toc ol { margin: 0; }
.page-prose .kk-guide .kk-guide-toc li { font-size: 15px; line-height: 1.5; margin: 4px 0; }

.kk-guide .kk-tip {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid #9068f6;
  border-radius: 0 12px 12px 0;
  background: rgba(144, 104, 246, .1);
}
.page-prose .kk-guide .kk-tip p { margin: 0; }
.page-prose .kk-guide .kk-note { font-size: 14px; color: #9ca7ba; }

/* ---------- blok danych z kalendarza ---------- */
.kk-guide-data {
  margin: 36px 0 0;
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: #0f1422;
  color: #b8c0ce;
}
.kk-guide-data h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 4.6vw, 28px);
  line-height: 1.12;
  color: #f8fafc;
}
.kk-guide-data > p { margin: 8px 0 12px; font-size: 15px; line-height: 1.6; }
.kk-guide-data a:not(.kkr-link):not(.kkr-buy):not(.btn-primary):not(.btn-ghost):not(.kk-guide-btn) { color: #c9b8ff; }
.kk-guide-updated { font-size: 12.5px; color: #9ca7ba; }
.kk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0 6px;
}
.kk-stats > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
}
.kk-stats strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: #f8fafc;
}
.kk-stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #9ca7ba; }
.kk-guide-data .kkr-list { margin-top: 10px; }
.kk-guide-cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0;
  list-style: none;
}
.kk-guide-cities a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
}
.kk-guide-cities a:hover { border-color: #9068f6; }
.kk-guide-cities strong { color: #f8fafc; font-size: 15px; }
.kk-guide-cities span { color: #9ca7ba; font-size: 13px; }
.kk-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.kk-guide-actions .btn-ghost { text-decoration: none; }
.kk-guide-actions .kk-guide-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 100px;
  background: #7b55ee;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.kk-guide-actions .kk-guide-btn:hover { background: #6a45dc; }

/* ---------- czytaj też / lista artykułów ---------- */
.kk-guide-more { margin: 36px 0 0; }
.kk-guide-more h2,
.kk-guide-list-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 4.6vw, 28px);
  color: #f8fafc;
}
.kk-guide-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .kk-guide-cards { grid-template-columns: 1fr 1fr; }
}
.kk-guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: #0f1422;
  transition: border-color .15s;
}
.kk-guide-card:hover,
.kk-guide-card:focus-within { border-color: #9068f6; }
.kk-guide-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.12;
  color: #f8fafc;
}
.kk-guide-card h3 a { color: inherit; text-decoration: none; }
.kk-guide-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.kk-guide-card h3 a:focus-visible { outline: none; }
.kk-guide-card:focus-within { outline: 2px solid #c9b8ff; outline-offset: 2px; }
.kk-guide-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #b8c0ce; }
.kk-guide-card small { margin-top: auto; padding-top: 4px; font-size: 12.5px; color: #9ca7ba; }
.kk-guide-index-stats { margin: 0 0 22px; }