/* =====================================================================
   Industry template - mobile / consistency polish   (prepared 20 Jul 2026)
   Scope: .cnp-ind only (industry sector pages, cnp-industry-praxis.php).
   Covers BUG #3 (Keep-exploring cards look sparse / uneven). It is
   cosmetic and OPTIONAL - the DOM-order bug (#1) and the empty diagram
   (#2) are fixed in the PHP / JS, not here.
   No !important; every rule is prefixed with .cnp-ind so it cannot leak.
   Reversible: dequeue / delete this file.
   ===================================================================== */

/* --- BUG #3 --- "Keep exploring" related cards -----------------------
   Live markup per card is only:
     <a><span class="k">Method</span><h4>Title</h4></a>
   i.e. a tiny kicker + a serif title and nothing else, so the cards read
   as near-empty blocks of uneven height with no "this is a link" cue.
   This makes every card the same height, gives the title room, and adds
   a quiet Instrument arrow affordance that animates on hover.            */

.cnp-ind .related a{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 122px;
  padding-bottom: 44px;   /* clears the arrow */
}

.cnp-ind .related .k{
  display: block;
}

.cnp-ind .related h4{
  margin-top: 9px;
}

.cnp-ind .related a::after{
  content: "\2192";                       /* -> */
  position: absolute;
  left: 22px;
  bottom: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1;
  color: var(--line2, #C9BEAA);
  transition: transform .15s ease, color .15s ease;
}

.cnp-ind .related a:hover::after{
  color: var(--orange, #C75B22);
  transform: translateX(3px);
}

@media (max-width: 760px){
  /* one column already; drop the fixed height so short cards don't gap */
  .cnp-ind .related a{
    min-height: 0;
  }
}