/* =========================================================================
   Heading with image-card row (Figma 362:11145 — "Awards & Recognition")
   A plain section heading above a row of bordered cards; each card stacks
   a photo/badge image over a title + subtitle. Generic + reusable across
   pages (awards, certifications, press mentions, partners, etc.).
   ========================================================================= */

.heading-with-image-card-row {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.heading-with-image-card-row__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* 40px between heading and cards (Figma) */
}

/* ----------- Heading ----------- */
.heading-with-image-card-row__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2); /* section heading scale, consistent with the other page headers */
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-navy-blue);
}

/* ----------- Cards row -----------
   Border-once + per-card seam-border pattern (see
   patterns/border-once-card-row.md). The outer wrapper carries the 1px
   border + 8px radius + overflow-hidden so the visible left/right ends
   stay rounded regardless of card count; each card draws only an interior
   seam, cleared on the last sibling. */
.heading-with-image-card-row__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Desktop/tablet: cards sit in a single row from 768 up. 3 cards at 768
   still leave ~166px of content width per card (137px badge fits), so no
   intermediate 2-col step is needed. */
@media (min-width: 768px) {
  .heading-with-image-card-row__cards {
    flex-direction: row;
  }
  .heading-with-image-card-row__slot {
    flex: 1 1 0;
    min-width: 0;
  }
}

.heading-with-image-card-row__slot {
  display: flex; /* lets .__card stretch to the tallest slot */
}

.heading-with-image-card-row__card {
  background-color: var(--color-background);
  width: 100%;
  padding: var(--space-7); /* 32px (Figma) */
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between image and text (Figma) */
  /* Seam: bottom border when stacked, right border in a row. */
  border-bottom: 1px solid var(--color-card-border);
}

.heading-with-image-card-row__slot:last-child .heading-with-image-card-row__card {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .heading-with-image-card-row__card {
    border-bottom: 0;
    border-right: 1px solid var(--color-card-border);
  }
  .heading-with-image-card-row__slot:last-child .heading-with-image-card-row__card {
    border-right: 0;
  }
}

/* ----------- Card image (photo/badge) ----------- */
.heading-with-image-card-row__image {
  height: 120px; /* Figma fixed height; width follows the intrinsic aspect */
  width: auto;
  display: block;
  object-fit: contain;
  /* Stay left-aligned at intrinsic width — the flex column would
     otherwise stretch the badge (align-items: stretch on auto width). */
  align-self: flex-start;
}

/* ----------- Card text ----------- */
.heading-with-image-card-row__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8px between title and subtitle (Figma) */
  min-width: 0;
}

.heading-with-image-card-row__card-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4); /* 20px, scales to 28 on the wide-screen pass */
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--color-navy-blue);
}

.heading-with-image-card-row__card-subtitle {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 26px;
  color: var(--color-body-copy-text);
}