/* ========================================
   PHYSICIANS OF THE HEART (learning/physicians-of-the-heart)
   Loaded by pages/poth.twig only. Shell/typography come from the person page
   (.person-title, .person-section-title, .person-link) and the sidebar nav.
   ======================================== */

.poth-page .person-title {
  margin-bottom: 0;
}

.poth-hero img,
.poth-hero video {
  width: 100%;
  display: block;
  background: #000;
}

.poth-video-caption {
  font-family: var(--font-primary);
  font-size: 13px;
  color: var(--color-light-text);
  margin: 0.5rem 0 0;
}

/* ---- Name page ---- */
.poth-name-title {
  margin-bottom: 1.75rem;
}

.poth-arabic {
  margin: 0 0 2rem;
}

.poth-arabic img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.poth-arabic figcaption {
  font-family: var(--font-primary);
  font-size: 13px;
  color: var(--color-light-text);
  margin-top: 0.5rem;
}

/* Three voices: picture (150px tall) flush on top of a 160px-wide player */
.poth-voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 2rem;
  margin-bottom: 3rem;
}

.poth-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 190px;
}

.poth-voice-picture {
  display: block;
  height: 150px;
  width: auto;
  margin-bottom: 0;      /* the picture sits flush on the player */
}

.poth-player {
  width: 160px;
  height: 40px;
  display: block;
}

.poth-voice-caption,
.poth-recording-caption {
  font-family: var(--font-primary);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-dark);
  margin: 0.75rem 0 0;
}

.poth-recording-caption {
  max-width: 640px;
  margin: 1rem auto 2rem;
}

.poth-voice-single {
  margin: 0 auto;
}

/* Previous / dropdown / next */
.poth-name-nav {
  padding-top: 1rem;
}

.poth-name-count {
  font-family: var(--font-primary);
  font-size: 18px;
  color: var(--color-light-text);
  margin: 1.25rem 0 0;
}

/* ---- Right column ---- */
.poth-book-cover img {
  width: 100%;
  border: 3px solid #b3623d;
  border-radius: 6px;
}

.poth-sidebar .poth-order-links {
  flex-direction: row;
  flex-wrap: wrap;
}

.poth-sidebar .poth-order-links .person-link {
  align-self: flex-start;
}

/* ---- Mobile (below lg) ---- */
.poth-mobile-header {
  margin-bottom: 1.5rem;
}

/* (specific enough to beat .poth-page .person-title, incl. the ≤991px 36px rule) */
.poth-page .poth-mobile-header .poth-section-title {
  font-size: 32px;
  margin-bottom: 15px;
}

.poth-section-select {
  width: 100%;
  margin: 0;
}

.poth-book-cover-mobile {
  width: 250px;
  margin: 2rem auto 2.5rem;
}

.poth-book-cover-mobile img {
  width: 100%;
  border: 3px solid #b3623d;
  border-radius: 6px;
}

.poth-sidebar-mobile .person-section-title {
  padding-top: 0.5rem;
}

@media (max-width: 991.98px) {
  /* match the site's mobile side margin (module-margins, 20px): drop the
     Bootstrap container padding that added 12px on each side */
  .poth-page .container {
    padding-left: 0;
    padding-right: 0;
  }

  .poth-page .person-title {
    font-size: 36px;
  }

  .poth-page .poth-name-title {
    font-size: 28px;
    margin-bottom: 0;
  }

  .poth-arabic {
    margin-bottom: 0;
  }

  .poth-arabic img {
    width: 200px;
    height: auto;
  }

  .poth-page .person-about,
  .poth-page .editor-content {
    font-size: 16px;
  }

  /* three voices side by side: 75px heads on 110px players */
  .poth-voices {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  .poth-voice {
    width: 110px;
    flex: 0 0 110px;
  }

  .poth-voice-picture {
    height: auto;
    width: 75px;
  }

  .poth-player {
    width: 110px;
    height: 36px;
  }

  .poth-voice-caption {
    font-size: 12px;
  }
}

/* iOS Safari collapses a narrow <audio> to a lone play button, drawn at the
   left of the element's box; give the box the button's width so it centres. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 991.98px) {
    .poth-player {
      width: 60px;
      margin: 0 auto;
    }
  }
}