/* cbc-showcase.css (v1606) - rolling "learn, buy, earn" card rows on the free /tools/ pages. Drawn by
   assets/js/cbc-showcase.js from /api/showcase.php; the static links inside the slot are the no-script / no-data
   fallback. CBC blue theme, motion that pauses on hover or keyboard focus, and none at all for reduced motion. */
.cbs{max-width:1200px;margin:36px auto;padding:0 16px;font-family:Inter,"Space Grotesk","Segoe UI",Arial,sans-serif;box-sizing:border-box;color:#0b2a4a}
.cbs *{box-sizing:border-box}
.cbs-hero{position:relative;overflow:hidden;border-radius:24px;padding:28px 24px;background:linear-gradient(120deg,#0D47A1 0%,#1E88E5 48%,#7C3AED 100%);color:#fff;box-shadow:0 24px 50px -30px rgba(13,71,161,.7)}
.cbs-hero:before,.cbs-hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.cbs-hero:before{width:300px;height:300px;right:-90px;top:-140px;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);animation:cbsFloat 9s ease-in-out infinite}
.cbs-hero:after{width:220px;height:220px;left:-70px;bottom:-120px;background:radial-gradient(circle,rgba(0,172,193,.45),transparent 70%);animation:cbsFloat 11s ease-in-out infinite reverse}
.cbs-kick{position:relative;display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;margin:0 0 12px}
.cbs-hero h2{position:relative;margin:0 0 8px;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(22px,3.2vw,32px);line-height:1.15;font-weight:800;letter-spacing:-.01em;color:#fff}
.cbs-hero p{position:relative;margin:0;max-width:720px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.92)}
.cbs-cta{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cbs-cta a{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;text-decoration:none;border-radius:999px;padding:11px 18px;transition:transform .15s,box-shadow .15s}
.cbs-cta a:hover{transform:translateY(-2px)}
.cbs-cta .p{background:#fff;color:#0D47A1;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.cbs-cta .s{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45)}
.cbs-row{margin:26px 0 0}
.cbs-rh{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.cbs-rh h3{margin:0;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(17px,2.2vw,21px);font-weight:800;color:#0b2a4a}
.cbs-rh p{margin:2px 0 0;font-size:13.5px;color:#5a6b7b}
.cbs-rh a{margin-left:auto;font-weight:800;font-size:13.5px;color:#0D47A1;text-decoration:none;white-space:nowrap}
.cbs-rh a:hover{text-decoration:underline}
.cbs-mq{position:relative;overflow:hidden;padding:6px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.cbs-track{display:flex;gap:14px;width:max-content;animation:cbsMarq var(--cbs-dur,60s) linear infinite}
.cbs-row.rev .cbs-track{animation-direction:reverse}
.cbs-mq:hover .cbs-track,.cbs-mq:focus-within .cbs-track{animation-play-state:paused}
.cbs-row.few .cbs-track{animation:none}
.cbs-row.few .cbs-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.cbs-card{flex:none;width:240px;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #e3edf8;text-decoration:none;color:#0b2a4a;box-shadow:0 12px 28px -22px rgba(13,71,161,.6);transition:transform .2s,box-shadow .2s}
.cbs-card:hover,.cbs-card:focus{transform:translateY(-4px);box-shadow:0 20px 36px -20px rgba(13,71,161,.6);outline:none}
.cbs-card:focus-visible{outline:3px solid #1E88E5;outline-offset:2px}
.cbs-cov{position:relative;height:112px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--a,#1E88E5),var(--b,#7C3AED));background-size:200% 200%;animation:cbsShift 10s ease infinite}
.cbs-cov img{width:100%;height:100%;object-fit:cover;display:block}
.cbs-cov .e{font-size:40px;line-height:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));animation:cbsBob 3.4s ease-in-out infinite}
.cbs-cov .av{width:74px;height:74px;border-radius:50%;border:3px solid rgba(255,255,255,.85);object-fit:cover;background:#fff;display:grid;place-items:center;font-weight:800;font-size:26px;color:#0D47A1;box-shadow:0 10px 22px -10px rgba(0,0,0,.45)}
.cbs-cov:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14);right:-34px;top:-44px}
.cbs-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cbs-tag{align-self:flex-start;font-size:11px;font-weight:800;color:#0D47A1;background:#E3F2FD;border-radius:999px;padding:3px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbs-t{font-weight:800;font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cbs-s{font-size:12.5px;line-height:1.45;color:#5a6b7b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cbs-f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;font-size:13px}
.cbs-f b{font-family:"Space Grotesk",Inter,sans-serif;font-size:15px;color:#0b2a4a}
.cbs-f small{font-weight:500;color:#5a6b7b;font-size:11px}
.cbs-go{font-weight:800;color:#1E88E5;white-space:nowrap}
.cbs-fallback{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cbs-fallback a{display:inline-block;padding:8px 14px;border:1px solid #d5e2f0;border-radius:999px;background:#fff;color:#0D47A1;text-decoration:none;font-size:13.5px;font-weight:700}
.cbs-fallback a:hover{background:#0D47A1;color:#fff;border-color:#0D47A1}
@keyframes cbsMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cbsFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,12px)}}
@keyframes cbsShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cbsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:600px){.cbs{padding:0 16px}.cbs-hero{padding:22px 18px;border-radius:20px}.cbs-card{width:210px}.cbs-rh a{margin-left:0}}
@media (prefers-reduced-motion:reduce){
  .cbs-track,.cbs-cov,.cbs-cov .e,.cbs-hero:before,.cbs-hero:after{animation:none}
  .cbs-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .cbs-track .cbs-dup{display:none}
}