/* HPE / HEP page-specific refinements. Loaded after modern.css. */

body.hpe-refined-page .modern-reading.hpe-page {
  max-width: 1040px;
}

/* Uniform reading width: all ordinary prose now ends on the same right edge. */
body.hpe-refined-page .modern-reading.hpe-page > p:not(.image),
body.hpe-refined-page .modern-reading.hpe-page > ul,
body.hpe-refined-page .modern-reading.hpe-page > ol,
body.hpe-refined-page .modern-reading.hpe-page .modern-lead,
body.hpe-refined-page .modern-reading.hpe-page .section-intro,
body.hpe-refined-page .modern-reading.hpe-page .note-box p,
body.hpe-refined-page .modern-reading.hpe-page .clinical-box p,
body.hpe-refined-page .modern-reading.hpe-page .final-cta p {
  width: 100% !important;
  max-width: 80ch !important;
  box-sizing: border-box !important;
}

/* Normal, consistent prose typography. */
body.hpe-refined-page .modern-reading.hpe-page p,
body.hpe-refined-page .modern-reading.hpe-page li {
  font-size: 1rem !important;
  line-height: 1.68 !important;
}

body.hpe-refined-page .modern-reading.hpe-page p,
body.hpe-refined-page .modern-reading.hpe-page li {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

body.hpe-refined-page .modern-reading.hpe-page .modern-lead,
body.hpe-refined-page .modern-reading.hpe-page .section-intro {
  font-size: 1.05rem !important;
  line-height: 1.68 !important;
}

/* Titles remain compact. */
body.hpe-refined-page .modern-reading.hpe-page h1 {
  font-size: 2.15rem !important;
  line-height: 1.15 !important;
  margin-bottom: 0.8rem !important;
}

body.hpe-refined-page .modern-reading.hpe-page > h2,
body.hpe-refined-page .modern-reading.hpe-page .note-box > h2,
body.hpe-refined-page .modern-reading.hpe-page .clinical-box > h2,
body.hpe-refined-page .modern-reading.hpe-page .final-cta > h2 {
  font-size: 1.45rem !important;
  line-height: 1.25 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.8rem !important;
}

/* Images and videos use exactly the same centered width. */
body.hpe-refined-page .modern-reading.hpe-page .video-block,
body.hpe-refined-page .modern-reading.hpe-page p.image.object {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

body.hpe-refined-page .modern-reading.hpe-page .video-block {
  margin-top: 1rem !important;
  margin-bottom: 2rem !important;
}

body.hpe-refined-page .modern-reading.hpe-page p.image.object {
  margin-top: 1.25rem !important;
  margin-bottom: 1.9rem !important;
  text-align: left !important;
}

body.hpe-refined-page .modern-reading.hpe-page p.image.object img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0.55rem !important;
}

body.hpe-refined-page .modern-reading.hpe-page .video-responsive {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  border-radius: 0.55rem !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
}

body.hpe-refined-page .modern-reading.hpe-page .video-responsive iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

body.hpe-refined-page .modern-reading.hpe-page .video-block + p,
body.hpe-refined-page .modern-reading.hpe-page .video-block + ul,
body.hpe-refined-page .modern-reading.hpe-page .video-block + h2 {
  margin-top: 1.6rem !important;
}

/* Characteristic cards remain wider than ordinary prose, but aligned as a coherent grid. */
body.hpe-refined-page .modern-reading.hpe-page .characteristics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.95rem !important;
  margin: 1.15rem 0 1.35rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.hpe-refined-page .modern-reading.hpe-page .characteristic {
  background: #fff !important;
  border: 1px solid #e3e5e8 !important;
  border-left: 4px solid #f56a6a !important;
  border-radius: 0.55rem !important;
  padding: 1rem 1.05rem !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.035) !important;
  box-sizing: border-box !important;
}

body.hpe-refined-page .modern-reading.hpe-page .characteristic h2 {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  margin: 0 0 0.45rem !important;
}

body.hpe-refined-page .modern-reading.hpe-page .characteristic p {
  font-size: 0.95rem !important;
  line-height: 1.58 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Boxes all share the same outer width; prose inside uses the common 80ch measure. */
body.hpe-refined-page .modern-reading.hpe-page .note-box,
body.hpe-refined-page .modern-reading.hpe-page .clinical-box,
body.hpe-refined-page .modern-reading.hpe-page .final-cta {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 1.2rem 1.3rem !important;
  margin: 1.4rem 0 !important;
}

body.hpe-refined-page .modern-reading.hpe-page .note-box > h2,
body.hpe-refined-page .modern-reading.hpe-page .clinical-box > h2,
body.hpe-refined-page .modern-reading.hpe-page .final-cta > h2 {
  margin-top: 0 !important;
}

body.hpe-refined-page .modern-reading.hpe-page .modern-actions {
  margin-top: 1rem !important;
  margin-bottom: 1.2rem !important;
}

/* Buttons and headings should not be justified. */
body.hpe-refined-page .modern-reading.hpe-page h1,
body.hpe-refined-page .modern-reading.hpe-page h2,
body.hpe-refined-page .modern-reading.hpe-page h3,
body.hpe-refined-page .modern-reading.hpe-page .modern-actions,
body.hpe-refined-page .modern-reading.hpe-page .button {
  text-align: left !important;
}

@media screen and (max-width: 736px) {
  body.hpe-refined-page .modern-reading.hpe-page h1 {
    font-size: 1.75rem !important;
  }

  body.hpe-refined-page .modern-reading.hpe-page > h2,
  body.hpe-refined-page .modern-reading.hpe-page .note-box > h2,
  body.hpe-refined-page .modern-reading.hpe-page .clinical-box > h2,
  body.hpe-refined-page .modern-reading.hpe-page .final-cta > h2 {
    font-size: 1.28rem !important;
  }

  body.hpe-refined-page .modern-reading.hpe-page .characteristics-grid {
    grid-template-columns: 1fr !important;
  }

  body.hpe-refined-page .modern-reading.hpe-page .video-block,
  body.hpe-refined-page .modern-reading.hpe-page p.image.object {
    width: 100% !important;
    max-width: 100% !important;
  }
}