/* ============================================================
   Roblox datorspēļu inženieris: tiešsaiste un klātiene
   Ielādējas PĒC product-blocks.css un pievieno tikai to,
   kas ir raksturīgs tieši Roblox lapām.
   ============================================================ */

/* ---------- Akcenta tēma ---------- */

.rbx-red {
  --v2-lime: #ff6a5c;
  --v2-lime-deep: #c9302a;
  --v2-lime-lite: #ff8578;
  --v2-lime-rgb: 226, 45, 35;
  --v2-lime-ink: #2c0704;
  --v2-lime-soft: rgba(var(--v2-lime-rgb), 0.12);
}

/* ============================================================
   Spēlētājs kļūst par veidotāju
   ============================================================ */

.rbx-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 34px;
}

.rbx-vs-card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.rbx-vs-card.is-before {
  background: var(--soft);
  box-shadow: none;
}

.rbx-vs-card.is-after {
  border-color: rgba(var(--v2-lime-rgb), 0.3);
  border-top: 4px solid var(--v2-lime-deep);
  box-shadow: 0 20px 46px rgba(30, 20, 60, 0.12);
}

.rbx-vs-tag {
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(75, 58, 115, 0.1);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rbx-vs-card.is-after .rbx-vs-tag {
  background: var(--v2-lime-soft);
  color: var(--v2-lime-deep);
}

.rbx-vs-card h3 {
  margin: 14px 0 0;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.rbx-vs-card ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.rbx-vs-card li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
}

.rbx-vs-card li + li {
  margin-top: 11px;
}

.rbx-vs-card li::before {
  position: absolute;
  top: 0.5em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(75, 58, 115, 0.28);
  content: "";
}

.rbx-vs-card.is-after li::before {
  border-radius: 3px;
  background: var(--v2-lime-deep);
}

.rbx-vs-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--v2-lime-lite) 0%, var(--v2-lime-deep) 100%);
  box-shadow: 0 12px 26px rgba(var(--v2-lime-rgb), 0.34);
  color: var(--v2-lime-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

/* ============================================================
   Četri līmeņi
   ============================================================ */

.rbx-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.rbx-level {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(30, 20, 60, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}

.rbx-level:hover {
  box-shadow: 0 24px 54px rgba(30, 20, 60, 0.14);
  transform: translateY(-3px);
}

.rbx-level-media {
  position: relative;
  overflow: hidden;
  background: var(--soft);
}

.rbx-level-media img {
  display: block;
  width: 100%;
  height: 232px;
  object-fit: cover;
  transition: transform 0.5s;
}

.rbx-level:hover .rbx-level-media img {
  transform: scale(1.04);
}

.rbx-level-num {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(18, 11, 40, 0.82);
  color: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rbx-level-term {
  position: absolute;
  top: 18px;
  right: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rbx-level-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 22px 26px 26px;
}

.rbx-level-body h3 {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.rbx-project {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  align-self: flex-start;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(var(--v2-lime-rgb), 0.28);
  border-radius: 12px;
  background: rgba(var(--v2-lime-rgb), 0.08);
  font-size: 13.5px;
  line-height: 1.4;
}

.rbx-project b {
  color: var(--v2-lime-deep);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rbx-project span {
  color: var(--text);
  font-weight: 700;
}

.rbx-level-body ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.rbx-level-body li {
  position: relative;
  padding-left: 21px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.rbx-level-body li + li {
  margin-top: 8px;
}

.rbx-level-body li::before {
  position: absolute;
  top: 0.58em;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 3px;
  background: var(--v2-lime-deep);
  content: "";
}

/* ============================================================
   Kā top spēle: darba cikls
   ============================================================ */

.rbx-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 36px;
}

.rbx-pipeline::before {
  position: absolute;
  top: 23px;
  right: 7%;
  left: 7%;
  height: 2px;
  background: rgba(var(--v2-lime-rgb), 0.18);
  content: "";
}

.rbx-step {
  position: relative;
  padding: 0 6px;
  text-align: center;
}

/* Aplis rada, cik liela daļa cikla jau ir pagājusi: 1/7, 2/7 un tā tālāk. */
.rbx-step-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    var(--v2-lime-deep) calc(var(--p, 0) * 1%),
    rgba(var(--v2-lime-rgb), 0.16) 0);
}

.rbx-step-dot::before {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.rbx-step-dot b {
  position: relative;
  color: var(--v2-lime-deep);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
}

/* Pēdējais solis ir pilns aplis, tāpēc to aizpildām arī iekšpusē. */
.rbx-step:last-child .rbx-step-dot {
  box-shadow: 0 10px 22px rgba(var(--v2-lime-rgb), 0.3);
}

.rbx-step:last-child .rbx-step-dot::before {
  background: linear-gradient(180deg, var(--v2-lime-lite) 0%, var(--v2-lime-deep) 100%);
}

.rbx-step:last-child .rbx-step-dot b {
  color: var(--v2-lime-ink);
}

.rbx-step strong {
  display: block;
  margin-top: 13px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rbx-step-cap {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Ko bērns prot pēc programmas */

.rbx-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
  padding: 30px 30px 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}

.rbx-outcomes-head {
  grid-column: 1 / -1;
  margin-bottom: 6px;
}

.rbx-outcomes-head strong {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.rbx-outcomes-head span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.rbx-outcomes li {
  position: relative;
  padding-left: 32px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}

.rbx-outcomes ul {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rbx-outcomes li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  background: var(--v2-lime-soft);
  color: var(--v2-lime-deep);
  font-size: 12px;
  font-weight: 800;
  content: "\2713";
}

/* ============================================================
   Foto bloks
   ============================================================ */

.rbx-shots {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.rbx-shots figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.rbx-shots img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.rbx-shots figcaption {
  padding: 13px 18px 15px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

/* ============================================================
   Saite uz Roblox programmesanas kursu
   Ta bija atsevisksa tumsa josla ar savu pogu, bet lapas beigas
   sanaca tris joslas ar pogam viena aiz otras: pieteiksanas, si
   un tehniskais atbalsts, un tad vel noslegums. Tagad ta ir viena
   rinda zem noslegumaa pogam.
   ============================================================ */

.v2-cta .rbx-cta-cross {
  max-width: 560px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13.5px;
  line-height: 1.55;
}

.v2-cta .rbx-cta-cross a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.42);
  text-underline-offset: 3px;
}

.v2-cta .rbx-cta-cross a:hover {
  text-decoration-color: #fff;
}

/* ============================================================
   Piezime par publicesanu Roblox platforma
   Roblox 2026. gada maija ieviesa verifikacijas prasibas, tapec
   skola berna darbu publicet nevar. Sis pazinojums ir visas tris
   Roblox lapas vienada vieta, tiesi pirms tehniskas sadalas.
   ============================================================ */

.rbx-publish {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: 26px 30px 28px;
  border: 1px solid rgba(247, 190, 0, 0.42);
  border-radius: 22px;
  background: rgba(247, 190, 0, 0.08);
}

.rbx-publish-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(247, 190, 0, 0.22);
  font-size: 25px;
  line-height: 1;
}

.rbx-publish strong {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rbx-publish p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .rbx-publish {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 20px 24px;
  }
}

/* ============================================================
   Juridiskā atruna
   ============================================================ */

.rbx-disclaimer {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 26px 24px 44px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

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

@media (max-width: 1180px) {
  .rbx-pipeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .rbx-pipeline::before {
    display: none;
  }

  .rbx-outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rbx-levels {
    gap: 20px;
  }
}

@media (max-width: 960px) {
  .rbx-vs {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .rbx-vs-arrow {
    width: 44px;
    height: 44px;
    transform: rotate(90deg);
  }
}

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

  .rbx-level-media img {
    height: 200px;
  }

  .rbx-level-body {
    padding: 20px 22px 24px;
  }

  .rbx-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rbx-outcomes {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 22px 26px;
  }

  .rbx-shots {
    grid-template-columns: minmax(0, 1fr);
  }

  .rbx-shots img {
    height: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rbx-level,
  .rbx-level-media img {
    transition: none;
  }

  .rbx-level:hover {
    transform: none;
  }

  .rbx-level:hover .rbx-level-media img {
    transform: none;
  }
}

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

/* Darba cikls ir process, nevis brīdinājums. Lapas sarkanais akcents tajā
   izskatījās pēc kļūdas paziņojuma, tāpēc šis viens bloks lieto ciāna toni
   neatkarīgi no lapas tēmas. */

.rbx-pipeline .rbx-step-dot {
  background: conic-gradient(from -90deg,
    #1ab3cc calc(var(--p, 0) * 1%),
    rgba(26, 179, 204, 0.16) 0);
}

.rbx-pipeline .rbx-step-dot b {
  color: #10788a;
}

.rbx-pipeline .rbx-step:last-child .rbx-step-dot {
  box-shadow: 0 10px 22px rgba(26, 179, 204, 0.32);
}

.rbx-pipeline .rbx-step:last-child .rbx-step-dot::before {
  background: linear-gradient(180deg, #3ecadd 0%, #1ab3cc 100%);
}

.rbx-pipeline .rbx-step:last-child .rbx-step-dot b {
  color: #04323a;
}

/* Saite uz Roblox pamācību par verifikāciju. */

.rbx-publish-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: var(--purple);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(75, 58, 115, 0.35);
  text-underline-offset: 3px;
}

.rbx-publish-link::after {
  content: "\2197";
  font-weight: 800;
}

.rbx-publish-link:hover {
  text-decoration-color: var(--purple);
}