/* Responsive headline covers. The matching share image is rendered by Pillow. */
:root { --cover-blue: var(--brand-blue, #083a90); --cover-white: #fff; }

.story-card.has-cover { padding: 0; }
.cover-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--card-padding, 32px);
  background: var(--cover-blue);
  color: var(--cover-white);
  border-radius: 7px 7px 0 0;
  overflow-wrap: anywhere;
}
.has-cover > .cover-panel { min-height: 240px; flex-shrink: 0; }
.cover-panel .eyebrow { color: #e2ebff; }
.cover-panel .sponsored-label { color: #fff; border-color: #91a9e8; }
.cover-panel h2 { color: var(--cover-white); margin: 20px 0 24px; font-weight: 700; flex-shrink: 0; }
.story-card .cover-panel h2 a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; }
.cover-panel a:focus-visible { outline-color: #fff; }
.cover-panel ::selection { background: #fff; color: var(--cover-blue); }
.cover-brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font: 700 18px/1.1 var(--font-display);
  letter-spacing: -.6px;
}
.cover-brand .brand-symbol { --logo-blue: #fff; width: 20px; height: 20px; flex-shrink: 0; }
.cover-summary { padding: 0 var(--card-padding); }
.cover-summary .card-intro { margin-top: 20px; }
.has-cover > .story-meta { padding: 20px var(--card-padding) var(--card-padding); }
.featured-grid > .story-feature.has-cover { background: var(--surface); border-color: var(--hairline); }
.featured-grid > .story-feature.has-cover h2 { font-size: 34px; line-height: 1.12; }
.story-feature.has-cover > .cover-panel { min-height: 360px; }
.featured-grid-single .has-cover > .cover-panel { aspect-ratio: auto; min-height: 350px; }
.featured-grid-single .story-feature.has-cover h2 { max-width: 960px; font-size: 44px; }
.story-feature.has-cover .cover-brand { font-size: 22px; }
.story-brief.has-cover > .cover-panel { aspect-ratio: auto; min-height: 206px; flex: 1; }
.story-brief.has-cover h2 { font-weight: 700; margin-block: 12px 20px; }
.story-brief.has-cover .cover-brand { font-size: 15px; }
.story-brief.has-cover > .story-meta { padding-block: 14px; }
.story-row.has-cover > .cover-panel { aspect-ratio: auto; min-height: 0; }
.story-row.has-cover h2 { max-width: 960px; }
.story-row.has-cover .cover-brand { padding-top: 0; }
.related-grid > .story-card.has-cover { padding: 0; }

.article-cover-heading {
  --card-padding: 48px;
  min-height: 360px;
  border-radius: 6px;
  margin-bottom: 28px;
}
.article-cover-heading h1 { color: #fff; margin: 24px 0 32px; }
.article-cover-heading .cover-brand { font-size: 26px; }

@media (max-width: 1023px) {
  .featured-grid > .story-feature.has-cover h2 { font-size: 28px; }
  .article-cover-heading { --card-padding: 32px; }
}

@media (max-width: 767px) {
  .has-cover > .cover-panel { aspect-ratio: auto; min-height: 220px; }
  .story-brief.has-cover { margin-block: 18px; border-radius: 6px; }
  .story-brief.has-cover > .cover-panel { min-height: 0; padding: 18px; border-radius: 6px; }
  .story-brief.has-cover > .story-meta { padding: 12px 0 0; }
  .story-brief.has-cover h2 { margin-top: 10px; }
  .story-feature.has-cover > .cover-panel { min-height: 270px; }
  .featured-grid-single .story-feature.has-cover h2 { font-size: 30px; }
  .article-cover-heading { --card-padding: 24px; min-height: 0; margin-inline: -1px; }
  .article-cover-heading h1 { font-size: 30px; line-height: 1.15; margin-block: 22px 28px; }
  .article-cover-heading .cover-brand { font-size: 22px; }
}

@media print {
  .cover-panel { background: #fff; color: #000; min-height: 0; }
  .cover-panel .eyebrow, .cover-panel h2, .article-cover-heading h1 { color: #000; }
  .article-cover-heading { padding: 0; }
  .cover-brand { display: none; }
}