/* ══════════════════════════════════════════════════════════════
   Dept Page — sub-header band + 25/75 contact/content layout
   Loaded via mvsd_core/global; styles only fire on dept pages.
   ══════════════════════════════════════════════════════════════ */

.dept-page {
  margin: 0;
}

/* ── Sub-header — light, article-style title block ─────────────
   Title sits on the page background like an article title. The
   colored band is now the dept-nav strip below, which acts as the
   structural separator between header and body. */
.dept-subheader {
  background: transparent;
  color: inherit;
  padding: 1.75rem 0 1rem;
  margin: 0;
  position: relative;
}

.dept-subheader__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
}

.dept-subheader__title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dept-subheader__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--color-primary);
}

.dept-subheader__name {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: var(--color-text, #1a1a1a);
  letter-spacing: var(--ls-tight);
}

/* ── Two-column dept layout (2026-05-25) ──────────────────────────
   Left column = department title (top) + contact sidebar.
   Right column = department menu (top) + body content.
   The whole left column is sticky so title + contacts ride together. */
.dept-col-left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 6.5rem;
  align-self: start;
}

/* Right column wrapper: holds the dept menu + the content. min-width:0
   lets wide content (tables, long URLs) shrink instead of overflowing.
   The nav lives here as a sibling of .dept-content — NOT a descendant —
   so its menu links don't inherit the body-link hover styling. */
.dept-col-right {
  min-width: 0;
}

.dept-title {
  font-size: clamp(1.45rem, 0.9rem + 1.3vw, 2.05rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  padding-bottom: 0.55rem;
  color: var(--color-text, #1a1a1a);
  letter-spacing: var(--ls-tight);
  border-bottom: 3px solid var(--color-accent);
}

@media (max-width: 800px) {
  .dept-col-left { position: static; }
}

/* Dept nav — colored bar caps the top of the right (content) column; the
   accent strip along the bottom edge reinforces the structural break. */
.dept-nav {
  background: var(--color-primary);
  margin: 0 0 2.5rem;
  padding: 0 var(--space-6, 1.5rem) 0.5rem;
  position: relative;
  z-index: 90;   /* contain inner z-indexes (More 105, gold strip 110) below the sticky header (100) */
}

/* The menu lives inside .dept-content, so its class-less links would inherit
   the shared body-text link hover — which shifts to primary green (the nav's
   own background), making them invisible. Re-point the link-color variables
   for this scope so the base rule resolves to the menu's intended white with
   no stray underline. Pure color override — same mechanism as the
   .site-footer scope in base.css. */
.dept-nav {
  --link-hover-color: #fff;
  --link-underline-color: transparent;
}

.dept-nav::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--color-accent);
  z-index: 110;
  pointer-events: none;   /* decorative strip must not steal hover from menu items /sub-flyouts */
}
.dept-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Toggle button — hidden by default (desktop), shown on mobile */
.dept-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.625rem;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--ls-snug);
  cursor: pointer;
  width: 100%;
  justify-content: space-between;
  transition: background 0.15s, border-color 0.15s;
}
.dept-nav__toggle:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.40);
}
.dept-nav__toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Chevron SVG — rotates when expanded */
.dept-nav__toggle-icon {
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}
.dept-nav__toggle[aria-expanded="true"] .dept-nav__toggle-icon {
  transform: rotate(180deg);
}

/* Top-level menu list only — nested inside .dept-nav__inner now */
.dept-nav__list > ul,
.dept-nav__inner > div > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.dept-nav li {
  margin: 0;
}

.dept-nav a {
  display: inline-block;
  padding: 0.85rem 0;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--ls-snug);
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.dept-nav a:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.5);
}

.dept-nav a.is-active,
.dept-nav .menu-item--active-trail > a {
  color: #fff;
  border-bottom-color: #fff;
}

/* Keep every top-level bar item the SAME height. Two sources of drift:
   (1) the shared class-less link animation (base.css `a:not([class])`) trims
       padding-bottom to 1px on NON-active links, but the active link carries
       `.is-active` so it escapes that selector and keeps the full 0.85rem —
       making the active item ~12px taller and, via the flex row, stretching the
       whole bar taller on a dept's own landing (active item visible) than on
       its sub-pages; (2) nolink parent `<span>` items keep 0.85rem both sides
       while plain `<a>` links get trimmed. Pin both paddings explicitly on the
       top-level items so links, spans, active and inactive all match. */
.dept-nav__list > ul > li > a,
.dept-nav__list > ul > li > span,
.dept-nav__inner > div > ul > li > a,
.dept-nav__inner > div > ul > li > span {
  padding-top: 0.85rem;
  padding-bottom: 1px;
}

/* ── Submenu dropdowns ── */
.dept-nav li {
  position: relative;
}

.dept-nav li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /* Above the gold bottom-accent strip (.dept-nav::after = 110) and the "More"
     trigger + its list (105 / 110) so an open submenu is never occluded by
     them. Still inside the .dept-nav z-index:90 stacking context, so it stays
     below the sticky site header (100) — no regression there. */
  z-index: 120;
  min-width: 220px;
  padding: 0.5rem 0;
  margin: 0;
  background: var(--color-primary-dark, #1a2744);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  flex-direction: column;
  list-style: none;
}

.dept-nav li:hover > ul,
.dept-nav li:focus-within > ul {
  display: flex;
}

.dept-nav li > ul > li {
  margin: 0;
}

.dept-nav li > ul a,
.dept-nav li > ul span {
  display: block;
  padding: 0.5rem 1rem;
  color: rgba(255,255,255,0.82);
  font-size: 0.85rem;
  font-weight: 500;
  border-bottom: none;
  white-space: nowrap;
  text-decoration: none;
}

.dept-nav li > ul a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-bottom: none;
}

/* Parent items with children — show indicator */
/* Non-link parent items (route:<nolink>) rendered as <span> */
.dept-nav__list > ul > li > span,
.dept-nav__inner > div > ul > li > span {
  display: inline-block;
  padding: 0.85rem 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--ls-snug);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.dept-nav__list > ul > li:hover > span,
.dept-nav__inner > div > ul > li:hover > span {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.5);
}
.dept-nav li:has(> ul) > a::after,
.dept-nav li:has(> ul) > span::after {
  content:  25BE;
  font-size: 0.7em;
  opacity: 0.6;
}

/* Mobile: collapse to vertical behind the toggle button */
@media (max-width: 800px) {
  .dept-nav {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .dept-nav__toggle { display: flex; }

  .dept-nav__list {
    display: none;
    margin-top: 0.5rem;
  }
  .dept-nav__toggle[aria-expanded="true"] + .dept-nav__list {
    display: block;
  }

  .dept-nav__list > ul,
  .dept-nav__inner > div > ul {
    flex-direction: column;
    gap: 0;
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
    padding: 0.25rem 0.25rem;
  }
  .dept-nav__list > ul > li,
  .dept-nav__inner > div > ul > li { width: 100%; }
  .dept-nav a {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
  }
  .dept-nav li:last-child a { border-bottom: none; }
  /* Mobile: submenus display inline instead of absolute dropdown */
  .dept-nav li > ul {
    position: static;
    display: none;
    box-shadow: none;
    border-radius: 0;
    padding-left: 1rem;
    min-width: auto;
    background: rgba(0,0,0,0.15);
  }
  .dept-nav li:hover > ul,
  .dept-nav li:focus-within > ul,
  .dept-nav li.is-open > ul {
    display: flex;
  }
  .dept-nav a:hover {
    background: rgba(255,255,255,0.08);
    border-bottom-color: rgba(255,255,255,0.08);
  }
  .dept-nav a.is-active,
  .dept-nav .menu-item--active-trail > a {
    background: rgba(255,255,255,0.12);
    border-bottom-color: rgba(255,255,255,0.08);
  }
}

/* ── Body band: 25/75 grid ───────────────────────────────────── */
.dept-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem) 4rem;
  display: grid;
  grid-template-columns: minmax(220px, 25%) 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 800px) {
  .dept-body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ── Sidebar wrapper (staff cards + contact info card) ───────── */
/* Sticky: the `top` offset is tuned to clear the primary nav + a
   comfortable breathing gap below it when the sidebar sticks. */
.dept-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (max-width: 800px) {
  .dept-sidebar { position: static; }
}

/* ── Staff cards (stacked) ───────────────────────────────────── */
.dept-staff {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.dept-staff__card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.875rem;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.dept-staff__card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}

.dept-staff__photo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: var(--color-bg-subtle, #f5f5f7);
}

.dept-staff__photo--placeholder {
  background-color: color-mix(in srgb, var(--color-primary) 14%, #fff);
  background-repeat: no-repeat;
  background-position: center 55%;
  background-size: 46px 46px;
  /* Classic head-and-shoulders silhouette (head circle + shoulders arc) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301491f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4' fill='%2301491f' fill-opacity='0.55' stroke='none'/%3E%3Cpath d='M4 21v-1a8 8 0 0 1 16 0v1' fill='%2301491f' fill-opacity='0.55' stroke='none'/%3E%3C/svg%3E");
}

/* Linked contact photo (image → staff profile) — sidebar/board/org cards.
   Block so it fills the photo cell; round so the hover ring + focus outline
   follow the circle. Pairs the name link (contact form) with a photo link
   (full profile). */
.dept-staff__photo-link,
.org-card__photo-link {
  display: block;
  line-height: 0;
  border-radius: 50%;
  transition: box-shadow 150ms ease;
}
.dept-staff__photo-link:hover .dept-staff__photo,
.dept-staff__photo-link:focus-visible .dept-staff__photo,
.org-card__photo-link:hover .org-card__photo,
.org-card__photo-link:focus-visible .org-card__photo {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.dept-staff__photo-link:focus-visible,
.org-card__photo-link:focus-visible {
  outline: 2px solid var(--color-focus-ring, #0b5cad);
  outline-offset: 3px;
}

.dept-staff__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.dept-staff__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--color-primary);
  line-height: 1.4;
}

.dept-staff__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  margin-top: 0.1rem;
}

.dept-staff__contact {
  font-size: 0.8rem;
  color: var(--color-text-muted, #5a5a5a);
  text-decoration: none;
  line-height: 1.4;
  word-break: break-word;
}

.dept-staff__contact[href]:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── Department info card (under staff list) ─────────────────── */
.dept-contact-info {
  background: var(--color-bg-subtle, #fafafb);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.25rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text);
}

.dept-contact-info__heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--color-primary);
  margin-bottom: 0.85rem;
}

.dept-contact-info__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.dept-contact-info__row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.625rem;
  align-items: start;
  margin: 0;
  padding: 0;
}

/* SVG icons via CSS — phone/email/hours/address */
.dept-contact-info__row::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.dept-contact-info__row--phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301491f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.dept-contact-info__row--email::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301491f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.dept-contact-info__row--hours::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301491f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
.dept-contact-info__row--address::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301491f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.dept-contact-info__row--fax::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301491f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}

.dept-contact-info__row dt {
  display: none; /* visually hidden — icon + value carry the meaning */
}

.dept-contact-info__row dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.45;
}

.dept-contact-info__row dd a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.dept-contact-info__row dd a:hover {
  color: var(--color-primary);
  border-bottom-style: solid;
}

.dept-contact-info__row dd .ext {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* ── Content column ──────────────────────────────────────────── */
.dept-content {
  min-width: 0;
}

/* Spacing between paragraph wrapper divs inside field_content */
.dept-content > * + * {
  margin-top: var(--space-10, 2.5rem);
}
.dept-content > div > div + div {
  margin-top: var(--space-10, 2.5rem);
}

.dept-content p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

.dept-content p:last-of-type {
  margin-bottom: 0;
}

/* ── Dept feed (article list at bottom of body) ──────────────── */
.dept-feed {
  margin-top: 3rem !important;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border, #e0e0e0);
}

.dept-feed__heading,
.dept-sections__heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 1.5rem;
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: 0.5rem;
}

/* Hide the page-title block above dept pages — dept-subheader is the title */
body.page-node-type-page:has(.dept-page) .page-title,
body.page-node-type-page:has(.dept-page) #block-mvsd-www-page-title,
body.page-node-type-page:has(.dept-page) [id^="block-"][id$="-page-title"] {
  display: none;
}


/* ══════════════════════════════════════════════════════════════
   Resource page sidebar — menus for parent/student/staff links
   Styled to loosely match mobile-nav / drawer typography.
   ══════════════════════════════════════════════════════════════ */

.resource-menu {
  margin-bottom: 1.5rem;
}

.resource-menu__heading {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.35rem;
}

.resource-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.resource-menu li {
  position: relative;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.resource-menu li:last-child {
  border-bottom: none;
}

/* Parent labels (department names rendered as <span>) */
.resource-menu > ul > li > span {
  display: block;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  padding-right: 2.5rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary);
  cursor: default;
}

/* Top-level links (items without children) */
.resource-menu > ul > li > a {
  display: block;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text, #333);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.resource-menu > ul > li > a:hover,
.resource-menu > ul > li > a:focus-visible {
  background: var(--color-primary-light, #e8f5ed);
  color: var(--color-primary);
}

/* Sub-menu links — indented, slightly smaller */
.resource-menu li li {
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.resource-menu li li:last-child {
  border-bottom: none;
}

.resource-menu li li a {
  display: block;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem) var(--space-2, 0.5rem) var(--space-6, 1.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text, #333);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}

.resource-menu li li a:hover,
.resource-menu li li a:focus-visible {
  background: var(--color-primary-light, #e8f5ed);
  border-left-color: var(--color-accent);
  color: var(--color-primary);
}

/* Row wrapper for parent label + toggle (JS-injected) */
.resource-item-row {
  display: flex;
  align-items: center;
}

.resource-item-row > span,
.resource-item-row > a {
  flex: 1;
  min-width: 0;
}

/* Sub-toggle button — inline next to label, not stretching full li */
.resource-sub-toggle {
  flex-shrink: 0;
  width: 2.75rem;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 1px solid var(--color-border, #e0e0e0);
  color: var(--color-text-muted, #666);
  cursor: pointer;
  font-size: 0.55rem;
  transition: color 120ms ease, background 120ms ease;
}

.resource-sub-toggle:hover {
  background: var(--color-primary-light, #e8f5ed);
  color: var(--color-primary);
}

.resource-sub-toggle[aria-expanded=false] span {
  display: inline-block;
  transform: rotate(-90deg);
  transition: transform 150ms ease;
}

.resource-sub-toggle[aria-expanded=true] span {
  display: inline-block;
  transition: transform 150ms ease;
}

/* Resource body spacing */
.resource-body {
  margin-bottom: 2rem;
}

.resource-featured {
  margin-bottom: 2rem;
}

/* ── Mobile: sidebar stacks above content as accordion ── */
@media (max-width: 768px) {
  .resource-page .dept-body {
    flex-direction: column;
  }

  .resource-sidebar {
    order: -1;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .resource-menu {
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: #fff;
  }

  /* Section heading — styled like mobile-nav header */
  .resource-menu__heading {
    margin: 0;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    padding-right: 2.5rem;
    background: var(--color-primary, #01491f);
    color: var(--color-on-primary, #fff);
    border-bottom: none;
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--ls-loose);
    position: relative;
  }

  .resource-menu__heading::after {
    content: 25BC;
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.55rem;
    color: var(--color-accent, #f5a623);
    transition: transform 150ms ease;
  }

  .resource-menu__heading[aria-expanded=true]::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .resource-menu ul {
    padding: 0;
    margin: 0;
  }

  /* Parent items (department group labels) */
  .resource-menu > ul > li {
    border-bottom: 1px solid var(--color-border, #e0e0e0);
  }
  .resource-menu > ul > li:last-child {
    border-bottom: none;
  }

  .resource-item-row {
    background: var(--color-bg-subtle, #f8f8f8);
  }

  .resource-item-row > span {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #01491f);
  }

  /* Sub-toggle chevron */
  .resource-sub-toggle {
    width: 2.75rem;
    border-left: 1px solid var(--color-border, #e0e0e0);
    color: var(--color-primary, #01491f);
  }

  /* Sub-links — proper link styling */
  .resource-menu li li {
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .resource-menu li li:last-child {
    border-bottom: none;
  }

  .resource-menu li li a {
    display: block;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem) var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary, #01491f);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
  }

  .resource-menu li li a:hover,
  .resource-menu li li a:focus-visible {
    background: var(--color-primary-light, #e8f5ed);
    border-left-color: var(--color-accent, #f5a623);
  }

  /* Top-level direct links (items without children) */
  .resource-menu > ul > li > a {
    display: block;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary, #01491f);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
  }

  .resource-menu > ul > li > a:hover,
  .resource-menu > ul > li > a:focus-visible {
    background: var(--color-primary-light, #e8f5ed);
    border-left-color: var(--color-accent, #f5a623);
  }
}

/* ──────────────────────────────────────────────────────────────────
   Department section cards
   Responsive card grid for department landing pages — links to
   the major sub-areas of the department. Used inside a raw_html
   paragraph on the dept landing's body content.
   ──────────────────────────────────────────────────────────────── */
.paragraph--type--dept-card-grid {
  margin: var(--space-5, 1.25rem) 0 var(--space-6, 1.5rem);
}

.dept-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4, 1rem);
}

.dept-section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8e5);
  border-left: 4px solid var(--color-accent, #f5a623);
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text, #1a2a20);
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.dept-section-card:hover,
.dept-section-card:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-left-color: var(--color-primary, #01491f);
  text-decoration: none;
}

/* Card title uses the canonical gradient-grow underline (matches
   .mvsd-link-anim and .news-card-title) — triggered when the parent
   card is hovered/focus-within, since the link is the whole card.
   `width: fit-content` keeps the underline contained to the text
   length even though flex blockifies the h3. */
.dept-section-card__title {
  width: fit-content;
  max-width: 100%;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-primary, #01491f);
  margin: 0;
  background-image: linear-gradient(var(--link-underline-color), var(--link-underline-color));
  background-size: 0 var(--link-underline-thickness);
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition:
    background-size var(--link-anim-duration) var(--link-anim-ease),
    color 200ms ease;
}

.dept-section-card:hover .dept-section-card__title,
.dept-section-card:focus-within .dept-section-card__title {
  background-size: 100% var(--link-underline-thickness);
}

@media (prefers-reduced-motion: reduce) {
  .dept-section-card__title { transition: none; }
}

.dept-section-card__desc {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #4a5b52);
  line-height: 1.45;
  margin: 0;
}

/* "Back to {department}" link rendered above the section-cards grid on

/* ──────────────────────────────────────────────────────────────────
   Org Chart Section paragraph
   Title + responsive grid of staff cards. Photo ~128px (≈2× the
   60px sidebar dept-staff photo). Grid auto-fits 1–4 columns based
   on viewport.
   ──────────────────────────────────────────────────────────────── */
.org-section {
  margin: var(--space-6, 1.5rem) 0;
  padding-top: var(--space-4, 1rem);
}

.org-section + .org-section {
  border-top: 1px solid var(--color-border, #e2e8e5);
}

.org-section__title {
  font-size: var(--font-size-xl, 1.375rem);
  font-weight: 700;
  color: var(--color-primary, #01491f);
  margin: 0 0 var(--space-3, 0.75rem);
  letter-spacing: var(--ls-snug);
}

.org-section__intro {
  font-size: var(--font-size-sm, 0.95rem);
  color: var(--color-text-muted, #4a5b52);
  margin: 0 0 var(--space-5, 1.25rem);
  line-height: 1.5;
}

/* Centered, balanced org-chart rows (feedback #29). Flex + justify-content:
   center keeps EVERY row centered — including a short last row — unlike a grid,
   whose last row would left-align. The per-count max-width caps below force the
   cards to wrap into even near-square rows (4 -> 2x2, 6 -> 3x2, 9 -> 3x3, etc.)
   instead of auto-fit's fill-then-orphan (which left a lone card on row 2). */
.org-section__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5, 1.25rem) var(--space-4, 1rem);
}
.org-section__grid > * {
  flex: 0 0 180px;
  max-width: 200px;
}
.org-section__grid:has(> :nth-child(4):last-child) { max-width: 400px; }   /* 2 x 2 */
.org-section__grid:has(> :nth-child(5):last-child),
.org-section__grid:has(> :nth-child(6):last-child),
.org-section__grid:has(> :nth-child(9):last-child) { max-width: 600px; }   /* 3-wide: 3+2, 3x2, 3x3 */
.org-section__grid:has(> :nth-child(7):last-child),
.org-section__grid:has(> :nth-child(8):last-child) { max-width: 800px; }   /* 4-wide: 4+3, 4x2 */
@media (max-width: 700px) {
  .org-section__grid,
  .org-section__grid:has(> :last-child) { max-width: 400px; }   /* phones: 2-wide max */
}

.org-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem) 0;
}

.org-card__photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-alt, #f1f4f2);
  border: 3px solid var(--color-surface, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.org-card__photo--placeholder {
  display: inline-block;
  background:
    linear-gradient(180deg, #d8e3dc 0%, #c2d3c8 100%);
  position: relative;
}
.org-card__photo--placeholder::after {
  content: "";
  position: absolute;
  inset: 18% 18% auto 18%;
  height: 38%;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  box-shadow: 0 60px 0 -10px rgba(255,255,255,0.55);
}

.org-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

/* Card name — base styling only. Hover/focus animation comes from
   the canonical .mvsd-link-anim class applied in the twig template,
   so the gradient-grow underline + color shift match the rest of the
   site without a bespoke rule here. `width: fit-content` keeps the
   underline contained to the text length inside the flex column. */
.org-card__name {
  width: fit-content;
  align-self: center;
  max-width: 100%;
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  color: var(--color-primary, #01491f);
  line-height: 1.3;
}

.org-card__title {
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-muted, #4a5b52);
  line-height: 1.35;
}

@media (max-width: 480px) {
  .org-card__photo { width: 104px; height: 104px; }
}


/* Responsibilities list inside an org card — small muted bullet list. */
.org-card__responsibilities {
  margin-top: var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text, #1a2a20);
  line-height: 1.4;
  text-align: left;
  width: 100%;
}

.org-card__responsibilities ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
}

.org-card__responsibilities li {
  margin: 0 0 2px;
}

.org-card__responsibilities p {
  margin: 0 0 0.4rem;
}

.org-card__responsibilities p:last-child {
  margin-bottom: 0;
}


/* ──────────────────────────────────────────────────────────────────
   Department Directory section
   Auto-curated grid of staff_contact directory_card view-mode
   renders, scoped to the page's dept term tree (built in
   _mvsd_core_build_dept_chrome). Default on every dept page.
   ──────────────────────────────────────────────────────────────── */
.dept-directory {
  margin: var(--space-7, 2rem) 0 var(--space-6, 1.5rem);
}

.dept-directory__heading {
  font-size: var(--font-size-xl, 1.375rem);
  font-weight: 700;
  color: var(--color-primary, #01491f);
  margin: 0 0 var(--space-4, 1rem);
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 2px solid var(--color-accent, #f5a623);
  letter-spacing: var(--ls-snug);
}

/* Single-column stacked list — each contact on its own row, matching
   the /staff page layout. Each entry is wrapped in
   `<div class="staff-directory__row views-row">` (template) so the
   markup mirrors the /staff render. */
.dept-directory__rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dept-directory .staff-directory__row {
  width: 100%;
}

/* Compact responsibilities list inside a staff-card. Sits under the
   title in the middle column — kept tight so cards stay list-like. */
.staff-card__responsibilities {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-text-muted, #5a5a5a);
  line-height: 1.35;
}

.staff-card__responsibilities ul {
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: disc;
}

.staff-card__responsibilities li {
  margin: 0;
}

.staff-card__responsibilities p {
  margin: 0 0 0.3rem;
}

.staff-card__responsibilities p:last-child {
  margin-bottom: 0;
}

/* ── Video article: responsive 16:9 YouTube embed at top of dept_article ── */
.article-video {
  margin: 0 0 var(--space-4, 1rem);
}

.article-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.article-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Video card: YouTube thumbnail w/ subtle play overlay ── */
.news-card-cover--video {
  position: relative;
}

.news-card-cover--video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-cover__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.5rem;
  border-radius: 50%;
  pointer-events: none;
  transition: background 200ms ease, transform 200ms ease;
}

.news-card--primary:hover .news-card-cover__play,
.news-card--primary:focus-within .news-card-cover__play {
  background: rgba(0, 0, 0, 0.85);
  transform: translate(-50%, -50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .news-card-cover__play {
    transition: none;
  }
}

/* ── Department Video Archive ── */
.dept-video-archive {
  margin-top: var(--space-8, 2rem);
}

.dept-video-archive__heading {
  font-size: var(--font-size-xl, 1.375rem);
  font-weight: 700;
  color: var(--color-primary, #01491f);
  margin: 0 0 var(--space-4, 1rem);
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 2px solid var(--color-accent, #f5a623);
  letter-spacing: var(--ls-snug);
}

.dept-video-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Cards rendered inside the archive use the existing news-card--primary
   markup; nothing more to do — they already pick up the YouTube thumbnail
   via the card template's video branch. */

/* ── Archive: "View all" affordance below preview grid ── */
.dept-video-archive__view-all {
  margin: 1.5rem 0 0;
  text-align: right;
}

.dept-archive__view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: var(--ls-snug);
  color: var(--color-primary, #01491f);
  text-decoration: none;
}

/* ── Mobile: dept menu to the top (stakeholder ask 2026-06-02) ─────────────────
   On mobile the dept page stacks; move the dept navigation menu up to the top
   (just under the dept name) ahead of the title + contact sidebar so visitors
   reach the section menu first. dept-nav lives inside .dept-content, so flex the
   .dept-body column and order the content column (which leads with the nav)
   before the left column (title + contacts). */
@media (max-width: 800px) {
  .dept-body {
    display: flex;
    flex-direction: column;
    /* Reset the base grid's align-items:start so the content column stretches to
       the viewport instead of sizing to its widest child (wide tables were
       forcing horizontal page overflow on phones). Audit 2026-07-10. */
    align-items: stretch;
  }
  .dept-content { order: 1; }
  .dept-col-left { order: 2; }
  /* Article-variant dept pages are a single content column (no contact sidebar);
     block layout lets it use the full width rather than the cramped flex size. */
  .dept-page--article .dept-body { display: block; }
}

/* ── Dept nav "priority+" overflow ───────────────────────────────
   js/dept-nav-priority.js measures the top-level bar on desktop and
   moves items that don't fit into the gold "More" dropdown (which
   echoes the masthead Quick Links panel: --color-accent, uppercase,
   pinned right). Without JS the bar just wraps (graceful fallback).
   Below 800px the accordion toggle owns the menu — More stays hidden. */

/* Once JS is in control, the bar is a single non-wrapping line. */
.dept-nav .dept-nav__list > ul.is-priority-ready {
  flex-wrap: nowrap;
  overflow: visible;
}
/* Keep natural widths during measurement (no flex shrink under nowrap). */
.dept-nav .dept-nav__list > ul.is-priority-ready > li {
  flex-shrink: 0;
}

/* ── Brand flourish + "More" trigger ────────────────────────────────
   A deeper-green slash + gold slash at the bar's right end, loosely echoing
   the masthead translate + Quick Links panels (same --ql-slope diagonal,
   green behind gold). ALWAYS present for visual consistency. The gold slash
   is also the overflow trigger: idle = a skinny gold sliver; when items
   overflow it widens to "More ▾", pushing the green slash leftward (the green
   rides on the gold's left edge). Sits ABOVE the bar's 4px gold ::after accent
   (bottom: 4px) so that gold underline stays continuous. Hidden on mobile —
   the accordion toggle owns the menu there. */
.dept-nav .dept-nav__more {
  --ds: var(--ql-slope, 2.5rem);   /* slash slope = masthead angle */
  position: absolute;
  top: 0;
  bottom: 0;            /* clear the gold ::after accent strip */
  right: 0;
  margin: 0;
  display: flex;
  align-items: stretch;   /* both slashes fill top-to-bottom */
  z-index: 105;
}
.dept-nav .dept-nav__more[hidden] { display: none; }

/* Focus ring on the (un-clipped) container — a ring on the clipped button
   itself would be sliced off by its clip-path. */
.dept-nav .dept-nav__more:focus-within {
  outline: 3px solid var(--color-on-accent);
  outline-offset: -3px;
}

/* Green slash — a deeper shade of the site primary so it reads against the
   green bar. Decorative only. */
.dept-nav .dept-nav__more-slash {
  flex-shrink: 0;
  width: calc(var(--ds) + 1.4rem); /* +0.5rem underlap kills the gold/green sub-pixel seam */
  /* The slash is a <span> + first child of the li, so the base "parent menu
     item" rule tries to give it padding + a 3px bottom border that flips to a
     translucent-white line on hover. It's decorative — strip both. */
  padding: 0;
  border-bottom: none;
  background: var(--color-brand, #008544);   /* per-site brand highlight */
  clip-path: polygon(var(--ds) 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Gold slash = the More trigger. Clip-path is on the button; the dropdown is a
   sibling, so it isn't clipped. Nests over the green by one slope so the gold
   diagonal reveals the green beneath (the masthead layering trick). */
.dept-nav .dept-nav__more-toggle {
  flex-shrink: 0;
  margin-left: calc(-1 * var(--ds) - 0.5rem); /* compensate the wider green underlap; gold stays put */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem 0 calc(var(--ds) + 0.4rem);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  clip-path: polygon(var(--ds) 0%, 100% 0%, 100% 100%, 0% 100%);
  /* Typography matched EXACTLY to the masthead Quick Links button. */
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--ls-snug, 0.02em);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  transition: background 0.15s;
}

/* Idle (no overflow): hide the label/caret → a skinny gold sliver, inert. */
.dept-nav .dept-nav__more-label,
.dept-nav .dept-nav__more-caret { display: none; }
.dept-nav .dept-nav__more:not(.has-overflow) .dept-nav__more-toggle { pointer-events: none; }
.dept-nav .dept-nav__more:not(.has-overflow) .dept-nav__more-list { display: none !important; }

/* Overflow active: reveal "More ▾", make it a real button. */
.dept-nav .dept-nav__more.has-overflow .dept-nav__more-toggle { cursor: pointer; }
.dept-nav .dept-nav__more.has-overflow .dept-nav__more-toggle:hover { background: var(--color-accent-dark); }
.dept-nav .dept-nav__more.has-overflow .dept-nav__more-label { display: inline; }
.dept-nav .dept-nav__more.has-overflow .dept-nav__more-caret { display: inline-block; }
.dept-nav .dept-nav__more-caret {
  font-size: 0.7em;
  transition: transform 0.2s ease;
}
.dept-nav .dept-nav__more.has-overflow:hover .dept-nav__more-caret,
.dept-nav .dept-nav__more.has-overflow.is-open .dept-nav__more-caret { transform: rotate(180deg); }

/* Active page lives in the overflow → underline the gold slash white. */
.dept-nav .dept-nav__more.is-active-trail.has-overflow .dept-nav__more-toggle {
  box-shadow: inset 0 -4px 0 0 #fff;
}

/* The More dropdown REUSES the standard dept submenu look. It already is a
   `.dept-nav li > ul`, so the theme's base submenu rules style the panel and
   its links — same background, radius, shadow, padding, link typography and
   hover as every other dept flyout. We override ONLY what must differ:
     1. Open it leftward. Base sets `left: 0` (which, paired with our `right`,
        wins and runs the panel off the right edge) — clear it and anchor right.
     2. Show an overflowed parent's children inline + lightly indented, instead
        of as a second side-flyout — still rendered as plain submenu links. */
.dept-nav .dept-nav__more-list {
  left: auto;
  right: 0;
  top: 100%;
  z-index: 110;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
}
/* Click-open parity with the base `:hover` / `:focus-within` open rules. */
.dept-nav .dept-nav__more.is-open > .dept-nav__more-list {
  display: flex;
}
/* No ▾ caret on parents inside the panel — their children are shown inline. */
.dept-nav .dept-nav__more-list li:has(> ul) > a::after,
.dept-nav .dept-nav__more-list li:has(> ul) > span::after { content: none; }
/* An overflowed parent's children: inline + indented, otherwise identical to
   the submenu links above them. */
.dept-nav .dept-nav__more-list ul {
  display: flex !important;
  position: static !important;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.dept-nav .dept-nav__more-list ul a { padding-left: 1.75rem; }

/* Mobile: the accordion toggle owns the menu — kill the overflow apparatus. */
@media (max-width: 800px) {
  .dept-nav .dept-nav__more { display: none !important; }
  .dept-nav .dept-nav__list > ul.is-priority-ready { flex-wrap: wrap; }
}

/* ──────────────────────────────────────────────────────────────────
   Student Tech Tools band (TLL-managed)
   App-launcher row of logo tiles at the top of the Student Resources
   page. Tiles come from the "Student Tech Tools" node; the page's
   domain picks Primary vs Secondary (district hub shows both, with
   the band sub-heading visible). Built to echo .dept-section-card.
   ──────────────────────────────────────────────────────────────── */
.student-tools {
  margin: 0 0 var(--space-6, 1.5rem);
  padding: var(--space-5, 1.25rem) var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  background: #e8f5ed;
  border: 1px solid var(--color-border, #e2e8e5);
  border-top: 4px solid var(--color-accent, #f5a623);
  border-radius: 8px;
}

.student-tools__title {
  margin: 0 0 var(--space-4, 1rem);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 700;
  letter-spacing: var(--ls-snug, normal);
  color: var(--color-primary, #01491f);
}

/* District hub only — labels each band when both are shown. */
.student-tools__band {
  margin: var(--space-5, 1.25rem) 0 var(--space-3, 0.75rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked, 0.04em);
  color: var(--color-text-muted, #4a5b52);
}
.student-tools__band:first-of-type { margin-top: 0; }

.student-tools__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3, 0.75rem);
}

.student-tools__item { margin: 0; }

.student-tools__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2, 0.5rem);
  height: 100%;
  padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8e5);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text, #1a2a20);
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.student-tools__tile:hover,
.student-tools__tile:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
  border-color: var(--color-primary, #01491f);
  text-decoration: none;
}

/* Fixed-height logo box so square + wide logos baseline-align uniformly. */
.student-tools__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.student-tools__logo {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.student-tools__name {
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary, #01491f);
}
.student-tools__ext {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-text-muted, #4a5b52);
}

.student-tools__desc {
  font-size: var(--font-size-xs, 0.8rem);
  line-height: 1.35;
  color: var(--color-text-muted, #4a5b52);
}

@media (prefers-reduced-motion: reduce) {
  .student-tools__tile { transition: none; }
  .student-tools__tile:hover,
  .student-tools__tile:focus-visible { transform: none; }
}

@media (max-width: 480px) {
  .student-tools__grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  }
  .student-tools__desc { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   dept_card photo cards + optional balanced rows  (feedback #26 content-type)
   ══════════════════════════════════════════════════════════════════════════
   Both are opt-in and additive: linked nav-card grids (the default) keep the
   auto-fit layout and text-only cards untouched. */

/* --- Balanced rows: even the cards across rows instead of auto-fit's
       fill-then-short-last-row. Column count keyed to the item count so N
       items split into near-equal rows (5 -> 3+2, 6 -> 3+3, 7 -> 4+3). --- */
.dept-sections--balanced { grid-template-columns: repeat(2, 1fr); }
.dept-sections--balanced[data-count="1"] { grid-template-columns: 1fr; max-width: 320px; }
.dept-sections--balanced[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.dept-sections--balanced[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.dept-sections--balanced[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.dept-sections--balanced[data-count="5"],
.dept-sections--balanced[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.dept-sections--balanced[data-count="7"],
.dept-sections--balanced[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .dept-sections--balanced { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
  .dept-sections--balanced { grid-template-columns: 1fr !important; }
}

/* --- Photo / person cards: a uniform square-cropped photo above the name.
       A plain (unlinked) card is centred and not interactive. --- */
.dept-section-card__photo {
  width: 100%;
  margin-bottom: var(--space-2, 0.5rem);
}
.dept-section-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
}
.dept-section-card--plain {
  cursor: default;
  text-align: center;
  align-items: center;
}
/* the title's gradient-grow underline is a link affordance — off for plain cards */
.dept-section-card--plain .dept-section-card__title {
  color: var(--color-text, #1a2a20);
  background-image: none;
  width: auto;
}
.dept-section-card--plain:hover,
.dept-section-card--plain:focus-visible {
  box-shadow: none;
  transform: none;
  border-left-color: var(--color-accent, #f5a623);
}