/* responsive-fixes.css
   Hand-maintained responsive fixes layered on top of the Webflow export.
   Linked AFTER css/blockchaincert2.webflow.css so these rules win. */

/* ── Ecosystem partners — directory rows ──────────────────────────────
   .job-item hard-codes a 600px-wide description and a 300px title, so a
   row needs ~1040px and overflowed tablet viewports (768-991px), forcing
   the whole page to scroll sideways. Stack the row below 992px. */
@media screen and (max-width: 991px) {
  .job-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-row-gap: 12px;
    padding: 16px 20px;
  }
  .job-title-wrap {
    width: 100%;
    min-width: 0;
  }
  .job-type {
    width: 100%;
  }
  .partner-desc {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-left-width: 0;
    border-right-width: 0;
    padding: 0;
  }

  /* Featured partner cards: go single-column for the whole tablet range
     (Webflow set this grid to 2 columns at 768-991px, leaving cards too
     short for the overlaid name + description). Selector matches the
     Webflow rule's specificity so this override wins. */
  .grid-3-columns-3.gap-row-40px._1-col-tablet {
    grid-template-columns: 1fr;
  }
}

/* ── Ecosystem partners — directory rows on desktop ───────────────────
   The "View" button was removed, so the row had only two items and
   justify-content:space-between left a gap. Pack them together and let
   the description fill the row. */
@media screen and (min-width: 992px) {
  .job-item {
    justify-content: flex-start;
  }
  .job-type {
    flex: 1 1 auto;
    min-width: 0;
  }
  .partner-desc {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ── Ecosystem partners — featured cards ──────────────────────────────
   The name + description are absolutely positioned inside an
   overflow:hidden image card; long descriptions were clipped
   mid-sentence. Clamp them to a tidy teaser with an ellipsis. */
.card-link-image-top .heading-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 10px;
}

.card-link-image-top .text-200-copy {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}