/* ===========================================================================
   "More from Signal Hill" — the related-articles strip under every article.

   Its own file because the previous version lived in an inline <style> in
   pages/news-article.html and quietly lost every typography battle:

     homepage.css  .home-v2 .page-content h3  →  clamp(22px, 2.4vw, 28px)   (0,2,1)
     inline        .related-card h3           →  16px                        (0,1,1)

   homepage.css is loaded on every page, not just the homepage, and those two
   generic rules (.page-content h3 and .page-content p) ambush any component
   built from bare h3/p inside the content column. The card title rendered at
   28px in a 228px-wide column, so a headline wrapped to ten lines, the date
   broke across two, and all three cards stretched to match the tallest.

   Two defences here, both deliberate:

     1. NO BARE ELEMENT SELECTORS. Every part is addressed by its own class
        (.related-card__title, not h3). A class cannot be outranked by
        something targeting a tag it does not use.
     2. Everything is scoped under .related-articles, which puts each rule at
        (0,2,0)+ anyway — comfortably clear of the .page-content rules.

   The markup is emitted by loadRelatedArticles() in js/content-loader.js.
   Keep the two in step.
   =========================================================================== */

.related-articles {
  margin: 56px 0 24px;
  padding-top: 40px;
  border-top: 1px solid rgba(29, 55, 73, 0.14);
}

.related-articles .related-head { margin-bottom: 24px; }

.related-articles .related-kicker {
  display: inline-block;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2f9da7;
  font-weight: 800;
  margin-bottom: 8px;
}

.related-articles .related-head h2 {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 900;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.15;
  color: #1d3749;
  margin: 0;
  letter-spacing: -0.02em;
}

/* auto-fit rather than a fixed 3, so the cards reflow instead of being
   crushed into 228px columns inside the article's readable measure. */
.related-articles .related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.related-articles .related-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(29, 55, 73, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-shadow: 0 10px 24px -20px rgba(29, 55, 73, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.related-articles .related-card:hover,
.related-articles .related-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(242, 102, 76, 0.45);
  box-shadow: 0 18px 30px -20px rgba(29, 55, 73, 0.55);
}

.related-articles .related-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: #faf5ea;
  overflow: hidden;
  flex: 0 0 auto;
}

.related-articles .related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.related-articles .related-card:hover .related-card__media img { transform: scale(1.04); }

.related-articles .related-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 17px 17px;
  flex: 1 1 auto;
}

.related-articles .related-card__date {
  display: block;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f2664c;
  line-height: 1.2;
}

/* The clamp is the whole point: these headlines run to 20 words, and an
   unclamped one drags every sibling card down to match it. */
.related-articles .related-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 800;
  font-size: 16.5px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #1d3749;
}

.related-articles .related-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #62707c;
  margin: 0;
}

/* Pinned to the bottom so the cue sits on one line across all three cards
   however much summary each one has. */
.related-articles .related-card__more {
  margin-top: auto;
  padding-top: 4px;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1d3749;
}

.related-articles .related-card:hover .related-card__more { color: #f2664c; }

.related-articles .related-cta { margin: 28px 0 0; text-align: center; }

.related-articles .related-cta a {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #1d3749;
  text-decoration: none;
  border-bottom: 2px solid #f2664c;
  padding-bottom: 2px;
}

.related-articles .related-cta a:hover { color: #f2664c; }

@media (max-width: 560px) {
  .related-articles { margin-top: 44px; padding-top: 30px; }
  .related-articles .related-grid { grid-template-columns: 1fr; gap: 14px; }
  .related-articles .related-card__title { -webkit-line-clamp: 4; line-clamp: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .related-articles .related-card,
  .related-articles .related-card__media img { transition: none; }
  .related-articles .related-card:hover { transform: none; }
  .related-articles .related-card:hover .related-card__media img { transform: none; }
}