/* ---------- Training / document library carousel ---------- */
.training{
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 24px 72px;
}

.training-carousel{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.training-carousel::-webkit-scrollbar{
  display: none;
}

.carousel-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.carousel-arrow:hover{
  border-color: var(--red);
  color: var(--red-glow);
}

.carousel-prev{ left: -8px; }
.carousel-next{ right: -8px; }

/* Single flat card: title anchored top-left, open button bottom-right */
.doc-card{
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(70vw, 300px);
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.doc-card:hover{
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: 0 12px 30px -14px rgba(226,52,44,0.45);
}

.doc-title{
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  margin: 0;
  font-family: "slight-chance", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.doc-open{
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: var(--bg);
  font-size: 0.95rem;
  transition: background .15s ease;
}

.doc-card:hover .doc-open{
  background: var(--red-glow);
}

@media (max-width: 480px){
  .carousel-arrow{
    display: none;
  }
}