/* =========================================================
   How To (until 28.10. "Useful Info") / Knowledge Base  (loaded after the global CSS)
   ========================================================= */

/* ---------- Hero: photo background, text left ---------- */
.hero--knowledge {
  padding: clamp(3.5rem, 7vw, 6rem) 0 0;
  background-size: cover;
  background-position: center bottom;
}
/* header photo and the gradient over it: the same on all sub pages (.hero--photo in components.css) - here only
   the part of the photo that is shown */
.hero.hero--dark.hero--knowledge.hero--photo { background-position: center bottom; }
.hero--knowledge .hero__content {
  position: relative;
  z-index: 1;
  text-align: left;
}
.hero--knowledge .hero__title { margin: 0 0 1.5rem; }
.hero--knowledge .hero__subtitle { margin: 0; max-width: 27rem; }
/* room for the part of the video that lies on the hero (60% of a 16:9 box) + gap to the text */
.hero--knowledge .hero__video-space {
  margin-top: clamp(2.5rem, 6vw, 5.5rem);
  padding-bottom: 33.75%;
}
/* intro video switched off in the Panel: normal hero height */
.hero--knowledge.hero--knowledge-no-video { padding-bottom: clamp(4rem, 8vw, 7rem); }

/* ---------- Intro video ---------- */
.knowledge-video {
  display: flow-root;
  margin: 0;
  padding: 0 0 1rem;
  background: #f0f1f3;
  position: relative;
  z-index: 2;
}
.knowledge-video__wrap {
  max-width: none;
  margin: -33.75% 0 0;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #808080;
  box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.3);
}
.knowledge-video__wrap--placeholder { background: #808080; }
.knowledge-video__poster,
.lecture-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* play button (shared by intro video and lectures) */
.kb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 12%, 120px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s, transform 0.2s;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.kb-play svg { width: 100%; height: 100%; display: block; }
.kb-play--static { cursor: default; pointer-events: none; }
button.kb-play:hover,
button.kb-play:focus-visible { color: #fff; transform: translate(-50%, -50%) scale(1.08); }
button.kb-play:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 8px; }
/* the whole poster is clickable */
button.kb-play::after { content: ""; position: absolute; inset: -400%; }
[data-kb-video] { overflow: hidden; }

/* ---------- Video lightbox (useful-info.js) ---------- */
.kb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(2, 8, 30, 0.88);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.kb-lightbox.is-open { opacity: 1; }
.kb-lightbox[hidden] { display: none; }
.kb-lightbox__dialog {
  position: relative;
  width: min(100%, 1100px);
  max-height: 100%;
  transform: translateY(12px);
  transition: transform 0.3s ease;
}
.kb-lightbox.is-open .kb-lightbox__dialog { transform: none; }
.kb-lightbox__stage {
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 6rem);
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.kb-lightbox__stage iframe,
.kb-lightbox__stage video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.kb-lightbox__caption {
  margin: 0.9rem 0 0;
  text-align: center;
  color: #fff;
  font-size: var(--fs-small);
}
.kb-lightbox__caption:empty { display: none; }
.kb-lightbox__close {
  position: absolute;
  top: -2.6rem;
  right: -0.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.kb-lightbox__close svg { width: 100%; height: 100%; display: block; }
.kb-lightbox__close:hover { transform: scale(1.1); }
.kb-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* while the lightbox is open scrolling is blocked in JS (wheel/touch/keys); the scrollbar stays visible so the page does not jump sideways */
body.kb-lightbox-open { overscroll-behavior: none; }
@media (prefers-reduced-motion: reduce) {
  .kb-lightbox, .kb-lightbox__dialog { transition: none; }
}

/* ---------- 3D printable files ---------- */
.section--printables {
  background: #f0f1f3;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.section--printables .section__title,
.section--guides .section__title,
.section--knowledge-labs .section__title { color: #333; }
.section--printables .section__text,
.section--guides .section__text { color: #333; max-width: 26rem; margin-left: auto; margin-right: auto; }

.printables-grid {
  --kb-cols: 3;
  --kb-gap: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem var(--kb-gap);
  max-width: none;
  margin: 3rem auto 0;
}
.printables-grid > *,
.guides-grid > * {
  flex: 0 0 calc((100% - (var(--kb-cols) - 1) * var(--kb-gap)) / var(--kb-cols));
  min-width: 0;
}
.printable-card,
.printable-card:hover {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform: none;
}
.printable-card[hidden] { display: none; }
.printable-card__icon {
  width: 88px;
  height: 88px;
  margin: 0 0 1.75rem;
  color: #333;
}
.printable-card__icon img,
.printable-card__icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.printable-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: #333;
  margin: 0 0 0.6rem;
  max-width: 11em;
  text-wrap: balance;
}
.printable-card__title a { color: inherit; text-decoration: none; }
.printable-card__title a { transition: color 0.2s ease; }
.printable-card__title a:hover { color: #5912b5; text-decoration: none; }
.printable-card__type {
  font-size: var(--fs-small);
  color: #777;
  margin: 0 0 1.5rem;
}
.printable-card__btn,
.printable-card__btn.btn--primary {
  margin-top: auto;
  font-size: var(--fs-ui);
  font-weight: 500;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: #5912b5;
  border-color: #5912b5;
  color: #fff;
}
.printable-card__btn.btn--primary:hover { background: #4a0e99; border-color: #4a0e99; }

/* "View all" text links */
.section--printables .section__footer,
.section--guides .section__footer { margin-top: 3rem; text-align: center; display: block; }
.kb-more {
  color: #5912b5;
  gap: 0.35rem;
  font-size: var(--fs-ui);
  font-weight: 500;
  transition: color 0.2s ease;
}
.kb-more:hover { text-decoration: none; color: #722be2; }
.kb-more .icon { transition: transform 0.2s; }
.kb-more:hover .icon { transform: translateX(3px); }

/* ---------- Guides & tutorials ---------- */
.section--guides { padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); background: #fff; }
.guides-grid {
  --kb-cols: 3;
  --kb-gap: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kb-gap);
  max-width: none;
  margin: 3rem auto 0;
}
.guide-card,
.guide-card:hover {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #fff;
  border: 1px solid #722be2;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.guide-card[hidden] { display: none; }
.guide-card__thumb {
  aspect-ratio: 5 / 3;
  border-radius: 0;
  margin: 0;
  background: #999;
}
.guide-card__play {
  font-size: 0;
  line-height: 0;
  color: #fff;
  text-shadow: none;
}
.guide-card__play svg { width: 44px; height: 44px; display: block; }
.guide-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem 1.75rem;
}
.guide-card__title {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #213342;
  margin: 0 0 1.25rem;
  max-width: 12em;
  text-wrap: balance;
}
.guide-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: #5912b5;
}
.guide-card__link::after { content: ""; position: absolute; inset: 0; }
.guide-card__link .icon { transition: transform 0.2s; }
.guide-card:hover .guide-card__link { text-decoration: none; }
.guide-card:hover .guide-card__link .icon { transform: translateX(3px); }

/* ---------- Lectures band ---------- */
.section--knowledge-lectures { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem); }
.section--knowledge-lectures .section__text { color: #fff; max-width: 26rem; margin-left: auto; margin-right: auto; }

.lecture-embed {
  grid-template-columns: 62px minmax(0, 1fr) 62px;
  gap: clamp(1rem, 8vw, 7.5rem);
  max-width: none;
  margin: 2rem auto 0;
}
.lecture-embed--single { grid-template-columns: minmax(0, 1fr); max-width: 580px; }
.lecture-embed__player {
  aspect-ratio: 14 / 9;
  border-radius: 10px;
  border: 2px solid #fff;
  background: #16264a;
}
.lecture-embed__slide { position: relative; }
.lecture-embed__placeholder { background: #16264a; }
.lecture-embed__caption {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.85rem 1rem;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #5912b5;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}
.lecture-embed__caption[hidden] { display: none; }
/* keep the play button clear of the caption bar */
.lecture-embed__slide .kb-play { top: 42%; width: clamp(56px, 14%, 84px); }

.lecture-embed__arrow,
.lecture-embed__arrow:hover {
  width: 62px;
  height: 62px;
  border: 0;
  background: #fff;
  color: #5912b5;
  font-size: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background 0.2s;
}
.lecture-embed__arrow:hover { transform: scale(1.06); background: #f3ecff; }
.lecture-embed__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lecture-embed__arrow .icon { width: 28px; height: 28px; }
.lecture-embed__arrow--prev .icon { transform: rotate(180deg); }

.section--knowledge-lectures .section__footer { margin-top: clamp(2.5rem, 4vw, 3.75rem); display: block; text-align: center; }
.kb-btn-white,
.kb-btn-white:hover {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: #5912b5;
  border: 1px solid #5912b5;
  border-radius: 999px;
  padding: 0.6rem 1.4rem 0.6rem 1.7rem;
  font-size: var(--fs-ui);
  font-weight: 500;
  transition: background 0.2s ease;
}
.kb-btn-white:hover { background: #f3ecff; text-decoration: none; }
.kb-btn-white .icon { transition: transform 0.2s; }
.kb-btn-white:hover .icon { transform: translateX(3px); }

/* ---------- Labs ---------- */
.section--knowledge-labs { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }
.section--knowledge-labs .section__text { color: #213342; max-width: 26rem; margin-left: auto; margin-right: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .printables-grid { --kb-gap: 1.25rem; row-gap: 2.5rem; }
  .guides-grid { --kb-gap: 1rem; }
  .guide-card__body { padding: 1.5rem 1rem 1.25rem; }
  .lecture-embed { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 1rem; }
  .lecture-embed__arrow, .lecture-embed__arrow:hover { width: 48px; height: 48px; }
}
@media (max-width: 700px) {
  .printables-grid,
  .guides-grid { --kb-cols: 2; }
}
@media (max-width: 600px) {
  .hero--knowledge .hero__video-space { margin-top: 2rem; }
  .printables-grid,
  .guides-grid { --kb-cols: 1; max-width: 340px; }
  .printable-card__icon { width: 72px; height: 72px; margin-bottom: 1.25rem; }
  .lecture-embed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
  .lecture-embed__player { grid-column: 1 / -1; grid-row: 1; }
  .lecture-embed__arrow--prev { grid-row: 2; justify-self: end; }
  .lecture-embed__arrow--next { grid-row: 2; justify-self: start; }
  .lecture-embed--single { grid-template-columns: minmax(0, 1fr); }
  .lecture-embed__caption { padding: 0.6rem 0.75rem; }
}

.knowledge-video__wrap--loop { background: #000; }
.knowledge-video__loop { display: block; width: 100%; height: 100%; object-fit: cover; }