/*
 * kkbc-related-1.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-2.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 4 / 3 ratio, cropped (not stretched) so that every card has the same height.
   Old rule: style.css:294 sets no size, so the card took the height of its picture (it was 484 px for a portrait picture).
   16 / 9 was tried first and clipped the label: the text block of 3 lines is 167 px high and a 16 / 9 card is 170 px
   (87 px at 768 px); 4 / 3 leaves 50 px (16 px at 768 px) above the text. */
.impact_area.kkbc-related .impactbox figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  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;
}