/* ============================================================
   KLAUSIMŲ KATALOGAS — /lobynas/klausimai

   Ta pati vizualinė kalba kaip citatų kataloge (lobynas/citatos/citatos.css):
   tamsus fonas, auksinis akcentas, plonos linijos vietoj kortelių. Spalvų
   reikšmės kartojamos, o ne importuojamos — Lobyno skiltys sąmoningai
   laikomos atskiromis, kad vienos perdaža nesugriautų kitos.

   AUKSAS. Čia #f5c518, kaip citatose ir istorijoje. Svetainės auksas nuo
   2026-09-03 yra #fbbf24, o Lobyno titulinis ir geografija naudoja #e7ca93 —
   skiltis nevienoda ir be šio failo. Vienodinti visą Lobyną yra atskiras
   sprendimas; naujas puslapis rišamas prie savo artimiausio kaimyno (citatų
   katalogo), su kuriuo dalijasi ir sąrašo išdėstymu.

   Kontrastai (WCAG AA riba 4.5:1), suskaičiuoti su tikromis reikšmėmis
   2026-09-09; kortelės fonas pirma suplokštintas iki #110f1c:
     tekstas #ece9f7 ant #07060f ........ 16.9:1
     tekstas #ece9f7 ant kortelės ....... 15.8:1
     atsakymas #b6b1c9 ant kortelės ..... 9.1:1
     muted #8b86a3 ant #07060f .......... 5.8:1
     auksinė #f5c518 ant #07060f ........ 12.4:1
     auksinė #f5c518 ant kortelės ....... 11.6:1
     #17140a ant auksinio mygtuko ....... 11.3:1
   ============================================================ */

:root {
  --kl-gold:        #f5c518;
  --kl-gold-bright: #ffd84d;
  --kl-bg:          #07060f;
  --kl-bg-card:     rgba(19, 17, 31, 0.82);
  --kl-border:      rgba(245, 197, 24, 0.18);
  --kl-border-soft: rgba(255, 255, 255, 0.07);
  --kl-text:        #ece9f7;
  --kl-text-soft:   #b6b1c9;
  --kl-text-muted:  #8b86a3;
}

body {
  background-color: var(--kl-bg);
  color: var(--kl-text);
}

.kl-wrapper {
  padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem) var(--spacing-3xl, 4rem);
}

.kl-container {
  max-width: 940px;
  margin: 0 auto;
}

/* ---------- Breadcrumb ---------- */

.kl-container .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--spacing-lg, 1.5rem);
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--kl-text-muted);
}

.kl-container .breadcrumb-item a {
  color: var(--kl-text-soft);
  text-decoration: none;
}

.kl-container .breadcrumb-item a:hover,
.kl-container .breadcrumb-item a:focus-visible {
  color: var(--kl-gold);
  text-decoration: underline;
}

.kl-container .breadcrumb-item.active {
  color: var(--kl-text-muted);
}

/* ---------- Antraštė ---------- */

.kl-header {
  margin-bottom: var(--spacing-xl, 2rem);
}

.kl-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--kl-gold);
}

.kl-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.15;
  color: var(--kl-text);
}

.kl-lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--kl-text-soft);
}

/* ---------- Paieška ---------- */

.kl-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-sm, 0.5rem);
  margin-bottom: var(--spacing-lg, 1.5rem);
}

.kl-search__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 16rem;
}

.kl-search__label {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--kl-text-muted);
}

.kl-search__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--kl-border-soft);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--kl-bg-card);
  color: var(--kl-text);
  font: inherit;
}

.kl-search__input::placeholder {
  color: var(--kl-text-muted);
}

.kl-search__input:focus-visible {
  outline: 2px solid var(--kl-gold);
  outline-offset: 1px;
  border-color: transparent;
}

.kl-search__submit {
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--radius-md, 0.5rem);
  background: var(--kl-gold);
  color: #17140a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.kl-search__submit:hover,
.kl-search__submit:focus-visible {
  background: var(--kl-gold-bright);
}

.kl-search__reset {
  align-self: center;
  padding: 0.4rem 0.2rem;
  color: var(--kl-text-muted);
  font-size: 0.85rem;
}

.kl-search__reset:hover,
.kl-search__reset:focus-visible {
  color: var(--kl-gold);
}

/* ---------- Skaitiklis ir tuščia būsena ---------- */

.kl-count {
  margin: 0 0 var(--spacing-sm, 0.5rem);
  font-size: 0.82rem;
  color: var(--kl-text-muted);
}

.kl-empty {
  margin: var(--spacing-xl, 2rem) 0;
  padding: var(--spacing-lg, 1.5rem);
  border: 1px dashed var(--kl-border-soft);
  border-radius: var(--radius-lg, 0.75rem);
  text-align: center;
  color: var(--kl-text-soft);
}

/* ---------- Sąrašas ---------- */

.kl-list {
  margin: 0 0 var(--spacing-xl, 2rem);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.kl-item + .kl-item {
  border-top: 1px solid var(--kl-border-soft);
}

.kl-item__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.6rem;
  border-radius: var(--radius-md, 0.5rem);
  color: inherit;
  text-decoration: none;
  transition: background var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.kl-item__link:hover,
.kl-item__link:focus-visible {
  background: var(--kl-bg-card);
}

.kl-item__link:focus-visible {
  outline: 2px solid var(--kl-gold);
  outline-offset: -2px;
}

.kl-item__q {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--kl-text);
}

.kl-item__link:hover .kl-item__q {
  color: var(--kl-gold);
}

.kl-item__a {
  font-size: 0.82rem;
  color: var(--kl-text-soft);
}

/* Atsakymas prieš savo tekstą gauna etiketę, kad sąrašas skaitytųsi ir be
   konteksto. Per ::before, nes DOM'e tai perteklinis žodis 100 kartų. */
.kl-item__a::before {
  content: 'Atsakymas: ';
  color: var(--kl-text-muted);
}

@media (min-width: 768px) {
  .kl-item__link {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-md, 1rem);
  }

  .kl-item__q {
    flex: 1 1 auto;
  }

  .kl-item__a {
    flex: 0 0 auto;
    max-width: 32%;
    text-align: right;
  }
}

/* ---------- Puslapiavimas ---------- */

.kl-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm, 0.5rem);
  margin: var(--spacing-xl, 2rem) 0;
}

.kl-pager__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  order: 3;
  flex-basis: 100%;
}

/* 2.75rem = 44px: AAA lietimo taikinys (24px butu tik AA).
   Ismatuota 2026-09-09 tikroje narsykleje: 360px plocio ekrane 27 numeriai
   issidesto i 5 eilutes (juosta 294px auksčio), 1280px - i vieną. Abiem
   atvejais horizontalaus slinkimo nera. */
.kl-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.4rem;
  border: 1px solid var(--kl-border-soft);
  border-radius: var(--radius-md, 0.5rem);
  color: var(--kl-text-soft);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color var(--duration-fast, 150ms) var(--ease-default, ease-out),
              color var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.kl-pager__page:hover,
.kl-pager__page:focus-visible {
  border-color: var(--kl-border);
  color: var(--kl-gold);
}

.kl-pager__page.is-current {
  border-color: var(--kl-gold);
  background: var(--kl-gold);
  color: #17140a;
  font-weight: 600;
}

.kl-pager__step {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--kl-border);
  border-radius: var(--radius-md, 0.5rem);
  color: var(--kl-text);
  font-size: 0.9rem;
  text-decoration: none;
}

.kl-pager__step:hover,
.kl-pager__step:focus-visible {
  color: var(--kl-gold);
  border-color: var(--kl-gold);
}

.kl-pager__step--off {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- DUK ---------- */

.kl-faq {
  margin-top: var(--spacing-2xl, 3rem);
  padding-top: var(--spacing-lg, 1.5rem);
  border-top: 1px solid var(--kl-border-soft);
}

.kl-faq__title {
  margin: 0 0 var(--spacing-md, 1rem);
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  color: var(--kl-text);
}

.kl-faq__item + .kl-faq__item {
  margin-top: var(--spacing-md, 1rem);
}

.kl-faq__q {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--kl-gold);
}

.kl-faq__a {
  margin: 0;
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--kl-text-soft);
}

/* ---------- CTA ---------- */

.kl-cta {
  margin-top: var(--spacing-2xl, 3rem);
  text-align: center;
}

.kl-cta__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.4rem;
  border: 1px solid var(--kl-border);
  border-radius: var(--radius-full, 9999px);
  color: var(--kl-gold);
  text-decoration: none;
  transition: background var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.kl-cta__link:hover,
.kl-cta__link:focus-visible {
  background: var(--kl-bg-card);
}