/* related_blogs_2.css — secondary related-blogs content band (/ux-audit, leaf:9).
   Values from the spec ## Computed Styles (compact band @ 1440 / 768 / 375);
   card internals (no shared-child id minted) are calibrated from the frozen
   Phase-A leaf crop — the visually-identical sibling card (related_blogs).
   Run breakpoint boundary set {479,767,991,1919}: 1440 = base rules;
   768 -> @media(max-width:991px); 375 -> @media(max-width:479px).
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   Every selector is scoped under this component's own root hook
   (.c-related_blogs_2__root) so the shared section canonical
   (c-related_blogs__section-related-blogs, owned jointly with the sibling) and
   the shared wrapper canonicals (padding-global / container-large / row /
   section-header / mb-*, owned by about_info / accordion / all_blogs /
   careers_jointeam) never collide or leak (rule 9). The registry bbox is
   full-width (x=0): the section renders edge-to-edge with the padding inside it. */

/* ============================ Section root ================================= */
.c-related_blogs_2__root {
  display: block;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body); /* source rgb(51,51,51) */
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes the body margin on
     composed pages — the .region-content reset restores it there). On a width:auto
     block the -8px resolves to a viewport-wide box at every viewport, so the band
     lines up edge-to-edge with the source at 1440/768/375. */
  margin: -8px;
}
.region-content .c-related_blogs_2__root {
  margin: 0;
  width: 100%;
}

/* ---- Overflow clip wrapper (source .overflow-hidden) --------------------- */
.c-related_blogs_2__root .c-related_blogs_2__overflow {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* ---- Outer padding wrapper (padding-global + padding-section-medium) ------ */
.c-related_blogs_2__root .c-related_blogs_2__pad {
  display: block;
  width: 100%;
  padding: 96px var(--space-40); /* source 96px 40px @1440; no --space-96 token */
  box-sizing: border-box;
}

/* ---- Content container (container-large) --------------------------------- */
.c-related_blogs_2__root .c-related_blogs_2__container {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container maxWidth 1280 @1440 */
  margin-inline: auto; /* centres in the padded content box (source margin 0 40px) */
  box-sizing: border-box;
}

/* ============================ Section header =============================== */
.c-related_blogs_2__root .c-related_blogs_2__header-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-40); /* source .row gap 40px @1440 */
  width: 100%;
}
.c-related_blogs_2__root .c-related_blogs_2__section-header {
  display: block;
  width: 100%;
  max-width: 640px; /* source section-header width/maxWidth 640 @1440/768; 343 (=100%) @375 */
  margin: 0 0 var(--space-20); /* source .mb-20 margin-bottom 20px */
}
.c-related_blogs_2__root .c-related_blogs_2__heading {
  display: block;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 36px; /* source section-header height 40 @1440; crop-calibrated to the 191px "Related blogs" ink */
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -1px;
  color: var(--color-text-primary); /* source rgb(51,51,51) */
}

/* ============================ Card row ==================================== */
.c-related_blogs_2__root .c-related_blogs_2__card-wrap {
  display: block;
  width: 100%;
  margin-bottom: 52px; /* source .mb-52px margin-bottom 52px @1440; no --space-52 token */
}
/* The inner card grid (below depth-5 cap): a fixed 3-up row clipped by the outer
   .overflow-hidden — 3 cards fit at 1440, 2 at 768, 1 at 375, the rest clipped
   (matches the source's own collapse, not the un-collapsed 340px track list). */
.c-related_blogs_2__root .c-related_blogs_2__blog-card-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-40); /* source inter-card gap 40px @1440 */
  width: 100%;
  overflow: hidden;
}
.c-related_blogs_2__root .c-related_blogs_2__card {
  flex: 0 0 400px; /* source grid track 400px @1440 (3×400 + 2×40 gap = 1280 container); fixed
                      tracks are clipped by the grid's overflow at 768/375, matching the source */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.c-related_blogs_2__root .c-related_blogs_2__card-media {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1; /* crop-calibrated card thumbnail (source ~400x194); no border-radius in capture */
  overflow: hidden;
  background-color: var(--color-bg-neutral); /* placeholder tone while the thumbnail loads */
}
.c-related_blogs_2__root .c-related_blogs_2__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-related_blogs_2__root .c-related_blogs_2__card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24); /* inter-tag gap */
  margin-top: 18px; /* crop: card image -> tag row; no --space-18 token */
}
.c-related_blogs_2__root .c-related_blogs_2__card-tag {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body); /* ~16px tag label */
  font-weight: 500;
  line-height: var(--line-height-body);
  color: var(--color-text-secondary); /* source rgb(115,115,115) */
  text-decoration: none;
}
.c-related_blogs_2__root .c-related_blogs_2__card-title {
  margin: var(--space-12) 0 0; /* crop: tag row -> title top ~12px */
  font-family: var(--font-family-display);
  font-size: 22px; /* crop-calibrated blog-card title (~22px, up to 3 lines) */
  font-weight: 500;
  line-height: 25px; /* crop: title line spacing ~25px */
  color: var(--color-text-dark); /* source rgb(18,18,18) */
}
.c-related_blogs_2__root .c-related_blogs_2__card-title-link {
  color: inherit;
  text-decoration: none;
}

/* ============================ Bottom CTA ================================== */
.c-related_blogs_2__root .c-related_blogs_2__cta-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.c-related_blogs_2__root .c-related_blogs_2__cta {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: var(--font-size-a); /* source ~16px */
  font-weight: 600; /* source verbatim */
  text-transform: capitalize; /* source verbatim */
  text-align: center; /* source @1440/768 */
  text-decoration: underline;
  color: var(--color-text-dark); /* source rgb(18,18,18) */
}

/* ============================ 768 (@media max-width:991px) ================= */
@media (max-width: 991px) {
  .c-related_blogs_2__root .c-related_blogs_2__pad {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 */
  }
  .c-related_blogs_2__root .c-related_blogs_2__header-row {
    gap: var(--space-10); /* source .row gap 10px @768 */
  }
  .c-related_blogs_2__root .c-related_blogs_2__heading {
    font-size: 26px; /* source "Related blogs" ink 138x23 @768 (scaled from the 1440 191px ink) */
    line-height: 32px; /* source section-header height 32 @768 */
  }
  .c-related_blogs_2__root .c-related_blogs_2__card-wrap {
    margin-bottom: 32px; /* source .mb-52px margin-bottom 32px @768; no --space-32 token */
  }
  .c-related_blogs_2__root .c-related_blogs_2__blog-card-grid {
    gap: var(--space-24); /* source inter-card gap 24px @768 */
  }
  .c-related_blogs_2__root .c-related_blogs_2__card {
    flex: 0 0 340px; /* source grid track 340px @768; card 1 full + card 2 clipped at the container edge */
  }
  /* Card title shrinks on tablet/mobile so it wraps like the source. Applies to
     375 too (<=479 also matches this <=991 query). */
  .c-related_blogs_2__root .c-related_blogs_2__card-title {
    font-size: 18px;
    line-height: 23px;
  }
}

/* ============================ 375 (@media max-width:479px) ================= */
@media (max-width: 479px) {
  .c-related_blogs_2__root .c-related_blogs_2__pad {
    padding: 48px var(--space-16); /* source 48px 16px @375; no --space-48 token */
  }
  .c-related_blogs_2__root .c-related_blogs_2__header-row {
    flex-direction: column; /* source .row flex-direction column @375 */
    gap: var(--space-20); /* source .row gap 20px @375 */
  }
  .c-related_blogs_2__root .c-related_blogs_2__heading {
    font-size: 23px; /* source "Related blogs" ink 124x21 @375 (section-header height 26) */
    line-height: 26px; /* source section-header height 26 @375 */
  }
  .c-related_blogs_2__root .c-related_blogs_2__card {
    flex: 0 0 340px; /* source grid track 340px @375; single card ~fills the 343px column, rest clipped */
  }
  .c-related_blogs_2__root .c-related_blogs_2__card-wrap {
    margin-bottom: 32px; /* source .mb-52px margin-bottom 32px @375; no --space-32 token */
  }
  .c-related_blogs_2__root .c-related_blogs_2__cta-row {
    flex-direction: column; /* source .row.justify---center flex-direction column @375 */
    align-items: center; /* source alignItems center @375 */
  }
  .c-related_blogs_2__root .c-related_blogs_2__cta {
    text-align: left; /* source .button-link textAlign left @375 */
  }
}