/* ============================================================
   Programmēšana Roblox Studio
   Ielādējas PĒC roblox.css, tāpēc pārmanto .rbx-vs salīdzinājuma
   blokus no datorspēļu inženiera lapas. Šeit ir tikai tas, kas ir
   raksturīgs programmēšanas kursam: ķēde objekts, kods, darbība,
   un Luau jēdzienu kartes ar koda piemēriem.
   ============================================================ */

/* ---------- Akcenta tēma ----------
   Zila, nevis sarkana kā datorspēļu inženierim. Divas Roblox lapas
   blakus katalogā tā ir vieglāk atšķiramas, un zilā der pie koda
   redaktora, kas ir hero attēlā. */

.rbxp-blue {
  --v2-lime: #7ab4ff;
  --v2-lime-deep: #1f5fbf;
  --v2-lime-lite: #3d82e0;
  --v2-lime-rgb: 61, 130, 224;
  --v2-lime-ink: #ffffff;
  --v2-lime-soft: rgba(var(--v2-lime-rgb), 0.12);
}

/* ============================================================
   Objekts, kods, darbība
   ============================================================ */

.rp-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: rp-step;
  list-style: none;
}

.rp-link {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(30, 20, 60, 0.08);
}

/* Bultiņa starp posmiem. Uz telefona tā pazūd, jo kartes iet viena zem otras. */
.rp-link:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--v2-lime-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  content: "›";
}

.rp-link-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--v2-lime-soft);
  color: var(--v2-lime-deep);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.rp-link h3 {
  margin: 15px 0 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rp-link p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.rp-subhead {
  margin: 46px 0 0;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  text-align: center;
}

.rp-subhead + .mc-skill-grid {
  margin-top: 22px;
}

/* Prasmju kartes ir veidotas tumšam fonam: balts virsraksts un caurspīdīgs
   balts fons. Šajā lapā tās stāv uz gaišas sekcijas, tāpēc krāsas jāapgriež,
   citādi teksts ir balts uz balta un karte izskatās tukša. */

.rbxp-blue .v2-tint .mc-skill {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 10px 26px rgba(30, 20, 60, 0.06);
}

.rbxp-blue .v2-tint .mc-skill:hover {
  border-color: rgba(var(--v2-lime-rgb), 0.45);
  background: #fff;
}

.rbxp-blue .v2-tint .mc-skill h3 {
  color: var(--purple);
}

.rbxp-blue .v2-tint .mc-skill p {
  color: var(--muted);
}

/* Viena pieteikšanās karte, centrēta. */
.rp-signup-one {
  width: min(560px, 100%);
  margin: 32px auto 0;
}

/* ============================================================
   Luau jēdzieni ar koda piemēriem
   ============================================================ */

.rp-concepts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.rp-concept {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30, 20, 60, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rp-concept:hover {
  box-shadow: 0 18px 40px rgba(30, 20, 60, 0.12);
  transform: translateY(-3px);
}

.rp-concept-top {
  display: flex;
  gap: 11px;
  align-items: center;
}

/* Numurs dod sarakstam secību, un tas ir arī vienīgais akcents kartes augšā. */
.rp-concept-n {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--v2-lime-soft);
  color: var(--v2-lime-deep);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.rp-concept h3 {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rp-concept p {
  margin: 11px 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Koda logs ---------- */

/* margin-top: auto piespiež logu kartes apakšā, lai visos sešos gabalos
   kods sākas vienā līmenī arī tad, ja apraksts ir par rindiņu īsāks. */
.rp-code {
  overflow: hidden;
  margin-top: auto;
  border-radius: 13px;
  background: #16143a;
}

/* Redaktora josla ar trim aplīšiem, tāpat kā īstā koda logā. */
.rp-code-bar {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.42);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rp-code-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.rp-code-bar i:first-child {
  background: #ff5f57;
}

.rp-code-bar i:nth-child(2) {
  background: #febc2e;
}

.rp-code-bar i:nth-child(3) {
  margin-right: 7px;
  background: #28c840;
}

.rp-code pre {
  overflow-x: auto;
  margin: 0;
  padding: 14px 16px 15px;
}

.rp-concept code {
  color: #cfd8f5;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
}

/* Krāsas ir tuvu Roblox Studio redaktora noklusējuma tēmai. */
.rp-concept .c-key {
  color: #ff8fb8;
  font-style: normal;
}

.rp-concept .c-str {
  color: #9ee6a4;
  font-style: normal;
}

.rp-concept .c-num {
  color: #ffca7a;
  font-style: normal;
}

.rp-concept .c-com {
  color: #7d84ad;
  font-style: normal;
}

.rp-note {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

.rp-note a {
  color: var(--v2-lime-deep);
  font-weight: 700;
}

/* ============================================================
   Salīdzinājums uz tumša fona
   Lapā bija viena tumša josla, un tā ir noņemta pēc klienta lūguma.
   Bez tās viss vidus no augšas līdz apakšai palika gaišs, tāpēc tumšo
   fonu pārcēlu uz šo salīdzinājumu. Tas ir tieši tajā pašā vietā, kur
   noņemtā josla bija, un divas gaišas kartes uz tumša fona salīdzinājumu
   padara skaidrāku nekā gaišas kartes uz balta.
   ============================================================ */

/* Klienta fona attēls joslai. Tas ir 3:1, bet josla ir apmēram 1.8:1, tāpēc
   object-fit: cover to apgriež no sāniem un stūru zīmējumi paliek ārpus kadra
   šaurākos ekrānos. Zem attēla ir .v2-dark gradients, tāpēc caurspīdība ir
   liela, bet ne pilna: tā abi sanāk vienā tonī ar hero un pogām. */
.rp-vs-dark {
  position: relative;
  overflow: hidden;
}

.rp-vs-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  pointer-events: none;
}

.rp-vs-dark > .section {
  position: relative;
  z-index: 1;
}

/* .v2-dark visiem h3 liek baltu krāsu, bet šīs kartes ir gaišas. */
.rp-vs-dark .rbx-vs-card h3 {
  color: var(--purple);
}

/* Kreisā karte gaišā sadaļā ir pelēka, lai atšķirtos no baltās labās.
   Uz tumša fona pelēks izskatās kā izslēgts, tāpēc te abas ir baltas
   un atšķiras ar apmali un ēnu, tāpat kā gaišajā variantā. */
.rp-vs-dark .rbx-vs-card.is-before {
  border-color: rgba(255, 255, 255, 0.18);
  background: #fff;
}

.rp-vs-dark .rp-note {
  color: rgba(255, 255, 255, 0.62);
}

.rp-vs-dark .rp-note a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.42);
  text-underline-offset: 3px;
}

.rp-vs-dark .rp-note a:hover {
  text-decoration-color: #fff;
}

/* ============================================================
   Adaptīvi
   ============================================================ */

@media (max-width: 1180px) {
  .rp-concepts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .rp-chain {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .rp-link:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -20px;
    margin-top: 0;
    margin-right: -13px;
    transform: rotate(90deg);
  }
}

@media (max-width: 720px) {
  .rp-concepts {
    grid-template-columns: minmax(0, 1fr);
  }

  .rp-link,
  .rp-concept {
    padding: 22px 20px;
  }

  .rp-subhead {
    margin-top: 38px;
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-link,
  .rp-concept {
    transition: none;
  }
}

/* ============================================================
   Klienta atsauksmes 2026-08-31
   ============================================================ */

/* Bultiņa ķēdes trešajā solī bija par mazu un vizuāli nobīdīta pa kreisi,
   jo trijstūra glifam ir nevienādas malu atstarpes. Lielāks izmērs un neliela
   nobīde pa labi to noliek aplīša vidū. */

.rp-link-icon {
  font-size: 21px;
  line-height: 1;
}

.rp-link:last-child .rp-link-icon {
  padding-left: 3px;
}

/* Savienotaajs starp posmiem bija par mazu. Lielaaks aplis un lielaaks
   glifs; neliela nobide labo to, ka "›" zimes labaa mala ir platakaa. */

.rp-link:not(:last-child)::after {
  right: -16px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  font-size: 20px;
  text-indent: 2px;
}

@media (max-width: 960px) {
  .rp-link:not(:last-child)::after {
    right: 50%;
    bottom: -22px;
    margin-right: -16px;
    text-indent: 0;
  }
}