/*
  Department detail page — page-scoped styles.
  Bootstrap 5 utilities handle layout/spacing; these rules cover the few
  behaviours that have no utility equivalent.
*/

/* 1) Smooth anchor-jump scrolling (no Bootstrap utility for scroll-behavior). */
html {
  scroll-behavior: smooth;
}

/* 2) Sticky in-page section nav.
      Sits at 78px (just below the main header) at lg+. z-index kept below
      the header's 997 so desktop dropdown menus are never clipped behind it. */
.dept-subnav.sticky-lg-top {
  top: 78px;
  z-index: 900;
}

/* 2b) Sticky sidebar — clears both the header and the section nav. */
.dept-sidebar-sticky.sticky-lg-top {
  top: 134px;
  z-index: 900;
}

/* 3) Extra scroll-margin-top on lg+ so anchor jumps land below both
      the sticky header and the sticky section nav. */
@media (min-width: 992px) {
  .dept-anchor {
    scroll-margin-top: 132px;
  }
}

/* 4) Decorative oversized opening quotation mark for the motto block. */
.motto-quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent-color), transparent 65%);
}

/* 5) Full-perimeter accent-tinted border for all cards on this page.
      Using a direct border property placed after Bootstrap's external
      stylesheet wins the cascade and works on any element, not only
      Bootstrap .card elements. */
.dept-info-card,
.dept-info-panel,
.dept-stat-card {
  border: 1.5px solid color-mix(in srgb, var(--accent-color), transparent 68%) !important;
}

.dept-info-card {
  box-shadow: 0 2px 18px color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.dept-info-card:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 40%) !important;
  box-shadow: 0 16px 44px color-mix(in srgb, var(--accent-color), transparent 78%);
  transform: translateY(-5px);
}

.dept-info-card .icon-circle,
.dept-stat-card .icon-circle {
  transition: background-color 0.3s ease;
}

.dept-info-card .icon-circle i,
.dept-stat-card .icon-circle i {
  transition: color 0.3s ease;
}

.dept-info-card:hover .icon-circle,
.dept-stat-card:hover .icon-circle {
  background-color: var(--accent-color);
}

.dept-info-card:hover .icon-circle i,
.dept-stat-card:hover .icon-circle i {
  color: var(--contrast-color, #fff);
}

.dept-info-panel {
  box-shadow: 0 2px 14px color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.dept-info-panel:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 44%) !important;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 84%);
}

.dept-stat-card {
  background: color-mix(in srgb, var(--accent-color), transparent 96%) !important;
  box-shadow: 0 2px 16px color-mix(in srgb, var(--accent-color), transparent 92%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.dept-stat-card:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 40%) !important;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--accent-color), transparent 80%);
  transform: translateY(-4px);
}

/* 6) Gradient backdrop behind the position pill on lecturer card photos. */
.lec-pos-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.18) 60%,
    transparent 100%
  );
}

/* 7) Lecturer pagination — modern pill-button style.
      Mirrors the news-page pagination design but scoped to this page. */
.dept-pag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dept-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 2.4rem;
  min-width: 2.4rem;
  padding: 0 .75rem;
  border-radius: 30px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-color);
  background: var(--surface-color);
  border: 1.5px solid color-mix(in srgb, var(--accent-color), transparent 65%);
  cursor: pointer;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}

.dept-pag-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color), transparent 58%);
  transform: translateY(-2px);
}

.dept-pag-btn.is-active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color), transparent 55%);
  transform: translateY(-2px);
  cursor: default;
  pointer-events: none;
}

.dept-pag-btn.is-disabled {
  opacity: .38;
  pointer-events: none;
  cursor: default;
}

.dept-pag-prev,
.dept-pag-next { padding: 0 1.1rem; }

.dept-pag-prev i,
.dept-pag-next i { font-size: .78rem; }

.dept-pag-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  min-width: 1.6rem;
  font-size: .92rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  user-select: none;
}

.dept-pag-info {
  font-size: .75rem;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin: 0;
}

@media (max-width: 575.98px) {
  .dept-pag-prev .dept-pag-label,
  .dept-pag-next .dept-pag-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dept-pag-btn { transition: none; transform: none !important; }
}