/* ============================================================
   Programmē ar Minecraft
   Ielādējas PĒC minecraft.css un product-blocks.css, tāpēc pārmanto
   hero, formāta pārslēdzēju, skaitļu joslu, vietu kartes un vecāku
   kartes no Minecraft lapām. Šeit ir tikai tas, kas ir raksturīgs
   programmēšanas kursam: mācību gada ceļš, bloku un Python
   salīdzinājums un angļu valodas vārdnīca.
   ============================================================ */

/* ---------- Akcenta tēma ----------
   Oranža, jo Minecraft pasaules nodarbībām jau ir zaļā un abas
   programmas katalogā stāv blakus. Oranža ir arī Aģenta kategorijas
   krāsa MakeCode rīkjoslā un Aģenta svītras uz rokām. */

.mcp-orange {
  --v2-lime: #ff9a4d;
  --v2-lime-deep: #96400a;
  --v2-lime-lite: #c9590c;
  --v2-lime-rgb: 201, 89, 12;
  --v2-lime-ink: #ffffff;
  --v2-lime-soft: rgba(var(--v2-lime-rgb), 0.13);
}

/* ============================================================
   Mācību gada ceļš
   ============================================================ */

/* Pusgada galva. Gads dalās uz pusēm ļoti skaidri: vispirms bloki,
   pēc tam teksta kods. Šī josla ir vienīgā vieta, kur to pasaka. */
.mp-half {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  margin: 44px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.mp-half:first-of-type {
  margin-top: 34px;
}

.mp-half-tag {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--v2-lime-soft);
  color: var(--v2-lime-deep);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mp-half h3 {
  margin: 0;
  color: var(--purple);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.mp-half h3 b {
  color: var(--v2-lime-deep);
  font-weight: 800;
}

.mp-half p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Temu saraksts. Klients luudza nonemt numurus, jo tie izskatijas pec
   meneshiem, un secigs cels neatbilst tam, ka nodarbibas tiesham notiek:
   precizu kartibu nosaka pedagogs pec grupas. Tapec te ir tikai nosaukumi. */
.mp-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.mp-topic {
  position: relative;
  padding: 13px 16px 14px 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(30, 20, 60, 0.05);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* Kvadratins nevis kekjis: sis ir temu saraksts, ne izpildito lietu saraksts. */
.mp-topic::before {
  position: absolute;
  top: 17px;
  left: 15px;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--v2-lime-lite);
  content: "";
}

/* ============================================================
   Angļu valoda kodā
   ============================================================ */

.mp-eng {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: 34px;
}

.mp-figure {
  margin: 0;
}

.mp-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(30, 20, 60, 0.22));
}

.mp-words {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-word {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.mp-word code {
  color: var(--v2-lime-deep);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13.5px;
  font-weight: 700;
}

.mp-word span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}

/* ============================================================
/* Viena pieteikšanās karte, centrēta. Koplietotais .mc-signup ir divas
   kolonnas: karte un nodarbību laiki. Šeit laiku vēl nav. */
.mp-signup-one {
  display: block;
  width: min(560px, 100%);
  margin: 32px auto 0;
}

/* ============================================================
   Lidojošais Aģents noslēguma blokā
   ============================================================ */

/* Lidojošais Aģents pie noslēguma bloka. Teksts noslēguma blokā ir centrēts
   un ne platāks par 660px, tāpēc labajā malā paliek ap 220px brīvas vietas.
   Aģents ir šaurāks par to, lai nekad neuzkāptu virsū virsrakstam. */
.mp-flyer {
  position: absolute;
  right: 1.5%;
  bottom: -4px;
  z-index: 1;
  width: 190px;
  height: auto;
  pointer-events: none;
}

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

@media (max-width: 1180px) {
  .mp-topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mp-flyer {
    display: none;
  }
}

@media (max-width: 960px) {
  .mp-eng {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .mp-figure {
    width: 210px;
    margin: 0 auto;
  }

  .mp-flyer {
    display: none;
  }
}

@media (max-width: 720px) {
  .mp-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-half h3 {
    font-size: 19px;
  }
}

@media (max-width: 480px) {
  .mp-topics {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

/* Pusgada galvene bija viena rinda ar trim dažāda svara elementiem blakus.
   Klients lūdza tos salikt vienu zem otra un centrēt. */

.mp-half {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.mp-half p {
  flex: 0 1 auto;
  max-width: 640px;
}

/* Angļu vārdu režģis tagad ir centrēts zem teksta, un ilustrācija pārceļas
   uz kreiso malu, nevis stāv režģim blakus vienā rindā. */

.mp-eng {
  position: relative;
  display: block;
  min-height: 250px;
}

.mp-figure {
  position: absolute;
  top: 50%;
  left: 0;
  width: 215px;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.mp-words {
  width: min(820px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

@media (max-width: 1100px) {
  .mp-eng {
    min-height: 0;
  }

  .mp-figure {
    position: static;
    width: 190px;
    margin: 0 auto 22px;
    transform: none;
  }

  .mp-words {
    width: 100%;
  }
}