/* One shared clinician-card composition for the journal and clinical hub. */
#journal-experts { padding-block: 70px; }
.jr-clinical-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
.jr-clinical-grid .jr-clinical-card { height: 565px; grid-column: auto; }
.jr-clinical-card .jr-doctor-face { border-radius: 25px; background: #f5f5f7; border-color: #e7e7ec; }
.jr-clinical-card.jr-doctor-primary .jr-doctor-front { background: #25252a; color: #fff; border-color: #25252a; }
.jr-clinical-card .jr-doctor-front { display: block; cursor: pointer; }
.jr-clinical-card .jr-doctor-portrait { height: 247px; background: transparent; isolation: isolate; }
.jr-clinical-card .jr-doctor-portrait::after { display: none; }
.jr-clinical-context { position: absolute; inset: 22px 25px auto; margin: 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #73737d; }
.jr-doctor-primary .jr-clinical-context { color: #f8838d; }
.jr-clinical-card .jr-doctor-photo { top: 55px; width: 180px; height: 180px; background: #fff3f5; }
.jr-clinical-card .jr-doctor-photo img { width: var(--portrait-width); top: var(--portrait-top); max-width: none; height: auto; mask-image: none; -webkit-mask-image: none; mix-blend-mode: normal; }
.jr-clinical-card .jr-doctor-summary { padding: 18px 26px 76px; }
.jr-clinical-card .jr-doctor-summary .jp-kicker { font-size: 9px !important; margin-bottom: 12px; color: #777780; }
.jr-clinical-card.jr-doctor-primary .jr-doctor-summary .jp-kicker { color: #f8838d; }
.jr-clinical-card .jr-doctor-summary h3 { font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 10px; }
.jr-clinical-card.jr-doctor-primary .jr-doctor-summary h3 { font-size: 36px !important; color: #fff; }
.jr-clinical-card .jr-doctor-summary .jr-doctor-role { color: #4f4f59; font-size: 12px !important; line-height: 1.4; margin-bottom: 17px !important; }
.jr-clinical-card.jr-doctor-primary .jr-doctor-summary .jr-doctor-role { color: #d8d8de; }
.jr-clinical-card .jr-doctor-summary>p:last-child { font-size: 13px; line-height: 1.6; color: #777780; max-width: 330px; }
.jr-clinical-card.jr-doctor-primary .jr-doctor-summary>p:last-child { color: #c2c2cb; }
.jr-clinical-card .jr-flip-button { left: 26px; right: 26px; width: calc(100% - 52px); bottom: 20px; min-height: 48px; padding: 13px 0 0; color: #29292f; font-size: 13px !important; font-weight: 550; border-color: #dcdce3; cursor: pointer; }
.jr-clinical-card.jr-doctor-primary .jr-flip-button { color: white; border-color: #ffffff28; }
.jr-flip-affordance { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #e62135; color: #fff; transition: transform .3s; flex: none; }
.jr-clinical-card .jr-flip-button svg { width: 19px; height: 19px; border: 0; padding: 0; border-radius: 0; color: inherit; background: none; }
.jr-clinical-card .jr-flip-button:focus-visible { outline: 2px solid #e62135; outline-offset: 6px; border-radius: 5px; }
.jr-clinical-card:hover .jr-flip-affordance { transform: scale(1.08); }
.jr-clinical-card .jr-doctor-back { padding: 31px 26px 87px; background: #25252a !important; color: #fff; }
.jr-clinical-card .jr-doctor-back .sp-eyebrow { font-size: 8px; margin-bottom: 22px; }
.jr-clinical-card .jr-doctor-back h3 { font-size: 29px !important; line-height: 1.1 !important; margin: 0 0 17px; }
.jr-clinical-card .jr-doctor-back>p:not(.sp-eyebrow) { font-size: 13px; line-height: 1.6; margin: 0 0 20px; color: #c2c2cb; }
.jr-clinical-facts { margin: 0; width: 100%; }
.jr-clinical-facts>div { border-top: 1px solid #ffffff1c; padding: 13px 0; }
.jr-clinical-facts dt { font-size: 9px; color: #aaaab5; margin: 0 0 5px; }
.jr-clinical-facts dd { margin: 0; font-size: 12px; line-height: 1.6; color: #eeeef3; }
.jr-clinical-links { width: 100%; margin-top: auto; padding-top: 10px; }
.jr-clinical-links .jp-text-link { font-size: 12px; color: #fff; }
.jr-clinical-links .jr-dha-link { position: static; width: 100%; font-size: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff25; color: #c5c5cf !important; }
.jr-clinical-card.is-flipped .jr-flip-button { color: #fff; border-color: #ffffff28; }
.jr-clinical-card.is-flipped .jr-flip-button svg { background: none; }
@media (max-width: 1100px) {
  .jr-clinical-grid { grid-template-columns: 1.16fr 1fr 1fr; gap: 16px; }
  .jr-clinical-card .jr-doctor-summary { padding-inline: 22px; }
  .jr-clinical-card .jr-doctor-summary h3 { font-size: 25px !important; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-summary h3 { font-size: 32px !important; }
  .jr-clinical-card .jr-doctor-back { padding-inline: 22px; }
}
@media (max-width: 950px) {
  .jr-clinical-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .jr-clinical-grid .jr-clinical-card.jr-doctor-primary { grid-column: 1/-1; height: 355px; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-front { display: grid; grid-template-columns: 39% 1fr; align-items: center; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-portrait { height: 290px; align-self: start; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-photo { top: 72px; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-summary { padding: 35px 28px 85px 0; }
  .jr-clinical-card.jr-doctor-primary .jr-flip-button { left: 39%; width: calc(61% - 28px); }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-back { padding: 28px 28px 80px; display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 30px; align-content: start; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-back .sp-eyebrow { grid-column: 1; margin-bottom: 13px; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-back h3 { grid-column: 1; font-size: 27px !important; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-back>p:not(.sp-eyebrow) { grid-column: 1; }
  .jr-clinical-card.jr-doctor-primary .jr-clinical-facts { grid-column: 2; grid-row: 1/4; }
  .jr-clinical-card.jr-doctor-primary .jr-clinical-links { grid-column: 1; padding: 0; }
  .jr-clinical-card.jr-doctor-primary .jr-clinical-links .jr-dha-link { margin-top: 9px; padding-top: 9px; }
}
@media (max-width: 600px) {
  #journal-experts { padding-block: 45px; }
  .jr-clinical-grid { grid-template-columns: 1fr; }
  .jr-clinical-grid .jr-clinical-card,
  .jr-clinical-grid .jr-clinical-card.jr-doctor-primary { height: 550px; grid-column: auto; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-front { display: block; }
  .jr-clinical-card .jr-doctor-portrait,
  .jr-clinical-card.jr-doctor-primary .jr-doctor-portrait { height: 247px; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-photo { top: 55px; }
  .jr-clinical-card .jr-doctor-summary,
  .jr-clinical-card.jr-doctor-primary .jr-doctor-summary { padding: 18px 25px 76px; }
  .jr-clinical-card .jr-doctor-summary h3 { font-size: 28px !important; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-summary h3 { font-size: 35px !important; }
  .jr-clinical-card .jr-flip-button,
  .jr-clinical-card.jr-doctor-primary .jr-flip-button { left: 25px; width: calc(100% - 50px); }
  .jr-clinical-card .jr-doctor-back,
  .jr-clinical-card.jr-doctor-primary .jr-doctor-back { display: flex; padding: 30px 25px 86px; }
  .jr-clinical-card.jr-doctor-primary .jr-doctor-back h3 { font-size: 29px !important; }
  .jr-clinical-card.jr-doctor-primary .jr-clinical-links { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-clinical-card .jr-doctor-turn { transition: none; }
  .jr-clinical-card:hover .jr-flip-affordance { transform: none; }
}