/* ------------------------------------------------------------------
   A person on a page of their own.
   .people-popup is display:none by default, because on a listing page
   it is a lightbox target. On this template it is the page content,
   so the modifier turns it back on. Everything else inherits the
   existing panel styles, which is the point.
   ------------------------------------------------------------------ */
.people-popup.people-popup--page { display: block; }
.people-block--single { padding-top: 40px; }
.people-block--single .breadcrumb { margin-bottom: 28px; }
.people-popup--page .people__title { margin-top: 18px; }
.people-popup--page .people__back { margin-top: 28px; }
.people-popup--page .people__back a { font-weight: 600; color: #da291c; }
.people-popup--page .people__back a:hover { text-decoration: underline; }

/* The panel's grid carries negative row margins (-20px, widening to -68px on
   large screens) because inside the lightbox it sits in a padded container.
   On a page it sits inside .container, where those margins push the text past
   the right edge. Reset them and gutter the two columns instead. */
.people-popup--page .row { margin-left: 0; margin-right: 0; }
.people-popup--page .col { padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
  .people-popup--page .col { padding-right: 30px; }
  .people-popup--page .col--large { padding-left: 30px; padding-right: 0; }
}

/* The panel offsets its last box by up to 85px to sit flush with the lightbox
   edge. On a page that leaves a large hole above the back link. */
.people-popup--page .people__content { margin-bottom: 0; }
.people-popup--page .people__box:last-child { padding-bottom: 0; }

/* The breadcrumb is white, because it normally sits on the dark page banner.
   Here it is on the page background. */
.people-block--single .breadcrumb { color: #4a5464; padding-top: 0; }
.people-block--single .breadcrumb a { color: #4a5464; }
.people-block--single .breadcrumb a:hover { text-decoration: underline; }
.people-block--single .breadcrumb [aria-current] { color: #101828; font-weight: 600; }

/* The site has a fixed contact widget pinned to the right edge (.social-fixed,
   75px wide). Existing templates keep their text columns narrow enough to clear
   it; this panel, which was sized for a lightbox, runs underneath. Measured on
   the development site: three paragraphs sat behind it at 1440px. */
@media (min-width: 1200px) {
  .people-popup--page .col--large { padding-right: 110px; }
}