/* Cisco Learning Credits banner (Views/Course/_ClcBanner.cshtml). Port of clc-banner.html, scoped under .kclcb. */
.kclcb-wrap{padding:32px 16px;background:#f1f4f8}
.kclcb,.kclcb *{box-sizing:border-box}
.kclcb{--navy:#0a2540;--navy-deep:#061a2e;--cyan:#1fb6e8;--cyan-soft:#8fdcf5;--white:#fff;--text-soft:#b9cde0;
  max-width:1120px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:36px;padding:28px 40px;border-radius:16px;color:var(--white);position:relative;overflow:hidden;text-align:left;
  font-family:"Outfit","GTWalsheimPro","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(520px 220px at 8% 50%,rgba(31,182,232,.28),transparent 70%),linear-gradient(100deg,var(--navy-deep),var(--navy))}
.kclcb *{font-family:inherit}
/* subtle circuit-style lines on the right */
.kclcb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 28px);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000);mask-image:linear-gradient(90deg,transparent 40%,#000);pointer-events:none}
.kclcb>*{position:relative;z-index:1}

/* credit card visual */
.kclcb-card{width:132px;aspect-ratio:1.586;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#2cc4f2,#0b7fb8);box-shadow:0 14px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);transform:rotate(-6deg)}
.kclcb-chip{width:24px;height:18px;border-radius:4px;background:linear-gradient(135deg,#ffe9a8,#e0b44f)}
.kclcb-label{font-weight:700;font-size:22px;letter-spacing:.04em;line-height:1;color:#fff}
.kclcb-sub{font-size:9px;opacity:.85;letter-spacing:.02em;color:#fff}

/* copy */
.kclcb-h{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.2;max-width:22ch;color:#fff}
.kclcb-p{margin:8px 0 0;color:var(--text-soft);font-size:16px;line-height:1.5;max-width:52ch}
.kclcb-p strong{color:var(--white);font-weight:600}
.kclcb-inline{color:var(--cyan-soft) !important;text-decoration:underline;text-underline-offset:3px}
.kclcb-inline:hover{color:var(--white) !important}
.kclcb-inline:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:2px}

/* button */
.kclcb-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;background:var(--cyan);color:var(--navy-deep) !important;font-weight:600;font-size:16px;line-height:normal;text-decoration:none !important;white-space:nowrap;transition:background .15s,transform .15s}
.kclcb-cta:hover{background:var(--cyan-soft);transform:translateY(-1px)}
.kclcb-cta:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.kclcb-cta svg{width:18px;height:18px}

/* small desktop / large tablet: tighter 3-column row */
@media (max-width:1100px){
  .kclcb{gap:24px;padding:26px 28px}
  .kclcb-card{width:116px}
}
/* tablet: card + copy side by side, button under the copy */
@media (max-width:860px){
  .kclcb{grid-template-columns:auto 1fr;grid-template-areas:"card copy" "card cta";align-items:center;column-gap:28px;row-gap:16px;padding:26px 28px}
  .kclcb-card{grid-area:card;width:128px;transform:rotate(-5deg);align-self:center}
  .kclcb-copy{grid-area:copy}
  .kclcb-cta{grid-area:cta;justify-self:start}
  .kclcb-h{max-width:none;font-size:clamp(21px,3.4vw,26px)}
  .kclcb-p{max-width:none;font-size:15.5px}
}
/* phone: single column, centred card, full-width button */
@media (max-width:600px){
  .kclcb-wrap{padding:24px 16px}
  .kclcb{grid-template-columns:1fr;grid-template-areas:"card" "copy" "cta";justify-items:stretch;row-gap:18px;padding:24px 20px}
  .kclcb-card{width:112px;transform:rotate(-4deg);justify-self:start}
  .kclcb-h{font-size:21px}
  .kclcb-p{font-size:15px}
  .kclcb-cta{justify-self:stretch;width:100%}
}
@media (prefers-reduced-motion:reduce){.kclcb-cta{transition:none}}