/*
 * Faculty commissions (faculty-commissions.php): the block «Комісії
 * факультетів» of the department block page (layout commissions) and the
 * commission's own page (page-faculty-commission.php), which share the
 * drawing of the people (parts/commission-people.php). page-department.css
 * comes first.
 */

/* ==========================================================================
   The block: faculties as a list of buttons with their arms; the chosen
   commission beside the list on a wide screen, under its button on a phone.
   Until the script marks the list ready every commission is shown in turn.
   ========================================================================== */

.nmk-hub {
  background-color: var(--color-bg-primary);
}

.nmk-hub__intro {
  max-width: 46rem;
  margin: -16px 0 28px;
  color: var(--color-text-secondary);
}

.nmk-hub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.nmk-hub__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 12px 16px 12px 12px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nmk-hub__tab:first-child {
  border-top: 1px solid var(--color-border);
}

/* The chosen faculty is marked with a stroke of the accent blue (no red on the НМВ page). */
.nmk-hub__tab::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--color-accent);
  transform: scaleY(0);
  transition: transform 0.25s ease;
}

.nmk-hub__tab:hover,
.nmk-hub__tab[aria-expanded="true"] {
  background: var(--color-bg-secondary);
}

.nmk-hub__tab[aria-expanded="true"] {
  color: var(--color-text-heading);
}

.nmk-hub__tab[aria-expanded="true"]::before {
  transform: scaleY(1);
}

.nmk-hub__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.nmk-hub__arms {
  flex: none;
  width: 40px;
  height: 40px;
}

.nmk-hub__arms img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nmk-hub__tab-name {
  flex: 1;
  min-width: 0;
}

.nmk-hub__tab-count {
  flex: none;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.nmk-hub__panel {
  min-width: 0;
  margin-bottom: 16px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-text-heading);
  background: var(--color-surface-card);
}

.nmk-hub__grid.is-ready .nmk-hub__panel:not([data-open]) {
  display: none;
}

/* Only a fade: a panel that slid in moved the page under the pointer. */
.nmk-hub__grid.is-ready .nmk-hub__panel[data-open] {
  animation: nmk-in 0.2s ease;
}

@keyframes nmk-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nmk-hub__grid.is-ready .nmk-hub__panel[data-open] {
    animation: none;
  }
}

/*
 * A wide screen: the list on the left, the chosen commission beside it,
 * filling the list's height. Its own extra height goes to an empty last row,
 * never into the faculties' rows, so the list keeps its size whichever is
 * chosen; and a commission is rarely taller than the list, so choosing one
 * does not move the page.
 */
@media (min-width: 901px) {
  /* The bar's link stops with the heading just under the bar, not the section's empty top. */
  .dept-page .nmk-hub[id] {
    scroll-margin-top: calc(var(--dept-header-h, 130px) + var(--dept-subnav-h, 46px) - clamp(40px, 5vw, 80px) + 16px);
  }

  .nmk-hub__grid.is-ready {
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    grid-template-rows: repeat(var(--nmk-rows, 12), auto) 1fr;
    column-gap: clamp(28px, 3vw, 48px);
  }

  .nmk-hub__grid.is-ready .nmk-hub__tab {
    grid-column: 1;
  }

  .nmk-hub__grid.is-ready .nmk-hub__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-bottom: 0;
  }
}

.nmk-hub .nmk-lead {
  grid-template-columns: 150px minmax(0, 1fr);
}

@media (min-width: 1200px) {
  .nmk-hub .nmk-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* On a phone the open commission hangs under its button, joined to it. */
@media (max-width: 900px) {
  .nmk-hub__grid.is-ready .nmk-hub__panel {
    margin: 0 0 12px;
    border-top-width: 1px;
  }
}

.nmk-hub__panel-head {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 20px;
}

.nmk-hub__panel-title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.25;
}

.nmk-hub__more {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  padding: 9px 16px;
  background: var(--color-blue-200);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nmk-hub__more:hover {
  background: var(--color-blue-100);
  color: var(--color-white);
}

.nmk-hub__more svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.nmk-hub__more:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   The people: the chair with a large portrait and the officers beside it,
   then the members and the students; everyone with a small photo.
   ========================================================================== */

.nmk-people a {
  color: inherit;
  text-decoration: none;
}

.nmk-people a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nmk-face {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: center 20%;
  background: var(--color-bg-secondary);
}

.nmk-lead {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.nmk-lead__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  background: var(--color-bg-secondary);
}

.nmk-role {
  display: block;
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nmk-lead__name {
  margin: 0;
  color: var(--color-text-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.nmk-lead__pos {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* The deputy and the secretary: their own row under the chair, side by side, a size up from the members. */
.nmk-officers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 28px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.nmk-officers .nmk-face {
  width: 64px;
  height: 64px;
}

.nmk-officers__row,
.nmk-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.nmk-officers__row::before,
.nmk-list__item::before {
  content: none;
}

.nmk-list__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nmk-pending {
  margin: 20px 0 0;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.nmk-sub {
  margin: 24px 0 6px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nmk-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nmk-list__item {
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}

.nmk-list__name {
  color: var(--color-text-primary);
  font-weight: 500;
  line-height: 1.3;
}

.nmk-list__pos {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

@media (max-width: 600px) {
  .nmk-lead {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
  }

  .nmk-lead__name {
    font-size: 1.125rem;
  }

  .nmk-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   The commission's own page: an ordinary page (the article layout of
   content-page.php), its text, then the people and the documents under
   headings of the text's size.
   ========================================================================== */

.nmk-page__section {
  margin-top: 40px;
}

.nmk-page__title {
  margin: 0 0 20px;
  color: var(--color-text-heading);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
}

.nmk-page .nmk-face {
  width: 56px;
  height: 56px;
}

.nmk-docs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nmk-docs li {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.nmk-docs li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.nmk-docs li::before {
  content: none;
}

.nmk-docs a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nmk-docs a:hover {
  color: var(--color-link-hover);
}

/* ==========================================================================
   The hero's arms on the НМВ page stand flat, sharp against the navy,
   without the soft shadow other units' emblems float on.
   ========================================================================== */

.dept-page:has(.nmk-hub) .dept-bento-logo-wrap img {
  filter: none;
}

/*
 * A phone: smaller faces and type, tighter rooms, and fewer lines — the open
 * commission is a light panel without a frame, the people without a rule
 * between each of them; only the faculties' list keeps its lines.
 */
@media (max-width: 600px) {
  .nmk-hub__intro {
    margin: -8px 0 18px;
    font-size: 0.9375rem;
  }

  .nmk-hub__tab {
    gap: 10px;
    padding: 9px 10px 9px 8px;
    font-size: 0.9375rem;
  }

  .nmk-hub__arms {
    width: 32px;
    height: 32px;
  }

  .nmk-hub__grid.is-ready .nmk-hub__panel {
    margin: 0;
    padding: 16px 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
  }

  .nmk-hub__panel-head {
    gap: 10px;
    margin-bottom: 16px;
  }

  .nmk-hub__panel-title {
    font-size: 1.0625rem;
  }

  .nmk-hub__more {
    padding: 8px 12px;
    font-size: 0.8125rem;
  }

  .nmk-hub .nmk-lead,
  .nmk-page .nmk-lead {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .nmk-lead__name {
    font-size: 1rem;
  }

  .nmk-lead__pos {
    margin-top: 4px;
    font-size: 0.8125rem;
  }

  .nmk-officers {
    gap: 10px;
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
  }

  .nmk-face,
  .nmk-officers .nmk-face,
  .nmk-page .nmk-face {
    width: 40px;
    height: 40px;
  }

  .nmk-sub {
    margin: 18px 0 4px;
    font-size: 0.75rem;
  }

  .nmk-list__item {
    padding: 6px 0;
    border-top: 0;
  }

  .nmk-list__name {
    font-size: 0.9375rem;
  }

  .nmk-list__pos {
    font-size: 0.75rem;
  }
}