/* =============================================================================
   friluftslivet.nu — Sidspecifika lager för REDAKTIONELLA + E-E-A-T-sidtyper.

   Denna fil ÄGS av ui-ux-expert-mockuparna (artikel, artikelkategori,
   produktkategori, författarsida, "Så testar vi"). Den bygger ENBART på tokens
   i fl-tokens.css och kompletterar fl-components.css / fl-header-footer.css.
   Inget krockar: allt prefixas .fle-* (page-layer) eller utökar .fl-* via egna
   modifierare som bara används här.

   Ledstjärna: ANDRUM. Hellre för mycket luft än för lite. Optimal radlängd,
   generösa sektionsavstånd, lugn rytm. Ljust + mörkt läge, AA, 44px, fokusringar.
   ========================================================================== */


/* =============================================================================
   0. GEMENSAMT — sidbredder, sektionsluft, små hjälpare
   ========================================================================== */

/* En bredare "läs-scen" som ger artiklar rejält med marginal runt textspalten.
   Textspalten själv hålls på --fl-bredd-text (68ch) av .fl-prose. */
.fle-sida { padding-bottom: var(--fl-luft-9); }

/* Sektionsluft som andas mer än demo-sidan: 96px topp, generöst mellan block. */
.fle-sektion { padding-block: var(--fl-luft-8); }
.fle-sektion--forsta { padding-top: var(--fl-luft-8); }
.fle-sektion--mjuk { background: var(--fl-bg-mjuk); }

/* Inledande blocktext med begränsad bredd och lugn ton (kategori-intron mm). */
.fle-intro { max-width: 62ch; }
.fle-intro p {
  font-size: var(--fl-text-md);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-mjuk);
}

/* Liten sektionsrubrik-rad: kicker + h2 + valfri "se alla"-länk till höger. */
.fle-rubrikrad {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fl-luft-5);
  flex-wrap: wrap;
  margin-bottom: var(--fl-luft-7);
}
.fle-rubrikrad__text { max-width: 60ch; }
.fle-rubrikrad h2 { margin-bottom: var(--fl-luft-2); }
.fle-rubrikrad p { margin: 0; color: var(--fl-text-mjuk); }
.fle-sealla {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
  font-family: var(--fl-font-ui);
  font-weight: var(--fl-vikt-fet);
  font-size: var(--fl-text-base);
  color: var(--fl-lank);
  text-decoration: none;
  white-space: nowrap;
}
.fle-sealla:hover { color: var(--fl-lank-hover); }
.fle-sealla svg { width: 18px; height: 18px; transition: transform var(--fl-tid) var(--fl-ease); }
.fle-sealla:hover svg { transform: translateX(3px); }


/* =============================================================================
   1. ARTIKEL-HERO — lugnt band ovanför artikeln (titel, ingress, byline-meta).
   Mörkt skymningsband så headern får en hero att ligga transparent över, men
   dämpat och läsbart, inte en skrikig bild.
   ========================================================================== */
.fle-artikelhero {
  position: relative;
  background:
    radial-gradient(130% 120% at 82% -10%, rgba(232,112,42,0.20), transparent 52%),
    linear-gradient(170deg, var(--fl-skymning) 0%, var(--fl-natt) 100%);
  color: var(--fl-sno);
  /* headern ligger ovanpå (transparent-läge), därför drar vi upp under den */
  margin-top: calc(var(--fl-header-h) * -1);
  padding-top: calc(var(--fl-header-h) + var(--fl-luft-8));
  padding-bottom: var(--fl-luft-8);
  overflow: hidden;
}
/* Diskreta stjärnor i hörnet, samma signaturkänsla som scenen, men stillsamt. */
.fle-artikelhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 30%, rgba(238,242,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 28% 18%, rgba(238,242,255,0.5), transparent),
    radial-gradient(1.3px 1.3px at 73% 24%, rgba(238,242,255,0.6), transparent),
    radial-gradient(1.1px 1.1px at 90% 14%, rgba(238,242,255,0.45), transparent);
  pointer-events: none;
}
.fle-artikelhero__inner { position: relative; max-width: 74ch; }
.fle-artikelhero .fl-bread { margin-bottom: var(--fl-luft-5); }
.fle-artikelhero .fl-bread a { color: var(--fl-dis-ljus); }
.fle-artikelhero .fl-bread a:hover { color: var(--fl-glod); }
.fle-artikelhero .fl-bread [aria-current="page"] { color: var(--fl-sno); }
.fle-artikelhero .fl-bread__avskilj { color: rgba(199,210,234,0.4); }
.fle-artikelhero .fl-kicker { color: var(--fl-glod); margin-bottom: var(--fl-luft-4); }
.fle-artikelhero h1 {
  color: var(--fl-sno);
  font-size: clamp(2.2rem, 5.2vw, var(--fl-text-3xl));
  max-width: 20ch;
  margin-bottom: var(--fl-luft-5);
}
.fle-artikelhero__lead {
  font-size: var(--fl-text-md);
  line-height: var(--fl-lh-normal);
  color: var(--fl-dis-ljus);
  max-width: 58ch;
  margin: 0 0 var(--fl-luft-6);
}

/* Kompakt meta-rad i hero (avatar + namn + datum + lästid), ljus-på-mörk. */
.fle-herometa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fl-luft-3) var(--fl-luft-5);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-dis-ljus);
}
.fle-herometa__person { display: inline-flex; align-items: center; gap: var(--fl-luft-3); }
.fle-herometa__namn { color: var(--fl-sno); font-weight: var(--fl-vikt-fet); }
.fle-herometa__namn span { color: var(--fl-dis); font-weight: var(--fl-vikt-normal); }
.fle-herometa__punkt { display: inline-flex; align-items: center; gap: var(--fl-luft-2); }
.fle-herometa__punkt svg { width: 15px; height: 15px; opacity: 0.8; }
.fle-herometa time { color: var(--fl-dis-ljus); }


/* =============================================================================
   2. ARTIKEL-LAYOUT — textspalt + sticky TOC-sidospalt, mycket luft.
   En enspalts-fallback under brytpunkt. TOC blir då ett vanligt block över texten.
   ========================================================================== */
.fle-artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: var(--fl-luft-8);
  align-items: start;
  padding-block: var(--fl-luft-8);
}
.fle-artikel__huvud { min-width: 0; }     /* tillåt prose att hålla sin egen bredd */
.fle-artikel__sido { min-width: 0; }

/* Figur som bryter ut bredare än textspalten för luftig effekt (valfritt). */
.fle-prose-utbruten { max-width: none; }

/* Inbäddad "relaterade produkter"-grupp i artikelflödet (klickbar). */
.fle-produktgrupp {
  margin: var(--fl-luft-8) 0;
  padding: var(--fl-luft-6);
  background: var(--fl-bg-mjuk);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.fle-produktgrupp__huvud {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fl-luft-4);
  flex-wrap: wrap;
  margin-bottom: var(--fl-luft-5);
}
.fle-produktgrupp__huvud h3 { margin: 0; font-size: var(--fl-text-lg); }
.fle-produktgrupp__not {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  color: var(--fl-text-svag);
}
.fle-produktgrupp__rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--fl-luft-5);
}

/* Sektionsavslut: relaterade artiklar + CTA i lugnt staplat flöde. */
.fle-artikelfot { padding-block: var(--fl-luft-6) var(--fl-luft-8); }

@media (max-width: 940px) {
  .fle-artikel {
    grid-template-columns: 1fr;
    gap: var(--fl-luft-7);
  }
  /* TOC flyttar överst, blir icke-sticky över texten */
  .fle-artikel__sido { order: -1; }
  .fle-artikel__sido .fl-toc--sticky { position: static; }
}


/* =============================================================================
   3. KATEGORI-HUBB (produktkategori) — ämnesingångar med korta beskrivningar.
   ========================================================================== */
.fle-hubbhero {
  position: relative;
  background:
    radial-gradient(130% 130% at 85% -20%, rgba(63,143,106,0.22), transparent 55%),
    linear-gradient(170deg, var(--fl-skymning), var(--fl-natt));
  color: var(--fl-sno);
  margin-top: calc(var(--fl-header-h) * -1);
  padding-top: calc(var(--fl-header-h) + var(--fl-luft-8));
  padding-bottom: var(--fl-luft-8);
  overflow: hidden;
}
.fle-hubbhero__inner { position: relative; max-width: 64ch; }
.fle-hubbhero .fl-bread { margin-bottom: var(--fl-luft-5); }
.fle-hubbhero .fl-bread a { color: var(--fl-dis-ljus); }
.fle-hubbhero .fl-bread a:hover { color: var(--fl-glod); }
.fle-hubbhero .fl-bread [aria-current="page"] { color: var(--fl-sno); }
.fle-hubbhero .fl-bread__avskilj { color: rgba(199,210,234,0.4); }
.fle-hubbhero .fl-kicker { color: var(--fl-glod); margin-bottom: var(--fl-luft-4); }
.fle-hubbhero h1 { color: var(--fl-sno); font-size: clamp(2.2rem, 5vw, var(--fl-text-3xl)); margin-bottom: var(--fl-luft-4); }
.fle-hubbhero p { font-size: var(--fl-text-md); line-height: var(--fl-lh-normal); color: var(--fl-dis-ljus); max-width: 54ch; margin: 0; }

/* Snabbstatistik-rad under hero (antal guider, testade prylar etc.) */
.fle-hubbstat {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-luft-6) var(--fl-luft-8);
  margin-top: var(--fl-luft-7);
  padding-top: var(--fl-luft-6);
  border-top: 1px solid rgba(199,210,234,0.16);
}
.fle-hubbstat__post { display: flex; flex-direction: column; gap: 2px; }
.fle-hubbstat__tal {
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-xl);
  color: var(--fl-glod);
  line-height: 1;
}
.fle-hubbstat__etikett {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-dis-ljus);
}

/* Ämnesingång-kort: stort klickbart, ikon + titel + kort beskrivning + antal. */
.fle-amnesrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--fl-luft-5);
}
.fle-amne {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fl-luft-3);
  padding: var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
  transition: border-color var(--fl-tid) var(--fl-ease),
              box-shadow var(--fl-tid) var(--fl-ease),
              transform var(--fl-tid) var(--fl-ease);
}
.fle-amne:hover {
  border-color: var(--fl-linje-stark);
  box-shadow: var(--fl-skugga-2);
  transform: translateY(-3px);
}
.fle-amne__ikon {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--fl-radie-md);
  background: var(--fl-accent-mjuk);
  color: var(--fl-kicker-farg);
}
[data-fl-tema="morkt"] .fle-amne__ikon { color: var(--fl-barnsten); }
.fle-amne__ikon svg { width: 26px; height: 26px; }
.fle-amne__titel { margin: 0; font-size: var(--fl-text-lg); }
.fle-amne__titel a { color: var(--fl-text); text-decoration: none; }
.fle-amne__titel a::after { content: ""; position: absolute; inset: 0; }
.fle-amne:hover .fle-amne__titel a { color: var(--fl-accent-hover); }
.fle-amne__text { margin: 0; font-size: var(--fl-text-base); line-height: var(--fl-lh-normal); color: var(--fl-text-mjuk); }
.fle-amne__antal {
  margin-top: auto;
  padding-top: var(--fl-luft-2);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-svag);
}


/* =============================================================================
   4. FÖRFATTARSIDA (E-E-A-T-skyltfönster) — riktig-person-profil.
   ========================================================================== */
.fle-forfhero {
  position: relative;
  background:
    radial-gradient(120% 130% at 88% -10%, rgba(232,112,42,0.18), transparent 55%),
    linear-gradient(170deg, var(--fl-skymning), var(--fl-natt));
  color: var(--fl-sno);
  margin-top: calc(var(--fl-header-h) * -1);
  padding-top: calc(var(--fl-header-h) + var(--fl-luft-8));
  padding-bottom: var(--fl-luft-8);
  overflow: hidden;
}
.fle-forfhero__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fl-luft-7);
  align-items: center;
}
.fle-forfhero__foto {
  width: 168px; height: 168px;
  flex: none;
  border-radius: var(--fl-radie-lg);
  overflow: hidden;
  border: 2px solid rgba(246,244,238,0.2);
  background:
    radial-gradient(circle at 50% 30%, var(--fl-fjall-ljus), var(--fl-indigo) 70%);
  box-shadow: var(--fl-skugga-3);
}
.fle-forfhero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Platshållarinitial när foto saknas i mockupen */
.fle-forfhero__foto--platshallare {
  display: grid;
  place-items: center;
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-3xl);
  color: var(--fl-dis-ljus);
}
.fle-forfhero .fl-kicker { color: var(--fl-glod); margin-bottom: var(--fl-luft-3); }
.fle-forfhero h1 { color: var(--fl-sno); margin-bottom: var(--fl-luft-3); }
.fle-forfhero__roll {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-md);
  color: var(--fl-dis-ljus);
  margin: 0 0 var(--fl-luft-5);
}
/* sameAs-länkar (sociala profiler) som ikon-knappar */
.fle-sameas { display: flex; flex-wrap: wrap; gap: var(--fl-luft-3); }
.fle-sameas a {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
  min-height: 44px;
  padding: 0 var(--fl-luft-4);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-medium);
  color: var(--fl-dis-ljus);
  text-decoration: none;
  background: rgba(246,244,238,0.06);
  border: 1px solid rgba(199,210,234,0.22);
  border-radius: var(--fl-radie-pill);
  transition: border-color var(--fl-tid) var(--fl-ease), color var(--fl-tid) var(--fl-ease), background var(--fl-tid) var(--fl-ease);
}
.fle-sameas a:hover { color: var(--fl-glod); border-color: var(--fl-glod); background: rgba(255,206,107,0.08); }
.fle-sameas svg { width: 18px; height: 18px; flex: none; }

/* Profil-brödtext + meritlistor i två spalter på desktop */
.fle-forfkropp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--fl-luft-8);
  align-items: start;
  padding-block: var(--fl-luft-8);
}
.fle-meritkort {
  padding: var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.fle-meritkort + .fle-meritkort { margin-top: var(--fl-luft-5); }
.fle-meritkort h3 {
  margin: 0 0 var(--fl-luft-4);
  font-size: var(--fl-text-md);
}
.fle-meritlista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fl-luft-4); }
.fle-meritlista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fl-luft-3);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-mjuk);
}
.fle-meritlista svg { width: 20px; height: 20px; color: var(--fl-trad); margin-top: 2px; flex: none; }
[data-fl-tema="morkt"] .fle-meritlista svg { color: var(--fl-gras); }
.fle-meritlista b { color: var(--fl-text); font-weight: var(--fl-vikt-fet); }

@media (max-width: 860px) {
  .fle-forfhero__inner { grid-template-columns: 1fr; gap: var(--fl-luft-6); text-align: left; }
  .fle-forfhero__foto { width: 132px; height: 132px; }
  .fle-forfkropp { grid-template-columns: 1fr; gap: var(--fl-luft-7); }
}


/* =============================================================================
   5. METODIK-/TRANSPARENSSIDA ("Så testar vi") — page.php-typ.
   Innehållsspalt med starka tillitsblock: steg, vilka som testar, vilken data.
   ========================================================================== */
.fle-metodhero {
  position: relative;
  background:
    radial-gradient(130% 120% at 18% -20%, rgba(63,143,106,0.20), transparent 52%),
    radial-gradient(120% 120% at 92% 0%, rgba(232,112,42,0.16), transparent 50%),
    linear-gradient(170deg, var(--fl-skymning), var(--fl-natt));
  color: var(--fl-sno);
  margin-top: calc(var(--fl-header-h) * -1);
  padding-top: calc(var(--fl-header-h) + var(--fl-luft-8));
  padding-bottom: var(--fl-luft-8);
  overflow: hidden;
}
.fle-metodhero__inner { position: relative; max-width: 70ch; }
.fle-metodhero .fl-kicker { color: var(--fl-glod); margin-bottom: var(--fl-luft-4); }
.fle-metodhero h1 { color: var(--fl-sno); font-size: clamp(2.2rem, 5.2vw, var(--fl-text-3xl)); max-width: 18ch; margin-bottom: var(--fl-luft-5); }
.fle-metodhero p { font-size: var(--fl-text-md); line-height: var(--fl-lh-normal); color: var(--fl-dis-ljus); max-width: 56ch; margin: 0; }

/* Innehållsspalt för metodiksidan (lugn, läsbar, lite bredare än prose). */
.fle-metodkropp { max-width: 74ch; padding-block: var(--fl-luft-8); }

/* Stora steg-block (hur vi testar) numrerade och luftiga. */
.fle-steg { display: grid; gap: var(--fl-luft-5); margin: var(--fl-luft-6) 0; }
.fle-steg__rad {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fl-luft-5);
  padding: var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.fle-steg__nr {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--fl-accent);
  color: #2a1402;
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-lg);
}
.fle-steg__titel { margin: 0 0 var(--fl-luft-2); font-size: var(--fl-text-lg); }
.fle-steg__text { margin: 0; color: var(--fl-text-mjuk); line-height: var(--fl-lh-brod); }

/* "Vilka testar" — personrad med avatarer */
.fle-testare {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--fl-luft-5);
  margin: var(--fl-luft-6) 0;
}
.fle-testare__kort {
  display: flex;
  gap: var(--fl-luft-4);
  padding: var(--fl-luft-5);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.fle-testare__namn { margin: 0 0 2px; font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); font-size: var(--fl-text-base); color: var(--fl-text); }
.fle-testare__roll { margin: 0 0 var(--fl-luft-2); font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.fle-testare__text { margin: 0; font-size: var(--fl-text-sm); line-height: var(--fl-lh-normal); color: var(--fl-text-mjuk); }

/* "Vilken data vi samlar" — uppmätta värden i en luftig lista */
.fle-datalista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--fl-luft-5);
  margin: var(--fl-luft-6) 0;
  padding: 0;
  list-style: none;
}
.fle-datalista li {
  display: flex;
  gap: var(--fl-luft-3);
  padding: var(--fl-luft-5);
  background: var(--fl-bg-mjuk);
  border-radius: var(--fl-radie-md);
}
.fle-datalista svg { width: 22px; height: 22px; color: var(--fl-sjo); flex: none; margin-top: 2px; }
[data-fl-tema="morkt"] .fle-datalista svg { color: var(--fl-sjo-ljus); }
.fle-datalista b { display: block; font-family: var(--fl-font-display); color: var(--fl-text); font-size: var(--fl-text-base); margin-bottom: 2px; }
.fle-datalista span { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); line-height: var(--fl-lh-normal); }

/* Innehållsförteckning-länkrad högst upp på en lång metodiksida */
.fle-snabbnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-luft-2);
  margin: var(--fl-luft-6) 0 var(--fl-luft-7);
  padding: 0;
  list-style: none;
}
.fle-snabbnav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--fl-luft-4);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-medium);
  color: var(--fl-text-mjuk);
  text-decoration: none;
  background: var(--fl-bg-mjuk);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-pill);
  transition: border-color var(--fl-tid-snabb) var(--fl-ease), color var(--fl-tid-snabb) var(--fl-ease);
}
.fle-snabbnav a:hover { border-color: var(--fl-accent); color: var(--fl-text); }


/* =============================================================================
   6. DELAD: artikelkort-rutnät med generös luft (artikelkategori + relaterat).
   ========================================================================== */
.fle-artikelrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--fl-luft-6);
}


/* =============================================================================
   7. TEMA-VÄXLARE (demo-knapp) — samma placering som designsystemet.
   ========================================================================== */
.fle-temaknapp {
  position: fixed;
  right: var(--fl-luft-5);
  bottom: var(--fl-luft-5);
  z-index: 1500;
  box-shadow: var(--fl-skugga-3);
}

/* =============================================================================
   MIGRERAT WP-INNEHÅLL i .fl-prose — responsiva bilder och figurer
   (artiklar importerade från liggunderlag.nu använder WordPress-markup).
   ========================================================================== */
.fl-prose img { max-width: 100%; height: auto; display: block; border-radius: var(--fl-radie-md); }
.fl-prose figure { margin: var(--fl-luft-6) 0; }
.fl-prose figure img { width: 100%; }
.fl-prose figure figcaption,
.fl-prose .wp-element-caption {
  margin-top: var(--fl-luft-3); font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm); color: var(--fl-text-svag); text-align: center;
}

/* Artikel-thumbnails: lägre, jämn höjd (max 250px), snyggt beskuret */
.fle-artikelrutnat .fl-kort__media { aspect-ratio: 2 / 1; max-height: 250px; overflow: hidden; }
.fle-artikelrutnat .fl-kort__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Artikel-taggar — separerade från kategorin (kategori bor i brödsmula/kicker) */
.fl-artikeltaggar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fl-luft-3);
  margin-top: var(--fl-luft-7); padding-top: var(--fl-luft-5); border-top: 1px solid var(--fl-linje);
}
.fl-artikeltaggar__rubrik {
  font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal); text-transform: uppercase; color: var(--fl-text-svag);
}
.fl-artikeltaggar__lista { display: flex; flex-wrap: wrap; gap: var(--fl-luft-2); margin: 0; padding: 0; list-style: none; }
.fl-artikeltaggar .fl-tagg { cursor: default; }

/* =============================================================================
   ARTIKELINDEX — datumflöde + snabbfilter (kategori, typ). Client-side filtrering.
   ========================================================================== */
.fle-filter { display: flex; flex-wrap: wrap; gap: var(--fl-luft-5) var(--fl-luft-7); margin-bottom: var(--fl-luft-4); }
.fle-filter__grupp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fl-luft-2); }
.fle-filter__label { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); font-weight: var(--fl-vikt-fet); letter-spacing: var(--fl-sparrning-versal); text-transform: uppercase; color: var(--fl-text-svag); margin-right: var(--fl-luft-2); }
.fle-chip {
  display: inline-flex; align-items: center; gap: var(--fl-luft-2); min-height: 38px; padding: 0 var(--fl-luft-4);
  background: var(--fl-bg-upphojd); border: 1px solid var(--fl-linje-stark); border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-ui); font-size: var(--fl-text-base); color: var(--fl-text); cursor: pointer;
  transition: background var(--fl-tid) var(--fl-ease), border-color var(--fl-tid) var(--fl-ease), color var(--fl-tid) var(--fl-ease);
}
.fle-chip:hover { border-color: var(--fl-accent); }
.fle-chip.is-aktiv { background: var(--fl-accent); border-color: var(--fl-accent); color: #2a1402; font-weight: var(--fl-vikt-fet); }
.fle-chip__antal { font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.fle-chip.is-aktiv .fle-chip__antal { color: #2a1402; }
.fle-filter__antal { color: var(--fl-text-svag); font-size: var(--fl-text-sm); margin: 0 0 var(--fl-luft-5); }
.fle-filter__tomt { color: var(--fl-text-mjuk); }
/* Typ-etikett i kortets metarad (skild från kategorin som är kicker) */
.fl-kort__typ { font-family: var(--fl-font-ui); font-weight: var(--fl-vikt-fet); color: var(--fl-kicker-farg); }

/* =============================================================================
   ARTIKELHERO MED OMSLAGSBILD — bilden som bakgrund + robust läsbarhetsslöja.
   Stark mörk gradient (vänster-tung där texten ligger + botten) ovanpå bilden,
   plus text-shadow, så texten är läsbar oavsett bildens färg. Sätt bilden via
   inline-stil: style="--fle-hero-bild:url('/uploads/...')".
   ========================================================================== */
.fle-artikelhero--foto {
  margin-top: 0;                       /* solid header tar egen plats, ingen bleed under */
  padding-top: var(--fl-luft-8);
  background:
    linear-gradient(90deg, rgba(7,10,20,0.88) 0%, rgba(7,10,20,0.68) 52%, rgba(7,10,20,0.42) 100%),
    linear-gradient(0deg, rgba(7,10,20,0.60), rgba(7,10,20,0.20) 55%),
    var(--fle-hero-bild, none) center / cover no-repeat,
    var(--fl-skymning);
}
.fle-artikelhero--foto::after { display: none; }   /* riktig bild ersätter stjärnorna */
.fle-artikelhero--foto .fle-artikelhero__inner { text-shadow: 0 1px 10px rgba(7, 10, 20, 0.5); }

/* Nivå-etikett i kort-meta (skild från typ som är färgad) */
.fl-kort__niva { font-weight: var(--fl-vikt-medium); color: var(--fl-text-mjuk); }


/* =============================================================================
   BLOCKMOTOR — fristående sidor (sida.php) + blockspecifik stil
   ========================================================================== */
.fle-sidtopp { padding-bottom: var(--fl-luft-5); }
.fle-sidtopp h1 { margin: var(--fl-luft-3) 0 var(--fl-luft-4); }
.fle-sidtopp__ingress {
  max-width: var(--fl-bredd-text, 68ch);
  margin: 0;
  font-size: var(--fl-text-lg);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-mjuk);
}
.fl-prose--centrerad { margin-left: auto; margin-right: auto; }
.fle-siduppdaterad {
  max-width: var(--fl-bredd-text, 68ch);
  margin: var(--fl-luft-7) auto 0;
  font-size: var(--fl-text-sm);
  color: var(--fl-text-svag, var(--fl-text-mjuk));
}

/* Faktaruta — lugn callout i brödtextflödet */
.fl-faktaruta {
  margin: var(--fl-luft-6) 0;
  padding: var(--fl-luft-5) var(--fl-luft-6);
  background: var(--fl-accent-mjuk);
  border-left: 4px solid var(--fl-accent);
  border-radius: var(--fl-radie-md);
}
.fl-faktaruta__titel {
  margin: 0 0 var(--fl-luft-2);
  font-family: var(--fl-font-rubrik);
  font-weight: var(--fl-vikt-fet);
  font-size: var(--fl-text-md);
}
.fl-faktaruta p { margin: 0; }
.fl-faktaruta p + p { margin-top: var(--fl-luft-3); }
[data-fl-tema="morkt"] .fl-faktaruta { background: rgba(63, 143, 106, 0.14); border-left-color: var(--fl-gras); }

/* CTA-block */
.fl-block-cta { margin: var(--fl-luft-7) 0 0; }


/* =============================================================================
   ARTIKEL-HERO med riktig <picture> ur mediabiblioteket (LCP: eager+fetchpriority).
   Samma mörka gradient som --foto, men bilden ligger bakom som responsiv <picture>.
   ========================================================================== */
.fle-artikelhero--bild {
  margin-top: 0;
  padding-top: var(--fl-luft-8);
  background: var(--fl-skymning);
}
.fle-artikelhero--bild::after {
  content: ""; position: absolute; inset: 0; z-index: 1; display: block;
  background:
    linear-gradient(90deg, rgba(7,10,20,0.88) 0%, rgba(7,10,20,0.68) 52%, rgba(7,10,20,0.42) 100%),
    linear-gradient(0deg, rgba(7,10,20,0.60), rgba(7,10,20,0.20) 55%);
}
.fle-artikelhero--bild .fle-artikelhero__inner { position: relative; z-index: 2; text-shadow: 0 1px 10px rgba(7, 10, 20, 0.5); }


/* =============================================================================
   SÖKRESULTATSIDA (/sok/)
   ========================================================================== */
.fl-sokform { display: flex; gap: var(--fl-luft-3); margin: var(--fl-luft-4) 0; max-width: 640px; }
.fl-sokform__falt {
  flex: 1; padding: var(--fl-luft-3) var(--fl-luft-4);
  border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md);
  font-size: var(--fl-text-md); background: var(--fl-bg-upphojd);
}
.fl-sokform__falt:focus { outline: none; border-color: var(--fl-accent); }
.fl-sokgrupp { margin-top: var(--fl-luft-7); }
.fl-sokgrupp__huvud { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fl-luft-4); border-bottom: 2px solid var(--fl-linje); padding-bottom: var(--fl-luft-2); }
.fl-sokgrupp__huvud h2 { margin: 0; font-size: var(--fl-text-lg); }
.fl-sokgrupp__antal { color: var(--fl-text-svag, #888); font-weight: 400; font-size: var(--fl-text-base); }
.fl-soklista { list-style: none; margin: 0; padding: 0; }
.fl-sokrad { display: flex; align-items: center; justify-content: space-between; gap: var(--fl-luft-4); padding: var(--fl-luft-3) 0; border-bottom: 1px solid var(--fl-linje); }
.fl-sokrad__lank { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.fl-sokrad__titel { font-weight: 600; color: var(--fl-lank, var(--fl-accent)); }
.fl-sokrad__lank:hover .fl-sokrad__titel { text-decoration: underline; }
.fl-sokrad__sub { font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }
.fl-sokrad__typ { flex: none; font-size: var(--fl-text-xs, .72rem); text-transform: uppercase; letter-spacing: .05em; color: var(--fl-text-svag, #888); background: var(--fl-accent-mjuk); padding: 3px 8px; border-radius: 999px; }
.fl-sok-tom { padding: var(--fl-luft-6) 0; }