/* v12: Mobile company cards horizontal carousel (strong override)
   Problem: element has classes "hsb-grid hsb-company-cards" and .hsb-grid rules can override display.
   Fix: use more specific selector + !important on mobile.
*/

/* PC / tablet: 4-column grid */
.hsb-grid.hsb-company-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.hsb-grid.hsb-company-cards .hsb-panel{min-height:160px}
.hsb-grid.hsb-company-cards .hsb-panel h3{
  font-size:1.08rem;
  letter-spacing:-0.01em;
  word-break:keep-all;
}
.hsb-grid.hsb-company-cards .hsb-panel p{
  font-size:1rem;
  line-height:1.65;
  margin:10px 0 0;
  color:var(--muted);
  word-break:keep-all;
}

/* Mobile: horizontal scroll */
@media (max-width: 900px){
  .hsb-grid.hsb-company-cards{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    padding:6px 4px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .hsb-grid.hsb-company-cards::-webkit-scrollbar{height:6px}
  .hsb-grid.hsb-company-cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

  .hsb-grid.hsb-company-cards .hsb-panel{
    flex:0 0 74%;
    max-width:74%;
    min-width:260px;
    scroll-snap-align:start;
    min-height:unset;
  }
  .hsb-grid.hsb-company-cards .hsb-panel h3{font-size:1.05rem}
  .hsb-grid.hsb-company-cards .hsb-panel p{font-size:0.98rem;line-height:1.7}
}

/* Very small phones */
@media (max-width: 420px){
  .hsb-grid.hsb-company-cards .hsb-panel{flex-basis:86%;max-width:86%;min-width:240px}
}