/* /support-teams/ - specialist teams and the people on them.
 *
 * The reference's own markup is still unavailable (the page postdates our
 * plugin snapshot, the live site is behind a bot check, the mirror is gone), so
 * this was measured against screenshots of it. What settled most of it was not
 * the screenshots: our plu.css is a copy of the reference stylesheet, and every
 * shared class involved - .plu-page-hero, .plu-section-title-row,
 * .plu-designed-content, .plu-red-rule, .plu-count-badge - is byte-identical
 * between the two. So where this page differed from the reference, it was this
 * page inventing its own container and decoration rather than using the ones
 * the reference's generic page already has.
 *
 * Hence what is NOT here: no max-width, padding, background, top edge or shadow
 * (.plu-section.plu-designed-content carries them), no red rule above the
 * eyebrow, and no count badge.
 *
 * This file loads after plu.css. Nothing here restates a colour that
 * .plu-banner-media sets, so turning a banner on cannot leave text unreadable.
 */

/* The page sits in the shared white card (.plu-section.plu-designed-content),
   which already carries the max-width, the padding, the yellow top edge and the
   shadow - so nothing here restates them. It was a bespoke full-bleed container
   before, which is why the column read as cream with no edge. */
/* The inset. `.plu-designed-content` pads 24px, which is right for the pages
   that share it; on the reference's Support Teams the content sits 80px in
   from the panel's edge on both sides - measured on the field's full-size
   screenshot, where the panel spans x=280..1640 at a 1920 viewport and both
   the eyebrow and the tally stop 80px short of it.

   Scoped to this page rather than changed on .plu-designed-content, because
   that class is shared and I have not seen the reference's stylesheet for
   this page - only the picture. Narrow widths keep the smaller inset: 80px
   of padding on a phone would leave the names in a gutter.

   Two classes, to match `.plu-page .plu-section { padding: 44px 24px }`
   in plu.css: a single-class rule loses to it whatever the file order,
   which is why the first attempt at this changed nothing. */
.plu-section.plu-support-teams { padding-left: 80px; padding-right: 80px; }

.plu-support-teams .plu-section-title-row { border-bottom: 1px solid var(--plu-line); padding-bottom: 22px; }

/* Plain, small and grey beside the heading, not the black-and-yellow count
   badge: the reference states the tally rather than stamping it. */
.plu-support-teams__tally { align-self: center; color: var(--plu-muted); font-size: 15px; font-weight: 400; white-space: nowrap; }

.plu-support-teams__layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; margin-top: 40px; }

/* -- the rail ------------------------------------------------------------ */
.plu-support-rail__rule { display: block; width: 100%; height: 4px; background: var(--plu-yellow); margin-bottom: 18px; }
.plu-support-rail .plu-eyebrow { margin: 0 0 18px; }

.plu-support-search label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.plu-support-search input { width: 100%; padding: 12px 14px; border: 1px solid var(--plu-line); background: #fff; font: inherit; font-size: 15px; }
.plu-support-search input:focus-visible { outline: 2px solid var(--plu-black); outline-offset: -2px; }

.plu-support-rail__teams { list-style: none; margin: 26px 0 0; padding: 0; }
.plu-support-rail__teams li { border-top: 1px solid var(--plu-line); }
.plu-support-rail__teams li:last-child { border-bottom: 1px solid var(--plu-line); }
.plu-support-rail__teams a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; color: inherit; text-decoration: none; font-weight: 700; }
.plu-support-rail__teams a:hover span, .plu-support-rail__teams a:focus-visible span { color: var(--plu-red); }
.plu-support-rail__teams b { color: var(--plu-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.plu-support-rail__empty { margin: 18px 0 0; color: var(--plu-muted); font-size: 15px; }

/* -- the teams ----------------------------------------------------------- */
.plu-support-team + .plu-support-team { margin-top: 52px; }
.plu-support-team__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--plu-black); padding-bottom: 12px; }
.plu-support-team__head h2 { margin: 0; font-size: 28px; line-height: 1.12; }
.plu-support-team__head b { color: var(--plu-muted); font-size: 15px; white-space: nowrap; }

.plu-support-team__members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.plu-support-team__members li { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--plu-line); }
.plu-support-team__members i { color: var(--plu-red); font-style: normal; font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; }
.plu-support-team__members strong { display: block; font-size: 18px; line-height: 1.3; }
.plu-support-team__members span { display: block; margin-top: 4px; color: var(--plu-muted); font-size: 15px; }

.plu-support-teams__none { margin: 0; color: var(--plu-muted); }

@media (max-width: 1080px) {
  .plu-section.plu-support-teams { padding-left: 44px; padding-right: 44px; }
  .plu-support-teams__layout { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 900px) {
  .plu-section.plu-support-teams { padding-left: 24px; padding-right: 24px; }
  .plu-support-teams__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .plu-support-team__members { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plu-support-team__head h2 { font-size: 24px; }
}