/* ============================================================================
   Sadaļa "Pazīstama situācija": kartītes pa kreisi, konsole pa labi.

   Sadaļa jau ir uzbūvēta kā problēma un risinājums, tāpēc panelim blakus nav
   jāizdomā nekas jauns: tas dara to pašu. Izmet kļūdu sarkanā, pateic iemeslu
   pelēkā un pēc tam to nokārto ar rindu, kas lasās kā teikums, nevis kā kods.
   Kļūda paliek sarakstā, tikai nosvītrota, tāpēc redzams gan, kas bija, gan,
   ka tas ir izdarīts.

   Visas rindas nāk no TĀS PAŠAS sadaļas kartītēm. Panelis nesola neko, kā lapā
   nav, un tas ir apzīmēts ar aria-hidden: tā ir ilustrācija, ne saturs.
   ==========================================================================*/

.situ-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
}
/* Trīs kartītes blakus kļūst par trim viena zem otras, jo blakus tām tagad
   stāv panelis. Augstāka specifiskuma dēļ lapas paša .grid-3 paliek neskarts
   visur citur. */
.situ-cols .grid-3 { display: flex; flex-direction: column; gap: 14px }

.jkc {
  background: #0B0F0E; border: 1px solid #1A2220; border-radius: 10px;
  position: relative; overflow: hidden;
  /* min-height 300px vairs nav: augstumu nosaka KARTITES blakus, un panelis
     tam seko. Ar 300px un flex-basis:auto zemak sanaca cilpa: iesetas rindas
     paaugstinaja pashu paneli, rinda kluva augstaka, un panelis nokarajas
     69px zem pedejas kartites (sociala-media: 138px). 240px ir tikai gridsla
     tam gadijumam, ja panelis kadreiz stavetu viens pats. */
  height: 100%; min-height: 240px;
  display: flex; flex-direction: column;
}
.jkc-bar {
  display: flex; align-items: center; gap: 7px; padding: 16px 18px 10px;
  flex: 0 0 auto; position: relative; z-index: 3;
}
.jkc-bar i { width: 8px; height: 8px; border-radius: 50%; background: #2A322E; display: block }
.jkc-bar span {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: .1em; color: #6C7A72; text-transform: uppercase; margin-left: 6px;
}
.jkc-bar em {
  margin-left: auto; font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px;
  color: #55635C; display: flex; align-items: center; gap: 5px;
}
.jkc-bar em b {
  width: 5px; height: 5px; border-radius: 50%; background: #7FD08A; display: block;
  animation: jkcPulse 2.4s ease-in-out infinite;
}
@keyframes jkcPulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

/* Rindas ienāk apakšā un aizslīd augšup. Augša ir izgaisināta, tāpēc acs to
   uztver kā fonu, nevis kā tekstu, kas jāizlasa līdz galam. */
.jkc-stream {
  /* flex-basis 0, ne auto: citadi rindu kopejais augstums iet atpakal pasha
     paneļa augstuma, un tas aug lidz ar saturu, ko tas pats iesej. */
  flex: 1 1 0; min-height: 0;
  position: relative; overflow: hidden; padding: 0 18px 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.jkc-stream::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 2;
  background: linear-gradient(180deg, #0B0F0E 12%, rgba(11,15,14,0));
  pointer-events: none;
}
.jkc-stream .l {
  /* Rinda ir flex elements, un tapec ta pec noklusejuma SARAUJAS, kad rindu
     kopa klust augstaka par paneli: uz telefona sesdesmit rindas sablivejas
     pa 4px katra teksta vieta. Rinda ir teksts, ne gumija - tai jaizlien pa
     augssu ara, tur to sagaida izgaisinajums. */
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px; line-height: 1.7; color: #6E7C74;
  white-space: pre; overflow: hidden; text-overflow: ellipsis;
  animation: jkcRise .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes jkcRise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.jkc-stream .k { color: #8FA6C8 }
.jkc-stream .s { color: #9BB89F }
.jkc-stream .n { color: #C9B981 }
.jkc-stream .c { color: #4B564F }
.jkc-stream .e { color: #D9705E }
.jkc-stream .l.done .e { color: #5E6B62; text-decoration: line-through; text-decoration-color: #39433D }
.jkc-stream .r { color: #6E7C74 }
.jkc-stream .f { color: #9BB89F }
.jkc-stream .l.sol { color: #9BB89F }
.jkc-stream .ok { color: #7FD08A }

@media (max-width: 900px) {
  .situ-cols { grid-template-columns: 1fr }
  .jkc { height: 330px; min-height: 0 }
}
/* Šaurā panelī 13,5px rindas beidzās ar daudzpunkti, tāpēc tur tās ir mazākas. */
@media (max-width: 560px) {
  .jkc-stream { padding: 0 14px 14px }
  .jkc-stream .l { font-size: 11.5px; line-height: 1.68 }
}
@media (prefers-reduced-motion: reduce) {
  .jkc-stream .l { animation: none }
  .jkc-bar em b { animation: none }
}