/* =============================================================================
   Guider — mål-ledda nybörjarguider. Pedagogik före pynt: förklarande diagram,
   enkelt språk, en tydlig väg. Namespace .fg-*. Bygger på husets tokens.
   ========================================================================== */

/* Hero (guider-landning + guide-översikt) */
.fg-hero { position: relative; color: #fff; overflow: hidden; background: #2b3350; }
.fg-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.fg-hero__sc { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,38,.4), rgba(20,24,38,.82)); }
.fg-hero__in { position: relative; max-width: 860px; margin: 0 auto; padding: 58px var(--fl-luft-5) 42px; }
.fg-hero .fl-bread { margin-bottom: var(--fl-luft-4); }
.fg-hero .fl-bread a, .fg-hero .fl-bread span { color: #cfd6e6; }
.fg-hero__kick { font-family: var(--fl-font-ui); font-size: var(--fl-text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffc588; margin: 0; }
.fg-hero h1 { color: #fff; font-size: var(--fl-text-2xl); margin: var(--fl-luft-2) 0 var(--fl-luft-3); line-height: 1.1; max-width: 18ch; }
.fg-hero__lede { font-size: var(--fl-text-md); color: #dfe4f0; max-width: 54ch; margin: 0; }

.fg-wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--fl-luft-5); }
.fg-sektion { padding: var(--fl-luft-8) 0; }

/* Guide-kort (flaggskepp/lista) */
.fg-guide { background: var(--fl-sno, #fff); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-lg); overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.05); margin-bottom: var(--fl-luft-5); }
.fg-guide__top { padding: var(--fl-luft-6) var(--fl-luft-6) var(--fl-luft-2); }
.fg-guide__kick { font-family: var(--fl-font-ui); font-size: var(--fl-text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-accent); margin: 0 0 var(--fl-luft-1); }
.fg-guide__t { font-size: var(--fl-text-xl); font-weight: var(--fl-vikt-fet); margin: 0 0 var(--fl-luft-1); }
.fg-guide__lede { color: var(--fl-text-mjuk); margin: 0; }
.fg-guide__meta { display: flex; gap: var(--fl-luft-5); margin: var(--fl-luft-3) 0 0; font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.fg-guide__meta b { color: var(--fl-trad); }

/* Steg-lista (delar) */
.fg-steg { list-style: none; margin: var(--fl-luft-4) 0 0; padding: 0; counter-reset: fgsteg; }
.fg-steg a { display: flex; gap: var(--fl-luft-4); align-items: center; padding: var(--fl-luft-4) var(--fl-luft-6); border-top: 1px solid var(--fl-linje); text-decoration: none; color: var(--fl-text); transition: background .12s; }
.fg-steg a:hover { background: var(--fl-bg-mjuk); }
.fg-steg__n { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--fl-accent-mjuk); color: var(--fl-accent-hover); font-family: var(--fl-font-ui); font-weight: 800; display: grid; place-items: center; font-size: var(--fl-text-sm); }
.fg-steg__k { flex: 1; }
.fg-steg__l { display: block; font-weight: 700; font-size: var(--fl-text-base); }
.fg-steg__d { display: block; color: var(--fl-text-mjuk); font-size: var(--fl-text-sm); margin-top: 2px; }
.fg-steg__pil { color: var(--fl-text-svag); }
.fg-steg__pil svg { width: 18px; height: 18px; }
.fg-guide__cta { padding: var(--fl-luft-5) var(--fl-luft-6) var(--fl-luft-6); }
.fg-knapp { display: inline-flex; gap: var(--fl-luft-2); align-items: center; background: var(--fl-accent); color: #fff; font-family: var(--fl-font-ui); font-weight: 700; padding: 13px 24px; border-radius: var(--fl-radie-pill); text-decoration: none; }
.fg-knapp svg { width: 16px; height: 16px; }
.fg-mer { color: var(--fl-text-svag); font-size: var(--fl-text-sm); }
.fg-tagg { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--fl-bg-mjuk); border: 1px solid var(--fl-linje); color: var(--fl-text-svag); }

/* Subguide */
.fg-del { background: var(--fl-sno, #fff); border-top: 6px solid var(--fl-accent); }
.fg-del__in { max-width: 760px; margin: 0 auto; padding: 0 var(--fl-luft-5) var(--fl-luft-8); }
.fg-del .fl-bread { padding-top: var(--fl-luft-5); }
.fg-prog { display: flex; align-items: center; gap: var(--fl-luft-3); margin: var(--fl-luft-4) 0 var(--fl-luft-2); }
.fg-prog__bar { flex: 1; height: 6px; background: var(--fl-linje); border-radius: 99px; overflow: hidden; }
.fg-prog__fill { height: 100%; background: var(--fl-trad); }
.fg-prog__t { font-family: var(--fl-font-ui); font-size: var(--fl-text-xs); font-weight: 700; color: var(--fl-trad); white-space: nowrap; }
.fg-del h1 { font-size: var(--fl-text-2xl); margin: var(--fl-luft-2) 0 var(--fl-luft-2); }
.fg-del__lede { font-size: var(--fl-text-md); color: var(--fl-text-mjuk); margin: 0 0 var(--fl-luft-4); }

/* Prosa i delen (betrodd HTML) */
.fg-prosa { font-size: 1.0625rem; line-height: var(--fl-lh-brod); }
.fg-prosa p { margin: var(--fl-luft-4) 0; }
.fg-prosa h2 { font-size: var(--fl-text-lg); margin: var(--fl-luft-7) 0 var(--fl-luft-2); }
.fg-prosa a { color: var(--fl-accent-hover); }
.fg-prosa ul { margin: var(--fl-luft-4) 0; padding-left: 1.3em; }
.fg-prosa li { margin: var(--fl-luft-2) 0; }

/* Inline-definition av ett begrepp */
.fg-def { background: var(--fl-trad-mjuk, #e4f0ea); border-left: 3px solid var(--fl-trad); border-radius: 0 10px 10px 0; padding: 13px 18px; margin: var(--fl-luft-5) 0; }
.fg-def b { color: var(--fl-trad); }

/* Förklarande figur (diagram-behållare) */
.fg-fig { margin: var(--fl-luft-6) 0; background: var(--fl-bg-mjuk); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); padding: var(--fl-luft-5); }
.fg-fig__cap { font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); margin: var(--fl-luft-4) 0 0; text-align: center; }

/* Diagram: sovsystem (lager) */
.fg-sys { display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; border-radius: 10px; overflow: hidden; border: 1px solid var(--fl-linje); }
.fg-lay { display: flex; align-items: center; gap: var(--fl-luft-3); padding: 13px 16px; font-weight: 700; }
.fg-lay small { font-weight: 400; opacity: .9; display: block; font-size: 12.5px; }
.fg-lay__ic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; }
.fg-lay__ic svg { width: 24px; height: 24px; }
.fg-lay--sack { background: #eef3f8; color: #3a5a78; }
.fg-lay--du { background: #fff; color: var(--fl-text); border-block: 1px solid var(--fl-linje); }
.fg-lay--pad { background: var(--fl-accent); color: #fff; }
.fg-lay--mark { background: #4a3b30; color: #e9dcd0; }

/* Diagram: R-värdesskala per säsong */
.fg-skala { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--fl-linje); }
.fg-seg { flex: 1; padding: 14px 8px; text-align: center; color: #fff; }
.fg-seg b { display: block; font-size: var(--fl-text-md); }
.fg-seg small { opacity: .92; font-size: 12px; }
.fg-seg--1 { background: #e0a23a; } .fg-seg--2 { background: var(--fl-trad); }
.fg-seg--3 { background: #3f6f9f; } .fg-seg--4 { background: #31456b; }
.fg-skala__lbl { display: flex; font-size: 12px; color: var(--fl-text-mjuk); margin-top: var(--fl-luft-1); }
.fg-skala__lbl span { flex: 1; text-align: center; }

/* Nu kan du + vidare-länkar */
.fg-klar { background: var(--fl-trad-mjuk, #e4f0ea); border-radius: var(--fl-radie-md); padding: var(--fl-luft-5) var(--fl-luft-6); margin: var(--fl-luft-7) 0; }
.fg-klar__t { font-weight: 800; color: var(--fl-trad); margin: 0 0 var(--fl-luft-2); display: flex; gap: var(--fl-luft-2); align-items: center; }
.fg-utlank { display: flex; gap: var(--fl-luft-3); flex-wrap: wrap; margin-top: var(--fl-luft-4); }
.fg-utlank a { background: var(--fl-sno, #fff); border: 1px solid var(--fl-linje); border-radius: 10px; padding: 12px 16px; text-decoration: none; color: var(--fl-text); font-weight: 600; display: flex; flex-direction: column; }
.fg-utlank a small { color: var(--fl-text-svag); font-weight: 400; font-size: 12.5px; }
.fg-utlank a:hover { border-color: var(--fl-accent); }

/* Föregående / nästa */
.fg-nav { display: flex; justify-content: space-between; gap: var(--fl-luft-3); border-top: 1px solid var(--fl-linje); margin-top: var(--fl-luft-7); padding-top: var(--fl-luft-5); }
.fg-nav a { text-decoration: none; color: var(--fl-text); font-weight: 600; font-size: var(--fl-text-sm); }
.fg-nav small { display: block; color: var(--fl-text-svag); font-weight: 400; font-size: 12px; }

/* Extra komponenter för utbyggda delar */
.fg-prosa h3 { font-size: var(--fl-text-md); margin: var(--fl-luft-5) 0 var(--fl-luft-1); }
.fg-punkter { list-style: none; margin: var(--fl-luft-4) 0; padding: 0; }
.fg-punkter li { position: relative; padding-left: 28px; margin: var(--fl-luft-2) 0; }
.fg-punkter li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--fl-trad); font-weight: 800; }
/* Bra / undvik i två spalter */
.fg-tva { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-luft-4); margin: var(--fl-luft-5) 0; }
@media (max-width: 560px) { .fg-tva { grid-template-columns: 1fr; } }
.fg-tva__kol { border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); padding: var(--fl-luft-4) var(--fl-luft-5); }
.fg-tva__h { font-weight: 800; margin: 0 0 var(--fl-luft-2); }
.fg-tva__kol--ja { background: #f0f7f2; } .fg-tva__kol--ja .fg-tva__h { color: var(--fl-trad); }
.fg-tva__kol--nej { background: #fbf2f4; } .fg-tva__kol--nej .fg-tva__h { color: #a23a52; }
.fg-tva ul { list-style: none; margin: 0; padding: 0; font-size: var(--fl-text-sm); }
.fg-tva li { position: relative; margin: var(--fl-luft-2) 0; padding-left: 20px; }
.fg-tva__kol--ja li::before { content: "\2713"; position: absolute; left: 0; color: var(--fl-trad); font-weight: 800; }
.fg-tva__kol--nej li::before { content: "\2715"; position: absolute; left: 0; color: #a23a52; font-weight: 800; }
/* Packzoner (varm gradient uppifrån och ner) */
.fg-lay--z1 { background: #fbe9d7; color: #6a4a2a; } .fg-lay--z2 { background: #f3d6b6; color: #6a4a2a; } .fg-lay--z3 { background: #e7c39c; color: #5a3d20; }
.fg-zon { flex: 0 0 auto; min-width: 96px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }

/* Landskapsdiagram (lägerplats) */
.fg-land { width: 100%; height: auto; display: block; border-radius: 10px; background: #dfe8ee; }
.fg-land-leg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-luft-2) var(--fl-luft-5); margin-top: var(--fl-luft-4); font-size: var(--fl-text-sm); }
@media (max-width: 560px) { .fg-land-leg { grid-template-columns: 1fr; } }
.fg-land-leg span { display: flex; gap: 9px; align-items: flex-start; }
.fg-mnr { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; flex: 0 0 auto; margin-top: 1px; }
.fg-mnr--ja { background: var(--fl-trad); } .fg-mnr--nej { background: #a23a52; }

/* Tre delar (förmåga) */
.fg-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fl-luft-3); margin: var(--fl-luft-5) 0; }
@media (max-width: 560px) { .fg-tre { grid-template-columns: 1fr; } }
.fg-tre__k { border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); padding: var(--fl-luft-4); text-align: center; background: var(--fl-bg-mjuk); }
.fg-tre__ic { width: 38px; height: 38px; margin: 0 auto var(--fl-luft-2); color: var(--fl-accent); }
.fg-tre__ic svg { width: 38px; height: 38px; }
.fg-tre__h { font-weight: 800; margin: 0 0 var(--fl-luft-1); }
.fg-tre__k p { margin: 0; font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }

/* Svårighetspyramid (smal topp = svårast, bred bas = enklast) */
.fg-pyr { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: var(--fl-luft-5) 0; }
.fg-pyr__r { color: #fff; text-align: center; padding: 11px 16px; border-radius: 8px; font-weight: 700; font-size: var(--fl-text-sm); width: 100%; }
.fg-pyr__r small { display: block; font-weight: 400; opacity: .92; font-size: 12px; }
.fg-pyr__r:nth-child(1) { max-width: 34%; } .fg-pyr__r:nth-child(2) { max-width: 50%; }
.fg-pyr__r:nth-child(3) { max-width: 66%; } .fg-pyr__r:nth-child(4) { max-width: 82%; } .fg-pyr__r:nth-child(5) { max-width: 100%; }
.fg-pyr--t1 { background: #31456b; } .fg-pyr--t2 { background: #3f6f9f; } .fg-pyr--t3 { background: #d4631f; }
.fg-pyr--t4 { background: #e0a23a; } .fg-pyr--t5 { background: var(--fl-trad); }

/* Förberedelseplan (numrerade steg) */
.fg-plan { list-style: none; counter-reset: fgp; margin: var(--fl-luft-5) 0; padding: 0; }
.fg-plan li { position: relative; counter-increment: fgp; padding: 0 0 var(--fl-luft-5) 46px; margin-left: 15px; border-left: 2px solid var(--fl-linje); }
.fg-plan li:last-child { border-left-color: transparent; padding-bottom: 0; }
.fg-plan li::before { content: counter(fgp); position: absolute; left: -16px; top: -3px; width: 32px; height: 32px; border-radius: 50%; background: var(--fl-accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: var(--fl-text-sm); }
.fg-plan b { display: block; }

/* Kompakta guide-kort (/guider/-landning) */
.fg-kortgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--fl-luft-4); }
.fg-kort { display: flex; flex-direction: column; background: var(--fl-sno, #fff); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.fg-kort:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.fg-kort__pic { aspect-ratio: 16 / 7; background-size: cover; background-position: center; background-color: #2b3350; }
.fg-kort__pic--tom { background: linear-gradient(150deg, #2b3350, #3a3555); display: grid; place-items: center; color: rgba(255,255,255,.85); }
.fg-kort__pic--tom svg { width: 40px; height: 40px; }
.fg-kort__body { padding: var(--fl-luft-4) var(--fl-luft-5) var(--fl-luft-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fg-kort__kick { font-family: var(--fl-font-ui); font-size: var(--fl-text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-accent); margin: 0; }
.fg-kort__t { font-family: var(--fl-font-display); font-size: var(--fl-text-lg); font-weight: 800; margin: 0; line-height: 1.2; }
.fg-kort__lede { color: var(--fl-text-mjuk); font-size: var(--fl-text-sm); margin: 0; flex: 1; }
.fg-kort__meta { font-size: 12.5px; color: var(--fl-text-svag); }
.fg-kort__mer { color: var(--fl-accent-hover); font-weight: 700; font-size: var(--fl-text-sm); margin-top: 4px; }
.fg-kort--snart { opacity: .78; }
.fg-kort--snart .fg-kort__t { font-size: var(--fl-text-md); }

/* Additivt R-värde (stapling), vinterguide */
.fg-add { max-width: 380px; margin: 0 auto; }
.fg-add__rad { display: flex; justify-content: space-between; align-items: center; gap: var(--fl-luft-4); background: var(--fl-sno, #fff); border: 1px solid var(--fl-linje); border-radius: 10px; padding: 12px 18px; font-weight: 700; }
.fg-add__rad b { font-family: var(--fl-font-display); font-size: var(--fl-text-lg); white-space: nowrap; }
.fg-add__op { text-align: center; color: var(--fl-text-svag); font-size: var(--fl-text-sm); margin: 6px 0; }
.fg-add__rad--sum { background: var(--fl-accent); color: #fff; border-color: var(--fl-accent); }

/* Axeldiagram (spektrum mellan två poler) */
.fg-axel { margin: var(--fl-luft-3) 0; }
.fg-axel__bar { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--fl-trad), #e0a23a, var(--fl-accent)); }
.fg-axel__poler { display: flex; justify-content: space-between; margin-top: var(--fl-luft-2); font-weight: 700; font-size: var(--fl-text-sm); }
.fg-axel__mid { text-align: center; color: var(--fl-text-svag); font-size: var(--fl-text-sm); margin-top: var(--fl-luft-1); }

/* Lagerdiagram (kläder), återanvänder fg-sys/fg-lay med egna toner */
.fg-lay--l1 { background: #f3efe6; color: #5a5240; }
.fg-lay--l2 { background: #e4f0ea; color: #2f6b4f; }
.fg-lay--l3 { background: #eef3f8; color: #3a5a78; }
.fg-lay--l4 { background: var(--fl-accent); color: #fff; }

/* Neutral jämförelse-kolumn (t.ex. dun vs syntet, ingen bra/dålig-värdering) */
.fg-tva__kol--neutral { background: var(--fl-bg-mjuk); }
.fg-tva__kol--neutral .fg-tva__h { color: var(--fl-text); }
.fg-tva__kol--neutral li::before { content: "\2022"; position: absolute; left: 0; color: var(--fl-trad); font-weight: 800; }