/* Inventis KZ — homepage product boxes: restore the intended mobile/tablet stacking.
 *
 * The three product cards below the hero (.box-link: Trumpet / Symphonia / Timpani) sit in
 * plain Bootstrap `.col` columns (equal-width at EVERY breakpoint), yet each card carries
 * `min-width:280px` and the markup was authored to stack on smaller screens (mb-4 mb-lg-0).
 * Below the lg breakpoint the 280px cards were crammed into ~130px columns, so they overlapped,
 * clipped the 42px titles, wrapped text into unreadable slivers and stretched the orange active
 * state into a narrow strip.
 *
 * Fix: below 992px, let each column take a full row so exactly one readable card shows at a
 * time — correct width, natural wrapping, full title, readable body, visible CTA, correct orange
 * hover fill, rounded container and no viewport overflow. Desktop/large screens (>= 992px) are
 * left exactly as before. This restores the original responsive intent; it is not an
 * overflow-hiding workaround. */
@media (max-width: 991.98px) {
  .page-node-type-homepage .field-home-links-boxes-wrapper.row > .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .page-node-type-homepage .field-home-links-boxes-wrapper .box-link {
    min-width: 0;   /* drop the 280px min that forced overflow in a narrow column */
    height: auto;   /* stacked cards size to their own content instead of stretching */
  }
  .page-node-type-homepage .field-home-links-boxes-wrapper .box-link .box-title {
    margin-top: 24px;
    font-size: 32px;      /* 42px is oversized on a phone; stays bold and legible */
    line-height: 1.1;
    overflow-wrap: break-word;
  }
  .page-node-type-homepage .field-home-links-boxes-wrapper .box-link .box-body {
    margin-top: 20px;
    font-size: 17px;
    text-align: left;     /* justified text leaves ragged gaps at narrow widths */
  }
}