/* =====================================================================
   TRIWAYS — "EXPLORE FURTHER" strip for the Capabilities inside pages
   Heading left, four capability cards right, on ink. Prefix: tv-cm
   Self-contained: link this file from any page that uses the strip
   (after triways-hub.css). First used on /capabilities/private-transportation/.

   <section class="hb-section hb-section--dark tv-cm" aria-labelledby="more-heading">
     <div class="hb-wrap tv-cm__grid">
       <div class="tv-cm__head"> .hb-kicker + <h2 class="hb-heading tv-cm__title"> </div>
       <ul class="tv-cm__list" role="list">
         <li><a class="tv-cm__card" href="/capabilities/…/">
           <span class="tv-cm__media"><img … 4:3 or wider, 640px wide is enough /></span>
           <span class="tv-cm__name">Name <span class="hb-arrow" aria-hidden="true">&rarr;</span></span>
         </a></li>  × 4
   Show four cards and leave out the page the strip sits on.
   ===================================================================== */

.hb-section.tv-cm { padding: clamp(3rem, 2.5rem + 3vw, 5rem) 0; }
.tv-cm__grid { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 8.7fr); gap: clamp(2rem, 3.5vw, 3.5rem); align-items: center; }
.tv-cm__title { margin: 0; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); line-height: 1.12; max-width: 15ch; text-wrap: balance; }
.tv-cm__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.tv-cm__card { display: block; height: 100%; border: 1px solid var(--hb-line-on-dark); color: #fff; transition: border-color 0.35s var(--hb-ease); }
.tv-cm__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hb-ink-soft); }
.tv-cm__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--hb-ease); }
.tv-cm__name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.85rem 0.9rem 0.95rem;
  font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem); line-height: 1.2;
}
.tv-cm__name .hb-arrow { font-family: var(--hb-sans); font-size: 1rem; color: var(--hb-champagne); transition: transform 0.35s var(--hb-ease); }
.tv-cm__card:hover, .tv-cm__card:focus-visible { border-color: var(--hb-champagne); color: #fff; }
.tv-cm__card:hover .tv-cm__media img { transform: scale(1.04); }
.tv-cm__card:hover .hb-arrow, .tv-cm__card:focus-visible .hb-arrow { transform: translateX(4px); }
.tv-cm__card:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 4px; }

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .tv-cm__name { padding-inline: 0.7rem; font-size: 1.05rem; gap: 0.4rem; }
}
@media (max-width: 1023.98px) {
  .tv-cm__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tv-cm__title { max-width: 22ch; }
}
@media (max-width: 699.98px) {
  .tv-cm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tv-cm__card, .tv-cm__media img, .tv-cm__name .hb-arrow { transition: none !important; transform: none !important; }
}