/**
 * ub/employer-logos - "Where our graduates work".
 *
 * Logos: equal cells on a hairline grid, each logo held to one optical box
 * (a height cap for square marks, a width cap for long wordmarks) so no
 * employer reads louder than another. Names: the same grid as text tiles,
 * for pages that list employers rather than show their marks.
 */
.ub-employers { background: var(--white, #fff); }

.ub-employers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ub-employer { margin: 0; }

/* Logo wall. Cells in rows of --ub-emp-cols (the PHP picks the count so the last
   row is never one or two orphans: 7 = 4 + 3, 8 = 4 + 4) and a short last row is
   centred. Each cell draws its own hairline and overlaps its neighbour's by 1px,
   so a centred row keeps clean borders with no empty bordered cell. */
.ub-employers-grid--k3 { --ub-emp-cols: 3; }
.ub-employers-grid--k4 { --ub-emp-cols: 4; }
.ub-employers-grid--k5 { --ub-emp-cols: 5; }
.ub-employers-grid--k6 { --ub-emp-cols: 6; }
.ub-employers--logos .ub-employers-grid,
.ub-employers--names .ub-employers-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 1px 1px 0;
}
.ub-employers--logos .ub-employer,
.ub-employers--names .ub-employer {
  flex: 0 0 calc(100% / var(--ub-emp-cols, 4) + 1px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  margin: 0 -1px -1px 0;
  padding: 24px 22px;
  border: 1px solid #E1E7EA;
  background: var(--white, #fff);
}
/* One optical box: wide wordmarks are held by width, near-square and upright
   marks (a seal, a shield) by a taller height, so they carry the same weight
   (about equal area) instead of reading as a speck beside the wordmarks. */
.ub-employers--logos .ub-employer img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(160px, 100%);
  max-height: 64px;
  object-fit: contain;
}
.ub-employers--logos .ub-employer--mark img {
  max-width: min(96px, 100%);
  max-height: 92px;
}
.ub-employers--logos .ub-employer-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ub-purple, #592d82);
  text-align: center;
}

/* Names: the logo wall's cells and balancing, with the employer set in type.
   Same hairlines and rhythm, so a program page's list and a landing page's
   logos read as one component; a short blue rule marks each name,
   and the rules share one line across a row however the names wrap. */
.ub-employers--names .ub-employer {
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 30px 24px 28px;
  text-align: center;
}
.ub-employers--names .ub-employer::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--ub-blue, #00a7e0);
}
.ub-employers--names .ub-employer-name {
  max-width: 22ch;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ub-purple-dark, #3f1d61);
  text-wrap: balance;
}

.ub-employers-acts { margin-top: 34px; }

@media (max-width: 1100px) {
  .ub-employers-grid--t2 { --ub-emp-cols: 2; }
  .ub-employers-grid--t3 { --ub-emp-cols: 3; }
  .ub-employers-grid--t4 { --ub-emp-cols: 4; }
}
@media (max-width: 768px) {
  .ub-employers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ub-employers--logos .ub-employers-grid,
  .ub-employers--names .ub-employers-grid { --ub-emp-cols: 2; }
  /* An odd count ends on one cell: it takes the row instead of leaving an empty one. */
  .ub-employers--logos .ub-employer:last-child:nth-child(odd),
  .ub-employers--names .ub-employer:last-child:nth-child(odd) { flex-basis: calc(100% + 1px); }
  .ub-employers--logos .ub-employer { min-height: 108px; padding: 18px 14px; }
  .ub-employers--logos .ub-employer img { max-height: 48px; max-width: min(128px, 100%); }
  .ub-employers--logos .ub-employer--mark img { max-height: 68px; max-width: min(80px, 100%); }
  .ub-employers--names .ub-employer { min-height: 92px; gap: 10px; padding: 20px 14px 18px; }
  .ub-employers--names .ub-employer-name { font-size: 1.02rem; }
  .ub-employers-acts .btn { width: 100%; text-align: center; }
}