/*
 * kkbc-related-2.css - one card shape for "Related Insights" under an article (finding S11, issue #125).
 * Scope: only the section that single.php marks with the class "kkbc-related" (<div class="impact_area Thank_impact_area kkbc-related">).
 * The cards are the existing ".impactbox" cards (same markup as the home page and the lists); no other page changes.
 * Tried on the live article page with real card markup injected, at 1440, 768 and 390 px (2026-10-13).
 * A later change of this file gets a new file name (kkbc-related-3.css): the CDN keeps a file under its old name.
 * No !important is used. The selectors have 3 classes, so they beat the old rules without it.
 */

/* Image: a fixed 5 / 8 portrait ratio, cropped (not stretched), the same shape as the "Our work" and "Learning center"
   cards on the home page (their pictures are 800 x 1280 = 5 / 8, 484 px high at 1440 px). Every card has the same height.
   Version 1 used 4 / 3: the card was 227 px high at 1440 px and 116 px at 768 px, too short for its 167 px text block
   (Scott, 2026-10-16). At 5 / 8 the card is 484 / 247 / 560 px at 1440 / 768 / 390 px. */
.impact_area.kkbc-related .impactbox figure img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 8;
  object-fit: cover;
}

/* Text block: its minimum height came from fixed sizes of the old rules (style.css:295 190px; custom.css:72 13vw;
   responsive.css:68 150px, responsive.css:153 125px) and was larger than a card at some widths. The text sits at the
   bottom of the card (style.css:295 position:absolute; bottom:10px) and grows upward with its lines. */
.impact_area.kkbc-related .impactbox figcaption {
  min-height: 0;
}

/* Title: cut after 3 lines, with "...". Old rule: none (a title of 4 or 5 lines pushed the label out of the card). */
.impact_area.kkbc-related .impactbox figcaption h4 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}