/* ==========================================================================
   Department page  —  loaded only by templates/pages/department_detail.html

   Two blocks live here: the faculty carousel cards and the tab panel
   (Mission & Vision / Core Values / …).  The carousel mechanics — track,
   arrows, dots and the 1/2/3/4-across breakpoints — come from main.css;
   this file only styles what sits inside a slide.
   ========================================================================== */

/* ========================================================= FACULTY ======= */
.faculty-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.faculty-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

/* Photo, or the grey silhouette when there is no photo yet. */
.faculty-card__avatar {
  width: 138px;
  height: 138px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: #ececec;
  display: grid;
  place-items: center;
  flex: none;
}
.faculty-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.faculty-card__avatar svg { width: 58px; height: 58px; fill: #b9b9b9; }

.faculty-card__name {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
}
.faculty-card__role {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
}

.faculty-card__meta {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.faculty-card__meta li + li { margin-top: 12px; }
.faculty-card__meta dt,
.faculty-card__meta .k {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.faculty-card__meta dd,
.faculty-card__meta .v { margin: 0; font-size: .86rem; color: var(--ink-soft); }

.faculty-card__more {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .86rem;
  font-weight: 800;
  color: var(--red);
}
.faculty-card__more:hover { color: var(--ink); }
.faculty-card__more svg { width: 12px; height: 12px; fill: currentColor; }

/* ============================================================ TABS ======= */
/* The pills, the mobile dropdown and the show/hide of the panels are in
   tabs.css now — four pages carry a [data-tabs] block and only this one could
   reach them here. Link tabs.css alongside this file; what follows is only the
   shape of the copy INSIDE a department panel.
   ------------------------------------------------------------------------ */

.tab-pane__title {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 800;
  color: var(--ink);
}
.tab-pane__intro {
  margin: 0 0 22px;
  color: var(--ink-soft);
  text-align: justify;
}

/* One "Education: …" row — navy icon tile beside the text. */
.tab-points { list-style: none; margin: 0; padding: 0; }
.tab-points li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tab-points li + li { margin-top: 18px; }

.tab-points__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--blue);
}
.tab-points__icon svg { width: 20px; height: 20px; fill: #fff; }

.tab-points__text { margin: 0; color: var(--ink-soft); text-align: justify; }
.tab-points__text strong { color: var(--ink); font-weight: 800; }

/* Prose tab (Message Desk) ------------------------------------------------ */
.tab-pane__body p { color: var(--ink-soft); text-align: justify; }

/* "Name: ..." over the message, one line each. Stacked rather than a table:
   the two labels are different lengths and a narrow column would break the
   longer one over two lines. */
.tab-person { display: grid; gap: 2px; margin: 0 0 14px; }
.tab-person__row { color: var(--ink); font-weight: 600; }
.tab-person__row--sm { font-size: .92rem; }
.tab-person__label { color: var(--red); font-weight: 800; }

/* "Welcome to the Department of ..." between the name and the message. */
.tab-pane__subtitle {
  margin: 0 0 12px;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 800;
  color: var(--ink);
}

/* A phrase the message lifts out of its sentence with <strong>. */
.tab-pane__prose p strong { color: var(--blue); font-weight: 700; }

.tab-sign {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tab-sign__name { margin: 0; font-weight: 800; color: var(--ink); }
.tab-sign__role { margin: 0; font-size: .84rem; color: var(--muted); }

/* ======================================================= responsive ====== */
@media (max-width: 767.98px) {
  .tab-points li { gap: 12px; }
  .tab-points__icon { width: 36px; height: 36px; }
  .tab-points__icon svg { width: 17px; height: 17px; }
  .tab-pane__intro, .tab-points__text, .tab-pane__body p { text-align: left; }
}

@media (max-width: 575.98px) {
  .faculty-card { padding: 22px 18px 18px; }
  .faculty-card__avatar { width: 116px; height: 116px; }
}

/* ==========================================================================
   Department page — intro band and course cards
   Loaded only by pages/department_detail.html.
   ========================================================================== */

/* split_heading emits .h-dark / .h-accent, but '.page-heading span' colours
   every span in the heading red, which would swallow the dark half. Two
   classes outrank one class plus an element, so these win without !important. */
.page-heading .h-dark   { color: var(--ink); }
.page-heading .h-accent { color: var(--red); font-weight: inherit; }

/* ------------------------------------------------------------- intro ---- */
/* Vertical rhythm is .section's own padding — no override here, so these
   bands line up with every other section on the site. */
.dept-intro__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: center;
}

.dept-intro__media { margin: 0; }
.dept-intro__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.dept-intro__copy .page-heading { margin-top: 0; }

.dept-intro__text {
  margin: 18px 0 0;
  color: var(--ink-soft);
  line-height: 1.85;
  text-align: justify;
}

.dept-intro__school { margin: 14px 0 0; font-size: .86rem; color: var(--muted); }
.dept-intro__school a { color: var(--accent); font-weight: 600; }
.dept-intro__school a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- courses ---- */
/* The tint comes from .section--alt in the template, which is the site's
   existing band modifier — not a background declared again here. */
/* The courses are a carousel now, not a grid. One card on a phone, two from
   the tablet up, three on a wide screen — the controller measures the
   rendered cards to work out its step, so these widths are the only place the
   count is set.

   A department with one or two courses still uses the same markup: the track
   simply does not overflow, and the template withholds data-loop so nothing
   scrolls for the sake of it. */
.course-slider .carousel__item { flex: 0 0 100%; }
@media (min-width: 620px) {
  .course-slider .carousel__item { flex-basis: calc((100% - 18px) / 2); }
}
@media (min-width: 992px) {
  .course-slider .carousel__item { flex-basis: calc((100% - 36px) / 3); }
}

/* The card is the slide itself, so it should fill the height the tallest one
   in the row sets — otherwise a short description leaves a stubby card beside
   a tall one. That equalising is what the track's default align-items:stretch
   already does; an explicit height:100% here BROKE it, because a set height
   overrides stretch and the percentage resolves against a track whose own
   height is auto. Stated rather than left implicit, since it reads like a
   missing rule otherwise. */
.course-slider .carousel__item { align-self: stretch; }

.course-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.course-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.course-card__media {
  position: relative;
  display: block;
  background: var(--page);
}
.course-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* The programme badge — 'Diploma', 'B.Tech' — set in COURSES in data.py. */
.course-card__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 14px;
  background: var(--red);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--radius-sm);
}

.course-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.course-card__title { margin: 0; font-size: .98rem; line-height: 1.4; }
.course-card__title a { color: var(--ink); }
.course-card__title a:hover { color: var(--accent); }

.course-card__desc {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.7;
  text-align: justify;
}

/* Pushed to the foot so the link sits on the same line across a row of cards
   whose titles run to different depths. */
.course-card__more {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--red);
  font-size: .84rem;
  font-weight: 700;
}
.course-card__more:hover { color: var(--accent); }
.course-card__more svg { width: 12px; height: 12px; fill: currentColor; }

/* ------------------------------------------------- message desk split --- */
/* Only when the tab carries an 'image'; otherwise .tab-pane__body is
   untouched and the text keeps the full width. */
.tab-pane__body--split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 2.6vw, 38px);
  align-items: start;
}
.tab-pane__media { margin: 0; }
.tab-pane__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Upright rather than the landscape crop it used to have: the photograph
     is a person, and the message beside it runs long enough that a short
     frame left a gap under the picture. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tab-pane__prose > :first-child { margin-top: 0; }

@media (max-width: 991.98px) {
  .dept-intro__row { grid-template-columns: 1fr; }
  .tab-pane__body--split { grid-template-columns: 1fr; }
  /* Picture over the message on a narrow screen, the way it reads on a wide
     one - the head of department comes first and the message follows.

     No 'order' here: the figure is already ahead of the prose in the markup,
     so the single column takes them in that order on its own.

     Centred, because the cap is narrower than the single column it now sits
     in - left where it was, it hugged the left edge with up to 440px of dead
     space beside it on a tablet. */
  .tab-pane__media { max-width: 340px; margin-inline: auto; }
}

@media (max-width: 575.98px) {
  .dept-intro__text { text-align: left; }
  .course-card__desc { text-align: left; }
}