/* =========================================
   Teaching overview - follows mockup 20251014-001 Teaching
   ========================================= */

/* ---------- shared (teaching / course / jobs): hero with photo + navy overlay ---------- */
.hero--photo {
  background-color: #0a1530;
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 16, 40, 0.86) 0%, rgba(14, 26, 62, 0.74) 45%, rgba(16, 28, 70, 0.8) 100%);
  pointer-events: none;
}
.hero--photo .hero__content { z-index: 2; }

/* ---------- shared: left aligned contact block (no box) ---------- */
.section--teaching-contact {
  padding: 3rem 0 3.25rem;
  border-top: 6px solid #eff0f2;
  background: #fff;
}
.teaching-contact {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  text-align: left;
}
.teaching-contact__title {
  margin: 0 0 0.35rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #0f172a;
}
.teaching-contact__text {
  margin: 0 0 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #213342;
}
.teaching-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem 1.5rem;
}
.btn.teaching-contact__btn {
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  gap: 0.6rem;
}
.teaching-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.teaching-contact__link .icon { transition: transform 0.2s ease; }
.teaching-contact__link:hover { text-decoration: none; color: var(--color-primary-hover); }
.teaching-contact__link:hover .icon { transform: translateY(-3px); }
.btn.teaching-contact__btn { font-size: var(--fs-ui); }


/* ---------- hero ---------- */
.hero--teaching .hero__subtitle { max-width: 40rem; }

/* ---------- section heads: left aligned, dark copy like the mockup ---------- */
.section--lectures .section__title,
.section--semester-guide .section__title,
.section--faq .section__title {
  text-align: left;
  color: #333;
  /* clearly below the hero title in the hierarchy */
  font-size: calc(var(--fs-h2) * 0.85);
  margin-bottom: 0.8rem;
}
.section--lectures .section__text,
.section--semester-guide .section__text {
  max-width: 46rem;
  margin: 0 0 2.25rem;
  text-align: left;
  color: #333;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.section--lectures { padding: 3.5rem 0 4rem; }
.section--practicals { padding-top: 0; }
.section--practicals .section__title:last-of-type:not(:has(+ .section__text)) { margin-bottom: 1.75rem; }
.course-tiles { margin-top: 0; }
.course-tile__syllabus-body strong { color: #213342; font-weight: 600; }

/* ---------- "When to take what": light grey band ---------- */
.section--semester-guide {
  background: #eff0f2;
  padding: 3.5rem 0;
}
.semester-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0;
}
.semester-guide__box,
.semester-guide__box--winter,
.semester-guide__box--summer {
  position: relative;
  background: #fff;
  border: 1px solid #c5cad1;
  border-radius: 10px;
  padding: 1.4rem 1.6rem 1.6rem;
}
.semester-guide__header {
  position: relative;
  margin: 0 0 1.25rem;
}
.semester-guide__title {
  margin: 0 0 0.3rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: #213342;
  padding-right: 3rem;
}
.semester-guide__period {
  display: block;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #999;
}
.semester-guide__focus::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 0.75rem;
  background: #999;
  vertical-align: -0.12em;
}
.semester-guide__icon {
  position: absolute;
  top: -0.15rem;
  right: -0.35rem;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.semester-guide__list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: #333;
}
.semester-guide__item {
  margin: 0 0 0.55rem;
  font-size: var(--fs-small);
}
.semester-guide__item:last-child { margin-bottom: 0; }
.semester-guide__item a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.semester-guide__item a:hover { color: var(--color-primary); text-decoration: none; }

/* ---------- FAQ: left aligned, violet gradient separators ---------- */
.section--faq { padding: 3.25rem 0 3.5rem; }
.section--faq .section__title { margin-bottom: 0.75rem; }
.faq-accordion {
  max-width: none;
  margin: 0;
}
.faq-accordion__item,
.faq-accordion__item:last-child {
  position: relative;
  border-bottom: 0;
}
.faq-accordion__item::after {
  content: "";
  display: block;
  height: 1px;
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0) 0%, rgba(139, 92, 246, 0.85) 40%, rgba(139, 92, 246, 0.85) 60%, rgba(139, 92, 246, 0) 100%),
    linear-gradient(90deg, rgba(223, 227, 234, 0) 0%, #dfe3ea 8%, #dfe3ea 92%, rgba(223, 227, 234, 0) 100%);
}
.faq-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  color: #333;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq-accordion__question::-webkit-details-marker { display: none; }
.faq-accordion__icon .icon { width: 16px; height: 16px; }
.faq-accordion__question:hover,
.faq-accordion__question:focus-visible { color: var(--color-primary); }
.faq-accordion__icon,
.faq-accordion__item[open] .faq-accordion__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #333;
  transform: none;
  transition: transform 0.25s ease;
}
.faq-accordion__item[open] .faq-accordion__icon { transform: rotate(180deg); }
.faq-accordion__answer {
  max-width: 46rem;
  padding: 0 0 0.9rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: #4b5563;
}
.faq-accordion__answer p { margin: 0 0 0.6rem; }
.faq-accordion__answer p:last-child { margin-bottom: 0; }
.faq-accordion__answer a { color: var(--color-primary); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .section--lectures { padding: 2.75rem 0 3rem; }
  .section--semester-guide,
  .section--faq { padding: 2.75rem 0; }
}
@media (max-width: 600px) {
  .semester-guide { grid-template-columns: 1fr; }
  .semester-guide__box,
  .semester-guide__box--winter,
  .semester-guide__box--summer { padding: 1.15rem 1.15rem 1.3rem; }
  .semester-guide__icon { right: -0.1rem; }
  .section--lectures .section__text,
  .section--semester-guide .section__text { margin-bottom: 1.75rem; }
  .faq-accordion__question { padding: 0.65rem 0; gap: 1rem; }
  .teaching-contact__actions { flex-direction: column; align-items: flex-start; }
}