/* ═══════════════════════════════════════════════════════════
   SOMNA · kreditai, rekomendacijos, straipsniai
   ═══════════════════════════════════════════════════════════ */

/* ─────────── Likutis navigacijoje ─────────── */
.bal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.bal:hover { border-color: var(--brass-dk); color: var(--brass); }
.bal b { color: var(--brass); font-weight: 500; }
.bal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); flex-shrink: 0; }

/* ─────────── Paketai ─────────── */
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 820px) { .packs { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.pack { padding: var(--s6); text-align: center; position: relative; display: grid; gap: var(--s4); }
.pack-best { border-color: rgba(198,166,100,.4); background: var(--tint); }
.pack-tag { position: absolute; top: var(--s4); right: var(--s4); }
.pack-c { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--brass); }
.pack-c small { font-size: 1rem; color: var(--text-3); }
.pack-eur { font-family: var(--serif); font-size: 1.5rem; color: var(--title); }
.pack-per { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ─────────── Kainoraštis ─────────── */
.price-list { display: grid; gap: var(--s2); }
.price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surf-c);
}
.price-row b { font-size: 14px; font-weight: 500; }
.price-row .hint { margin: 0; }
.price-c {
  font-family: var(--mono); font-size: 13px; color: var(--brass);
  white-space: nowrap; padding-left: var(--s4);
}
.price-free { color: var(--verd); }

/* ─────────── Rekomendacijų nuoroda ─────────── */
.ref-box {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r2);
  background: var(--surf-c);
  align-items: center;
}
.ref-link {
  flex: 1; min-width: 200px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: var(--s2);
}
.ref-code {
  font-family: var(--mono);
  font-size: 1.6rem;
  letter-spacing: .18em;
  color: var(--brass);
  text-align: center;
  padding: var(--s4);
  border: 1px solid var(--brass-dk);
  border-radius: var(--r2);
  background: var(--tint);
}

.ref-steps { display: grid; gap: var(--s3); }
.ref-step {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--s3);
  align-items: start;
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}
.ref-step i {
  font-style: normal;
  font-family: var(--mono); font-size: 11px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--brass-dk); border-radius: 50%;
  color: var(--brass);
}

.friend-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.friend-row.done { border-color: rgba(134,164,146,.4); background: rgba(134,164,146,.06); }
.friend-row b { font-size: 14px; font-weight: 500; }

/* ─────────── Istorija ─────────── */
.ledger { display: grid; gap: 1px; }
.led-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.led-row span { color: var(--text-2); }
.led-row .t { font-size: 12px; color: var(--text-3); display: block; margin-top: 2px; }
.led-n { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.led-n.plus { color: var(--verd); }
.led-n.minus { color: var(--text-3); }

/* ─────────── Užrakinta paslauga ─────────── */
.locked {
  position: relative;
  border: 1px solid rgba(198,166,100,.3);
  border-radius: var(--r2);
  background: var(--tint);
  padding: var(--s6);
  text-align: center;
  display: grid;
  gap: var(--s3);
  justify-items: center;
}
.locked h4 { font-family: var(--serif); font-size: 1.3rem; }
.locked p { font-size: 14px; color: var(--text-2); max-width: 40ch; line-height: 1.7; }
.locked-cost {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass);
}

/* ═══════════════════════════════════════════════════════════
   STRAIPSNIAI
   ═══════════════════════════════════════════════════════════ */
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
@media (max-width: 940px) { .art-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .art-grid { grid-template-columns: 1fr; } }

.art { display: grid; gap: var(--s4); padding: var(--s5); align-content: start; }
.art-vis { aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surf-c); display: grid; place-items: center; overflow: hidden; }
.art-vis .constel { width: 62%; height: 62%; }
.art-meta { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.art h3 { font-size: 1.25rem; line-height: 1.3; transition: color .2s var(--ease); }
.art:hover h3 { color: var(--brass); }
.art p { font-size: 14px; color: var(--text-2); line-height: 1.7; }
.art-read { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }

.art-body { max-width: 68ch; margin-inline: auto; }
.art-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: var(--s7) 0 var(--s4); }
.art-body p { font-size: 16px; line-height: 1.85; color: var(--text-2); margin-bottom: var(--s4); }
.art-body p strong { color: var(--text); font-weight: 500; }
.art-body blockquote {
  border-left: 2px solid var(--brass-dk);
  padding: var(--s3) 0 var(--s3) var(--s5);
  margin: var(--s6) 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--title);
}
.art-body blockquote cite {
  display: block; margin-top: var(--s3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); font-style: normal;
}
.art-body ul { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.art-body li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s2); font-size: 15px; color: var(--text-2); line-height: 1.7; }
.art-body li::before { content: "·"; color: var(--brass); }

/* ═══════════════════════════════════════════════════════════
   PRADŽIA: nauda, žingsniai
   ═══════════════════════════════════════════════════════════ */
.ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
@media (max-width: 900px) { .ben-grid { grid-template-columns: 1fr; } }
.ben { padding: var(--s6); display: grid; gap: var(--s4); align-content: start; }
.ben-vis { width: 54px; height: 54px; }
.ben h3 { font-size: 1.3rem; }
.ben p { font-size: 14.5px; color: var(--text-2); line-height: 1.75; }

.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); counter-reset: st; }
@media (max-width: 860px) { .steps-row { grid-template-columns: 1fr; } }
.step-it { counter-increment: st; display: grid; gap: var(--s3); }
.step-it .n {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--brass-dk);
  line-height: 1;
}
.step-it .n::before { content: counter(st); }
.step-it h3 { font-size: 1.2rem; }
.step-it p { font-size: 14px; color: var(--text-2); line-height: 1.7; }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  padding: var(--s6);
  border-block: 1px solid var(--line);
}
@media (max-width: 780px) { .proof-strip { grid-template-columns: 1fr; gap: var(--s4); } }
.proof-it { text-align: center; }
.proof-it b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--brass); margin-bottom: 4px; }
.proof-it span { font-size: 13px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   DIENORAŠTIS IR SERIJA
   ═══════════════════════════════════════════════════════════ */
.streak { padding: var(--s6); }
.streak-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5);
}
.streak-n {
  font-family: var(--serif);
  font-size: 2.8rem;
  color: var(--brass);
  line-height: 1;
  margin-top: 6px;
}
.streak-n small { font-family: var(--sans); font-size: 13px; color: var(--text-3); margin-left: 6px; }
.streak-goal { text-align: right; }
.streak-left {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--text-2);
  margin-top: 6px;
}

/* Septynios naktys. Pirmoji pažymėta kitaip, nes ji dovanota
   ir mes to neslepiame. */
.sk-dots { display: flex; gap: var(--s2); }
.sk-dot {
  flex: 1;
  height: 8px;
  border-radius: var(--r1);
  border: 1px solid var(--line-2);
  background: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.sk-dot.on { background: var(--brass); border-color: var(--brass); }
.sk-dot.endowed { background: var(--brass-dk); border-color: var(--brass-dk); }

/* ─────────── Įrašas ─────────── */
.jr { padding: var(--s5); display: grid; gap: var(--s4); }
.jr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.jr-date { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.jr-title { font-size: 1.15rem; margin-top: 4px; }
.jr-tags { display: flex; gap: var(--s2); flex-wrap: wrap; }
.jr-text {
  font-size: 14.5px; color: var(--text-2); line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.jr-act { display: flex; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }

/* ─────────── Paketo sutaupymas ─────────── */
.pack-save {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--verd);
  margin-top: 4px;
}

/* ─────────── Skaitiklis iki vidurnakčio ─────────── */
.cdown {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}
.cdown b { color: var(--brass); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ─────────── Profilio pildymo juosta ─────────── */
.fill-bar { display: grid; gap: var(--s3); }
.fill-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.fill-top span { font-size: 13px; color: var(--text-2); }
.fill-top b { font-family: var(--mono); font-size: 12px; color: var(--brass); font-weight: 500; }
.fill-todo { display: grid; gap: var(--s2); margin-top: var(--s3); }
.fill-todo a, .fill-todo span {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--s2);
  font-size: 13px; color: var(--text-3);
}
.fill-todo .done { color: var(--verd); }
.fill-todo .done::before { content: "✓"; }
.fill-todo .todo::before { content: "○"; color: var(--text-3); }
.fill-todo a.todo:hover { color: var(--brass); }

/* ─────────── Kvietimas įsirašyti po skaitymo ─────────── */
.save-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  padding: var(--s5);
  border: 1px solid rgba(198,166,100,.35);
  border-radius: var(--r2);
  background: var(--tint);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.save-cta b { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--title); margin-bottom: 4px; }
.save-cta p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; max-width: 44ch; }
.save-cta.saved { border-color: rgba(134,164,146,.4); background: rgba(134,164,146,.07); }

/* Dovanų kodo laukas: mono šriftas ir tarpai tarp ženklų – kodą
   dažnai perrašinėja ranka iš laiško, tad kiekvienas ženklas turi
   būti aiškiai matomas. */
.kod-in {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kod-in::placeholder { letter-spacing: .08em; text-transform: none; }