/**
 * Departments directory.
 *
 * A department row is not a `.card`: it is a wide, low row with the inbox chip
 * pushed to the end, and it is the only place in the kit that shape appears.
 * Everything around it (the band, the container, the section head, the closing
 * `.link-cta`, the `.placeholder-note`) is kit-owned and not repeated here.
 *
 * Every class is prefixed `departments__`, per AGENTS.md §2.
 */

.departments__row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding-block: var(--s-3);
  padding-inline: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-normal) var(--ease-out-soft);
}

.departments__row:hover {
  border-color: var(--blue-tint-20);
  box-shadow: var(--shadow-s);
}

.departments__row + .departments__row { margin-block-start: var(--s-2); }

/* Wraps the chip onto its own line before the description gets squeezed into a
   column too narrow to read. Sized in ch rather than px so it tracks the type. */
.departments__body {
  flex: 1;
  min-inline-size: min(100%, 30ch);
}

.departments__body h3 { font-size: var(--text-base); }

.departments__body p {
  margin-block-start: var(--s-1);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.departments__mail {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--cloud);
  border: 1px dashed var(--line);
  border-radius: var(--r-pill);
  padding-block: var(--s-1);
  padding-inline: var(--s-3);
  white-space: nowrap;
}

/* Only the linked form of the chip reacts to a pointer. A masked placeholder
   that lit up on hover would read as clickable when it is not. */
a.departments__mail {
  transition:
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

a.departments__mail:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.departments__intro { color: var(--ink-soft); }

/* `.section-head` is a stretch-aligned column, which would pull the inline-flex
   chip to the full width of the head. */
.departments__head .placeholder-note { align-self: flex-start; }

.departments__foot { margin-block-start: var(--s-4); }