/* sd-guide.css – Samisk Design o Material, Körning 3: guider + guidehubb. Laddas EFTER sd-komponenter.css och
   sd-komponenter-k2.css, bara på /guider/ och /guider/<slug>/. Kopieras ordagrant – ändra inte klassnamn, mått eller regler. */

/* hero utan bild */
.sd-h1s--guide .sd-h1s__grid{grid-template-columns:minmax(0,1fr);max-width:calc(1000px + 2*var(--gutter));margin-inline:0;padding-left:max(var(--gutter),calc((100vw - var(--container))/2))}
.sd-h1s--guide .sd-h1{font-size:clamp(34px,4vw,60px);max-width:22ch}
.sd-h1s--guide .sd-lead{max-width:62ch}
.sd-g__by{font:600 13px/1.5 var(--f-head);color:var(--fjall-ink);opacity:.9}
.sd-g__by time{white-space:nowrap}

/* artikel: innehållsförteckning + läskolumn */
.sd-g{background:var(--snow)}
.sd-g__grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,760px);gap:clamp(32px,5vw,80px);align-items:start}
.sd-g__toc{position:sticky;top:112px;align-self:start}
.sd-g__toc details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.sd-g__toc summary{font:700 12px/1.2 var(--f-head);letter-spacing:.18em;text-transform:uppercase;color:var(--red);cursor:pointer;list-style:none}
.sd-g__toc summary::-webkit-details-marker{display:none}
.sd-g__toc summary{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sd-g__toc summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.sd-g__toc details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.sd-g__toc ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:4px}
.sd-g__toc li{position:relative;padding-left:28px;counter-increment:toc}
.sd-g__toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:7px;font:700 11px var(--f-head);color:var(--mut)}
.sd-g__toc a{display:block;padding:5px 0;font:600 14px/1.35 var(--f-head);color:var(--fjall-d);transition:color .2s}
.sd-g__toc a:hover,.sd-g__toc a.is-on{color:var(--red)}
.sd-g__art{min-width:0;display:grid;gap:clamp(28px,3vw,40px)}
.sd-g__img{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--beige)}

/* brödtext – HTML ur guider.json */
.sd-g__body{color:var(--body);font:400 17px/1.75 var(--f-body)}
.sd-g__body>*+*{margin-top:1.05em}
.sd-g__body h2{font:700 clamp(24px,2.2vw,32px)/1.2 var(--f-head);color:var(--fjall-d);margin-top:1.9em;scroll-margin-top:112px;text-wrap:balance}
.sd-g__body h2:first-child{margin-top:0}
.sd-g__body h2::before{content:"";display:block;width:56px;height:8px;margin-bottom:14px;background:var(--band) repeat-x left center/auto 100%}
.sd-g__body h3{font:700 19px/1.3 var(--f-head);color:var(--fjall-d);margin-top:1.5em}
.sd-g__body a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sd-g__body a:hover{color:var(--red-d);text-decoration-thickness:2px}
.sd-g__body strong{color:var(--ink)}
.sd-g__body ul,.sd-g__body ol{padding:0;list-style:none;display:grid;gap:.5em}
.sd-g__body li{position:relative;padding-left:30px}
.sd-g__body ul>li::before{content:"";position:absolute;left:6px;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--yellow);transform:rotate(45deg)}
.sd-g__body ol{counter-reset:li}
.sd-g__body ol>li{counter-increment:li}
.sd-g__body ol>li::before{content:counter(li);position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;background:var(--fjall-d);color:#fff;font:700 12px/22px var(--f-head);text-align:center}
.sd-g__tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff}
.sd-g__tbl table{width:100%;min-width:560px;border-collapse:collapse;font:400 15px/1.5 var(--f-body)}
.sd-g__tbl th{background:var(--fjall-d);color:#fff;font:700 13px/1.3 var(--f-head);text-align:left;padding:12px 14px;white-space:nowrap}
.sd-g__tbl td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;color:var(--body)}
.sd-g__tbl tbody tr:nth-child(even) td{background:var(--snow)}
.sd-g__tbl td:first-child{font-weight:700;color:var(--fjall-d)}

/* CTA-ruta (mitt i och sist) */
.sd-g__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;padding:26px 28px;border-radius:12px;background:var(--fjall-d);color:#fff;position:relative;overflow:hidden;margin:1.6em 0}
.sd-g__cta .sd-band--s{position:absolute;left:0;top:0;width:100%;height:8px}
.sd-g__cta b{display:block;font:700 20px/1.25 var(--f-head);color:var(--yellow)}
.sd-g__cta p{margin-top:6px;color:var(--fjall-ink);font:400 15px/1.55 var(--f-body)}
.sd-g__cta .sd-btns{flex-wrap:nowrap}
.sd-g__cta .sd-btn--line{color:#fff}
.sd-g__cta .sd-btn--line:hover{color:var(--fjall-d);background:#fff}
.sd-g__body .sd-g__cta a{color:inherit;text-decoration:none;font-weight:inherit}

/* källor */
.sd-g__src{border-top:1px solid var(--line);padding-top:24px}
.sd-g__src h2{font:700 12px/1.2 var(--f-head);letter-spacing:.18em;text-transform:uppercase;color:var(--red);scroll-margin-top:112px}
.sd-g__src ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:src;display:grid;gap:10px}
.sd-g__src li{position:relative;padding-left:28px;counter-increment:src;font:400 14px/1.5 var(--f-body);color:var(--body)}
.sd-g__src li::before{content:counter(src) ".";position:absolute;left:0;top:0;font:700 13px var(--f-head);color:var(--mut)}
.sd-g__src a{color:var(--fjall-d);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.sd-g__src small{color:var(--mut);white-space:nowrap}

/* tjänstesidan: länk till guiden */
.sd-g__mer{margin-top:18px;font:600 15px var(--f-head)}
.sd-g__mer a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

@media (max-width:1000px){
  .sd-g__grid{grid-template-columns:minmax(0,1fr)}
  .sd-g__toc{position:static}
  .sd-g__toc details:not([open]) ol{display:none}
}
@media (max-width:760px){
  .sd-h1s--guide .sd-h1s__grid{padding-left:var(--gutter)}
  .sd-g__body{font-size:16px}
  .sd-g__cta{grid-template-columns:1fr;padding:24px 20px}
  .sd-g__cta .sd-btns{flex-wrap:wrap}
}