/*--------------------------------------------------------------
# Department Structure
#
# One elevated panel per department (two per row at lg+, see .dept-panel),
# each grouping that department's leadership into Director(s) on the first
# row and Vice Director(s) on the row below -- one card shape for both
# roles, same size, differentiated only by badge icon/color (matching the
# Faculty Organogram's "hierarchy through color, never size" convention;
# see static/css/organogram.css, which this borrows its visual language
# from without sharing its connector-line machinery, since a set of
# department tiles like this one doesn't need a tree).
#
# Class map
#   .dept-legend            the "how to read this" key, plus department
#                            count, above the panel grid
#   .dept-panel              one department's elevated tile
#     .dept-group-header    icon + department name at the top of a panel
#     .dept-row-label       small pill ("Director" / "Vice Director")
#                            introducing each row within a panel
#       --director / --vice color pairing, matching .dept-card below
#     .dept-people-row      flex-wrap row of that role's card(s) --
#       .dept-people-row-item  sized to its own content, not stretched,
#                            so a lone card doesn't awkwardly fill the row
#   .dept-card               one member's card -- see "Cards" below
--------------------------------------------------------------*/
.dept-structure {
  --dept-accent: var(--accent-color, #0d6efd);
  --dept-accent-soft: color-mix(in srgb, var(--dept-accent), white 85%);
  --dept-heading: var(--heading-color, #1b1f27);
  --dept-text-muted: var(--default-color, #5a6472);
  --dept-surface: var(--surface-color, #ffffff);
}

/*--------------------------------------------------------------
# Legend -- explains the Director (accent) / Vice Director (gray) colors
# every .dept-card carries, same swatch pattern as the Faculty Organogram's
# legend (static/css/organogram.css) for a consistent "how to read this"
# convention across both pages. The department count sits in the same bar,
# pushed to the far end on wide screens (ms-lg-auto in the template).
--------------------------------------------------------------*/
.dept-legend {
  border: 1px solid color-mix(in srgb, var(--dept-accent), transparent 85%);
  background: var(--dept-accent-soft);
  border-radius: 0.75rem;
}

.dept-legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  color: #fff;
  background: var(--dept-accent);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.dept-legend-swatch.is-vice {
  background: #6c757d;
}

.dept-legend-count {
  color: var(--dept-text-muted);
  font-weight: 600;
}

/*--------------------------------------------------------------
# Department panel -- one elevated tile per department, two per row on
# large screens instead of a full-width block per department, so the page
# reads as a scannable set of tiles rather than a long single-column
# scroll once there's more than one or two departments.
--------------------------------------------------------------*/
.dept-panel {
  background: var(--dept-surface);
  border: 1px solid color-mix(in srgb, var(--dept-accent), transparent 88%);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--dept-heading), transparent 94%), 0 12px 28px color-mix(in srgb, var(--dept-heading), transparent 95%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dept-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--dept-accent), transparent 88%);
}

@media (prefers-reduced-motion: reduce) {
  .dept-panel {
    transition: none;
  }
  .dept-panel:hover {
    transform: none;
  }
}

.dept-group-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid color-mix(in srgb, var(--dept-accent), transparent 85%);
}

.dept-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: var(--dept-accent-soft);
  color: var(--dept-accent);
  font-size: 1.1rem;
}

.dept-group-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dept-heading);
  margin: 0;
}

/* Row label -- a small pill instead of plain uppercase text, matching the
   badge language the redesigned cards already use (see .dept-badge
   below). --director reuses the panel's accent; --vice reads distinctly
   muted, same pairing as .dept-card--vice. */
.dept-row-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.dept-row-label--director {
  color: var(--dept-accent);
  background: var(--dept-accent-soft);
}

.dept-row-label--vice {
  color: #495057;
  background: color-mix(in srgb, #6c757d, white 85%);
}

/* People row -- flex-wrap so a lone Director/Vice Director sits at its
   own natural width (not stretched to fill the panel or forced into an
   even column split), while two or more wrap and share the row cleanly. */
.dept-people-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.dept-people-row-item {
  flex: 1 1 14rem;
  max-width: 22rem;
}

/* Card -- one identical shape for Director and Vice Director. Only
   --dept-card-accent (top bar + avatar badge + role text) tells them
   apart, never the card's own dimensions. */
.dept-card {
  --dept-card-radius: 1.25rem;
  --dept-card-accent: var(--dept-accent);
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dept-card-accent), var(--dept-surface) 95%) 0%, var(--dept-surface) 7rem);
  border: 1px solid color-mix(in srgb, var(--dept-card-accent), transparent 90%);
  border-radius: var(--dept-card-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--dept-heading), transparent 93%), 0 10px 25px color-mix(in srgb, var(--dept-heading), transparent 95%);
}

.dept-card--vice {
  --dept-card-accent: #6c757d;
}

/* Accent bar as its own layer (not `border-top`) so it can be a gradient
   without fighting `border-radius` rendering. */
.dept-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dept-card-accent), color-mix(in srgb, var(--dept-card-accent), var(--dept-heading) 35%));
}

.dept-card:hover,
.dept-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--dept-card-accent), transparent 85%);
  border-color: color-mix(in srgb, var(--dept-card-accent), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .dept-card {
    transition: none;
  }
  .dept-card:hover,
  .dept-card:focus-within {
    transform: none;
  }
}

/* Photo + role/name, side by side. */
.dept-card-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.dept-card-info {
  min-width: 0; /* let a long name ellipsis-wrap instead of forcing the card wider */
}

.dept-avatar-wrap {
  position: relative;
}

.dept-avatar {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dept-card-accent), white 85%), 0 2px 6px color-mix(in srgb, var(--dept-heading), transparent 85%);
}

/* Small role-icon badge overlapping the avatar's corner -- the same slot
   on every card, so the icon (not the card's size) is what tells a
   Director's card apart from a Vice Director's at a glance. */
.dept-badge {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.7rem;
  color: #fff;
  background: var(--dept-card-accent);
  border: 2px solid var(--dept-surface);
}

.dept-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dept-card-accent);
}

.dept-name {
  font-size: 1.05rem;
  color: var(--dept-heading);
}

.dept-contact {
  font-size: 0.82rem;
  color: var(--dept-text-muted);
  border-top: 1px solid color-mix(in srgb, var(--dept-accent), transparent 88%);
}

.dept-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.dept-contact a:hover,
.dept-contact a:focus-visible {
  color: var(--dept-card-accent);
  text-decoration: underline;
}