/* Front-end banner styles for [cps_banner] */
.cps-banner{
  --cps-bg-color:#111827;
  --cps-text-color:#ffffff;
  --cps-btn-bg:#22c55e;
  --cps-btn-border:#16a34a;
  --cps-btn-text:#ffffff;
  --cps-btn-hover-bg:#16a34a;
  --cps-btn-hover-text:#ffffff;
  --cps-btn-size:14px;
  --cps-slogan-size:18px;
  --cps-bg-image:none;
  --cps-bg-overlay:0.35;

  --cps-mt:18px;
  --cps-mr:0px;
  --cps-mb:18px;
  --cps-ml:0px;

  --cps-pt:18px;
  --cps-pr:18px;
  --cps-pb:18px;
  --cps-pl:18px;

  --cps-font-family: inherit;

  --cps-img-w:56px;
  --cps-img-h:56px;
  --cps-img-bg: rgba(255,255,255,0.12);
  --cps-mobile-rel-img-w: 100%;

  position:relative;
  padding:var(--cps-pt) var(--cps-pr) var(--cps-pb) var(--cps-pl);
  border-radius:14px;
  margin:var(--cps-mt) var(--cps-mr) var(--cps-mb) var(--cps-ml);
  background-color:var(--cps-bg-color);
  background-image:
    linear-gradient(rgba(0,0,0,var(--cps-bg-overlay)), rgba(0,0,0,var(--cps-bg-overlay))),
    var(--cps-bg-image);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  font-family:var(--cps-font-family);
}

.cps-banner__row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}

.cps-banner__media{flex:0 0 auto;display:flex;align-items:center}
.cps-banner__img{
  display:block;
  width:var(--cps-img-w);
  height:var(--cps-img-h);
  max-width:100%;
  object-fit:contain;
  border-radius:10px;
  background:var(--cps-img-bg, rgba(255,255,255,0.12));
}

.cps-banner__content{flex:1 1 auto;min-width:0}
.cps-banner__text{
  color:var(--cps-text-color);
  font-size:var(--cps-slogan-size);
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.cps-banner__actions{flex:0 0 auto;margin-left:auto;display:flex;align-items:center}

.cps-banner__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:10px 16px;
  border-radius:999px;
  background:var(--cps-btn-bg);
  border:2px solid var(--cps-btn-border);
  color:var(--cps-btn-text);
  font-size:var(--cps-btn-size);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.cps-banner__btn:hover,.cps-banner__btn:focus-visible{background:var(--cps-btn-hover-bg);color:var(--cps-btn-hover-text);filter:none}
.cps-banner__btn:focus-visible,.cps-banner__titlelink:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Related banner ribbon (top-right corner) */
.cps-banner--related{
  --cps-rel-ribbon-c1:#ffce1f;
  --cps-rel-ribbon-c2:#fa575a;
  --cps-rel-ribbon-c3:#2b1b9a;
  --cps-rel-ribbon-width:140px;
  --cps-rel-ribbon-top:10px;
  --cps-rel-ribbon-right:10px;
  --cps-rel-ribbon-shadow-rgb:0, 0, 0;
  --cps-rel-ribbon-shadow-opacity:.24;
  --cps-rel-ribbon-shadow-x:0px;
  --cps-rel-ribbon-shadow-y:12px;
  --cps-rel-ribbon-shadow-blur:24px;
  --cps-rel-ribbon-shadow-spread:-2px;
  overflow:visible;
}

.cps-banner--related .cps-banner__ribbon{
  z-index:5;
  position:absolute;
  top:var(--cps-rel-ribbon-top);
  right:var(--cps-rel-ribbon-right);
  width:92px;
  height:92px;
  overflow:hidden;
  opacity:0.98;
  pointer-events:none;
}

/* Full corner ribbon line (covers from top edge to right edge) */
.cps-banner--related .cps-banner__ribbon:before{
  content:"";
  position:absolute;
  top:22px;
  right:-78px;
  width:var(--cps-rel-ribbon-width);
  height:30px;
  background:linear-gradient(90deg,var(--cps-rel-ribbon-c1),var(--cps-rel-ribbon-c2),var(--cps-rel-ribbon-c3));
  transform:rotate(45deg);
  box-shadow:
    var(--cps-rel-ribbon-shadow-x)
    var(--cps-rel-ribbon-shadow-y)
    var(--cps-rel-ribbon-shadow-blur)
    var(--cps-rel-ribbon-shadow-spread)
    rgba(var(--cps-rel-ribbon-shadow-rgb), var(--cps-rel-ribbon-shadow-opacity));
  border-radius:6px;
}

/* Mobile-friendly layout: image on top, text (20px), and full-width button */
@media (max-width: 600px){
  .cps-banner__row{
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:12px;
  }

  .cps-banner__media{width:100%;justify-content:center}

  .cps-banner--related .cps-banner__img{
    width: var(--cps-mobile-rel-img-w);
    height: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  .cps-banner__content{width:100%}
  .cps-banner__text{font-size:20px}

  .cps-banner__actions{width:100%;margin-left:0}
  .cps-banner__btn{width:100%;white-space:normal}
}
/* Related title link inherits banner text styles */
.cps-banner__titlelink{color:inherit;text-decoration:none;}
.cps-banner__titlelink:hover,.cps-banner__titlelink:focus-visible{text-decoration:underline;}