/* kunskap.v4.css (2026-09-28): v3 + desktoppoleringen på hubbarna och artiklarna, se blocket v4 sist. */
/* AlbIT AB — Kunskap: artikel, hub och startside-teaser.
   v2 (2026-07-09): omtemad till nya varumärket (guld/Montserrat/Inter) i samma
   veva som site.v2.css — mönstren speglar /kampanj (eyebrow-streck, more-link,
   note-callout, kortskuggor). Bumpat filnamn: /assets/* serveras immutable.
   v3 (2026-09-02, polering "mindre AI-genererat"): guldstrecket före ögonbrynen
   (::before) utgick och spärrningen drogs in från .32em, i takt med site.css. */

.article-wrap, .hub-wrap { max-width: 1140px; margin: 0 auto; padding: 64px 26px 96px; position: relative; z-index: 1; }
.kunskap-article .article, .article { max-width: 720px; margin: 0 auto; }

.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 28px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.back-link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; margin-bottom: 18px; transition: color .2s; }
.back-link:hover { color: var(--ink); }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .2em; color: var(--muted); margin-bottom: 14px; }

.article-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin-bottom: 18px; }
.article-head .dek { font-size: 1.15rem; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
.byline { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }

.prose { margin-top: 40px; font-size: 1.05rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: 1.5rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--muted); }
.prose strong { font-weight: 600; }
.prose blockquote { border-left: 3px solid var(--gold); padding-left: 18px; color: var(--muted); font-style: italic; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }

.callout { background: var(--bg2); border-left: 3px solid var(--gold); border-radius: var(--r); padding: 22px 24px; margin: 1.6em 0; }
.callout > * + * { margin-top: .8em; }
.callout p:first-child { margin-top: 0; }

.article-cta { margin-top: 56px; padding: 44px 36px; border-radius: var(--r); background: var(--ink); text-align: center; color: var(--on-dark); }
.article-cta h2 { font-size: 1.5rem; margin-bottom: 10px; color: var(--on-dark); }
.article-cta p { color: var(--muted-l); margin-bottom: 22px; }
.article-cta .btn { background: var(--paper); color: var(--ink); }
.article-cta .btn:hover { box-shadow: 0 12px 34px rgba(255, 255, 255, .16); }

.related { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 28px; }
.related h2 { font-size: 1.1rem; margin-bottom: 14px; }
.related ul { list-style: none; display: grid; gap: 10px; }
.related a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.related a:hover { color: var(--muted); }

/* Hub */
.hub-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.hub-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin-bottom: 16px; }
.hub-head .dek { font-size: 1.1rem; color: var(--muted); }

/* Card grid (hub + teaser) */
.k-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.k-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 14px 34px -20px rgba(17, 17, 17, .15); transition: border-color .3s, transform .3s var(--spring), box-shadow .3s; }
.k-card:hover { border-color: var(--ink); transform: translateY(-5px); box-shadow: 0 16px 44px rgba(17, 17, 17, .08); }
.k-card h2, .k-card h3 { font-size: 1.15rem; margin: 8px 0 10px; }
.k-card p { color: var(--muted); font-size: .93rem; }
.k-card .eyebrow { margin-bottom: 0; letter-spacing: .2em; }
.k-more { display: inline-block; margin-top: 16px; font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--gold); padding-bottom: 3px; }

.teaser-all { text-align: center; margin-top: 26px; }
.teaser-all a { font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 3px; }

@media (max-width: 720px) {
  .article-wrap, .hub-wrap { padding: 40px 20px 64px; }
}

/* ===== v4 (2026-09-28): DESKTOPPOLERINGEN PÅ HUBBARNA OCH ARTIKLARNA =====
   Albins beställning 2026-09-27 (premiumnivå på dator utan att något som
   Google läser ändras), spec
   docs/superpowers/specs/2026-09-27-desktoppolering-och-heron-design.md
   avsnitt 3.2, 3.8–3.10 och 8, uppgift 10 i planen. Rytmens tokens (--luft,
   --rubrik-luft, --penna) står i site.v16.css, som laddas före den här
   filen. På alla bredder gäller korten (flexkolumnen och de centrerade
   artikelkorten), hubbarnas h1 och h2 (strecket, marginalen under och
   spärrningen) och kunskapsartiklarnas h1 (strecket och luften under) samt
   brödsmulans typografi. Rutnätet, kortradernas linjering och luften mellan
   blocken gäller från 901 px; under det ser de ut som förut.
   Vakter: test/desktop.test.mjs och scripts/e2e-desktop.mjs. */

/* Inga ensamma kort (spec 3.9). Med auto-fit(280px) bröt hubbarna 3+3+1
   (/arbete/, sju kundjobb) och 3+3+3+1 (/kunskap/, tio artiklar), och det
   sista kortet hängde till vänster. Sex kolumner där varje kort spänner två:
   :nth-child(3n+1) pekar ut första kortet i en rad, och tillsammans med
   :last-child respektive :nth-last-child(2) bara när det också står först i
   en ofullständig sista rad. Ett ensamt kort flyttas till kolumn 3 och ett
   par börjar i kolumn 2, så att raden står mitt under de fulla raderna; det
   andra kortet i paret placeras automatiskt efter det första. Håller för
   alla antal kort. Blocken Egna produkter och Egna koncept (två kort) blir
   ett centrerat par i kundkortens bredd i stället för två breda kort, som
   Egna koncept på startsidan (spec 3.7). Scopat till hubbarnas egna rutnät:
   casesidornas artikelkort (.why .k-grid, tre kort) står kvar. Från 901 px;
   under det gäller auto-fit som förut. */
@media(min-width:901px){
  .hub-wrap>.k-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hub-wrap>.k-grid>*{grid-column:span 2}
  .hub-wrap>.k-grid>:nth-child(3n+1):last-child{grid-column:3/span 2}
  .hub-wrap>.k-grid>:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}
}

/* Korten (spec 3.10). .k-card var ett block, så "Läs mer" stod direkt under
   texten och 20–45 px isär inom en rad på /kunskap/. Som flexkolumn tar
   stycket det lediga utrymmet (flex-grow:1, samma idiom som artikelkorten på
   produktsidorna i Produkt.astro), och "Läs mer" står i botten med sina
   16 px ovanför. Artikelkorten på /kunskap/ och /en/knowledge/ centreras som
   på case- och produktsidorna (casesidornas kort centrerades på Albins
   beställning 2026-09-15); align-items:center gör guldstrecket under "Läs
   mer" lika brett som texten. Kundkorten på hubbarna (.w-card) har bilden
   överst och sin centrering i .w-body, därför undantagna. */
.k-card{display:flex;flex-direction:column}
.k-card:not(.w-card){align-items:center;text-align:center}
.k-card:not(.w-card)>p{flex-grow:1}

/* Kortraderna på /arbete/ och /en/work/: titlarna linjerar. Ögonbrynet är en
   eller två rader ("Skinnskatteberg · boende, hjälp & resor" bryter), och
   titeln under hamnade 18 px lägre i kortet där det bröt. Ögonbrynet
   reserverar två rader och står i sin botten, närmast titeln. Stycket tar
   det lediga utrymmet, så att taggarna och citatet står i kortets botten
   ovanför "Se caset" (.w-quote:s margin-top:auto blir då 0). Från 901 px,
   där korten står tre i rad. */
@media(min-width:901px){
  .hub-wrap .w-card .eyebrow{display:flex;align-items:flex-end;justify-content:center;min-height:36px;min-height:2lh}
  .hub-wrap .w-body>p{flex-grow:1}
}

/* Kundkortens inre rader med subgrid (spec 3.10, som Astros kundkort i
   site.css; granskningen av uppgift 10, 2026-09-28). Med flexkolumnen ovan
   stod taggarna och citatet i kortets botten, så ett citat som bröt på tre
   rader (Sun Guarden på /en/work/) lyfte stjärnorna 24 px över grannarnas.
   Här spänner varje kort i kundrutnätet (rutnätet efter .hubb-ingress) sju
   rader i föräldrarutnätet: bilden, ögonbrynet, titeln, stycket, taggarna,
   citatet och "Se caset", och .w-body ärver rad 2 till 7 med subgrid.
   Ögonbrynet och taggarna står i botten av sina spår (närmast titeln
   respektive citatet), övriga delar överst, så att titlar, stjärnor och
   "Se caset" står på samma höjd i hela kortraden oavsett språk och
   radbrytning. row-gap:0, luften kommer från delarnas egna marginaler som
   i flexkolumnen. Citatets auto-marginal nollas (annars trycks det ned i
   sitt spår), och justify-self:center håller "Se caset" och guldstrecket
   lika breda som texten. Egna produkter och Egna koncept (fem delar, inga
   citat) står kvar som flexkolumner. Från 901 px och bara med
   subgridstöd; annars gäller flexkolumnen. */
@media(min-width:901px){@supports (grid-template-rows:subgrid){
  .hub-wrap>.hubb-ingress+.k-grid>.w-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
  .hub-wrap>.hubb-ingress+.k-grid .w-body{display:grid;grid-row:2/span 6;grid-template-rows:subgrid;row-gap:0}
  .hub-wrap>.hubb-ingress+.k-grid .w-body>*{align-self:start}
  .hub-wrap>.hubb-ingress+.k-grid .w-body>.eyebrow,.hub-wrap>.hubb-ingress+.k-grid .w-body>.w-tags{align-self:end}
  .hub-wrap>.hubb-ingress+.k-grid .w-quote{margin-top:0}
  .hub-wrap>.hubb-ingress+.k-grid .k-more{justify-self:center}
}}

/* Etiketterna Egen produkt och Koncept på hubbkorten nere till vänster,
   som startsidans .ba (site.css, "Etiketterna (Koncept, Före → Efter)" i
   blocket DESKTOPPOLERINGEN, och mockup.css:162). Uppe till vänster täckte
   de VERSO-loggan och LoopLeads webbläsarhörn. Samma marginal (14 px),
   grad (9,5 px) och färg som .ba; typsnitt, spärrning, luft och form är
   redan desamma i hubbarnas .w-badge. Alla bredder, som på startsidan. */
.hub-wrap .w-badge{top:auto;bottom:14px;left:14px;font-size:9.5px;color:var(--ink)}

/* Luften på hubbarna (spec 8, rytmen; var 28–56 px): ingressen till
   rutnätet och Egna produkter/Egna koncept till sina kort --rubrik-luft (var
   44 och 28 px), före Egna produkter och Egna koncept --luft (var 56 px) och
   från sidans slut till sidfoten --luft (var 96 px, på artiklarna också).
   .koncept-head har inline-stilar på /arbete/-sidorna, därav .hub-wrap>. */
@media(min-width:901px){
  .hubb-ingress{margin-bottom:var(--rubrik-luft)}
  .hub-wrap>.koncept-head{margin-top:var(--luft);margin-bottom:var(--rubrik-luft)}
  .hub-wrap,.article-wrap{padding-bottom:var(--luft)}
}

/* Hubbarnas rubriker får sektionsrubrikernas guldstreck (spec 3.2 och 8):
   2 px med tonade ändar, .36 em under rubriken och lika brett som den
   längsta raden. streck.v1.js mäter raderna och sätter --streck-b; utan JS
   gäller rubrikboxens bredd. width:fit-content gör boxen lika bred som
   texten när rubriken ryms på en rad och som kolumnen när den bryter, som
   inline-block på Astro-sidorna, men rubriken står kvar som block
   (ögonbrynet före den är inline-flex och hade annars kunnat hamna på samma
   rad). Den fristående translate-egenskapen centrerar, så att pennans scaleX
   är orörd. Rubriken får .78 em under sig (var 16 och 12 px), annars stryker
   strecket ingressen. h1 ritas med pennan vid laddning som Astro-sidornas
   första rubrik; h2 står längre ned och visas färdig. Minska rörelse
   (site.vN.css släcker alla animationer) visar strecket direkt. */
.hub-head h1,.hub-wrap .koncept-head h2{position:relative;width:fit-content;margin-inline:auto;margin-bottom:.78em;letter-spacing:-.018em}
.hub-head h1::after,.hub-wrap .koncept-head h2::after{content:"";position:absolute;left:50%;bottom:-.36em;width:var(--streck-b,100%);height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(201,162,39,0),var(--gold) 24%,var(--gold) 76%,rgba(201,162,39,0));translate:-50% 0;transform-origin:center}
.hub-head h1::after{animation:streck-in 1.1s .35s var(--penna) both}
@keyframes streck-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Kunskapsartiklarna (spec 3.8). h1 får artikelsidornas korta streck som
   .k-artikel i site.css: 64 px, 2 px, guld till 70 % och tonar ut åt höger,
   8 px under rubriken och ritat från vänster. Brödsmulan .crumbs får
   .smula-typografin (site.v13.css): Montserrat 12,5 px med "›" mellan
   stegen, där separatorn är .smula-sep och står i template.js. Länkarna får
   .smula:s hover och sista steget, sidan själv, textfärgen som
   .smula [aria-current]. Rubriken får 32 px under sig (var 18): ingressen
   har ingen egen topp, och med 18 px stod strecket 13 px från ingressens
   text mot 27 px på Astros artikelsidor (.k-artikel h1 14 px plus
   ingressens 18, uppmätt 2026-09-28 i 390 och 1440 px). */
.article-head h1{position:relative;margin-bottom:32px}
.article-head h1::after{content:"";position:absolute;left:0;bottom:-8px;width:64px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold) 70%,rgba(201,162,39,0));transform-origin:left;animation:streck-in 1.1s .35s var(--penna) both}
.crumbs{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:.78rem;letter-spacing:.02em}
.crumbs a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumbs a:hover{color:var(--gold);border-color:var(--gold)}
.crumbs>span:last-child{color:var(--ink)}