/* Studiekompass-bannern på innehållssidor och artiklar. Samma utseende som
   .dcta i css/utbildning-detalj.css och .dcta-wrap i css/yrken.css, som
   yrkes- och utbildningssidorna laddar. Fallbackvärdena gör filen
   fristående på sidor med egen :root. */
.dcta-wrap{max-width:760px;margin:0 auto;padding:0 24px 56px}
.dcta{margin-top:32px;border:1.5px solid var(--bo,#C5D8EB);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(20,50,80,.06);display:flex;text-decoration:none}
.dcta-body{flex:1;min-width:0;padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.dcta-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5BA882}
.dcta-h{margin:0;font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#0A0A0A}
.dcta-p{margin:0;font-size:.9rem;line-height:1.65;color:#3A3A36;max-width:380px}
.dcta-btn{margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#5BA882;color:#fff;font-weight:700;font-size:.9rem;padding:12px 22px;border-radius:10px;text-decoration:none;transition:background .15s,transform .12s}
.dcta-btn:hover{background:#2D6B4A;transform:translateY(-1px)}
.dcta-img{width:320px;flex-shrink:0;position:relative;background:#F4F8F5}
.dcta-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 32%,#000 68%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 32%,#000 68%)}
@media(max-width:760px){
  .dcta-wrap{padding:0 16px 48px}
  .dcta{flex-direction:column;margin-top:24px}
  .dcta-img{width:100%;height:130px}
  .dcta-img img{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
  .dcta-body{padding:22px 22px 26px}
  .dcta-btn{width:100%;justify-content:center}
}

/* Bannern inuti en textkolumn (t.ex. .seo-inner eller en artikel): kolumnen
   har redan egen sidmarginal, så bannerns egen tas bort. */
.sk-cta-inline{margin:36px 0}
.sk-cta-inline .dcta-wrap{max-width:none;padding:0}
.sk-cta-inline .dcta{margin-top:0}