.lab-page .content-grid:has(> .terminal) {
  grid-template-columns: minmax(0, 1.58fr) minmax(360px, .92fr);
  gap: 24px;
}

.lab-page .preproduction-card,
.lab-page .content-grid > .terminal {
  min-height: 300px;
}

.lab-page .preproduction-card {
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 24px;
  padding: 30px 32px;
}

.lab-page .preproduction-copy h2 {
  margin-bottom: 18px;
}

.lab-page .preproduction-copy p {
  margin-block: 0 14px;
}

.lab-page .preproduction-copy p:last-child {
  margin-bottom: 0;
}

.lab-page .preproduction-art {
  width: 270px;
  min-height: 220px;
}

.lab-page .preproduction-art img {
  width: 258px;
  height: 218px;
}

.lab-page .terminal-top strong {
  margin-left: auto;
  color: rgba(189, 211, 226, .72);
  font-family: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .13em;
}

.lab-page .terminal pre {
  padding: 22px 24px 24px !important;
}

.lab-page .terminal code {
  font-size: 13.25px !important;
  line-height: 1.76 !important;
}

.lab-page .content-section.alt {
  padding-top: 62px;
  padding-bottom: 74px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .018), transparent 36%),
    linear-gradient(180deg, rgba(3, 16, 28, .96), rgba(2, 9, 20, .98));
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), .055);
}

.lab-page .content-section.alt > .shell > h2 {
  margin: 24px 0 0;
}

.lab-page .step-grid {
  gap: 18px;
  margin-top: 28px;
}

.lab-page .step-grid > .step-card {
  grid-template-columns: minmax(0, 1fr) 176px;
  min-height: 190px;
  column-gap: 20px;
  padding: 22px 24px !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), .025), transparent 42%),
    linear-gradient(180deg, rgba(4, 16, 28, .97), rgba(2, 10, 18, .98));
}

.lab-page .step-card-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.lab-page .step-card-heading .step-label {
  display: grid;
  place-items: center;
  width: 36px;
  height: 28px;
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 7px;
  background: rgba(var(--accent-rgb), .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.lab-page .step-card-heading h3 {
  margin: 0 !important;
  font-size: 21px;
}

.lab-page .step-grid > .step-card > p {
  margin-top: 16px !important;
}

.lab-page .step-card-art {
  width: 176px !important;
  height: 146px !important;
}

.lab-page .step-card-art img {
  width: 166px !important;
  height: 142px !important;
}

@media (max-width: 1180px) {
  .lab-page .content-grid:has(> .terminal) {
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .95fr);
  }

  .lab-page .preproduction-card {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .lab-page .preproduction-art {
    width: 220px;
  }

  .lab-page .preproduction-art img {
    width: 212px;
    height: 188px;
  }

  .lab-page .step-grid > .step-card {
    grid-template-columns: minmax(0, 1fr) 150px;
  }

  .lab-page .step-card-art {
    width: 150px !important;
  }

  .lab-page .step-card-art img {
    width: 144px !important;
    height: 132px !important;
  }
}

@media (max-width: 900px) {
  .lab-page .content-grid:has(> .terminal) {
    grid-template-columns: 1fr;
  }

  /* Kartica s predprodukcijskim opisom se na manjših zaslonih lahko prilagodi vsebini. */
  .lab-page .preproduction-card {
    min-height: 0;
  }

  /* LAB STATUS ima na telefonu stalno zunanjo višino.
     Vsebina se spreminja in po potrebi drsi znotraj terminala,
     zato ukaz cls ali daljši izpis ne spreminjata velikosti kartice. */
  .lab-page .content-grid > .terminal {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }

  /* Kot flex-element mora <pre> dovoliti krčenje znotraj fiksne višine terminala.
     Brez min-height: 0 lahko vsebina sama ponovno poveča zunanjo kartico. */
  .lab-page .content-grid > .terminal pre {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .lab-page .step-grid > .step-card {
    grid-template-columns: minmax(0, 1fr) 130px;
  }

  .lab-page .step-card-art {
    width: 130px !important;
    height: 126px !important;
  }

  .lab-page .step-card-art img {
    width: 124px !important;
    height: 120px !important;
  }
}

@media (max-width: 620px) {
  .lab-page .preproduction-card {
    grid-template-columns: 1fr;
    padding: 24px 22px;
  }

  .lab-page .preproduction-art {
    width: 100%;
  }

  .lab-page .step-grid {
    grid-template-columns: 1fr !important;
  }

  .lab-page .step-grid > .step-card {
    grid-template-columns: minmax(0, 1fr) 106px;
    min-height: 0;
    padding: 20px !important;
  }

  .lab-page .step-card-art {
    width: 106px !important;
    height: 104px !important;
  }

  .lab-page .step-card-art img {
    width: 102px !important;
    height: 100px !important;
  }
}


/* Lokalna izolacija prepreči, da bi način prelivanja vplival zunaj kartice. */
.lab-page .preproduction-card,
.lab-page .step-grid > .step-card {
  isolation: isolate;
}

/*
 * Rasterji vsebujejo zelo temen prosojen rob. Screen ga optično spoji z
 * ozadjem kartice, maska pa zadnjih nekaj odstotkov slike nežno zaključi.
 */
.lab-page .preproduction-art img,
.lab-page .step-card-art img {
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(
    ellipse 94% 91% at 50% 50%,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, .96) 72%,
    rgba(0, 0, 0, .62) 86%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 94% 91% at 50% 50%,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, .96) 72%,
    rgba(0, 0, 0, .62) 86%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Zunanji sijaj motivov lahko sega do naravnega roba brez dodatnega reza. */
.lab-page .preproduction-art,
.lab-page .step-card-art {
  box-sizing: border-box;
  overflow: visible !important;
}

/* Terminal uporablja isti zunanji okvir, polnilo in senco kot vsebinska kartica. */
.lab-page .terminal {
  border: 1px solid rgba(var(--accent-rgb), .42) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(
      180deg,
      rgba(4, 17, 30, .88),
      rgba(2, 10, 18, .92)
    ) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .018) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Naslovna letev ostane terminalsko prepoznavna, vendar brez drugega okvirja. */
.lab-page .terminal-top {
  min-height: 39px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .24) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb), .075),
      rgba(var(--accent-rgb), .018)
    );
}

.lab-page .terminal:hover {
  border-color: rgba(var(--accent-rgb), .48) !important;
  box-shadow:
    0 20px 58px rgba(0, 0, 0, .24),
    0 0 28px rgba(var(--accent-rgb), .075),
    inset 0 1px 0 rgba(var(--accent-rgb), .055) !important;
}


.lab-page .preproduction-art img,
.lab-page .step-card-art img {
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: contain;
  object-position: center;
  opacity: .98;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    saturate(.94)
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .13));
}

.lab-page .preproduction-art::before {
  inset: 16% 2% 12%;
  background: radial-gradient(
    ellipse,
    rgba(var(--accent-rgb), .045),
    transparent 70%
  );
}

.lab-page .preproduction-card:hover .preproduction-art img,
.lab-page .step-grid > .step-card:hover .step-card-art img {
  opacity: 1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    saturate(.98)
    brightness(1.025)
    drop-shadow(0 0 12px rgba(var(--accent-rgb), .17));
}

.lab-page .step-grid > .step-card::after {
  opacity: .62;
}

html[data-contrast="high"] .lab-page .preproduction-art img,
html[data-contrast="high"] .lab-page .step-card-art img {
  opacity: 1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    saturate(1.02)
    brightness(1.08)
    contrast(1.06)
    drop-shadow(0 0 12px rgba(var(--accent-rgb), .18));
}


.lab-page .terminal {
  border-color: rgba(var(--accent-rgb), .42) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .20),
    0 0 26px rgba(var(--accent-rgb), .045),
    inset 0 1px 0 rgba(var(--accent-rgb), .055) !important;
}

.lab-page .terminal-top {
  border-bottom-color: rgba(var(--accent-rgb), .24) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb), .075),
      rgba(var(--accent-rgb), .018)
    ) !important;
}

.lab-page .terminal-top strong {
  color: rgba(var(--accent-rgb), .72);
}

.lab-page .terminal-top span {
  border-color: rgba(var(--accent-rgb), .62);
  background: rgba(var(--accent-rgb), .12);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .16);
}

.lab-page .terminal-top span:first-child {
  background: rgba(var(--accent-rgb), .82);
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .52);
}

.lab-page .terminal:hover,
.lab-page .terminal:focus-within {
  border-color: rgba(var(--accent-rgb), .64) !important;
  box-shadow:
    0 20px 58px rgba(0, 0, 0, .24),
    0 0 30px rgba(var(--accent-rgb), .095),
    inset 0 1px 0 rgba(var(--accent-rgb), .075) !important;
}


.lab-page {
  --lab-card-border-width: 1px;
  --lab-card-border-color: rgba(var(--accent-rgb), .40);
  --lab-card-border-active: rgba(var(--accent-rgb), .62);
}

.lab-page .content-card,
.lab-page .terminal,
.lab-page .step-grid > .step-card {
  border: var(--lab-card-border-width) solid var(--lab-card-border-color) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .018) !important;
}

.lab-page .content-card:hover,
.lab-page .content-card:focus-within,
.lab-page .terminal:hover,
.lab-page .terminal:focus-within,
.lab-page .step-grid > .step-card:hover,
.lab-page .step-grid > .step-card:focus-within {
  border-color: var(--lab-card-border-active) !important;
  box-shadow:
    0 20px 58px rgba(0, 0, 0, .24),
    0 0 28px rgba(var(--accent-rgb), .075),
    inset 0 1px 0 rgba(255, 255, 255, .022) !important;
}

html[data-contrast="high"] .lab-page {
  --lab-card-border-color: rgba(var(--accent-rgb), .72);
  --lab-card-border-active: rgba(var(--accent-rgb), .94);
}

html[data-contrast="high"] .lab-page .content-card,
html[data-contrast="high"] .lab-page .terminal,
html[data-contrast="high"] .lab-page .step-grid > .step-card {
  border-width: 1px !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-contrast="high"] .lab-page .content-card:hover,
html[data-contrast="high"] .lab-page .content-card:focus-within,
html[data-contrast="high"] .lab-page .terminal:hover,
html[data-contrast="high"] .lab-page .terminal:focus-within,
html[data-contrast="high"] .lab-page .step-grid > .step-card:hover,
html[data-contrast="high"] .lab-page .step-grid > .step-card:focus-within {
  box-shadow:
    0 20px 58px rgba(0, 0, 0, .32),
    0 0 30px rgba(var(--accent-rgb), .16),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}