/* Match the site's other text links (e.g. the Players' Only Toll-Free Line
   button on the Contact page), which are text-style Breakdance buttons that
   render as <a> and so get an underline and pointer from the browser. This
   trigger is a <button> because it opens a dialog instead of navigating, so it
   needs both stated explicitly. Colour and metrics already match: both carry
   .button-atom--text, and neither node has any typography override. */
.phpa-staff-card [data-phpa-bio-trigger] {
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

body.phpa-staff-dialog-open {
  overflow: hidden;
}

.phpa-staff-dialog {
  box-sizing: border-box;
  width: calc(100% - 2rem);
  max-width: 720px;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: auto;
  border: 1px solid var(--bde-brand-primary-color, #c1b072);
  border-radius: 0;
  background: var(--bde-background-color, #fff);
  color: var(--bde-body-text-color, #231f20);
  font-family: var(--bde-body-font-family, "Roboto", sans-serif);
  animation: phpa-staff-dialog-in 180ms ease-out;
}

.phpa-staff-dialog::backdrop {
  background: rgb(35 31 32 / 75%);
  animation: phpa-staff-backdrop-in 180ms ease-out;
}

.phpa-staff-dialog__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bde-body-text-color, #231f20);
  font: 400 2rem/1 var(--bde-body-font-family, "Roboto", sans-serif);
  cursor: pointer;
}

.phpa-staff-dialog__close:hover,
.phpa-staff-dialog__close:focus-visible {
  color: var(--bde-brand-primary-color, #c1b072);
}

.phpa-staff-dialog__header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-right: 2.5rem;
}

.phpa-staff-dialog__identity {
  min-width: 0;
}

.phpa-staff-dialog__photo {
  display: block;
  flex: 0 0 auto;
  width: 140px;
  max-width: 40%;
  height: auto;
  object-fit: cover;
}

.phpa-staff-dialog__photo[hidden] {
  display: none;
}

.phpa-staff-dialog__name {
  margin: 0;
  color: var(--bde-body-text-color, #231f20);
  font-family: var(--bde-heading-font-family, "Bebas Neue", sans-serif);
  font-size: var(--bde-h3-font-size, 2.5rem);
  line-height: 1.1;
}

.phpa-staff-dialog__title {
  margin: 0.25rem 0 0;
  color: var(--bde-brand-primary-color, #c1b072);
  font-family: var(--bde-heading-font-family, "Bebas Neue", sans-serif);
  font-size: var(--bde-h5-font-size, 1.25rem);
}

.phpa-staff-dialog__bio {
  max-height: min(45dvh, 420px);
  overflow-y: auto;
  line-height: 1.6;
}

.phpa-staff-dialog__bio > :first-child {
  margin-top: 0;
}

.phpa-staff-dialog__bio > :last-child {
  margin-bottom: 0;
}

/* Contact-only dialog (no bio): the contact list sits straight under the header. */
.phpa-staff-dialog__bio[hidden] {
  display: none;
}

.phpa-staff-dialog__bio[hidden] + .phpa-staff-dialog__contacts {
  margin-top: 0;
}

.phpa-staff-dialog__contacts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bde-brand-primary-color, #c1b072);
}

.phpa-staff-dialog__contacts dt {
  color: var(--bde-headings-color, #231f20);
  font-family: var(--bde-heading-font-family, "Bebas Neue", sans-serif);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  line-height: 1;
}

.phpa-staff-dialog__contacts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Every link in the dialog - contact rows and anything inside the bio copy -
   matches the site's link treatment: gold, underlined, underline greying on
   hover. The dialog is printed in the footer, outside the .breakdance wrapper,
   so the site's own `.breakdance a` rules never reach it. */
.phpa-staff-dialog a {
  color: var(--bde-links-color, var(--bde-brand-primary-color, #c1b072));
  text-decoration: underline;
}

.phpa-staff-dialog a:hover,
.phpa-staff-dialog a:focus-visible {
  color: var(--bde-links-color-hover, var(--bde-brand-primary-color, #c1b072));
  text-decoration-color: var(--bde-palette-color-1-3ef134bd-8e13-402b-81fd-6ea2ea77750d, #7f7f7f);
}

@keyframes phpa-staff-dialog-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes phpa-staff-backdrop-in {
  from {
    background: rgb(35 31 32 / 0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phpa-staff-dialog,
  .phpa-staff-dialog::backdrop {
    animation: none;
  }
}

@media (max-width: 480px) {
  .phpa-staff-dialog__header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }

  .phpa-staff-dialog__photo {
    max-width: 60%;
  }

  .phpa-staff-dialog {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 2.75rem 1.25rem 1.5rem;
  }
}