/* ============================================================================
   "Ko ietver" ka mape.

   Punkti nav saraksts, ko nolasit no augsas uz apaksu: tie ir vieni un tie pasi
   soli, kas viens pec otra uzbuve vienu lapu. Uzbrauc cilnei, kartite izslid
   ara, un uz tas ir tas pats virsraksts un tas pats teikums, kas lidz sim
   stavēja sarakstā. Blakus sīks lapas attēls, kas ar katru soli aizpildās.

   Neviens vards nav jauns: cilnes, kartites un saraksts sanos nak no tas pasas
   sadalas <h3> un <p>.

   Uzbraucot NEKAS netiek nokrasots. Gradients tiek ZIMETS apkart kartitei,
   tapat ka .highlight-icon .hi-ring uz pasas lapas, un katra kartite rada savu
   gradienta gabalu, tapat ka .include-item::before to darija lidz sim.
   ==========================================================================*/

/* Divas vienadas kolonnas, ne 1,32 pret 0,68. Saraksts nav paraksts pie mapes:
   tas ir otrs veids, ka to pasu lasit, un tikai tas rada visus septinus soluus
   vienlaikus. Ar tresdalu platuma tas izskatijas pec atlikuma. Mape klust
   saurāka, tapec kartites klust mazakas, un tas ir labi: uz tam vienlaikus
   tapat ir redzams tikai viens teksts. */
.jki {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}

/* --- mape ---------------------------------------------------------------- */
.jki-folder {
  position: relative;
  background: var(--warm2, #F2F0E8);
  border: 1px solid var(--rule, #D9D6CE);
  border-radius: 5px 14px 14px 14px;
  padding: 20px;
}
.jki-folder::before {
  content: ""; position: absolute; left: -1px; top: -17px;
  width: 104px; height: 18px;
  background: var(--warm2, #F2F0E8); border: 1px solid var(--rule, #D9D6CE); border-bottom: 0;
  border-radius: 4px 10px 0 0;
}
.jki-ftab {
  position: absolute; left: 16px; top: -13px; z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute, #5A5D59);
}
.jki-deck { position: relative; overflow: hidden }

/* --- kartite ------------------------------------------------------------- */
.jki-card {
  position: absolute; left: 0; right: 18px;
  border-radius: 9px; background: var(--card, #fff);
  border: 1px solid var(--rule, #D9D6CE);
  cursor: pointer; text-align: left; width: auto; font: inherit; padding: 0; color: inherit;
  box-shadow: 0 -1px 0 0 rgba(0,0,0,.04), 0 12px 22px -18px rgba(0,0,0,.45);
  transition: top .42s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1),
              box-shadow .35s;
}
.jki-card.on {
  transform: translateX(16px);
  box-shadow: -7px 16px 32px -16px rgba(0,0,0,.42);
}
/* Gredzens tiek zimets apkart kartitei, ne uzlikts uzreiz. Tas ir viss, kas
   uzbraucot mainas krasa: numuri, virsraksti un malas paliek neitralas. */
.jki-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 7 }
.jki-ring rect {
  x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 8px;
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
  transition: stroke-dashoffset .75s cubic-bezier(.22,1,.36,1), opacity .12s;
}
/* Bez sha opacity slegtai kartitei sturi paliek punkts: apalais gala vaks
   uzzime pats sevi ari tad, kad zimejama linija ir nulles garuma. */
.jki-card.on .jki-ring rect { stroke-dashoffset: 0; opacity: 1 }
/* Cilne: slegta kartite rada numuru UN virsrakstu, atverta - tikai numuru, jo
   virsraksts tad stav lielaja izmerā zem tās. */
.jki-tab {
  position: absolute; left: 0; right: 0; top: 0; height: 34px;
  padding: 12px 20px 0; z-index: 6;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute, #5A5D59); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jki-tab i { font-style: normal; transition: opacity .25s }
.jki-card.on .jki-tab i { opacity: 0 }
/* Slegtai kartitei saturs ir paslepts: citadi zem atvertas kartites izlida
   pusvirsraksts un puse sika attela, kas nav ne cilne, ne kartite. */
.jki-body {
  position: absolute; left: 20px; right: 20px; top: 38px; bottom: 16px;
  display: flex; gap: 22px; opacity: 0; transition: opacity .28s;
}
.jki-card.on .jki-body { opacity: 1 }
/* Merisanas brīdis. Teksts ir absoluts starp top:38 un bottom:16, tapec pats
   no sevis nekada augstuma nedod. Merot tam tiek nonemta TIKAI apakseja mala:
   left un right paliek, jo tiesi tie nosaka, cik reizes teksts lauzas. Ja
   merot to izlaiz plusmaa, tas kluust par visu kartites platumu, lauzas mazak
   reizu un iznak par zemu - tiesi ta pirmais gajiens sheit kludijas. */
.jki-card.jki-measure .jki-body { bottom: auto; opacity: 0 }
.jki-txt { flex: 1 1 auto; min-width: 0 }
/* Saite kartitee. Ta bija uz katras kartites, pirms sadala kluva par mapi, un
   ta ir jaatnem lidzi: bez tas cilveks izlasa par pakalpojumu un tad nav, kur
   iet. Paradas tikai atvertaja kartitee, ka viss parejais teksts. */
.jki-go {
  display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 500;
  color: var(--ink, #0E1211); text-decoration: none;
  border-bottom: 1px solid var(--rule-strong, #B8B5AB); padding-bottom: 1px;
  transition: border-color .2s ease;
}
.jki-go:hover { border-bottom-color: var(--ink, #0E1211) }
.jki-go:focus-visible { outline: 2px solid #5988C6; outline-offset: 3px; border-radius: 2px }
.jki-txt h3 {
  margin: 0 0 8px; font-size: 18.5px; font-weight: 600; letter-spacing: -.018em;
  line-height: 1.24; color: var(--ink, #0E1211); text-wrap: balance;
}
.jki-txt p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mute, #5A5D59);
  max-width: 46ch }

/* --- ikonas plaksne -----------------------------------------------------
   Kartite vairs nerada sikbildi, kas aug: ta rada, PAR KO ta ir. Krasa nak
   pec kartas numura no tas pasas cetru krasu rindas, kas gredzenam apkart
   kartitei, tapec mape lasas ka viens komplekts, ne ka cetras nejausibas. */
.jki-thumb {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 72px; align-self: center;
}
/* Plaksne ir TA PATI, kas lapas .highlight-icon: silts neitrals kvadrats,
   12px sturi, tumss zimejums. Krasu nes GREDZENS, kas tiek uzzimets apkart,
   kad kartite atveras, tapat ka kartites gredzens un tapat ka lapas ikonas.

   Divi mekleejumi, kas te nesanaca: krasaina mala ap krasainu fonu (lasijas
   ka nozimite, tada lapaa nav nekur) un mierigs neitrals kvadrats (nekur
   nepieskaras tam, kas so lapu tur kopa). Sistema ir gradienta linija, kas
   pati sevi uzzime, un tas ir tas, kas te tagad ir. */
.jki-ico {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 12px;
  background: #F2F0E8; color: var(--ink, #0E1211);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.jki-ico > svg { width: 26px; height: 26px; display: block }
/* svg.jki-ico-ring, ne tikai .jki-ico-ring: gredzens ir TIESHS svg berns,
   tapec .jki-ico > svg { width: 26px } to keera lidzi. Tas pats, kas sliedes
   mezglaa. */
.jki-ico > svg.jki-ico-ring {
  position: absolute; left: -3px; top: -3px;
  width: calc(100% + 6px); height: calc(100% + 6px);
  pointer-events: none; overflow: visible;
}
.jki-ico-ring rect {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
  transition: stroke-dashoffset .75s cubic-bezier(.22, 1, .36, 1), opacity .12s;
}
/* Bez opacity slegtai kartitei sturi paliktu punkts: apalais gala vaks
   uzzime pats sevi ari pie nulles garuma. Ta pati piezime, kas kartites
   gredzenam zemak. */
.jki-card.on .jki-ico-ring rect { stroke-dashoffset: 0; opacity: 1 }
.jki-card.on .jki-ico { transform: translateY(-2px) }
/* Krasa te vairs netiek likta: to nes gredzens, kas tiek uzzimets apkart,
   tapat ka lapas .highlight-icon un procesa solja aplim. Zimejums paliek
   tumss, ta ka visur citur lapaa. */

/* --- saraksts sanos ------------------------------------------------------
   Ta pati stavus linija, kas BUJ sarakstā: katra rinda tur savu gabalu, un
   aktiva rinda to iededz. Numuri un teksts nekrasojas. */
.jki-list { margin: 0; padding: 0 0 0 22px; list-style: none }
.jki-list li { position: relative }
.jki-list li + li { border-top: 1px solid var(--rule, #D9D6CE) }
.jki-list li::before {
  content: ''; position: absolute; left: -22px; top: -1px; bottom: -1px; width: 2px;
  border-radius: 2px; opacity: .16; transition: opacity .3s ease, width .3s ease;
  background: linear-gradient(180deg, #57A85B, #F2C51A);
}
.jki-list li:nth-child(4n+2)::before { background: linear-gradient(180deg, #F2C51A, #5988C6) }
.jki-list li:nth-child(4n+3)::before { background: linear-gradient(180deg, #5988C6, #F26839) }
.jki-list li:nth-child(4n+4)::before { background: linear-gradient(180deg, #F26839, #57A85B) }
.jki-list li.on::before { opacity: 1; width: 3px }
/* 17px, ne 15,5px: saraksts stav blakus mapei, ne zem tas, tapec tam jalasas
   ka pilnvertigam sarakstam, nevis ka parakstam. */
.jki-list button, .jki-list li > a {
  text-decoration: none;
  width: 100%; text-align: left; background: none; border: 0; padding: 14px 0;
  cursor: pointer; font: inherit; font-size: 17px; line-height: 1.34;
  color: var(--mute, #5A5D59);
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: baseline;
  transition: color .2s;
}
.jki-list .jki-n {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
  color: var(--rule-strong, #B8B5AB); transition: color .2s;
}
.jki-list li.on button, .jki-list li.on > a { color: var(--ink, #0E1211); font-weight: 550 }
.jki-list li.on .jki-n { color: var(--ink, #0E1211) }

/* Uz telefona saraksts SANOS nokrit zem mapes, un tad viens un tas pats
   desmit pakalpojumu uzskaitijums stav lapaa DIVAS reizes: vispirms ka mapes
   cilnes, tad velreiz ka saraksts. Turklat sarakstaa pieskariens aizved uz
   pakalpojuma lapu, bet cilne atver kartiti, tapec viena un ta pati rinda
   uzvedas divejadi.

   Uz telefona saraksts tiek nonemts. Mape pati jau rada visus punktus, un
   saite uz pakalpojumu ir atvertajaa kartitee ("Uzzinat vairak"). */
@media (max-width: 900px) {
  .jki { grid-template-columns: 1fr }
  .jki-list { display: none }
}
@media (max-width: 560px) {
  .jki-folder { padding: 16px }
  /* Kartite izslid par 16px, tapec vietai pa labi jabut vismaz tikpat, citadi
     atverta kartite izlien no mapes. */
  .jki-card { right: 18px }
  /* Cilne bija apgriezta jau uz treso vardu: bez retinajuma un bez lielajiem
     burtiem taja pasa vieta ietilpst gandriz divreiz vairak. */
  .jki-tab { font-size: 10px; letter-spacing: .02em; text-transform: none; padding: 12px 16px 0 }
  .jki-body { gap: 14px; left: 14px; right: 14px }
  .jki-txt h3 { font-size: 17.5px }
  .jki-txt p { font-size: 14px }
  .jki-thumb { width: 56px }
  .jki-ico { width: 48px; height: 48px }
  .jki-ico > svg { width: 24px; height: 24px }
  .jki-list button, .jki-list li > a { font-size: 14.5px }
}
@media (prefers-reduced-motion: reduce) {
  .jki-card, .jki-body, .jki-ring rect, .jki-ico, .jki-ico-ring rect { transition: none }
}

/* Saraksta rinda ka saite: tas pats izskats, ka pogai, plus redzams fokuss un
   norade, ka tur var aiziet. */
.jki-list li > a:hover { color: var(--ink, #0E1211) }
.jki-list li > a:focus-visible { outline: 2px solid #5988C6; outline-offset: 2px; border-radius: 3px }

/* Ar pirkstu cilne ir 52px augsta (sk. TAB_TOUCH ietver.js), tapec uzraksts
   tiek centrets pa visu to joslu, nevis paliek augssejaa 34px daljaa. 34px
   ir par mazu, lai ar pirkstu trapitu; 52px ir virs 44px minimuma. */
@media (hover: none), (pointer: coarse) {
  /* 52px augsta josla, lai ar pirkstu trapa, un uzraksts, ko var izlasit.
     Ieprieks te bija 10px monospace: tas bija merits, lai garakais nosaukums
     ietilptu vienaa rindaa, un rezultataa nosaukums bija par mazu, lai to
     lasitu telefonaa. Tagad numurs paliek mazs un monospace, bet NOSAUKUMS
     nem lapas pamatfontu 15px, un, ja tas nekad neietilpst, tas tiek
     nogriezts ar daudzpunkti, nevis sasaurinats visiem. */
  .jki-tab {
    height: 52px; display: flex; align-items: center; gap: 9px;
    padding: 0 16px; font-size: 11px; letter-spacing: .1em;
  }
  .jki-tab i {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 15px; font-weight: 500; letter-spacing: -.01em;
    color: var(--ink, #0E1211);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
}