/* ── Block shell ─────────────────────────────────────────────────────────── */
.person-single {
  --person-single-img-max: 400px;
  --person-single-background: var(--wp--preset--color--accent-4);
  --person-single-text: var(--wp--preset--color--base);
  --person-single-accent: var(--wp--preset--color--accent-2);
  --person-single-accent-hover: var(--wp--preset--color--accent-3);
  --person-single-accent-text: var(--wp--preset--color--contrast);
  --person-single-outline: var(--wp--preset--color--base);
  --person-single-outline-hover-background: var(--wp--preset--color--base);
  --person-single-outline-hover-text: var(--wp--preset--color--contrast);
  background: var(--person-single-background);
  color: var(--person-single-text);
}

.person-single.color-scheme--primary {
  --person-single-background: var(--wp--preset--color--accent-1);
}

.person-single.color-scheme--surface {
  --person-single-background: var(--wp--preset--color--light-gray);
  --person-single-text: var(--wp--preset--color--contrast);
  --person-single-accent: var(--wp--preset--color--accent-1);
  --person-single-accent-hover: var(--wp--preset--color--dark-accent);
  --person-single-accent-text: var(--wp--preset--color--base);
  --person-single-outline: var(--wp--preset--color--contrast);
  --person-single-outline-hover-background: var(--wp--preset--color--contrast);
  --person-single-outline-hover-text: var(--wp--preset--color--base);
}

.person-single.color-scheme--transparent {
  --person-single-background: transparent;
  --person-single-text: var(--wp--preset--color--contrast);
  --person-single-accent: var(--wp--preset--color--accent-4);
  --person-single-accent-hover: var(--wp--preset--color--dark-accent);
  --person-single-accent-text: var(--wp--preset--color--base);
  --person-single-outline: var(--wp--preset--color--contrast);
  --person-single-outline-hover-background: var(--wp--preset--color--contrast);
  --person-single-outline-hover-text: var(--wp--preset--color--base);
}

/* ── Structural scaffold (flex row, centering) ───────────────────────────── */
/* Gap, padding, and alignment are set per variation below. */
.person-single__container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin-inline: auto;
}

/* Flex sizing and reset only; display, overflow, and spacing are per variation. */
.person-single__media {
  margin: 0;
  max-width: var(--person-single-img-max);
  max-height: var(--person-single-img-max);
}

.person-single__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-single__content {
  flex: 1 1 360px;
  color: var(--person-single-text);
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.person-single__header h1 {
  margin-block: 0;
  display: inline-block;
  margin-block-end: 0.5rem;
  border-bottom: 4px solid var(--person-single-accent);
}

.person-single__header h2 {
  margin-block-start: 0.25rem;
  margin-block-end: 0;
  font-size: var(--wp--preset--font-size--large);
  font-weight: lighter;
  font-style: italic;
}

.person-single__details {
  margin-block-start: 1.5rem;
}

.person-single__description {
  margin: 2rem 0;
  font-size: var(--wp--preset--font-size--medium);
}

.person-single__small-text {
  font-size: var(--wp--preset--font-size--small);
}

.person-single__small-text a:not(.person-single__office-hours-link) {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.person-single__small-text a:not(.person-single__office-hours-link):hover {
  text-decoration: underline;
}

.person-single__office-hours-link {
  color: inherit;
  text-decoration: underline;
}

.person-single__office-hours-link:hover {
  text-decoration: none;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.person-single__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.person-single__button {
  padding: 0.5rem 1rem;
  font-size: var(--wp--preset--font-size--medium);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.person-single__accent-button {
  background: var(--person-single-accent);
  color: var(--person-single-accent-text);
}

.person-single__accent-button:hover {
  background: var(--person-single-accent-hover);
}

.person-single__transparent-button {
  background: transparent;
  color: var(--person-single-text);
  border: 2px solid var(--person-single-outline);
}

.person-single__transparent-button:hover {
  background: var(--person-single-outline-hover-background);
  color: var(--person-single-outline-hover-text);
}

/* ---------------------------------------------------------------------------
   Variation: split - photo bleeds to the dark band edges, hard seam.
   --------------------------------------------------------------------------- */
.person-single--split .person-single__image {
  border: 0.5rem solid var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
   Variation: shadowed - sharp shadow behind the photo.
   --------------------------------------------------------------------------- */
.person-single--split .person-single__container,
.person-single--shadowed .person-single__container {
  padding: 2.5rem 0;
}

.person-single--shadowed .person-single__image {
  box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.75);
}

.person-single--split .person-single__content,
.person-single--shadowed .person-single__content {
  padding: 0 2.5rem;
}

/* ---------------------------------------------------------------------------
   Responsive: stack image above content on small screens.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .person-single--split .person-single__container,
  .person-single--shadowed .person-single__container {
    flex-direction: column;
    padding-block: 1.5rem;
    padding-inline: 0;
  }

  .person-single--split .person-single__media,
  .person-single--shadowed .person-single__media {
    max-width: 240px;
    width: 100%;
    margin-inline: 0;
    margin-inline-start: var(--wp--preset--spacing--50);
    margin-block-end: 1.5rem;
  }

  .person-single--split .person-single__image {
    border-width: 0.25rem;
  }

  .person-single--shadowed .person-single__image {
    box-shadow: 0.25rem 0.25rem 0 0 rgba(0, 0, 0, 0.75);
  }

  .person-single--split .person-single__content,
  .person-single--shadowed .person-single__content {
    padding: 0 var(--wp--preset--spacing--50);
  }
}