/* ── Clamped text, with a way to open it ─────────────────────────────────
 *
 * Pairs with static/js/clamp-expand.js. Put .clampable on anything whose
 * text can run long; the script adds a "…" underneath when it is really
 * overflowing and makes the text a toggle.
 *
 * Its own file rather than part of admin-dashboard.css so a page can use
 * it without inheriting that sheet's reset and chrome -- the calendar
 * needs the clamp and is not an admin dashboard document.
 *
 * Colours come from the host page's variables with plain fallbacks, so
 * this drops into a document that does not define them.
 */
/* .clampable is the system-wide clamp. Put it on any element whose text
   can run long; clamp-expand.js adds the "…" and makes it a toggle.
   --clamp-lines sets the height, defaulting to 3.

   max-height, NOT -webkit-line-clamp. line-clamp draws its own ellipsis
   at the cut, so with the button underneath there were two sets of dots
   on every clamped field. Clipping to a line-height multiple leaves the
   button as the only one. */
.clampable,
.role-name,
.role-desc{
  --clamp-lines:3;
  --clamp-lh:1.5;
  display:block;
  overflow:hidden;
  overflow-wrap:anywhere;
  line-height:var(--clamp-lh);
  max-height:calc(var(--clamp-lines) * var(--clamp-lh) * 1em);
  cursor:pointer;
}

/* The card wall RESERVES its lines rather than only capping them, so
   every card is the same height whatever its text -- a one-word series
   sits in the same box as a three-line one. Expanding a single card is
   then the only thing that changes a height, and the masonry columns
   reflow around that one card. */
.role-name{--clamp-lines:2;min-height:calc(2 * var(--clamp-lh) * 1em);}
.role-desc{--clamp-lines:3;min-height:calc(3 * var(--clamp-lh) * 1em);}

.clampable.is-expanded,
.role-name.is-expanded,
.role-desc.is-expanded{
  max-height:none;
  overflow:visible;
}

/* The single set of dots. */
.clamp-more{
  display:none;
  background:none;
  border:none;
  padding:2px 0 0;
  margin:0 0 6px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1;
  color:var(--text-3,#999);
  cursor:pointer;
}
.clamp-more.show{display:block;}
.clamp-more:hover{color:var(--text,#f5f5f7);}