/* ===============================
   Related Cards — New Design (no excerpt, overlay link)
   =============================== */

/* Card container */
.rci-card {
  background-color: #F7F7F7;
  border-radius: 24px;        /* per your note */
  min-height: 80px;
  width: 100%;
  display: flex;
  align-items: stretch;       /* image column fills card height */
  overflow: hidden;
  text-align: left;
  position: relative;         /* for overlay anchor */
}

/* FULL-CARD OVERLAY LINK */
.rci-card__overlay {
  position: absolute;
  inset: 0;                   /* top/right/bottom/left: 0 */
  z-index: 5;
  display: block;
  text-decoration: none;
  background: transparent;
}
.rci-card__overlay:focus-visible {
  outline: 3px solid #0089FF;
  outline-offset: -3px;
}
.rci-card:hover {
  box-shadow: 0 6px 18px rgba(0,137,255,0.25);
  transform: translateY(-2px);
  transition: all .2s ease;
}

/* Columns keep 57% / 43% at all breakpoints */
.rci-left  { flex: 0 0 57%; display: flex; align-items: center; }
.rci-right { flex: 0 0 43%; display: flex; align-items: stretch; padding: 0; }

/* Right image fills full card height */
.rci-right .rci-image-link,
.rci-right img,
.rci-img-placeholder {
  width: 100%;
  height: 100%;          /* fill the entire card height */
  min-height: 100%;         /* ensure it never shrinks below container */
  object-fit: cover;
  object-fit: cover;
  display: block;
}

/* Left inner: (1) texts: caption+title, (2) button) */
.rci-left-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;             /* space between texts and button */
}

/* Texts group */
.rci-texts {
  display: flex;
  flex-direction: column;
  gap: 8px;              /* RELATED ↔ Title */
}

/* Button (visual only; overlay captures click) */
.rci-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;             /* text ↔ icon */
  width: 138px;
  background-color: #0089FF;
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 42.24px;
  transition: transform .08s ease, box-shadow .2s ease, opacity .15s ease;
  pointer-events: none;  /* ensures clicking goes to overlay link */
}
.rci-card:hover .rci-button { opacity: .98; transform: translateY(-1px); }
.rci-arrow path { fill: #FFFFFF; }

/* Prevent underlines just in case */
.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: 48px;
}

/* ===============================
   Desktop (default ≥ 1025px)
   =============================== */
.rci-left  { padding: 32px 62px 32px 59px; }
.rci-right { padding: 0; }

/* "RELATED" */
.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: 16px;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000000;
}

/* Title */
.rci-title {
  margin: 0;
  font-family: "Neue Plak", Impact, "Arial Black", Arial, sans-serif;
  font-weight: 900; /* ExtraBlack approximation */
  font-style: normal;
  font-size: 18px;
  line-height: 99%;
  letter-spacing: 0;
  color: #000000;
  margin-bottom: 10px;
}

/* Button padding & font */
.rci-button {
/*   padding: 16px 32px;
  border-radius: 42.24px; */
  font-size: 16px;
  padding: 10px 24px;
  border-radius: 24px;
}

/* ===============================
   Tablet (up to 1024px)
   =============================== */
@media (max-width: 1024px) {
  .rci-left  { padding: 10px 38px 10px 38px; }
  .rci-right { padding: 0; }

  .rci-caption { font-size: 16px; line-height: 120%; }
  .rci-title   { font-size: 18px; line-height: 120%; }
  .rci-button  { font-size: 16px; padding: 10px 24px; gap: 16px; border-radius: 24px; }
}

/* ===============================
   Mobile (up to 767px)
   =============================== */
@media (max-width: 767px) {
  .rci-left  { padding: 20px 10px 20px 20px; }
  .rci-right { padding: 0; }

  .rci-caption { font-size: 12px; line-height: 120%; }
  .rci-title   { font-size: 14px; line-height: 100%; margin-bottom: 5px;}
  .rci-button  { font-size: 14px; padding: 10px 16px; gap: 16px; border-radius: 24px; }
  .rci-right img {
    min-height: 100%;   /* still force fill */
    max-height: 100%;   /* avoid overflow */
  }
}