/* ============================================================
   Kartio — blogg (bygger på ../styles.css)
   ============================================================ */
:root{ --blue:#0F766E; --cyan:#2DD4BF; }

/* ---------- Listing ---------- */
.bhero{padding:150px 0 10px}
.bhero h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.03em;margin-top:18px}
.bhero p{margin-top:16px;font-size:19px;color:var(--slate-600);max-width:640px}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:44px 0 110px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--slate-200);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--slate-300)}
.bcard__thumb{aspect-ratio:16/9;background:#E9EFF4;line-height:0}
.bcard__thumb svg{width:100%;height:100%;display:block}
.bcard__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard__tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.bcard h2{font-size:20px;line-height:1.28;letter-spacing:-.015em}
.bcard__body>p{font-size:14.5px;color:var(--slate-500);line-height:1.5}
.bcard__meta{margin-top:auto;padding-top:8px;font-size:13px;color:var(--slate-400)}

/* ---------- Artikkel ---------- */
.art{padding:150px 0 90px}
.art__head{max-width:760px;margin:0 auto}
.crumbs{font-size:13.5px;color:var(--slate-500)}
.crumbs a:hover{color:var(--navy)}
.crumbs span{margin:0 7px;color:var(--slate-300)}
.art h1{font-size:clamp(32px,4.2vw,48px);letter-spacing:-.03em;margin-top:18px;line-height:1.1}
.art__meta{margin-top:18px;display:flex;gap:8px;align-items:center;font-size:14px;color:var(--slate-500);flex-wrap:wrap}
.art__meta i.dot{width:4px;height:4px;border-radius:50%;background:var(--slate-300);display:inline-block}
.art__fig{max-width:760px;margin:34px auto 0;line-height:0}
.art__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--slate-200);display:block}
.art__body{max-width:760px;margin:38px auto 0;font-size:17.5px;line-height:1.7;color:var(--slate-700)}
.art__body>p.leadp{font-size:19.5px;color:var(--slate-600)}
.art__body h2{font-size:29px;margin:46px 0 14px;letter-spacing:-.02em;line-height:1.2}
.art__body h3{font-size:21px;margin:32px 0 10px}
.art__body p{margin:0 0 18px}
.art__body ul,.art__body ol{margin:0 0 18px;padding-left:24px}
.art__body li{margin-bottom:8px}
.art__body a{color:var(--blue);font-weight:500;text-decoration:underline;
  text-decoration-color:rgba(15,118,110,.35);text-underline-offset:2px}
.art__body a:hover{text-decoration-color:var(--blue)}

/* Pristabell */
.tblwrap{overflow-x:auto;margin:6px 0 24px}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.tbl th{text-align:left;background:var(--slate-50);color:var(--navy);font-weight:600;
  padding:11px 14px;border:1px solid var(--slate-200);white-space:nowrap}
.tbl td{padding:11px 14px;border:1px solid var(--slate-200);color:var(--slate-700)}
.tbl td.num{font-family:var(--mono);font-size:14.5px;white-space:nowrap}

/* Merknad / tipsboks */
.note{background:var(--slate-50);border:1px solid var(--slate-200);border-left:3px solid var(--blue);
  border-radius:10px;padding:16px 20px;font-size:15.5px;margin:0 0 24px;color:var(--slate-600)}
.note b{color:var(--navy)}

/* FAQ */
.faq h3{margin-top:26px}
.faq p{color:var(--slate-600)}

/* CTA-boks */
.cta-box{background:var(--navy);color:#fff;border-radius:var(--radius-lg);
  padding:40px 38px;margin:52px 0 8px}
.cta-box h2{color:#fff;margin:0 0 12px;font-size:27px;letter-spacing:-.02em}
.cta-box p{color:var(--slate-300);margin:0 0 24px;font-size:16.5px;line-height:1.6}
.cta-box .btn{text-decoration:none;color:#fff}

/* Videre lesning */
.more{border-top:1px solid var(--slate-150);margin-top:56px;padding-top:34px}
.more h2{font-size:22px;margin:0 0 18px}
.more ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.more a{font-weight:500}

/* ---------- Responsivt ---------- */
@media(max-width:1080px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .bhero{padding:112px 0 6px}
  .art{padding:112px 0 64px}
  .bgrid{grid-template-columns:1fr;margin:32px 0 72px}
  .art__body{font-size:16.5px}
  .art__body h2{font-size:24px}
  .art__body h3{font-size:19px}
  .cta-box{padding:28px 24px}
  .cta-box .btn{width:100%;justify-content:center}
}