/* Teacher (Docent) profile page — paired with docent.html + /app/features/docent/docent.js.
 * A gradient hero with avatar + stats, then premium grids of the teacher's
 * chapters. Reuses the shared course cards (/app/shared/course-card/course-card.css) and the
 * premium design tokens from /app/core/global.css. */

.docent-loading {
  color: var(--gray);
  text-align: center;
  padding: 4rem 1rem;
}

/* ---- Hero ---------------------------------------------------------------- */
.docent-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-hero);
  color: #fff;
  padding: 1.5rem 0 2.5rem;
}
.docent-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.docent-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.docent-hero__blob--1 {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -60px;
  background: radial-gradient(circle, rgba(252, 5, 204, 0.8), transparent 65%);
}
.docent-hero__blob--2 {
  width: 360px;
  height: 360px;
  bottom: -180px;
  left: -40px;
  background: radial-gradient(circle, rgba(123, 47, 247, 0.7), transparent 65%);
}
.docent-hero__inner {
  position: relative;
}
.docent-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  transition: color 0.2s ease;
}
.docent-hero__back:hover { color: #fff; }
.docent-hero__back i { font-size: 1.3rem; }

.docent-hero__top {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.docent-hero__avatar {
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55);
  border: 4px solid rgba(255, 255, 255, 0.18);
}
.docent-hero__id {
  min-width: 0;
  flex: 1 1 320px;
}
.docent-hero__name {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.docent-hero__handle {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.docent-hero__role {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}
.docent-hero__bio {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  max-width: 65ch;
}

.docent-hero__stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}
.docent-stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.docent-stat > i {
  font-size: 1.5rem;
  color: #fff;
  flex: 0 0 auto;
}
.docent-stat__box {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.docent-stat__value {
  font-size: 1.25rem;
  font-weight: 800;
}
.docent-stat__label {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Body / sections ----------------------------------------------------- */
.docent-body {
  padding: 3rem 24px 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.docent-section__head {
  margin-bottom: 1.4rem;
}
.docent-section__title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-color);
}
.docent-section__title i {
  color: var(--primary-color);
  font-size: 1.6rem;
}
/* Horizontal scroller (like the homepage rows) with arrow buttons. */
.docent-scroller { position: relative; }
.docent-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 4 - (3 * 1.5rem) / 4);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
}
.docent-track::-webkit-scrollbar { display: none; }
.docent-track > .card { scroll-snap-align: start; }
.docent-scroller__nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  z-index: 5;
  display: none;
}
.docent-scroller__nav i { font-size: 1.5rem; color: var(--secondary-color); }
.docent-scroller__nav:hover { border-color: var(--primary-color); }
.docent-scroller__nav:hover i { color: var(--primary-color); }
.docent-scroller__nav--left { left: -18px; }
.docent-scroller__nav--right { right: -18px; }
@media (max-width: 1100px) {
  .docent-track { grid-auto-columns: calc(100% / 3 - (2 * 1.5rem) / 3); }
}
@media (max-width: 760px) {
  .docent-track { grid-auto-columns: calc(100% / 2 - 1.5rem / 2); }
}
@media (max-width: 520px) {
  .docent-track { grid-auto-columns: 82%; }
}
/* ---- Cursussen van deze docent ------------------------------------------- */
.docent-courses {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.docent-course {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--white);
  text-decoration: none;
  transition: var(--transition);
}
.docent-course:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-hover);
}
.docent-course__thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--light-light-gray);
}
.docent-course__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.docent-course__title { color: var(--text-color); font-weight: 600; }
.docent-course__meta { color: var(--gray); font-size: 0.85rem; }
.docent-course > i { color: var(--gray); font-size: 1.3rem; }

.docent-empty {
  color: var(--gray);
  text-align: center;
  padding: 2rem 0;
}
.docent-error {
  text-align: center;
  padding: 5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.docent-error h1 { color: var(--secondary-color); }
.docent-error p { color: var(--dark_gray); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .docent-hero__stats { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}
@media (max-width: 560px) {
  .docent-hero__top { gap: 1.25rem; }
  .docent-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .docent-body { padding: 2rem 16px 4rem; gap: 2.25rem; }
}

/* =========================================================================
   Examenstreams van deze docent
   ========================================================================= */

.docent-streams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.docent-stream {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-lg, 14px);
  text-decoration: none;
  color: var(--text-color);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.docent-stream:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.docent-stream.is-live { border-color: color-mix(in srgb, #e5484d 45%, transparent); }
.docent-stream__tag {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
}
.docent-stream.is-live .docent-stream__tag {
  background: color-mix(in srgb, #e5484d 16%, transparent);
  color: #c92a2a;
}
.docent-stream__title { font-weight: 600; line-height: 1.3; }
.docent-stream__meta { font-size: 0.8rem; opacity: 0.65; }

/* Openbare mededelingen van de docent — zelfde stille lijst-opzet als de
   mededelingen op de cursuspagina: haarlijnen die inspringen tot onder de
   tekst, typografie doet het werk. */
.docent-announcements {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.docent-note {
  position: relative;
  padding: 1.4rem 1.6rem;
}
.docent-note + .docent-note::before {
  content: '';
  position: absolute;
  inset: 0 1.6rem auto;
  height: 1px;
  background: var(--border-color);
}
.docent-note__meta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.4rem;
}
.docent-note__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.docent-note__body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
  font-size: 0.94rem;
  color: var(--dark_gray);
}

@media (max-width: 720px) {
  .docent-note { padding: 1.2rem 1.15rem; }
  .docent-note + .docent-note::before { inset: 0 1.15rem auto; }
}