/* ================================
   DEPARTMENT PAGE
   Accent colour is set per-page via the --dept custom property
   (JS reads it from the department's --color-dept-* token).
================================ */

/* ---- HERO ---- */

.dept-hero { background-color: var(--color-blue); }

.dept-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-overlay);
}

.dept-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 60%; /* keep title + tagline within the dark left region */
  padding-inline: var(--space-lg);
}

.dept-hero__title {
  font-size: var(--text-display-md);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  /* department gradient as text fill */
  background: var(--dept-gradient, var(--dept, var(--color-white)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- FULL-SCREEN SECTION BASE ---- */

/* Light surfaces use brand blue; department accents remain decorative. */
.dept-section .label:not(.board-card__label) { color: var(--color-blue); }

/* ---- RESPONSIBILITIES ("What's Our Job") ---- */
.dept-resp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.dept-resp--text-only { grid-template-columns: 1fr; }

.dept-resp__text .label { margin-bottom: var(--space-sm); }
.dept-resp__text h2 { margin-bottom: var(--space-md); }
.dept-resp__text p { margin-bottom: var(--space-lg); max-width: 520px; }

.dept-resp__list { display: flex; flex-direction: column; }

.dept-resp__list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--dept, var(--border-dark));
  font-size: var(--text-base);
}

.dept-resp__list li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dept, var(--color-blue));
  flex-shrink: 0;
}

/* right-side image mosaic: 1 wide on top, 3 below */
.dept-resp__media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.dept-resp__media img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--color-grey);
  aspect-ratio: 3 / 4;
}

.dept-resp__media img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 8;
}

/* ---- SUBTEAMS ("What's Our Structure") ---- */
.dept-subteams__head { margin-bottom: var(--head-gap); }
.dept-subteams__head .label { margin-bottom: var(--space-sm); }
.dept-subteams__head h2 { font-weight: 600; }

.dept-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dept-card {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dept-card > .btn {
  align-self: flex-start;
  max-width: 100%;
  white-space: normal;
}

.dept-card__title {
  color: var(--color-blue);
  font-size: var(--text-xl);
  font-weight: 600;
}

.dept-card__desc {
  color: var(--color-blue);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Board member card → shared `.board-card` (components.css) */
.dept-contact__description {
  margin-top: var(--space-sm);
  max-width: var(--max-width-contact);
  color: var(--text-on-dark);
  font-size: var(--text-base);
  line-height: 1.7;
}

#department-game[hidden] { display: none; }

.board-card--row #board-photo {
  width: calc(var(--board-portrait-width) * 0.8);
}

/* The IT vacancy uses the portrait column as a terminal, with a coding task beside it. */
.board-card--it-game {
  scroll-margin-top: calc(var(--header-height) + var(--space-sm));
  grid-template-columns: calc(var(--board-portrait-width) + var(--space-md)) minmax(0, 1fr);
  height: calc(var(--board-portrait-width) * 1.5 + var(--space-md) * 2 + var(--text-2xl) * 1.2 + var(--space-xs));
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.board-card--it-game .board-card__person {
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.it-terminal {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 0;
  height: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  color: var(--color-white);
  text-align: left;
}

.it-terminal__bar { display: flex; align-items: center; gap: calc(var(--space-xs) / 2); }
.it-terminal__dot {
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--text-on-dark-muted);
  flex-shrink: 0;
}
.it-terminal__path { margin-left: var(--space-xs); font-size: var(--text-xs); color: var(--text-on-dark); }
.it-terminal__command { font-size: var(--text-xs); overflow-wrap: anywhere; color: var(--text-on-dark); }
.it-terminal .board-card__name { font-size: var(--text-2xl); font-weight: 600; font-style: italic; }
.it-terminal .board-card__label { font-size: var(--text-xs); }
.it-terminal .dept-contact__description { font-family: var(--font-sans); font-size: var(--text-sm); }
.it-terminal .btn { align-self: start; margin-top: auto; }
.it-terminal__cursor { margin-left: calc(var(--space-xs) / 2); animation: it-terminal-cursor var(--button-pulse-duration) steps(1, end) infinite; }
.board-card--it-game > [data-robot-game] { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
.board-card--it-game .robot-game .btn { margin-top: 0; }

@keyframes it-terminal-cursor { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .it-terminal__cursor { animation: none; } }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .board-card--row #board-photo {
    width: calc(var(--board-portrait-width-mobile) * 0.8);
  }

  .dept-hero__content {
    padding-inline: var(--space-md);
    max-width: none;
  }

  .dept-resp,
  .dept-cards {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .board-card--it-game {
    height: calc(var(--board-portrait-width-mobile) * 1.5 + var(--space-md) * 2 + var(--space-sm) * 2 + var(--label-size) * 1.5 + var(--text-lg) * 1.7 + var(--space-xs) / 2 + var(--text-sm) * 1.6 + var(--space-xs) * 2.5 + var(--text-xl) * 1.2 + var(--space-xs));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-sm);
    text-align: left;
  }
  .board-card--it-game .board-card__person,
  .board-card--it-game > [data-robot-game] { grid-column: 1; grid-row: auto; }
  .it-terminal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); padding: var(--space-xs); }
  .it-terminal__bar { grid-column: 1 / -1; }
  .it-terminal__command, .it-terminal .dept-contact__description { display: none; }
  .it-terminal .board-card__name { font-size: var(--text-lg); }
  .it-terminal .board-card__label { font-size: var(--text-xs); }
  .it-terminal .btn { grid-column: 2; grid-row: 2; max-width: calc(var(--space-lg) + var(--space-sm)); font-size: var(--text-xs); padding: var(--space-xs); align-self: center; margin-top: 0; }
}

#subteams-title {
  scroll-margin-top: calc(var(--space-lg) + var(--space-md));
}