/* ============================================================
   3D dizaina kurss: tiešsaiste un klātiene
   Ielādējas PĒC product-blocks.css. Šī ir vizuāli bagātākā
   nodarbību lapa, jo pats produkts ir vizuāls: uzsvars ir uz
   jauniešu darbiem, nevis uz tekstu.
   ============================================================ */

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

.dd-violet {
  --v2-lime: #b49bff;
  --v2-lime-deep: #5a4497;
  --v2-lime-lite: #7458c4;
  --v2-lime-rgb: 122, 96, 200;
  --v2-lime-ink: #ffffff;
  --v2-lime-soft: rgba(var(--v2-lime-rgb), 0.13);
}

/* ---------- Viena akcenta krāsa visai lapai ----------
   Kopīgais noteikums hero virsrakstam liek pāreju no akcenta uz ciānu,
   un gaišajās sekcijās <span> ir maģenta. 3D lapā tas kopā ar violeto
   deva piecas krāsas vienā lapā, tāpēc te viss paliek violetajā saimē. */

.dd-violet .v2-hero h1 span {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--v2-lime);
}

.dd-violet h1 span,
.dd-violet h2 span {
  color: var(--v2-lime-lite);
}

.dd-violet .v2-dark h2 span,
.dd-violet .v2-dark .section-head h2 span {
  color: var(--v2-lime);
}

/* Gaišajās sekcijās arī mazais uzraksts virs virsraksta ir tajā pašā violetajā.
   Tumšo sekciju un noslēguma bloka uzrakstus neaiztiekam, tiem ir sava krāsa. */
.dd-violet .v2-tint .eyebrow,
.dd-violet section.section .eyebrow {
  background: rgba(var(--v2-lime-rgb), 0.1);
  color: var(--v2-lime-lite);
}

/* ============================================================
   Hero lente: trīs rindas ar dalībnieku darbiem, kas lēni slīd
   Katra rinda iet savā ātrumā, vidējā pretējā virzienā. Rindā ir
   septiņpadsmit darbi, un tie ir divreiz, tāpēc translateX(-50%)
   atgriež tieši sākumā. Atstarpe ir kā margin, nevis flex gap,
   citādi puse nesakristu ar attēlu robežu.
   ============================================================ */

.dd-marquee {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: hidden;
  background: #150e33;
}

.dd-mrow {
  overflow: hidden;
}

.dd-mtrack {
  display: flex;
  width: max-content;
  height: 100%;
  animation: ddDrift var(--dur, 130s) linear infinite;
  will-change: transform;
}

.dd-mtrack.is-rev {
  animation-direction: reverse;
}

.dd-mtrack img {
  display: block;
  width: auto;
  height: 100%;
  margin-right: 8px;
  object-fit: cover;
}

@keyframes ddDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Plīvurs ir tumšāks nekā pārējām lapām, jo aiz tā kustas daudz gaišu
   attēlu un teksts citādi kļūst grūti lasāms. */
.dd-hero .mc-hero-veil {
  background:
    linear-gradient(96deg, rgba(14, 9, 32, 0.97) 0%, rgba(16, 10, 36, 0.9) 38%,
      rgba(18, 12, 40, 0.5) 70%, rgba(18, 12, 40, 0.28) 100%),
    linear-gradient(0deg, rgba(14, 9, 32, 0.8) 0%, transparent 46%);
}

/* Maza atsauce hero apakšā, ka fonā ir īsti kursa darbi. */
.dd-hero-note {
  position: absolute;
  right: 22px;
  bottom: 16px;
  z-index: 3;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 8, 28, 0.5);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ============================================================
   Darbu galerija
   ============================================================ */

.dd-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 168px;
  grid-auto-flow: dense;
  gap: 14px;
  margin-top: 34px;
}

.dd-work {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
}

.dd-work img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dd-work:hover img {
  transform: scale(1.06);
}

.dd-work figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 16px 13px;
  background: linear-gradient(0deg, rgba(12, 8, 28, 0.86) 0%, transparent 100%);
  color: rgba(255, 255, 255, 0.94);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dd-work:hover figcaption,
.dd-work:focus-within figcaption {
  opacity: 1;
  transform: none;
}

/* Flīžu izmēri: daži darbi ir vērti lielāku laukumu. */
.dd-work.is-wide {
  grid-column: span 2;
}

.dd-work.is-tall {
  grid-row: span 2;
}

.dd-work.is-big {
  grid-column: span 2;
  grid-row: span 2;
}

.dd-gallery[hidden] {
  display: none;
}

.dd-gallery + .dd-gallery {
  margin-top: 14px;
}

.dd-more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

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

/* ============================================================
   Ceļš cauri semestrim
   Produkta atbildīgā par iepriekšējo versiju teica, ka bloks ir
   pārpildīts ar tekstu un nav skaidrs, ko lasīt pirmo un kādā
   secībā. Tāpēc te ir tikai viena rinda ar četriem posmiem, un
   katrā posmā ir attēls, numurs, virsraksts un viena rindiņa.
   Prasmju sarakstu nedublējam: tas ir nākamajā tumšajā sekcijā.
   ============================================================ */

.dd-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.dd-leg {
  position: relative;
}

/* Bultiņa starp posmiem, lai secība ir redzama, nevis tikai nojaušama. */
.dd-leg:not(:last-child)::after {
  position: absolute;
  /* 76px = attēla centrs, kad attēls ir 16:10 un karte 282px plata. */
  top: 76px;
  right: -15px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(30, 20, 60, 0.16);
  color: var(--v2-lime-deep);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  content: "›";
}

/* Astoni posmi ir divas rindas pa cetriem, tapec pec katra ceturta bultina
   raditu uz rindas galu. Tapat pec pedeja. */
.dd-journey > .dd-leg:nth-child(4n)::after {
  display: none;
}

.dd-leg-shot {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 18px;
  background: var(--soft);
  box-shadow: 0 14px 34px rgba(30, 20, 60, 0.14);
}

.dd-leg-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dd-leg:hover .dd-leg-shot img {
  transform: scale(1.05);
}

.dd-leg-num {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--v2-lime-lite) 0%, var(--v2-lime-deep) 100%);
  box-shadow: 0 4px 14px rgba(20, 12, 45, 0.35);
  color: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.dd-leg-when {
  display: block;
  margin-top: 15px;
  color: var(--v2-lime-lite);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dd-leg h3 {
  margin: 5px 0 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.dd-leg p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Semestra rezultats: klientes teksts par to, ko jaunietis prot beigas.
   Sis ir parak svarigs, lai butu pelekā parindes piezime. */
.dd-result {
  width: min(880px, 100%);
  margin: 30px auto 0;
  padding: 22px 28px 24px;
  border: 1px solid rgba(var(--v2-lime-rgb), 0.3);
  border-radius: 20px;
  background: var(--v2-lime-soft);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
}

.dd-result b {
  color: var(--v2-lime-deep);
}

.dd-journey-note {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

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

@media (max-width: 1180px) {
  .dd-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 160px;
  }

  .dd-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
  }

  /* Divas kolonnas: bultiņa der tikai rindas iekšienē, tāpēc pēc katra otrā
     posma tā ir jāslēpj. */
  .dd-journey > .dd-leg:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 960px) {

}

@media (max-width: 720px) {
  .dd-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 118px;
    gap: 10px;
  }

  .dd-work figcaption {
    padding: 22px 12px 10px;
    font-size: 11px;
    opacity: 1;
    transform: none;
  }

  /* Telefonā posmi iet viens zem otra, bet ar mazu attēlu blakus tekstam.
     Ar pilna platuma attēliem šī sadaļa bija 1798px gara, ar šo 970px. */
  .dd-journey {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .dd-leg {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 2px 14px;
    align-items: start;
  }

  .dd-leg-shot {
    grid-row: 1 / -1;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(30, 20, 60, 0.13);
  }

  .dd-leg-num {
    bottom: 6px;
    left: 6px;
    width: 26px;
    height: 26px;
    font-size: 12.5px;
  }

  .dd-leg-when {
    margin-top: 1px;
  }

  .dd-leg h3 {
    font-size: 16px;
  }

  .dd-leg:not(:last-child)::after {
    display: none;
  }

  .dd-hero-note {
    right: 14px;
    bottom: 10px;
    padding: 6px 11px;
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dd-mtrack {
    animation: none;
  }

  .dd-work img,
  .dd-work figcaption,
  .dd-leg-shot img {
    transition: none;
  }

  .dd-leg:hover .dd-leg-shot img {
    transform: none;
  }

  .dd-work:hover img {
    transform: none;
  }
}