/* REUSABLE DEPARTMENT TEMPLATE: load after style.css and pages.css.
   Scoped classes protect the approved homepage and other inner pages. */
.department-hours {
  background: #edf6f5;
  border-bottom: 1px solid #d8e8e5;
  color: var(--navy);
}
.department-hours .container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 17px;
  font-size: 14px;
}
.department-hours svg {
  color: var(--teal);
  flex-shrink: 0;
}
.department-hours strong {
  font-weight: 500;
}
.hours-separator {
  padding-inline: 12px;
  color: #729994;
}
.department-content {
  padding-block: 65px 80px;
}
.department-introduction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 70px;
  align-items: start;
}
.department-overview h2 {
  font-size: 36px;
  margin-bottom: 24px;
}
.department-overview p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--muted);
  margin-bottom: 25px;
}
.department-overview .eyebrow {
  font-size: 12px;
  line-height: 1.6;
  color: var(--teal);
  margin-bottom: 15px;
}
.department-overview .department-lead {
  font-size: 19px;
  line-height: 1.85;
  color: var(--text);
}
.department-overview h3 {
  font-size: 21px;
  font-weight: 500;
  color: var(--navy);
  margin: 32px 0 15px;
}
.hod-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: white;
}
/* Portrait frame stays consistent across departments. Change position if needed. */
.hod-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 40%;
  background: #edf2f3;
}
.hod-photo.fit-entire-photo {
  object-fit: contain;
}
.hod-caption {
  padding: 23px;
}
.hod-caption .eyebrow {
  font-size: 10px;
  letter-spacing: 0.11em;
  margin-bottom: 12px;
}
.hod-caption h3 {
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.5;
  margin: 0 0 7px;
}
.hod-caption p:last-child {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}
.department-introduction.hod-only {
  grid-template-columns: minmax(0, 310px);
}
.department-offerings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 58px;
}
.offering-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 31px;
  background: #fff;
}
.offering-panel:only-child {
  grid-column: 1/-1;
}
.facilities-panel {
  background: #f1f7f6;
  border-color: #d9e9e6;
}
.offering-heading {
  display: flex;
  gap: 17px;
  align-items: center;
  border-bottom: 1px solid #dce8e7;
  padding-bottom: 21px;
  margin-bottom: 21px;
}
.offering-heading h2 {
  font-size: 26px;
  margin: 0;
}
.offering-number {
  font-size: 13px;
  color: var(--teal);
}
.department-list {
  margin: 0;
  padding-left: 20px;
}
.department-list li {
  font-size: 16px;
  line-height: 1.8;
  padding: 7px 0 7px 4px;
}
.department-list li::marker {
  color: var(--teal);
}
.department-faculty {
  margin-top: 68px;
}
.faculty-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 30px;
}
.faculty-heading h2 {
  font-size: 34px;
  margin: 0;
}
.faculty-heading .eyebrow {
  margin-bottom: 12px;
}
.faculty-heading > p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.faculty-gallery {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.faculty-slide {
  margin: 0;
}
.faculty-slide[hidden],
.faculty-controls[hidden] {
  display: none !important;
}
/* No cropping, stretching or fixed pixel heights: all group faces stay visible.
   Recommended 1500 x 1000. Other ratios are letterboxed in the same frame. */
.faculty-photo-frame {
  aspect-ratio: 3/2;
  background: #edf2f3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.faculty-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.faculty-slide figcaption {
  padding: 18px 24px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.faculty-controls {
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
}
.faculty-arrows {
  display: flex;
  gap: 8px;
}
.faculty-arrows button,
.faculty-play {
  border: 1px solid #cbdcde;
  background: #fff;
  color: var(--navy);
  border-radius: 4px;
  min-height: 42px;
  padding: 7px 14px;
}
.faculty-arrows button:hover,
.faculty-play:hover {
  background: #edf6f5;
}
.faculty-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex: 1;
}
.faculty-dots button {
  height: 36px;
  width: 28px;
  border: 0;
  background: transparent;
  position: relative;
}
.faculty-dots button:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #afc4c6;
  left: 10px;
  top: 14px;
}
.faculty-dots button[aria-pressed="true"]:after {
  background: var(--teal);
  width: 17px;
  border-radius: 4px;
  left: 5px;
}
.faculty-position,
.faculty-play {
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .department-introduction {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 35px;
  }
  .department-overview .department-lead {
    font-size: 17px;
  }
  .offering-panel {
    padding: 25px;
  }
}
@media (max-width: 760px) {
  .department-content {
    padding-block: 42px 55px;
  }
  .department-introduction {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .hod-card {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }
  .department-overview h2 {
    font-size: 30px;
  }
  .department-overview .department-lead {
    font-size: 17px;
  }
  .department-overview h3 {
    font-size: 20px;
  }
  .department-offerings {
    grid-template-columns: 1fr;
    margin-top: 40px;
    gap: 20px;
  }
  .offering-heading h2 {
    font-size: 25px;
  }
  .department-faculty {
    margin-top: 45px;
  }
  .faculty-heading {
    flex-direction: column;
    align-items: start;
    gap: 15px;
  }
  .faculty-heading h2 {
    font-size: 29px;
  }
  .faculty-slide figcaption {
    padding: 15px 18px;
  }
  .faculty-controls {
    padding: 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .faculty-dots {
    min-width: 55px;
  }
  .department-hours .container {
    font-size: 13px;
    gap: 9px;
  }
  .hours-separator {
    padding-inline: 5px;
  }
}

/* CONTENT-RICH DEPARTMENTS — independently editable sections and placeholders. */
.dept-section {
  margin-top: 56px;
}
.dept-section > h2 {
  font-size: 31px;
  margin-bottom: 24px;
}
.dept-section > .eyebrow {
  margin-bottom: 12px;
}
.dept-section p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--muted);
}
.dept-section > .department-list {
  columns: 2;
  column-gap: 48px;
}
.dept-section > .department-list li {
  break-inside: avoid;
}
.dept-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 22px;
}
.dept-content-panel {
  border: 1px solid var(--border);
  background: #f7f9fa;
  padding: 27px;
  border-radius: 6px;
}
.dept-content-panel h3 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 18px;
}
.dept-content-panel p:last-child {
  margin-bottom: 0;
}
.dept-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 24px 0;
}
.dept-facts > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: #eff6f5;
  padding: 24px;
}
.dept-facts strong {
  font-size: 29px;
  font-weight: 500;
  color: var(--teal);
  line-height: 1.3;
}
.dept-facts span {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.dept-hod-placeholder {
  aspect-ratio: 4/5;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #e7eef0;
  color: #617f89;
}
.dept-hod-placeholder span:first-child,
.dept-faculty-placeholder span:first-child {
  font-size: 11px;
  letter-spacing: 0.13em;
}
.dept-hod-placeholder strong {
  font-size: 31px;
  font-weight: 400;
}
.dept-hod-placeholder span:last-child {
  font-size: 13px;
}
.dept-faculty-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  color: #617f89;
  text-align: center;
}
.dept-faculty-placeholder strong {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
}
.dept-faculty-placeholder span:last-child {
  font-size: 13px;
}
.dept-section .accordion {
  margin-top: 18px;
}
.dept-section .accordion-body p + p {
  margin-top: 16px;
}
@media (max-width: 760px) {
  .dept-section {
    margin-top: 40px;
  }
  .dept-section > h2 {
    font-size: 27px;
  }
  .dept-panel-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dept-content-panel {
    padding: 23px;
  }
  .dept-section > .department-list {
    columns: 1;
  }
  .dept-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dept-facts strong {
    font-size: 24px;
  }
  .dept-facts > div {
    padding: 18px;
  }
  .dept-faculty-placeholder span:last-child {
    font-size: 11px;
  }
}
@media (max-width: 380px) {
  .dept-facts {
    grid-template-columns: 1fr;
  }
}

.faculty-portrait-frame {
  aspect-ratio: auto;
  height: 400px;
  padding: 24px;
}
.faculty-portrait-frame img {
  max-width: 280px;
  max-height: 352px;
  object-fit: contain;
}