/* TWE Digital Program — cast grid
   Typography is intentionally NOT set here — the widget inherits the host
   page's fonts (headings, paragraphs, italics). Only layout, spacing, and
   the photo treatment are styled. */

#twe-program-cast {
  --twp-muted: #4b4e52;
}

.twp-grid {
  display: grid;
  /* min 270px per card, and the 21% floor makes a 5th column impossible
     (5 × 21% > 100%) — so the grid tops out at 4 across */
  grid-template-columns: repeat(auto-fill, minmax(max(270px, 21%), 1fr));
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(48px, 6vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.twp-card { margin: 0; }

.twp-photo,
.twp-photo-fallback {
  width: clamp(160px, 48vw, 220px);
  height: clamp(160px, 48vw, 220px);
  border-radius: 50%;
  display: block;
  margin: 0 0 28px;
}

.twp-photo {
  object-fit: cover;
  object-position: center 20%;
}

.twp-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eceae6;
  color: var(--twp-muted);
  font-size: 48px;
}

/* Typography intentionally not set — inherits the host page's H2 styles.
   Only spacing is controlled so the card layout stays tight. */
.twp-name {
  margin: 0 0 6px;
}

/* Character: paragraph-size text, bold, title case */
.twp-character {
  font-weight: 700;
  text-transform: capitalize;
  margin: 0 0 18px;
}

/* Demoted secondary role (e.g. "u/s Sarah") — smaller, lighter, tracked caps */
.twp-subrole {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--twp-muted);
  margin: -14px 0 18px;
}

.twp-bio p { margin: 0 0 1em; }
.twp-bio p:last-child { margin-bottom: 0; }

/* The site's custom CSS repurposes `p em` as a Sydney font-switcher
   (theaterwestend-custom.css). Show titles in bios should be true italics
   of the paragraph font instead, so undo every part of that rule here.
   ID+class specificity beats the site's `p em` even with both !important. */
#twe-program-cast .twp-bio p em {
  font-family: inherit !important;
  font-size: inherit !important;
  word-spacing: normal !important;
  text-transform: none !important;
  font-style: italic !important;
}

/* word-break safety for long URLs/handles in bios */
.twp-bio { overflow-wrap: break-word; }

/* Instagram handle chips — light grey pills so they read as tappable */
#twe-program-cast .twp-ig {
  display: inline-block;
  background: #ececea;
  color: #26282a !important;
  border-radius: 999px;
  padding: 0 10px 1px;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.5;
}
#twe-program-cast .twp-ig:hover,
#twe-program-cast .twp-ig:focus-visible {
  background: #26282a;
  color: #fff !important;
}

.twp-status {
  font-style: italic;
  color: var(--twp-muted);
  text-align: center;
  padding: 48px 0;
}

.twp-spinner {
  width: 36px;
  height: 36px;
  margin: 48px auto;
  border: 3px solid #e3e1dd;
  border-top-color: #26282a;
  border-radius: 50%;
  animation: twp-spin 0.9s linear infinite;
}
@keyframes twp-spin { to { transform: rotate(360deg); } }

/* Mobile: single column, keep photos left-aligned with text for a clean reading flow */
@media (max-width: 640px) {
  .twp-grid { grid-template-columns: 1fr; row-gap: 56px; }
}