/* ============================================================
   Medicaputare — long-form content typography
   Applies to page/article bodies (.content__entry): the theme
   leaves h2/h3/table inside content at body size, which made the
   legal pages read as one undifferentiated block.
   Loaded on every page from head.hbs.
   ============================================================ */

.content__entry h2 {
   color: var(--gold, #c9a227);
   font-size: 1.32rem;
   line-height: 1.3;
   margin: 2.4rem 0 0.7rem;
}

.content__entry h3 {
   color: #2f3742;
   font-size: 1.06rem;
   line-height: 1.35;
   margin: 1.8rem 0 0.5rem;
}

.content__entry h4 {
   color: #2f3742;
   font-size: 1rem;
   margin: 1.4rem 0 0.4rem;
}

.content__entry p,
.content__entry li {
   color: #3f4850;
   line-height: 1.75;
}

.content__entry p {
   margin: 0 0 1rem;
}

.content__entry ul,
.content__entry ol {
   margin: 0 0 1.25rem 1.4rem;
   padding: 0;
}

.content__entry li {
   margin: 0.35rem 0;
}

.content__entry strong {
   color: #232a33;
}

.content__entry a {
   color: var(--gold, #c9a227);
   text-decoration: underline;
}

.content__entry hr {
   border: 0;
   border-top: 1px solid #e6e8ec;
   margin: 2rem 0;
}

.content__entry table {
   width: 100%;
   border-collapse: collapse;
   margin: 1.5rem 0 1.75rem;
   font-size: 0.9rem;
}

.content__entry th {
   background: #f6f7f9;
   color: #232a33;
   font-weight: 700;
   text-align: left;
   padding: 0.65rem 0.8rem;
   border: 1px solid #e6e8ec;
   vertical-align: top;
}

.content__entry td {
   padding: 0.65rem 0.8rem;
   border: 1px solid #e6e8ec;
   vertical-align: top;
   color: #3f4850;
}

.content__entry blockquote {
   border-left: 3px solid var(--gold, #c9a227);
   margin: 1.5rem 0;
   padding: 0.25rem 0 0.25rem 1rem;
   color: #55606b;
}

@media (max-width: 600px) {
   .content__entry table {
      font-size: 0.84rem;
   }

   .content__entry th,
   .content__entry td {
      padding: 0.5rem 0.55rem;
   }
}

/* ============================================================
   Listing cards (/articles/)
   The theme's card was title + excerpt + link, with the title
   reserving min-height: 8rem (about four lines) — which is why a
   short title left a block of white space above its own text. A
   card now reads: image, title, date, author, excerpt, link, and
   the title reserves two lines so cards in a row agree.
   ============================================================ */

.resources-grid .resources-insight-card {
   padding: 0;
   overflow: hidden;
   gap: 0;
   justify-content: flex-start;
}

.resources-grid .resources-insight-card__media {
   display: block;
   line-height: 0;
}

.resources-grid .resources-insight-card__media img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
   object-fit: cover;
}

.resources-grid .resources-insight-card__body {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   gap: 0.5rem;
   padding: 1.35rem 1.5rem 1.5rem;
}

.resources-grid .resources-insight-card-header {
   /* Three lines reserved and clamped to three: with titles of one, two and three
      lines in the same row, the date/author block started at three different heights.
      Clamping makes every card's metadata sit on the same baseline, which is what
      makes a grid read as a grid rather than as three independent columns. */
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: calc(1.4em * 3);
   margin: 0;
   line-height: 1.4;
}

.resources-grid .resources-insight-card-header a {
   color: inherit;
   text-decoration: none;
}

.resources-grid .resources-insight-card__meta {
   display: flex;
   flex-wrap: nowrap;
   align-items: baseline;
   gap: 0.45rem;
   margin: 0;
   /* px, not rem: this theme's root font is 19.2px, so 0.8125rem computed to 15.6px and
      the longest dates pushed the author onto a second line — two of six cards wrapped
      while four did not, which reads as a layout bug rather than as different data. */
   font-size: 13px;
   line-height: 1.45;
   color: #5b6570;
   white-space: nowrap;
}

.resources-grid .resources-insight-card__author {
   font-weight: 600;
   color: #3f4850;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.resources-grid .resources-insight-card__author::before {
   content: "\00b7";
   margin-right: 0.55rem;
   color: #b9c0c8;
   font-weight: 400;
}

.resources-grid .resources-insights-description {
   margin: 0.15rem 0 0.6rem;
}

.resources-grid .resources-insights-read-more {
   margin-top: auto;
   align-self: flex-start;
}

/* ============================================================
   Default hero
   An article published without a hero image renders
   <div class="article-hero-bg hero-no-image"> — the base rule
   paints nothing for it, so the band above the title was an
   empty strip. Same asset the Resources & Insights page uses,
   so the fallback is a real image rather than a blank.
   ============================================================ */

.article-hero-bg.hero-no-image {
   background-image: url("/assets/images/infographic-medical-with-photo-small-1920x1920.webp");
}