/**
 * Work-product CTA — the single, strong call-to-action that sends a Project
 * Update reviewer to that update's one work product.
 *
 * SCOPE: these styles apply ONLY to the dedicated .work-product-cta class used
 * in the right-rail / Proposed Training Placement card. They intentionally do
 * NOT restyle .related-link globally, so ordinary related links elsewhere keep
 * their plain appearance. One strong CTA per Project Update page, in the right
 * rail — never duplicated inside Step 2.
 */
.work-product-cta {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 2px solid #17233b;
  border-radius: 18px;
  background: linear-gradient(135deg, #17233b, #2a4e7d);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(23, 35, 59, .18);
  transition: transform .15s ease, border-color .15s ease;
}

.work-product-cta-kicker {
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.work-product-cta-title {
  display: block;
  color: #fff;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.15;
}

.work-product-cta-note {
  display: block;
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
}

.work-product-cta-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  border-radius: 50%;
  background: #fff;
  color: #17233b;
  font-size: 1.1rem;
}

.work-product-cta:hover {
  transform: translateY(-1px);
  border-color: #2a4e7d;
  color: #fff;
}