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

/* (header photo + the dark gradient over it: .hero--photo in components.css - the same on every sub page) */

/* ---------- 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 cards side by side: the same parts at the same height ----------
   Feedback 28.10. ("all blocks are different size ... they should be symmetrical"): in every row of cards the
   headings, descriptions, info boxes and the links at the bottom line up, and all cards of the row are equally
   high. Each card spans five rows of the course grid and takes them over (subgrid): a row is as high as its highest
   part in that row of cards. Every part has its place (also when a card lacks it, e.g. no tags), and
   the space above a part is its margin instead of a gap - a part that no card of the row has takes no room at all.
   Browsers without subgrid (Safari before 16): equally high cards, links at the bottom (flex, margin-top: auto). */
.course-tiles { align-items: stretch; }
@supports (grid-template-rows: subgrid) {
  .course-tiles {
    row-gap: 0;
    margin-bottom: -1.25rem;            /* (the space below the last row of cards, see .course-tile) */
  }
  .course-tile {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: 1.25rem;             /* space between the rows of cards (the grid's row gap would come between
                                           the parts of a card as well) */
  }
  .course-tile > :not(.course-tile__head) { margin-top: 0.75rem; }
  .course-tile__head { grid-row: 1; }
  .course-tile__description { grid-row: 2; }
  .course-tile__tags { grid-row: 3; align-content: flex-start; }
  .course-tile__meta { grid-row: 4; align-content: start; }   /* (boxes keep their height when a neighbour has more) */
  .course-tile__foot { grid-row: 5; align-self: end; }      /* (links on the bottom line of the card) */
}

/* ---------- "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__item.is-closing .faq-accordion__icon { transform: none; }   /* (the <details> only closes when the movement ends) */
.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; }
}