/* ==========================================================================
   Collaboration  —  /page/collaboration/
   Loaded alongside two shared files: page-head.css for the photo banner and
   the heading with its rule, and tabs.css for the three pills, their mobile
   dropdown and the show/hide of the panels.

   This file is the logo grid inside a panel. Nothing else on the page needs
   styling — the banner, the heading and the pills all come from the two
   shared files.
   ========================================================================== */

.collab-section { background: var(--paper); }

/* The name of the open panel, sitting under the pills. Quieter than
   .page-heading, which is the heading of the whole page. */
.collab-pane__title {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}

/* ============================================================ GRID ======= */
/* No rules and no boxes — the marks sit on the page with space around them,
   and the even spacing is what holds the rows together instead of a border.
   The grid was ruled once; if it ever goes back, the rules have to be ONE per
   edge (container top+left, cell right+bottom) with gap:0, or neighbouring
   cells double up into a 2px line. */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A FIXED HEIGHT, not an aspect-ratio. aspect-ratio only sets a PREFERRED
   size: a grid item's automatic minimum still lets its content push past it,
   so a tall logo made its own cell taller and the ruling came out ragged —
   twenty different row heights across seventy-odd cells. A fixed height
   cannot be pushed, so every cell is identical and the rules stay straight.

   Change the number here and every cell on the page follows. The height is
   what decides how big a square emblem renders: it is capped by the shorter
   of the two, and these cells are wider than they are tall. */
.collab-cell {
  display: grid;
  place-items: center;
  height: 150px;
  text-align: center;
  /* The cell can no longer grow, so anything that would not fit is clipped
     rather than spilling into the row below. */
  overflow: hidden;
}

/* contain, not cover: a logo must never be cropped, and these arrive in every
   proportion from a square emblem to a long wordmark. Every one is scaled to
   fit the same box, so they all read at the same size.

   min-width/min-height:0 is what makes max-*:100% bite. Without them the
   image keeps a grid item's automatic minimum — its own intrinsic size — and
   ignores the cap entirely, which is what was happening here. */
.collab-cell img {
  min-width: 0;
  min-height: 0;
  /* Capped INSIDE the cell rather than filling it. At 100% a square seal grew
     to the full cell height while a wordmark stayed a couple of centimetres
     tall, so the rows read as wildly different sizes even though every box
     was identical. Holding both dimensions back to a common band closes most
     of that gap, and the leftover margin doubles as the breathing room the
     boxes used to give. */
  max-width: 84%;
  max-height: 74%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Shown in place of the mark while its file is not uploaded — see the note in
   the template. The partner is still named, so the grid is a complete and
   readable list from the day it goes up rather than a page of empty boxes. */
.collab-cell__name {
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  /* Long names are common here and a cell is narrow. Break inside a word
     rather than let one push the column wider than its track. */
  overflow-wrap: anywhere;
}

/* A whole panel with nothing in it yet. */
.collab-empty {
  margin: 0;
  padding: 30px 24px;
  background: var(--page-alt);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.7;
}

/* ==========================================================================
   Responsive
   Four steps down from six columns. A logo cell has a floor below which the
   mark is too small to recognise, so the count drops rather than the cells
   shrinking indefinitely.
   ========================================================================== */
@media (max-width: 1100px) {
  .collab-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .collab-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
  .collab-cell { height: 135px; }
}

@media (max-width: 767.98px) {
  .collab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
  /* Two across is the floor. At one across a cell would be the full width of
     the phone for a mark a couple of centimetres wide. */
  .collab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .collab-cell { height: 112px; }
  .collab-cell__name { font-size: .72rem; line-height: 1.3; }
}