/* related_works.css — Related-work content band.
   Values from the spec ## Computed Styles (representative / "Work" dynamic-list
   Variant A @ 1440 / 768 / 375); the card internals (w_dyn_item_2 shared child)
   sit below the capture depth cap and are calibrated from the frozen Phase-A
   crop (source/screenshots/home, related_works band y=1862 h=730 @1440).
   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 / headin-links / grid_col-3, owned by
   about_info / accordion / careers_cards) 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_works__section-related-works {
  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_works__section-related-works {
  margin: 0;
  width: 100%;
}

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

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

/* ============================ Heading row ================================= */
/* drupalorg-div — flex space-between: "Work" eyebrow <-> "All work" link */
.c-related_works__section-related-works .c-related_works__drupalorg-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  min-height: 60px; /* source drupalorg-div height 60px (all viewports) — keeps the
                       card grid at its true start offset instead of collapsing to the
                       eyebrow's line-height and pulling the whole band up */
  margin: 0 0 var(--space-20); /* source margin 0 0 20px */
}
.c-related_works__section-related-works .c-related_works__heading-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 60px; /* source headin-links height 60px */
}
.c-related_works__section-related-works .c-related_works__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 15px; /* source small eyebrow label (below cap; crop-calibrated ~15px) */
  font-weight: var(--font-weight-h3); /* 600 */
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-primary); /* source rgb(51,51,51) */
}
.c-related_works__section-related-works .c-related_works__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-accent); /* source red dot rgb(237,28,36) */
}
.c-related_works__section-related-works .c-related_works__more {
  font-family: var(--font-family-body);
  font-size: 15px; /* crop-calibrated "All work" link */
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-secondary); /* source rgb(115,115,115) */
  text-decoration: underline;
  white-space: nowrap;
}

/* ---- Curated-variant chrome (Variant B; not pixel-gated) ----------------- */
.c-related_works__section-related-works .c-related_works__spacer-largedesign {
  display: block;
  width: 100%;
  height: var(--space-40); /* decorative spacer above the heading row */
}
.c-related_works__section-related-works .c-related_works__clutch-custom {
  display: block;
  width: 59px; /* source width 59.125px */
  height: 50px; /* source height 50px @1440 */
  margin: var(--space-10) 0 0; /* source margin 10px 0 0 */
  flex: 0 0 auto;
}

/* ============================ Card grid ================================== */
.c-related_works__section-related-works .c-related_works__related-works {
  display: block;
  width: 100%;
}
.c-related_works__section-related-works .c-related_works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* source 400px 400px 400px */
  gap: 96px var(--space-40); /* source row 96px / col 40px @1440; no --space-96 token */
}
.c-related_works__section-related-works .c-related_works__grid > * {
  min-width: 0; /* grid-safety: no track inflation from intrinsic image width */
}
/* Curated Variant B grid uses a flat 40px gap on both axes (source div-work) */
.c-related_works__section-related-works .c-related_works__cta-wrap .c-related_works__grid {
  gap: var(--space-40);
}

.c-related_works__section-related-works .c-related_works__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.c-related_works__section-related-works .c-related_works__card-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.c-related_works__section-related-works .c-related_works__card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

/* ---- Cover media (rounded frame + overlaid industry pill) ---------------- */
.c-related_works__section-related-works .c-related_works__card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* crop: 400x300 cover frame at every viewport */
  border-radius: var(--radius-12);
  overflow: hidden;
  background-color: var(--color-bg-neutral); /* placeholder while the cover loads */
}
.c-related_works__section-related-works .c-related_works__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-related_works__section-related-works .c-related_works__card-eyebrow {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  padding: 6px 14px; /* crop-calibrated pill inset; no matching space tokens */
  border-radius: var(--radius-31);
  background-color: var(--color-bg-alt4-alpha-80); /* frosted light pill rgba(255,255,255,0.8) */
  font-family: var(--font-family-body);
  font-size: var(--font-size-a-sm); /* ~14px pill label */
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-primary); /* source rgb(51,51,51) */
}

/* ---- Client logo --------------------------------------------------------- */
.c-related_works__section-related-works .c-related_works__card-logo {
  display: block;
  height: 34px; /* crop: client logos ~28-40px tall; normalised */
  width: auto;
  max-width: 200px;
  margin-top: 28px; /* crop: cover -> logo gap ~28px */
  object-fit: contain;
  object-position: left center;
}

/* ---- Body excerpt (curated variant only) --------------------------------- */
.c-related_works__section-related-works .c-related_works__card-excerpt {
  margin: var(--space-16) 0 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-text-secondary); /* source rgb(115,115,115) */
}

/* ---- Heading link -------------------------------------------------------- */
.c-related_works__section-related-works .c-related_works__card-title {
  margin: 18px 0 0; /* crop: logo -> title gap ~18px; no --space-18 token */
  font-family: var(--font-family-display);
  font-size: 23px; /* crop-calibrated case-study title (~23px, up to 3 lines) */
  font-weight: 500;
  line-height: 27px; /* crop: title line spacing ~27px */
  letter-spacing: -0.2px;
  color: var(--color-text-dark); /* source rgb(18,18,18) */
}

/* ============================ 768 (@media max-width:991px) ================= */
@media (max-width: 991px) {
  .c-related_works__section-related-works .c-related_works__pad--medium {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 */
  }
  .c-related_works__section-related-works .c-related_works__pad--small {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 (curated) */
  }
  .c-related_works__section-related-works .c-related_works__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* source 324px 324px */
    gap: var(--space-64) var(--space-40); /* source row 64px / col 40px @768 */
  }
  .c-related_works__section-related-works .c-related_works__card-title {
    /* crop-calibrated: source uses one mobile type-ramp step below the 991
       breakpoint — ~18px on a ~24px line box at BOTH 768 and 375 (frozen crops:
       768 title lines y=479/503/528, 375 lines y=477/501/526). Card internals
       belong to the uncaptured w_dyn_item_2, so this is crop-calibrated, not a
       spec value. */
    font-size: 18px;
    line-height: 24px;
  }
}

/* ============================ 375 (@media max-width:479px) ================= */
@media (max-width: 479px) {
  .c-related_works__section-related-works .c-related_works__pad--medium {
    padding: 48px var(--space-16); /* source 48px 16px @375; no --space-48 token */
  }
  .c-related_works__section-related-works .c-related_works__pad--small {
    padding: 32px var(--space-16); /* source 32px 16px @375 (curated); no --space-32 token */
  }
  .c-related_works__section-related-works .c-related_works__related-works {
    display: flex;
    flex-direction: column;
    align-items: center; /* source .related-works alignItems center @375 */
  }
  .c-related_works__section-related-works .c-related_works__grid {
    grid-template-columns: minmax(0, 1fr); /* source single 343px column */
    gap: var(--space-64) var(--space-20); /* source row 64px / col 20px @375 */
    width: 100%;
  }
  /* card-title stays at the mobile 18px/24px inherited from the max-width:991
     band (source uses the same size at 768 and 375) */
}