/* related_blogs.css — Related-blogs content band.
   Values from the spec ## Computed Styles (representative /accessibility,
   compact Variant A @ 1440 / 768 / 375); the card internals (fade_up_card
   shared child) sit below the capture depth cap and are calibrated from the
   frozen Phase-A crop (source/screenshots/accessibility_index).
   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 the component root so the shared canonical
   wrappers (padding-global / container-large / row / section-header / margin-*,
   owned by about_info / accordion / all_blogs / careers_jointeam) never 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__section-related-blogs {
  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 (a width:100% root would
     defeat this and leak the body margin at narrow viewports). */
  margin: -8px;
}
.region-content .c-related_blogs__section-related-blogs {
  margin: 0;
  width: 100%;
}

/* ---- Overflow clip wrapper (source .overflow-hidden) --------------------- */
.c-related_blogs__section-related-blogs .c-related_blogs__overflow {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* ---- Outer padding wrapper (padding-global + padding-section-*) ---------- */
.c-related_blogs__section-related-blogs .c-related_blogs__pad {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.c-related_blogs__section-related-blogs .c-related_blogs__pad--medium {
  padding: 96px var(--space-40); /* source 96px 40px @1440; no --space-96 token */
}
.c-related_blogs__section-related-blogs .c-related_blogs__pad--small {
  padding: var(--space-64) var(--space-40); /* source 64px 40px @1440 (full variant) */
}

/* ---- Content container (container-large) --------------------------------- */
.c-related_blogs__section-related-blogs .c-related_blogs__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;
}

/* ============================ Compact header (Variant A) =================== */
/* .row.d-none — flex at 1440/768, display:none at 375 (source d-none flips only on mobile) */
.c-related_blogs__section-related-blogs .c-related_blogs__heading-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__section-related-blogs .c-related_blogs__section-header {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-64); /* source .mb-4 margin-bottom 64px @1440 (drives the 112px row height) */
}
.c-related_blogs__section-related-blogs .c-related_blogs__heading {
  display: block;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 44px; /* source section heading @1440 (below capture cap; crop-calibrated to the 240px "Related Blogs" ink width) */
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.5px;
  color: var(--color-text-primary); /* source rgb(51,51,51) */
}

/* ============================ Full header (Variant B) ===================== */
/* Not pixel-gated (the E preview renders the compact _default); built from spec. */
.c-related_blogs__section-related-blogs .c-related_blogs__team-header {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-40);
}
.c-related_blogs__section-related-blogs .c-related_blogs__team-links {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-24);
  width: 100%;
}
.c-related_blogs__section-related-blogs .c-related_blogs__eyebrow {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3); /* eyebrow "From the team" — h2 element, small display size */
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  color: var(--color-text-primary);
}
.c-related_blogs__section-related-blogs .c-related_blogs__team-more {
  font-family: var(--font-family-body);
  font-size: var(--font-size-a);
  font-weight: 600;
  color: var(--color-text-dark); /* source rgb(18,18,18) */
  text-decoration: underline;
  white-space: nowrap;
}
/* Visually-hidden band heading (source class "hide") */
.c-related_blogs__section-related-blogs .c-related_blogs__hidden-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================ Card row ==================================== */
.c-related_blogs__section-related-blogs .c-related_blogs__card-wrap {
  display: block;
  width: 100%;
  margin-bottom: var(--space-64); /* source .margin-xlarge — gap to the bottom CTA */
}
.c-related_blogs__section-related-blogs .c-related_blogs__card-list {
  display: block;
  width: 100%;
  /* Neutralize the c-careers_jointeam__width-full empty-collection gray
     placeholder (rgb(221,221,221)) that leaks in via the shared class — this
     list has real cards, and with fewer than 3 the gray showed through the
     unused column as a phantom empty card. */
  min-height: 0;
  background-color: transparent;
}
/* The inner Webflow .w-dyn-items grid (below depth-5 cap): a fixed-width flex
   row clipped by the outer .overflow-hidden — 3 cards fit at 1440, 2 at 768,
   1 at 375, the rest clipped. */
.c-related_blogs__section-related-blogs .c-related_blogs__card-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-40); /* source inter-card gap ~40px @1440/768 */
  width: 100%;
  overflow: hidden;
}
.c-related_blogs__section-related-blogs .c-related_blogs__card {
  flex: 0 0 calc((100% - 2 * var(--space-40)) / 3); /* 3 cards + 2 gaps fill the 1280 container */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.c-related_blogs__section-related-blogs .c-related_blogs__card-media {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1; /* crop-calibrated card thumbnail frame (arcs fill a 2:1 box at every viewport); no border-radius in capture */
  overflow: hidden;
  background-color: var(--color-bg-neutral); /* placeholder tone while the thumbnail loads */
}
.c-related_blogs__section-related-blogs .c-related_blogs__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-related_blogs__section-related-blogs .c-related_blogs__card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24); /* inter-tag gap */
  margin-top: 18px; /* crop: card arcs -> tag row (~26px gap incl line-box); no --space-18 token */
}
.c-related_blogs__section-related-blogs .c-related_blogs__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__section-related-blogs .c-related_blogs__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, 2 lines); fade_up_card owns exact ramp */
  font-weight: 500;
  line-height: 25px; /* crop: title line spacing ~25px */
  color: var(--color-text-dark); /* source rgb(18,18,18) */
}
.c-related_blogs__section-related-blogs .c-related_blogs__card-title-link {
  color: inherit;
  text-decoration: none;
}

/* ---- Category-chip strip (Variant B only) -------------------------------- */
.c-related_blogs__section-related-blogs .c-related_blogs__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-24);
}
.c-related_blogs__section-related-blogs .c-related_blogs__chip {
  display: inline-block;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-bg-alt2); /* source rgb(229,229,229) */
  border-radius: var(--radius-31);
  font-family: var(--font-family-body);
  font-size: var(--font-size-a-sm); /* ~14px pill label */
  font-weight: 500;
  color: var(--color-text-dark);
  text-decoration: none;
}

/* ---- Bottom CTA (Variant A) ---------------------------------------------- */
.c-related_blogs__section-related-blogs .c-related_blogs__cta-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.c-related_blogs__section-related-blogs .c-related_blogs__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__section-related-blogs .c-related_blogs__pad--medium {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__pad--small {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 (full variant) */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__heading-row {
    gap: var(--space-10); /* source .row gap 10px @768 */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__section-header {
    margin: 0 0 var(--space-40); /* source heading row -> cards ~40px @768 (row height 80 -> image top 144) */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__heading {
    font-size: 36px; /* source section heading @768 (crop-calibrated to the 188px ink width) */
    line-height: 40px;
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__card-grid {
    gap: var(--space-24); /* source inter-card gap ~24px @768 */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__card {
    flex: 0 0 calc((100% - var(--space-24)) / 2); /* 2 cards + 1 gap; 3rd card clipped */
  }
  /* Card title shrinks on tablet/mobile so it wraps in 2 lines like the source
     (fade_up_card owns the exact ramp; crop-calibrated ~18px). Applies to 375 too
     (<=479 also matches this <=991 query). */
  .c-related_blogs__section-related-blogs .c-related_blogs__card-title {
    font-size: 17px; /* crop-calibrated so line 1 wraps after "…Experience" like the source */
    line-height: 23px;
  }
}

/* ============================ 375 (@media max-width:479px) ================= */
@media (max-width: 479px) {
  .c-related_blogs__section-related-blogs .c-related_blogs__pad--medium {
    padding: 48px var(--space-16); /* source 48px 16px @375; no --space-48 token */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__pad--small {
    padding: 32px var(--space-16); /* source 32px 16px @375 (full variant); no --space-32 token */
  }
  /* Compact section-header row hidden at 375 (source .d-none display:none) */
  .c-related_blogs__section-related-blogs .c-related_blogs__heading-row {
    display: none;
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__card {
    flex: 0 0 100%; /* single card fills the column; later cards clipped */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__card-wrap {
    margin-bottom: 52px; /* source card block -> CTA gap ~63px @375 (incl CTA line-box); no --space-52 token */
  }
  .c-related_blogs__section-related-blogs .c-related_blogs__cta {
    text-align: left; /* source .button-link textAlign left @375 */
  }
}