/* ===============================
   Related Cards Injector — COMPLETE
   =============================== */

.rci-card {
  --rci-card-h: 500px;               /* desktop card height */
  width: 100%;
  max-width: 100%;
  height: var(--rci-card-h);         /* equal height desktop */
  margin: 40px auto;
  background: #fff;
  border: 1px solid #EDEDED;
  border-radius: 16px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.05);
  text-align: left;
}

/* Columns (845/950 split) */
.rci-left {
  flex: 0 0 47.06%;
  display: flex;
  align-items: flex-start;           /* top-align inner */
  justify-content: flex-start;       /* left-align */
  /* Height-based paddings: 89px top, 88.91px bottom of a 500px card */
  padding-top: calc(var(--rci-card-h) * 0.178);
  padding-bottom: calc(var(--rci-card-h) * 0.17782);
  padding-left: 0;
  padding-right: 0;
}

.rci-right {
  flex: 0 0 52.94%;
  display: flex;
  align-items: stretch;              /* stretch child to full column height */
  justify-content: flex-start;
  padding: 0;
  height: 100%;
}

/* Left inner → (texts, button) stacked with fixed gaps */
.rci-left-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;                         /* gap between texts and button */
  width: 67.34%;                     /* 569/845 */
  margin-left: 12.78%;               /* 108/845 */
}

/* Texts block (caption, title, excerpt) with 27px internal gaps */
.rci-texts {
  display: flex;
  flex-direction: column;
  gap: 27px;                         /* RELATED ↔ Title ↔ Excerpt */
  width: 100%;
}

/* Right image fills the full height — no top/bottom gaps */
.rci-right .rci-image-link,
.rci-right img,
.rci-img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  display: block;
}

/* ===== Typography (px sizes & exact colors) ===== */

.rci-caption {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;                  /* ExtraBold */
  font-style: normal;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000000;
}

.rci-title {
  margin: 0;
  font-family: "Neue Plak", Impact, "Arial Black", Arial, sans-serif;
  font-weight: 900;                  /* approximates Extra Black */
  font-style: normal;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
  /* no max-height — wraps naturally */
}
.rci-title-link { color: inherit; text-decoration: none; }

.rci-excerpt {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;                  /* Medium */
  font-style: normal;
  font-size: 24px;
  line-height: 140%;
  letter-spacing: -0.02em;           /* -2% */
  color: #000000;

  /* Clamp to 4 lines (multi-line ellipsis) */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Button ===== */
.rci-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;       /* align left */
  gap: 12px;
  width: 155px;
  height: 57px;
  padding: 12px 24px;
  border-radius: 30px;
  background-color: #0089FF;
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-decoration: none;
  border: 0;
  transition: transform .08s ease, box-shadow .2s ease, opacity .15s ease;
}
.rci-button:hover,
.rci-button:focus {
  transform: translateY(-2%);
  box-shadow: 0 6px 18px rgba(0,137,255,0.35);
  opacity: .98;
}
.rci-arrow path { fill: #FFFFFF; }

/* Utility — ensure no link underlines */
.rci-title-link,
.rci-button,
.rci-image-link { text-decoration: none; }

/* Placeholder if no image */
.rci-img-placeholder {
  background: #EEE;
  color: #AAA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}

/* =========================================
   Narrow desktop/tablet tweaks (<1280px)
   ========================================= */
@media (max-width: 1279px) and (min-width: 1200px) {
  .rci-caption { font-size: 18px; }   /* was 20px */
  .rci-title   { font-size: 34px; }   /* was 40px */
  .rci-excerpt { font-size: 20px; }   /* was 24px */
  .rci-button  { font-size: 22px; }   /* was 26px */
  .rci-title { margin: 0; line-height: 1.05; }
  .rci-excerpt { -webkit-line-clamp: 4; }
}

/* ===== Responsive (stacked layout) ===== */
@media (max-width: 1199px) {
  .rci-card { flex-direction: column; height: auto; }
  .rci-left, .rci-right { flex: 1 1 auto; padding: 0; }
  .rci-left-inner { margin: 24px; width: auto; gap: 20px; }
  .rci-texts { gap: 12px; }
  .rci-right .rci-image-link,
  .rci-right img,
  .rci-img-placeholder { width: 100%; height: auto; border-radius: 16px; }
  .rci-title { font-size: 30px; line-height: 1.05; }
  .rci-excerpt { font-size: 18px; -webkit-line-clamp: unset; }
  .rci-button { font-size: 20px; height: auto; padding: 12px 20px; border-radius: 25px; justify-content: center; }
}

/* Spacing around injected cards */
.rci-card + p,
p + .rci-card { margin-top: 28px; }