/* Blog hero + prose styles for medspeak public pages */

.blog-hero {
  position: relative;
  height: 50vh;
  min-height: 320px;
  overflow: hidden;
}

.blog-hero img,
.blog-hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, transparent 70%);
}

.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem;
}

.ms-prose img {
  max-width: 100%;
  height: auto;
  border-radius: .5rem;
}

.ms-prose blockquote {
  border-left: 4px solid var(--tblr-primary, #206bc4);
  padding: .5rem 1rem;
  color: var(--tblr-secondary, #475569);
  font-style: italic;
  margin: 1rem 0;
}

.ms-prose h2 {
  margin-top: 2rem;
}

.ms-prose h3 {
  margin-top: 1.5rem;
}

/* TinyMCE class-based image alignment. The same classes are emitted by
 * the editor and rendered by the public page, so what authors see in
 * the editor matches what visitors get. */
.ms-prose .align-left,
.cms-block .align-left {
  float: left;
  margin: .25rem 1rem 1rem 0;
  max-width: 50%;
}
.ms-prose .align-right,
.cms-block .align-right {
  float: right;
  margin: .25rem 0 1rem 1rem;
  max-width: 50%;
}
/* Block-mode alignment — image sits on its own line, no text wrap. */
.ms-prose .align-block-left,
.cms-block .align-block-left {
  display: block;
  margin: 1rem auto 1rem 0;
  float: none;
  clear: both;
}
.ms-prose .align-block-center,
.cms-block .align-block-center,
.ms-prose .align-center,
.cms-block .align-center {
  display: block;
  margin: 1rem auto;
  float: none;
  clear: both;
}
.ms-prose .align-block-right,
.cms-block .align-block-right {
  display: block;
  margin: 1rem 0 1rem auto;
  float: none;
  clear: both;
}
/* Clear floats at paragraph breaks so the next block starts below. */
.ms-prose p::after,
.cms-block p::after {
  content: "";
  display: table;
  clear: both;
}