/* ==========================================================================
   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(--accent-deep);
}

.faculty-card__meta {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
/* LABEL BESIDE THE VALUE, not above it. The label was display: block, so
   Qualification / Publications / Experience each took two lines and the four
   facts ran to eight. A grid rather than a flex row so every label starts at
   the same x down the card and the values line up with each other.

   The column is 108px because "Qualification" and "Research Area" are the
   longest of the four at .68rem with .06em of letter-spacing; narrower and
   they wrap, which is worse than the stacking this replaces. */
.faculty-card__meta li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0 12px;
  align-items: baseline;
}
.faculty-card__meta li + li { margin-top: 9px; }
.faculty-card__meta dt,
.faculty-card__meta .k {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  /* the label sits a touch high beside a larger value, so baseline alignment
     is nudged rather than the value being dragged down to meet it */
  line-height: 1.5;
}
.faculty-card__meta dd,
.faculty-card__meta .v {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ink-soft);

  /* CLAMPED, THEN AN ELLIPSIS - because one card was setting the height of
     eighty-two.

     The track is a flex row and every slide stretches to the tallest card in
     it, not the tallest on screen. One member of staff had a two-hundred
     character research area, which is ten lines in a column this narrow, so
     every card in the department was ten lines taller than it needed to be
     and the short ones - "MCA / 1 / 1 / AI-ML" - had a hand's width of
     nothing above Read More.

     Capping each value brings the tallest card down to the height of a full
     one rather than an exceptional one - nineteen lines of facts to eight,
     which is the difference between a hand's width of nothing above Read
     More and a margin. Little is lost: the clamp is visual only, so a screen
     reader still reads the whole value, and Read More goes to the profile
     where it is written out in full.

     The limits differ by row because the rows do. Three lines flat cut nine
     cards; two for a qualification and four for a research area cut the same
     nine and leave the ordinary long ones - four items of research, which is
     most of them - whole, for the same height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
/* NOT CLAMPED. A qualification is the thing an applicant reads the card for,
   and two lines cut thirty-two of them - "M.A. (English), M.A. (ELT),
   M.Phil...." with the doctorate in the ellipsis. It is held in check by
   is-wide below rather than by cutting it. */
.faculty-card__meta .is-qualification .v {
  -webkit-line-clamp: none;
  line-clamp: none;
  display: block;
}

/* A LONG VALUE GETS THE WHOLE CARD, label above rather than beside. The value
   column is about 120px next to a 108px label; the card is about 240px. So a
   list of degrees that runs to nine lines in the column runs to five across
   the card, and the extra line the label costs is paid back three times over.
   The template adds this past forty characters - shorter than that fits the
   column in two lines and is better off beside its label. */
.faculty-card__meta li.is-wide {
  display: block;
}
.faculty-card__meta li.is-wide .k {
  display: block;
  margin-bottom: 2px;
}
.faculty-card__meta .is-publications .v { -webkit-line-clamp: 1; line-clamp: 1; }
.faculty-card__meta .is-experience .v   { -webkit-line-clamp: 2; line-clamp: 2; }
.faculty-card__meta .is-research .v     { -webkit-line-clamp: 4; line-clamp: 4; }

/* On a narrow card there is not room for a 108px column beside a value, so
   it goes back to stacking rather than squeezing the value into 90px. */
@media (max-width: 400px) {
  .faculty-card__meta li { display: block; }
  /* The value has the full width of the card here, so the same number of
     lines holds far more of it - and one card is on screen at a time, so a
     tall one costs nothing. The caps only stop a runaway. */
  .faculty-card__meta .is-qualification .v { -webkit-line-clamp: 3; line-clamp: 3; }
  .faculty-card__meta .is-research .v      { -webkit-line-clamp: 5; line-clamp: 5; }
  /* display: block on the LABEL as well, not just the row. Both spans are
     inline by default, so a block row alone left them side by side on one
     ragged line - it was the label's own display: block that stacked them
     before this change. */
  .faculty-card__meta .k { display: block; margin-bottom: 2px; }
}

.faculty-card__more {
  /* Bottom of the card, so the link sits on one line across a row of four
     however many facts each card carries. What is above it is now a few
     lines' difference rather than ten - see the clamp on the values. */
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .86rem;
  font-weight: 800;
  color: var(--accent-deep);
}
.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; }

/* Committees (the Committee tab) ------------------------------------------
   A card each rather than the icon rows above: a committee is a name and two
   or three roles, and as a paragraph the roles ran together into prose that
   had to be read word by word to find who convenes what.

   auto-fit rather than a fixed three, so a department with two committees
   gets two wide cards instead of two narrow ones and a hole. */
.committee-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

.committee-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.committee-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .committee-card { transition: none; }
  .committee-card:hover { transform: none; }
}

.committee-card__name {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.committee-card__roles { margin: 0; }

/* Label above the names, not beside them: "Coordinator" and "Convenor" are
   long words, and a column wide enough for them leaves four names to wrap in
   what is left of a card this size. */
.committee-role + .committee-role { margin-top: 11px; }
.committee-role__k {
  margin: 0 0 2px;
  color: var(--accent-deep);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.committee-role__v {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.55;
}

/* 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(--accent-deep); 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(--accent-deep); 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(--accent-deep);
  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(--accent-deep);
  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; }
}