/* Ready-to-play card — sits at the top of the sticky sidebar */

.ccs-rev-cta {
  background: var(--ccs-primary-container);
  color: #fff;
  padding: 28px;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-lg);
  text-align: center;
}
.ccs-rev-cta__title {
  font-family: var(--ccs-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px 0;
}
.ccs-rev-cta__body {
  font-family: var(--ccs-font-display);
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 20px 0;
}
.ccs-rev-cta__btn {
  display: inline-block;
  width: 100%;
  background: var(--ccs-secondary-container);
  color: var(--ccs-on-secondary-container);
  padding: 14px 24px;
  border: none;
  border-radius: var(--ccs-radius-full);
  font-family: var(--ccs-font-display);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.ccs-rev-cta__btn:hover { filter: brightness(1.05); transform: scale(1.02); }
.ccs-rev-cta__btn:active { transform: scale(0.98); }

/* ---- Two-column layout: editorial (8) + sticky sidebar (4) ----
   Grid items stretch by default (align-items not overridden) so the sidebar
   column matches the editorial's height. The sticky child can then track the
   user's scroll within that taller parent, releasing when the editorial ends. */
.ccs-rev-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ccs-gutter);
}
@media (min-width: 1024px) {
  .ccs-rev-body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

.ccs-rev-body__sidebar {
  display: contents; /* on mobile, __sticky becomes the grid item directly */
}
@media (min-width: 1024px) {
  /* On desktop the sidebar IS the grid item — and crucially it stretches to
     the row height (the editorial's height) so the sticky child has room to
     follow as you scroll. */
  .ccs-rev-body__sidebar { display: block; }
}

.ccs-rev-body__sticky {
  display: flex;
  flex-direction: column;
  gap: 20px;
}