/* ── Offentliga guider (/guide) ─────────────────────────────────────────────
   Läsning utan inloggning, och det som drar folk hit från sök. Indexet och guiderna ska kännas som en
   tidning: färgytor per kategori, stor rubrik, en läsbar spalt. Ytorna är de mjuka (-soft) och bär
   --on-soft, aldrig --on-color, som blev 1,3:1 i mörkt läge. Färgad text direkt på papper eller kort är
   --*-ink. Färgen är dekor: kategorin står alltid utskriven. Ramen (sidhuvud, fot, .guide-wrap) delas
   med startsidan, priserna och Nytt. */

.guide-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: 820px; margin: 0 auto; padding: var(--space-4) var(--space-4) 0;
}
.guide-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.guide-nav { display: flex; gap: var(--space-4); font-weight: 600; }
.guide-nav a { color: var(--ink); text-underline-offset: 4px; }

.guide { display: block; padding: var(--space-6) var(--space-4) var(--space-8); outline: none; }
.guide-wrap { max-width: 720px; margin: 0 auto; }
.guide-wrap > * + * { margin-top: var(--space-6); }

.guide h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.1; color: var(--ink); overflow-wrap: break-word; }
.guide h2 { margin: var(--space-6) 0 0; font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); }
.guide-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink); }
.guide-lead a { color: var(--ink); text-decoration-thickness: 1.5px; }
.guide-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-small); color: var(--ink-2); }
.guide-crumbs a { color: var(--ink-2); }

.guide-foot {
  max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8);
  border-top: var(--bw-thin) solid var(--line-soft); color: var(--ink-2); font-size: var(--fs-small);
}
.guide-foot p { margin: 0 0 var(--space-2); }
.guide-foot a { color: var(--ink); margin-right: var(--space-4); }

/* Indexet och guiden är breda; sidhuvudet och foten följer med, annars stod märket mitt över en smal spalt. */
body:has(.gi) .guide-top, body:has(.gi) .guide-foot { max-width: 1180px; }
body:has(.gp) .guide-top, body:has(.gp) .guide-foot { max-width: 1280px; }

/* ── Kategoriernas färg ─────────────────────────────────────────────────── */
.gx-tomato { --tone: var(--tomato-soft); --tone-ink: var(--tomato-ink); --tone-strong: var(--tomato); }
.gx-sun    { --tone: var(--sun-soft);    --tone-ink: var(--sun-ink);    --tone-strong: var(--sun); }
.gx-sky    { --tone: var(--sky-soft);    --tone-ink: var(--sky-ink);    --tone-strong: var(--sky); }
.gx-mint   { --tone: var(--mint-soft);   --tone-ink: var(--mint-ink);   --tone-strong: var(--mint); }
.gx-lilac  { --tone: var(--lilac-soft);  --tone-ink: var(--lilac-ink);  --tone-strong: var(--lilac); }
/* Solens mjuka yta blir lerbrun i mörkt läge. Där tar de gula kategorierna himlen, som startsidans
   hjälte och översikten; texten på ytan är --on-soft som förut. */
:root[data-theme="dark"] .gx-sun { --tone: var(--sky-soft); --tone-ink: var(--sky-ink); --tone-strong: var(--sky); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-sun { --tone: var(--sky-soft); --tone-ink: var(--sky-ink); --tone-strong: var(--sky); }
}
/* Rosa har ingen -ink; ikonen tar bläcket i stället. */
.gx-pink   { --tone: var(--pink-soft);   --tone-ink: var(--on-soft);    --tone-strong: var(--pink); }

.gx-ikon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── Indexet ─────────────────────────────────────────────────────────────── */
.gi { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 64px); }

.gi-hero {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: end;
  padding: clamp(24px, 5vw, 64px); border-radius: var(--r-xl); background: var(--mint-soft); color: var(--on-soft);
}
.gi-hero-text { display: grid; gap: var(--space-4); min-width: 0; }
.gi-hero-text > * { margin: 0; }
.gi-hero .eyebrow { color: var(--on-soft); }
.guide .gi-hero h1 {
  font: 650 clamp(40px, 6.2vw, 80px)/1 var(--f-display); letter-spacing: -0.035em; color: var(--on-soft);
  text-wrap: balance; max-width: 16ch;
}
.gi-lead { font-size: 19px; line-height: 1.55; max-width: 48ch; }
.gi-fakta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); font-size: var(--fs-small); }
.gi-fakta li { display: grid; }
.gi-fakta b { font: 650 clamp(32px, 3.6vw, 44px)/1.05 var(--f-display); letter-spacing: -0.03em; }

.gi-hero-husse { display: grid; justify-items: end; gap: var(--space-3); }
.gi-hero-husse .bubble { margin: 0; max-width: 28ch; font-size: 16px; line-height: 1.4; }
.gi-husse .husse { transform-origin: 50% 100%; animation: start-hej 1.6s var(--ease) .5s 1 both; }

.gi-delar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(-1 * var(--space-4)); }
.gi-del {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 14px;
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-pill); background: var(--card);
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.gi-del .gx-ikon { color: var(--tone-ink); }
.gi-del-n { min-width: 26px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--tone); color: var(--on-soft); font-size: 13px; text-align: center; }
.gi-del:hover { background: var(--tone); color: var(--on-soft); transform: translateY(-2px); }
.gi-del:hover .gx-ikon { color: var(--on-soft); }
.gi-del:hover .gi-del-n { background: var(--card); color: var(--ink); }

.gi-grupp { display: grid; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.gi-grupp-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gi-grupp-ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tone); color: var(--tone-ink); }
.guide .gi-grupp h2 { margin: 0; font: 650 clamp(26px, 3vw, 34px)/1.1 var(--f-display); letter-spacing: -0.02em; scroll-margin-top: var(--space-6); }
.gi-grupp-n { color: var(--ink-2); font-size: var(--fs-small); }

/* ── Korten (indexet och Läs vidare) ────────────────────────────────────── */
.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.guide-cards > li { display: flex; }
.guide .guide-card {
  display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; overflow: hidden;
  text-decoration: none; color: var(--ink); border-radius: var(--r-l);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.guide-card-yta {
  position: relative; display: flex; align-items: center; height: 104px; padding: 0 22px; overflow: hidden;
  background: var(--tone); color: var(--tone-ink);
}
/* Två cirklar i kategorins starka färg ger ytan djup utan bild; delningsbilderna bär hela rubriken och blev dubbla. */
.guide-card-yta::before, .guide-card-yta::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--tone-strong); opacity: .32;
}
.guide-card-yta::before { width: 150px; height: 150px; right: -40px; top: -58px; }
.guide-card-yta::after { width: 70px; height: 70px; right: 86px; bottom: -40px; opacity: .2; }
.guide-card-yta .gx-ikon { position: relative; transition: transform .35s var(--spring, var(--ease)); }
.guide-card-kropp { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: 18px 22px 20px; }
.guide-card .eyebrow { color: var(--ink-2); }
.guide-card-title { font: 650 20px/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.guide-card-text { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.guide-card-meta { margin-top: auto; padding-top: var(--space-2); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.guide .guide-card:hover {
  color: var(--ink); border-color: var(--line-strong); transform: translateY(-4px);
  box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--ink) 45%, transparent);
}
.guide-card:hover .guide-card-yta .gx-ikon { transform: scale(1.08) rotate(-4deg); }
.guide-card:hover .guide-card-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Tre spalter i indexet på bred skärm. Går en grupp inte jämnt ut blir första kortet (och vid behov det
   sista) dubbelt så brett, så att ingen grupp slutar med ett ensamt kort och ett hål bredvid. */
@media (min-width: 1000px) {
  .gi .guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gi .guide-cards > li:first-child:nth-last-child(3n+2),
  .gi .guide-cards > li:first-child:nth-last-child(3n+4),
  .gi .guide-cards > li:last-child:nth-child(3n+4) { grid-column: span 2; }
  .gi .guide-cards > li:first-child:nth-last-child(3n+2) .guide-card-yta,
  .gi .guide-cards > li:first-child:nth-last-child(3n+4) .guide-card-yta { height: 140px; }
  .gi .guide-cards > li:first-child:nth-last-child(3n+2) .guide-card-title,
  .gi .guide-cards > li:first-child:nth-last-child(3n+4) .guide-card-title { font-size: 26px; max-width: 26ch; }
}

/* ── Rutan som säger vad Husvo gör (indexet och guiden) ─────────────────── */
.gx-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: var(--lilac-soft); color: var(--on-soft);
}
.gx-cta-text { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
.gx-cta-text > * { margin: 0; }
.guide .gx-cta h2 { margin: 0; font: 650 clamp(26px, 3vw, 36px)/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--on-soft); }
.gx-cta p { max-width: 54ch; line-height: 1.55; color: var(--on-soft); }
.gx-cta-lista { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gx-cta-lista li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 600;
}
.gx-cta-lista svg { fill: none; stroke: var(--mint-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gx-cta .btn { margin-top: var(--space-2); }

/* ── Guiden ──────────────────────────────────────────────────────────────── */
.gp { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--space-4); }
.gp-artikel { display: grid; gap: clamp(28px, 4vw, 48px); }

.gp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center;
  padding: clamp(24px, 5vw, 60px); border-radius: var(--r-xl); background: var(--tone); color: var(--on-soft);
}
.gp-hero-text { display: grid; gap: var(--space-4); min-width: 0; }
.gp-hero-text > * { margin: 0; }
.gp-kategori { display: inline-flex; align-items: center; gap: 8px; color: var(--on-soft); }
.guide .gp-hero h1 {
  font: 650 clamp(34px, 5.2vw, 66px)/1.02 var(--f-display); letter-spacing: -0.035em; color: var(--on-soft);
  max-width: 22ch; text-wrap: balance;
}
.gp-lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; max-width: 60ch; }
.gp-lead a { color: inherit; }
.gp-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; }
.gp-meta span { padding: 5px 12px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-weight: 600; }
/* Rutnätet sträckte knappen över hela hjälteytan; den ska vara lika liten som de andra. */
.gp-hero-text .skriv-ut { justify-self: start; }
.gp-hero-ikon {
  display: grid; place-items: center; width: clamp(150px, 16vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: var(--card); color: var(--tone-ink); box-shadow: inset 0 0 0 10px var(--tone-strong);
  animation: gp-in .8s var(--ease) .1s both;
}
@keyframes gp-in { from { transform: scale(.85) rotate(-8deg); } to { transform: none; } }

/* Tre spalter på bred skärm: innehållet till vänster, texten i mitten och intervallen till höger, så att
   spalten står mitt på sidan och faktarutan följer med medan man läser. */
.gp-kropp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); }
.gp-text { grid-column: 2; grid-row: 1; min-width: 0; }

.gp-toc { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; position: sticky; top: var(--space-6); width: min(100%, 240px); padding-top: 6px; }
.gp-toc-rubrik { margin: 0 0 var(--space-2); font-size: var(--fs-eyebrow, 12px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gp-toc ol, .gp-toc-smal ol { list-style: none; margin: 0; padding: 0; display: grid; }
.gp-toc a {
  display: block; padding: 7px 12px; border-left: 3px solid var(--line-soft);
  color: var(--ink-2); font-size: 14.5px; line-height: 1.35; text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.gp-toc a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.gp-toc a[aria-current] { color: var(--ink); border-left-color: var(--tone-strong); font-weight: 650; }

.gp-toc-smal { display: none; grid-column: 1 / -1; margin-bottom: var(--space-6); border: var(--bw-thin) solid var(--line); border-radius: var(--r-m); background: var(--card); }
.gp-toc-smal summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--space-4); font-weight: 650; cursor: pointer; color: var(--ink); }
.gp-toc-smal ol { padding: 0 var(--space-4) var(--space-3); }
.gp-toc-smal a { display: flex; align-items: center; min-height: 44px; color: var(--ink); border-top: var(--bw-thin) solid var(--line-soft); }

.gp-fakta {
  grid-column: 3; grid-row: 1; align-self: start; position: sticky; top: var(--space-6); width: min(100%, 260px);
  margin: 0; padding: 20px 22px; border-radius: var(--r-l);
  background: var(--card); border: var(--bw-thin) solid var(--line); border-left: 6px solid var(--tone-strong); color: var(--ink);
}
.guide .gp-fakta-rubrik { margin: 0 0 var(--space-3); font: 650 19px/1.2 var(--f-display); }
.gp-fakta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gp-fakta li { display: grid; gap: 2px; }
.gp-fakta-namn { font-weight: 650; }
.gp-fakta-int { color: var(--ink-2); font-size: 15px; }
.gp-fakta-not { margin: var(--space-3) 0 0; color: var(--ink-2); font-size: 13.5px; }

.gp-avsnitt { scroll-margin-top: var(--space-4); }
.gp-avsnitt > * { margin: 0; }
.gp-avsnitt > * + * { margin-top: var(--space-4); }
.gp-avsnitt + .gp-avsnitt { margin-top: clamp(36px, 4vw, 48px); }
.guide .gp-avsnitt h2 { font: 650 clamp(24px, 2.6vw, 30px)/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: var(--space-6); }
.gp-avsnitt h2::before { content: ""; display: block; width: 36px; height: 5px; margin-bottom: 14px; border-radius: 3px; background: var(--tone-strong); }
.gp-avsnitt p, .gp-avsnitt li { font-size: 17.5px; line-height: 1.75; color: var(--ink); }
.gp-avsnitt a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gp-avsnitt strong { font-weight: 700; }

.gp-steg { list-style: none; padding: 0; counter-reset: steg; display: grid; gap: var(--space-4); }
.gp-steg li { counter-increment: steg; position: relative; padding-left: 52px; }
.gp-steg li::before {
  content: counter(steg); position: absolute; left: 0; top: 2px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--tone); color: var(--on-soft);
  font: 650 17px/1 var(--f-display);
}
.gp-punkter { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.gp-punkter li { position: relative; padding-left: 28px; }
.gp-punkter li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 10px; height: 10px; border-radius: 3px; background: var(--tone-strong); transform: rotate(45deg); }

/* Skriv ner det: det Husvo gör åt er, så det får en egen ruta. */
.gp-avsnitt.gp-not { position: relative; padding: clamp(22px, 3vw, 32px); padding-top: clamp(26px, 3vw, 34px); border-radius: var(--r-l); background: var(--sun-soft); color: var(--on-soft); }
.gp-avsnitt.gp-not h2, .gp-avsnitt.gp-not p, .gp-avsnitt.gp-not li, .gp-avsnitt.gp-not a { color: var(--on-soft); }
.gp-avsnitt.gp-not h2::before { display: none; }
.gp-avsnitt.gp-not .gp-not-ikon + h2 { margin-top: var(--space-3); }
/* Solytan blir lerbrun i mörkt läge; där tar rutan papperet med en solkant i stället. */
:root[data-theme="dark"] .gp-avsnitt.gp-not { background: var(--paper-2); box-shadow: inset 5px 0 0 var(--sun); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gp-avsnitt.gp-not { background: var(--paper-2); box-shadow: inset 5px 0 0 var(--sun); }
}
.gp-not-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--ink); }
.gp-not-ikon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gp-text > .gx-cta { margin-top: clamp(40px, 5vw, 64px); }

.gp-mer { display: grid; gap: var(--space-4); margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(32px, 4vw, 48px); border-top: var(--bw-thin) solid var(--line-soft); }
.guide .gp-mer h2 { margin: 0; font: 650 clamp(26px, 3vw, 34px)/1.1 var(--f-display); letter-spacing: -0.02em; }

/* Läsframsteget: en tunn list upptill som följer rullningen, helt i CSS. Utan stöd för scroll-driven
   animation, och på smal skärm där webbläsarens egna list redan syns, finns den inte. */
.gp-framsteg { display: none; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 761px) {
    .gp-framsteg {
      display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 4px; pointer-events: none;
      background: var(--tone-strong); transform-origin: 0 50%; transform: scaleX(0);
      animation: gp-las auto linear both; animation-timeline: scroll(root block);
    }
  }
}
@keyframes gp-las { to { transform: scaleX(1); } }

/* ── Smalare skärmar ─────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .gp-kropp { grid-template-columns: minmax(0, 1fr); }
  .gp-text { grid-column: 1; grid-row: auto; max-width: 700px; width: 100%; justify-self: center; }
  .gp-fakta { grid-column: 1; grid-row: auto; position: static; width: 100%; max-width: 700px; justify-self: center; margin-bottom: var(--space-6); }
  .gp-toc { display: none; }
  .gp-toc-smal { display: block; max-width: 700px; width: 100%; justify-self: center; }
}

@media (max-width: 760px) {
  .gi-hero { grid-template-columns: minmax(0, 1fr); }
  .gi-hero-husse { grid-auto-flow: column; justify-content: start; align-items: end; justify-items: start; }
  .gi-hero-husse .husse { width: 96px; height: auto; }
  .gi-hero-husse .bubble { order: 2; border-radius: 22px 22px 22px 6px; }
  /* Nio kategorier tog fem rader på telefonen. En rad som rullar i sidled håller hjälten och korten nära varandra. */
  .gi-delar {
    margin: 0 calc(-1 * var(--space-4)); padding: 4px var(--space-4) 8px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; scroll-padding-inline: var(--space-4);
  }
  .gi-del { flex: none; }
  .gp-hero { grid-template-columns: minmax(0, 1fr); }
  .gp-hero-ikon { display: none; }
  .gx-cta { grid-template-columns: minmax(0, 1fr); }
  .gx-cta-husse { display: none; }
  .gp-avsnitt p, .gp-avsnitt li { font-size: 17px; }
}

@media (max-width: 600px) {
  .guide-lead, .gi-lead { font-size: 17.5px; }
  .guide { padding-top: var(--space-4); }
}

/* Fyra länkar och märket får inte plats på en rad vid 360 px; utan radbrytning rullade sidan i sidled. */
@media (max-width: 480px) {
  .guide-top { flex-wrap: wrap; row-gap: var(--space-2); }
  .guide-nav { flex-wrap: wrap; gap: 0 var(--space-3); }
  /* Länkarna var 26 px höga, för små för en tumme. */
  .guide-nav a, .guide-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .guide .gi-hero h1 { font-size: 38px; }
  .guide .gp-hero h1 { font-size: 33px; letter-spacing: -0.03em; }
  .gi-fakta { gap: var(--space-2) var(--space-6); }
  .gp-steg li { padding-left: 46px; }
  .gp-steg li::before { width: 32px; height: 32px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-del, .guide .guide-card, .guide-card-yta .gx-ikon, .gp-toc a { transition: none; }
  .gi-del:hover, .guide .guide-card:hover, .guide-card:hover .guide-card-yta .gx-ikon { transform: none; }
  .gp-hero-ikon, .gi-husse .husse { animation: none; }
}