/* ================================================================
   IT BOARD, INTERNAL VACANCIES: the Claude Design layout, ported
   ----------------------------------------------------------------
   Source: "IT Board.dc.html" in the design project, read 2026-07-28. The verbatim
   <style> block is kept at design-source/IT Board.style.css so this port can be
   compared against it both ways.

   WHAT THIS DESIGN PAGE ACTUALLY COVERS. Not the whole IT board. Its element ids
   are it-vac-overview, it-vac-list, it-vac-new, it-custody, it-vac-activity and
   three overlays, so it is the INTERNAL VACANCIES surface: the one section where
   IT publishes and closes posts on the internal board. Everything else on the
   portal's IT board, registrations, assets, tickets, incidents, rotas, is outside
   this design and is deliberately untouched.

   THE PORTAL'S SECTION IS #sec-internal-roles, and its ids do not match the
   design's: it-roles-stats, it-roles-list, it-roles-instruction. They are NOT
   renamed here. Renaming an id to match a design would break every reader of it
   in js/it-board.js for a change nobody can see. The design's LAYOUT is what
   ports; its id vocabulary is not the deliverable.

   Loads AFTER css/it-board.css so the design wins on what it defines.

   ── WHAT WAS ALREADY RIGHT ──────────────────────────────────────────
   The stats deck is already the design's four across at gap 12px. That was not
   changed, and a test now pins it so it cannot drift.

   ── WHAT THIS CHANGES ───────────────────────────────────────────────
   1. The vacancy list. The design lays vacancies out as CARDS, two across
      (.vcards). The portal had them as full width flex ROWS, one per line. A row
      list reads as a queue to work through; a card board reads as a set of posts
      that exist, which is what this surface is.
   2. The breakpoint ladder. The design collapses at 1000 / 820 / 640. The portal
      collapsed its deck at 900 and had nothing at 1000, so between 901 and 1000
      four tiles were squeezed where the design shows two.
   ================================================================ */

/* ── The vacancy board: two across, as the design has it ────────────── */
#it-roles-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
/* A grid item defaults to min-width:auto, so a long post title would inflate the
   track and push the board sideways. */
#it-roles-list > * { min-width:0; }

/* The row becomes a card. It keeps its class, because js/it-board.js emits it and
   renaming it there would be a change with no visible benefit. */
#it-roles-list .itr-row {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
  margin-bottom:0;
  padding:18px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 42%, rgba(255,255,255,.09));
  /* The design's one hover treatment, the same .lift every ported page uses. */
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1),
             box-shadow .25s cubic-bezier(.16,1,.3,1);
}
#it-roles-list .itr-row:hover {
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.3);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5), 0 0 30px -16px rgba(212,175,55,.3);
}
/* The title block takes the whole card width now that the card is a column, and
   a long post title wraps rather than widening the track. */
#it-roles-list .itr-row-main { flex:1 1 auto; width:100%; min-width:0; }
#it-roles-list .itr-row-t {
  font-family:'Cinzel', serif;
  font-size:19px; line-height:1.26; font-weight:600;
  overflow-wrap:anywhere;
}
#it-roles-list .itr-row-m { margin-top:6px; overflow-wrap:anywhere; }
/* The status badge and the application count sit together under the title
   rather than at the far right of a row that no longer exists. */
#it-roles-list .itr-apps { text-align:left; min-width:0; }
/* The action fills the foot of the card, which is where the design puts it. */
#it-roles-list .itr-row > .btn { width:100%; justify-content:center; margin-top:auto; }

/* ── The overlay card, at the design's own width ─────────────────────
   The design states .om-card at max-width:min(660px, calc(100vw - 24px)), which
   is the same shell css/dc-overlay.css already carries at its default 600px. This
   page's overlays are the wider variant, so the width is set here rather than
   changing the shared shell for every page that uses it. */
#sec-internal-roles .om-card,
.itr-modal .om-card { max-width:min(660px, calc(100vw - 24px)); }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE: the design's own three breakpoints, 1000 / 820 / 640
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1000px) {
  /* The deck halves here, not at 900. Between 901 and 1000 the portal was
     squeezing four tiles into the space the design gives two. */
  .itr-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* And the board goes to one card across at the same width. */
  #it-roles-list { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .hidesm { display:none !important; }
}
@media (max-width:640px) {
  .itr-stats { grid-template-columns:1fr; }
  .hidexs { display:none !important; }
}