/**
 * Habits redesign — CSS för guiderna (/guider/).
 *
 * GENERERAD ur tools/build-guide-pages.js av tools/export-guides-css.js.
 * Redigera INTE här — ändra i byggskriptet och kör om, annars glider
 * prototypen och WordPress isär. Samma fel som .footer-social hade.
 *
 * Laddas efter chrome.css. Ingen av selektorerna nedan finns i chrome.css,
 * så kaskadordningen spelar ingen roll för dem.
 */

/* ══════════════════ GUIDER ═════════════════════════════════════════════════
   EN SPALT, CENTRERAD, 616 px vid 18 px = 72 tecken per rad.
   Mätt med canvas measureText mot sidans faktiska font (Inter 18 px ger
   8,59 px per tecken), INTE genom att dela styckets längd med antal rader —
   den metoden räknar in korta slutrader och gav 66 där sanningen var 79.
   Redaktionellt: ingen buybox, inga priser i brödtexten, Article-schema i
   stället för Product. Produkterna presenteras samlat i ETT block efter
   artikeln — Colgates mönster — i stället för att avbryta läsningen.
   ═══════════════════════════════════════════════════════════════════════════ */

    .guide-col { max-width: 616px; margin: 0 auto; }
    .guide-wide { max-width: 900px; margin: 0 auto; }

    .guide-hero { padding: 26px 0 0; }
    .guide-hero .breadcrumb { padding: 0 0 18px; }
    /* Hero: 16:9, inte 16:7. Källbilden är stående (2:3), och i en 16:7-ruta
       syns bara 29 % av höjden — hela kompositionen försvinner. Vid 16:9 syns
       37,5 %, vilket räcker för både glaset i förgrunden och personerna bakom.
       Beskärningen styrs av object-position per bild, inte genom att klippa
       filen, så originalet finns kvar om ett annat utsnitt önskas. */
    .guide-hero-img { margin: 0; border-radius: 18px; overflow: hidden; background: var(--tint); box-shadow: var(--shadow-soft); aspect-ratio: 16 / 9; }
    .guide-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }

    .guide-head { padding: 30px 0 0; }
    .guide-kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--tint); border: 1px solid var(--tint-line); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
    .guide-head h1 { font-size: clamp(30px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.032em; line-height: 1.15; margin: 14px 0 0; }
    .guide-lead { margin: 16px 0 0; font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.5; color: #35485a; }
    .guide-meta { margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
    .guide-meta b { color: #35485a; font-weight: 600; }

    /* ── Svarsrutan på ekerartiklarna ────────────────────────────────────────
       Ersätter hero-bilden. Svaret ska stå i första meningen: det är vad den
       som söker på en specifik fråga vill ha, och det är formatet Google
       plockar till utdrag. En bild högst upp hade skjutit ned svaret. */
    .guide-answer {
      margin: 22px 0 0; padding: 20px 24px;
      background: var(--tint); border: 1px solid var(--tint-line);
      border-left: 4px solid var(--blue); border-radius: 14px;
    }
    .guide-answer p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
    .guide-answer b { font-weight: 700; }

    /* ── Innehållsförteckning, inline (bara navet) ── */
    .guide-toc { margin: 0 0 36px; padding: 18px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
    .guide-toc h2 { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 11px; }
    .guide-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
    .guide-toc li { break-inside: avoid; margin-bottom: 7px; }
    .guide-toc a { font-size: 14.5px; line-height: 1.4; color: var(--blue-deep); font-weight: 550; }
    .guide-toc a:hover { text-decoration: underline; }

    /* ── Brödtext ── */
    .guide-wrap { padding: 32px 0 80px; }
    .guide-body h2 { font-size: clamp(21px, 2.2vw, 24px); font-weight: 780; letter-spacing: -.022em; line-height: 1.25; margin: 44px 0 10px; scroll-margin-top: 104px; }
    .guide-body h2:first-child { margin-top: 0; }
    .guide-body p { font-size: 16px; line-height: 1.62; color: #33465a; margin: 0 0 18px; }
    /* Ingressen under varje H2 är en UNDERRUBRIK: samma grad som brödtexten,
       men fetare och mörkare, med tight marginal så den äger stycket under.
       Tidigare var den 18,5px mot brödtextens 17px, alltså 9% större och inte
       fetare. Det lästes inte som en nivå utan som slumpmässigt större stycken
       (Daniel 2026-08-31: "spretigt"). Vikt bär nivån, inte grad. */
    .guide-body p.lede { font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
    .guide-body ul { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 7px; }
    .guide-body ul li { font-size: 16px; line-height: 1.6; color: #33465a; }
    .guide-body ul li::marker { color: var(--blue); }
    .guide-body a { color: var(--blue-deep); font-weight: 600; }
    .guide-body a:hover { text-decoration: underline; }
    .guide-body b, .guide-body strong { color: var(--ink); font-weight: 680; }

    /* ── Numrerade steg ── */
    .guide-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 2px; counter-reset: step; }
    .guide-steps li { counter-increment: step; position: relative; padding: 15px 0 15px 52px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: #33465a; }
    .guide-steps li:last-child { border-bottom: 1px solid var(--line); }
    .guide-steps li::before { content: counter(step); position: absolute; left: 0; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); border: 1px solid var(--tint-line); color: var(--blue-deep); font-family: var(--font-display); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .guide-steps b { display: block; margin-bottom: 2px; }

    /* ── Vidarelänk mellan nav och eker ── */
    .guide-more { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
    .guide-more span { color: var(--muted); flex: none; }
    .guide-more a { font-weight: 650; }

    /* ── Figur ── */
    .guide-fig { margin: 30px 0; }
    .guide-fig img, .guide-fig .fig-art { width: 100%; display: block; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
    .guide-fig img { aspect-ratio: 16 / 10; object-fit: cover; border-color: transparent; }
    .guide-fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }


    /* ── SVG-diagram ─────────────────────────────────────────────────────────
       Ritade i kod, inte fotograferade. De skalar utan kvalitetsförlust, väger
       under 2 kB styck och behöver ingen bildhantering vid WordPress-bygget. */
    .guide-fig svg.art { width: 100%; height: auto; display: block; padding: 18px 16px; }

    /* ── Tidslinjen för de två minuterna ─────────────────────────────────────
       Visar något texten inte gör: att delarna är lika stora och tillsammans
       ÄR två minuter. En tidigare version var fyra rutor i ett 2x2-rutnät där
       "Uppe till höger" hamnade i den vänstra rutan och sa emot sin egen
       placering (Daniel 2026-08-15). Nu är det en följd, inte en karta. */
    .timeline { padding: 22px 24px 18px; }
    .tl-bar { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--tint-line); border-radius: 12px; overflow: hidden; }
    .tl-seg { padding: 14px 10px; text-align: center; border-right: 1px solid var(--tint-line); }
    .tl-seg:last-child { border-right: 0; }
    .tl-seg:nth-child(1) { background: #F5FAFF; }
    .tl-seg:nth-child(2) { background: var(--tint); }
    .tl-seg:nth-child(3) { background: #E9F4FE; }
    .tl-seg:nth-child(4) { background: var(--tint-2); }
    .tl-seg b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink); }
    .tl-seg i { display: block; margin-top: 3px; font-style: normal; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--blue-deep); }
    .tl-axis { display: flex; justify-content: space-between; margin-top: 9px; padding: 0 2px; font-size: 11.5px; color: var(--muted); }
    .tl-axis span:last-child { font-weight: 700; color: var(--blue-deep); }

    /* ── Korta svar ── */
    .guide-qa { margin: 46px 0 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
    .guide-qa > h2 { margin: 0 0 6px; font-size: 21px; }
    .guide-qa dl { margin: 0; }
    .guide-qa dt { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: var(--ink); margin-top: 18px; }
    .guide-qa dd { margin: 5px 0 0; font-size: 16.5px; line-height: 1.62; color: #42566a; }
    .guide-qa dd a { color: var(--blue-deep); font-weight: 600; }

    .guide-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
    .guide-foot p { font-size: 14.5px; color: var(--muted); margin: 0 0 8px; }

    /* ── Produktblocket efter artikeln ── */
    .guide-prods { padding: 0 0 30px; }
    .guide-prods h2 { font-size: 22px; font-weight: 760; letter-spacing: -.02em; margin: 0 0 4px; }
    .guide-prods > .guide-wide > p { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }
    .pgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .pcard { display: flex; flex-direction: column; gap: 3px; padding: 15px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
    .pcard:hover { border-color: var(--tint-line); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .pcard b { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--ink); }
    .pcard span { font-size: 13.5px; line-height: 1.5; color: #5a6b7a; }
    .pcard em { margin-top: auto; padding-top: 9px; font-style: normal; font-size: 13px; font-weight: 650; color: var(--blue-deep); }
    .pcard-all { background: var(--tint); border-color: var(--tint-line); }

    /* ── Relaterade guider ── */
    .grel { padding: 0 0 90px; }
    .grel h2 { font-size: 22px; font-weight: 760; letter-spacing: -.02em; margin: 0 0 16px; }
    .qgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .qcard { display: flex; flex-direction: column; padding: 17px 19px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
    .qcard:hover { border-color: var(--tint-line); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .qcard .gcard-kicker { margin-bottom: 6px; }
    .qcard b { font-family: var(--font-display); font-size: 16px; font-weight: 720; line-height: 1.32; color: var(--ink); margin-bottom: 7px; }
    .qcard span { font-size: 14px; line-height: 1.5; color: #5a6b7a; margin-bottom: 12px; }
    .qcard em { margin-top: auto; font-style: normal; font-size: 12.5px; color: var(--muted); }

    .gcard-kicker { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-deep); }

    @media (max-width: 720px) {
      .guide-hero-img { aspect-ratio: 3 / 2; border-radius: 14px; }
      .guide-answer { padding: 16px 18px; }
      .guide-answer p { font-size: 16.5px; }
      .guide-body p, .guide-body ul li, .guide-steps li { font-size: 16px; }
      .guide-body p.lede { font-size: 16px; }
      .guide-qa { padding: 20px 18px; }
      .guide-toc ol { columns: 1; }
      .timeline { padding: 16px 16px 14px; }
      .tl-bar { grid-template-columns: 1fr; }
      .tl-seg { display: flex; align-items: baseline; justify-content: space-between; text-align: left; border-right: 0; border-bottom: 1px solid var(--tint-line); padding: 11px 14px; }
      .tl-seg:last-child { border-bottom: 0; }
      .tl-seg b, .tl-seg i { display: inline; margin: 0; }
      .tl-axis { display: none; }
    }


    /* ── Navet ───────────────────────────────────────────────────────────────
       Pelaren får ett brett kort med bild; ekerartiklarna kompakta textkort.
       Skillnaden är avsiktlig och säger vad sidan är: pelaren läser man,
       ekern slår man upp. Ekrarna har heller inget eget fotografi, och lånade
       bilder hade bara varit utfyllnad. */
    .glist { padding: 30px 0 96px; }
    .gcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
    .gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
    .gcard-img { background: var(--tint); }
    .gcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gcard-txt { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; }
    .gcard h3 { font-size: clamp(21px, 2.4vw, 28px); font-weight: 760; letter-spacing: -.022em; line-height: 1.24; margin: 8px 0 10px; }
    .gcard h3 a { color: var(--ink); }
    .gcard h3 a:hover { color: var(--blue-deep); }
    .gcard p { font-size: 16px; line-height: 1.58; color: #4a5c6d; margin: 0 0 14px; }
    .gcard-foot { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); }
    .gcard-foot b { font-weight: 650; color: var(--blue-deep); }
    .gfeature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin-bottom: 38px; align-items: stretch; }
    /* min-width: 0 pa bada rutorna — inte kosmetik, en ratning.
       Rutnatsbarn har min-width: auto som standard, vilket later dem bli
       BREDARE an sitt spar om innehallet kraver det. minmax(0, ...) satter bara
       sparets minimum, inte barnets.
       I prototypen syntes det aldrig, for dar har <img> inga width/height-
       attribut. WordPress lagger till dem pa utvalda bilder (width="682"
       height="1024" for den stainde originalbilden), och da far bilden en
       inneboende storlek som raknas in i min-content. Bildrutan svallde till
       827px i ett 551px-spar och la sig under textrutan, som ar genomskinlig —
       texten hamnade rakt pa fotot (Daniel 2026-08-17).
       Fixen galler bada rutorna: textrutan kan drabbas av samma sak den dag
       den far ett langt obrytbart ord. */
    .gfeature .gcard-img, .gfeature .gcard-txt { min-width: 0; }
    .gfeature .gcard-img { aspect-ratio: 16 / 11; height: auto; }
    /* !important ar HAR motiverat, och bara har.
       Vi konkurrerar inte med annan CSS utan med en INLINE-stil som skrivs pa
       elementet av JavaScript efter sidladdning. Uppmatt pa staging 2026-08-17:
         style="width:100%;height:150.06%;max-width:1682px"
       Talen ar originalbildens egna matt (1682x2524, stainde), alltsa nagon som
       "hjalper" med bildproportioner for att undvika layouthopp. Snutten ligger
       utanfor repot — sidan laddar egen JS via index.php?hm_custom_js_draft=1.
       height: 150.06% gjorde bilden 1,5 ganger hogre an sin ruta, och eftersom
       object-fit: cover behaller tackningen vaxte bredden i takt: rutan blev
       827px i ett 551px-spar och la sig under textrutan, som ar genomskinlig.
       En vanlig regel raker inte — inline vinner over varje stilmall. Bara
       !important slar inline.
       ROR INTE utan att forst kontrollera att snutten ar borta. */
    .gcard-img img,
    .guide-hero-img img { width: 100% !important; height: 100% !important; max-width: 100% !important; }
    .glist h2 { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
    .gsoon { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 26px; }
    .gsoon ul { list-style: none; margin: 0; padding: 0; }
    .gsoon li { padding: 13px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
    .gsoon b { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: var(--ink); }
    .gsoon span { font-size: 14.5px; color: var(--muted); }
    @media (max-width: 820px) {
      .gfeature { grid-template-columns: minmax(0, 1fr); }
      .gfeature .gcard-img { aspect-ratio: 16 / 9; }
      .gcard-txt { padding: 20px 20px 22px; }
    }