/* cs_next_items.css — "Next case study" bottom-of-page nav band (/work/*).
   Values from spec ## Computed Styles: 1440 = base; 768 -> @media(max-width:991px);
   375 -> @media(max-width:479px). Run breakpoint set {479,767,991,1919}.
   Card internals (title + client logo) sit below the depth-5 capture cutoff and
   are calibrated from the frozen Phase-A crop (source/screenshots/work_post).
   Typography via var(--font-*) (framework-11 E1 lock; source 'Plus Jakarta Sans'
   resolves through the frozen tokens). Every selector is scoped under the
   component root .c-cs_next_items__cta-wrap-2 so shared canonicals owned by
   siblings (c-cs_banner__py-96px, c-about_info__heading-wrap / -7,
   c-all_blogs__mb-20) never leak (rule 9). Registry bbox is full-width (x=0):
   the section renders edge-to-edge with the 96px/40px padding INSIDE it. */

/* ---------------- Section root (source: section.section_cs-next-items.py-96px) */
.c-cs_next_items__cta-wrap-2 {
  display: block;
  box-sizing: border-box;
  padding: 96px var(--space-40);          /* source padding 96px 40px @1440; no --space-96 token */
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);       /* 16px */
  font-weight: var(--font-weight-body);   /* 400 */
  line-height: var(--line-height-body);   /* 24px */
  color: var(--color-text-primary);       /* rgb(51,51,51) */
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-cs_next_items__cta-wrap-2 {
  margin: 0;
  width: 100%;
}

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

/* ---------------- Heading row (source: div.row.justify---center) ------------- */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__heading-row {
  display: flex;
  justify-content: center;   /* source justifyContent center @1440 */
  align-items: flex-start;
  gap: var(--space-40);      /* source gap 40px @1440 */
  width: 100%;
}

/* ---------------- Heading label (source: div.heading-2-medium.mb-20) --------- */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__heading-2-medium {
  display: block;
  margin: 0 0 var(--space-20);          /* source margin 0 0 20px */
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);       /* 20px @1440 */
  font-weight: 500;                     /* source heading-2-medium weight (base---medium step) */
  line-height: var(--line-height-h3);   /* 26px @1440 */
  text-align: left;
  color: var(--color-text-secondary);   /* rgb(115,115,115) */
}

/* ---------------- Visible card placeholder (source: div.next-case-study-placeholder) */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__placeholder {
  display: block;
  width: 100%;
}

/* ---------------- Item wrapper (source: div.justify---center.w-dyn-item) ------ */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__item {
  display: flex;
  justify-content: center;   /* source justifyContent center — centres the 1200 anchor */
  width: 100%;
}

/* ---------------- Card anchor (source: a.next-casestudy-item) ----------------- */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__card-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;               /* source anchor width 1200 @1440 (centred by the item wrapper) */
  min-height: 324px;               /* source anchor height 324 @1440 (= cover height; cover fills it) */
  color: var(--color-text-dark);   /* rgb(18,18,18) */
  text-decoration: none;
}

/* ---------------- Image / text columns (source: div.max-width-432 x2) -------- */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__col {
  display: block;
  flex: 0 1 432px;           /* source width 432 @1440, shrinks to ~329 @768 */
  max-width: 432px;
  min-width: 0;              /* flex safety: no track inflation from image intrinsic width */
}
/* Cover column: aspect-ratio 432:324 reproduces every recorded cover height
   (324 @1440 / 246.56 @768 / 251.25 @375 = width * 324/432). */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__col--cover {
  aspect-ratio: 432 / 324;
  overflow: hidden;
}
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- Decorative vertical divider (source: wrapper.next-project-divider) */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__next-project-divider {
  display: block;
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;       /* source height = full card height (324px @1440) */
  margin: 0 var(--space-15); /* source margin 0 15px */
  background-color: rgb(217, 217, 217);   /* source divider line; no matching token */
}

/* ---------------- Case-study title (second max-width-432, top) --------------- */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 30px;               /* crop-calibrated (below capture depth cap) */
  font-weight: 500;
  line-height: 38px;
  letter-spacing: -0.4px;
  color: var(--color-text-dark);  /* rgb(18,18,18) */
}

/* ---------------- Client logo (source: img.brand-40, below the title) -------- */
.c-cs_next_items__cta-wrap-2 .c-cs_next_items__logo {
  display: block;
  height: 40px;              /* brand-40: client logo lockup ~40px tall */
  width: auto;
  max-width: 100%;
  margin-top: var(--space-24);   /* crop: title -> logo gap */
  object-fit: contain;
  object-position: left center;
}

/* ============================ Tablet: 768 (@media max-width:991px) ========== */
@media (max-width: 991px) {
  .c-cs_next_items__cta-wrap-2 {
    padding: var(--space-64) var(--space-40);   /* source 64px 40px @768 */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__heading-row {
    gap: var(--space-10);                        /* source gap 10px @768 */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__heading-2-medium {
    font-size: var(--font-size-h3-md);           /* 18px @768 */
    line-height: var(--line-height-h3-md);       /* 24px @768 */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__card-link {
    min-height: 300px;                           /* source anchor height 300 @768 (centres the 246px cover) */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__col {
    flex: 0 1 328.75px;                          /* source 328.75px @768 */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__title {
    font-size: 24px;                             /* crop-calibrated tablet step (source 3-line wrap) */
    line-height: 31px;
    letter-spacing: -0.5px;
  }
}

/* ============================ Mobile: 375 (@media max-width:479px) ========== */
@media (max-width: 479px) {
  .c-cs_next_items__cta-wrap-2 {
    padding: var(--space-64) var(--space-20);    /* source 64px 20px @375 */
  }
  /* heading row stacks (source flexDirection column, alignItems center) */
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__heading-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);                        /* source gap 20px @375 */
  }
  /* card stacks: image on top, text below; divider removed */
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__card-link {
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);                        /* source gap 20px @375 */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;                             /* source col width 335 (full) @375 */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__next-project-divider {
    display: none;                               /* source display:none @375 */
  }
  .c-cs_next_items__cta-wrap-2 .c-cs_next_items__title {
    font-size: 22px;                             /* crop-calibrated mobile step */
    line-height: 28px;
  }
}