/* Artikelkort (kolumn 1 på startsida/arkiv) samt artikelsidans brödtext.
   Källa: design/Forvaltarforum Redesign.dc.html + Artikelsida(.dc.html). */

/* ---- Kort: toppartikel ---- */
.ff-card-lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ff-card-lead__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ff-card-lead__cat {
  font-size: 11px;
  color: var(--ff-blue);
}
.ff-card-lead__date {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  color: var(--ff-text-meta);
}
.ff-card-lead__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: pretty;
}
.ff-card-lead__title a { color: var(--ff-dark); }
.ff-card-lead__excerpt {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ff-text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}

.ff-divider {
  height: 1px;
  background: var(--ff-divider);
  border: 0;
  margin: 0;
}

/* ---- Kort: vanlig artikel (2-kolumnsrutnät i kolumn 1) ---- */
.ff-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 32px;
}
.ff-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ff-card__cat {
  font-size: 10px;
  color: var(--ff-blue);
}
.ff-card__date {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 10px;
  color: var(--ff-text-meta);
}
.ff-card__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 23px;
  line-height: 1.15;
  font-weight: 600;
  text-wrap: pretty;
}
.ff-card__title a { color: var(--ff-dark); }
.ff-card__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ff-card-copy);
}

.ff-more-link {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  color: var(--ff-dark);
  border-bottom: 2px solid var(--ff-green);
  padding-bottom: 3px;
}

.ff-partner-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--ff-border);
  border-left: 4px solid var(--ff-green);
  padding: 22px 26px;
}
.ff-partner-strip__eyebrow {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ff-text-meta);
  display: block;
}
.ff-partner-strip__title {
  font-family: var(--ff-font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ff-dark);
  display: block;
}
.ff-partner-strip__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--ff-blue);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .ff-card-lead__title { font-size: 27px; line-height: 1.15; }
  .ff-card-lead__excerpt { font-size: 16px; line-height: 1.55; }
  .ff-card-grid { grid-template-columns: 1fr; gap: 30px; }
  .ff-card__title { font-size: 21px; line-height: 1.2; }
  .ff-card__excerpt { display: none; } /* mobil: rubrik utan ingress för sekundära artiklar, se README */
}

/* ---- 404 ---- */
.ff-404__inner {
  padding: 96px var(--ff-container-pad) 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 640px;
}
.ff-404__eyebrow { font-size: 13px; color: var(--ff-blue); }
.ff-404__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--ff-dark);
}
.ff-404__text { margin: 0 0 8px; color: var(--ff-text-secondary); font-size: 16px; }
.ff-404 .ff-search { width: 320px; margin-bottom: 8px; }
@media (max-width: 1023px) {
  .ff-404__inner { padding: 56px 14px 80px; min-width: 0; }
  .ff-404 .ff-search { width: 100%; }
}

/* ---- Listningssidor (archive/taxonomy/search) ---- */
.ff-listing { display: flex; flex-direction: column; gap: 32px; }
.ff-listing__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ff-dark);
}
.ff-listing__grid { grid-template-columns: 1fr 1fr; }
.ff-listing__empty { font-size: 16px; color: var(--ff-text-secondary); }
.ff-listing__pagination { display: flex; gap: 12px; font-size: 14px; }
.ff-listing__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--ff-border);
  color: var(--ff-dark);
}
.ff-listing__pagination .page-numbers.current { background: var(--ff-blue); color: #fff; border-color: var(--ff-blue); }
.ff-listing__pagination .page-numbers:hover { border-color: var(--ff-blue); color: var(--ff-blue); }
@media (max-width: 1023px) {
  .ff-listing__grid { grid-template-columns: 1fr; }
  .ff-listing__title { font-size: 26px; }
}

/* ---- Artikelsida (single.php) ---- */
.ff-single-article {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (max-width: 1023px) {
  .ff-single-article { gap: 24px; }
}

.ff-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.035em;
  color: var(--ff-text-meta);
  flex-wrap: wrap;
}
.ff-breadcrumbs a { color: var(--ff-text-meta); }
.ff-breadcrumbs a:hover { color: var(--ff-blue); }

/* Partnerartiklar (kundens instruktion 2026-09-07, se
   inc/partner-articles.php) - "Partnertext från X"/"Sponsrad artikel från
   X"-etiketten längst upp på artikeln. Ersätter gamla temats färgade
   "ticker-title"-bar (part-payed.php) med en enklare, temaenlig variant:
   samma blå accentfärg som kategorietiketten (.ff-article-head__cat)
   använder på andra ställen i temat, bara som en egen liten rad ovanför
   brödtexten istället för inbakad i metaraden. */
.ff-partner-label {
  align-self: flex-start;
  background: var(--ff-blue-tint);
  border-left: 4px solid var(--ff-blue);
  color: var(--ff-blue);
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
}

.ff-article-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ff-article-head__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ff-article-head__cat { font-size: 11px; color: var(--ff-blue); font-family: var(--ff-font-mono); word-spacing: -0.2em; letter-spacing: 0.04em; }
.ff-article-head__date,
.ff-article-head__readtime {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  color: var(--ff-text-meta);
}
.ff-article-head__spacer { flex: 1; }

.ff-share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ff-share__btn {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.035em;
  color: var(--ff-dark);
  border: 1px solid var(--ff-divider);
  padding: 7px 12px;
  background: transparent;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ff-share__btn:hover { border-color: var(--ff-blue); color: var(--ff-blue); }
.ff-share__btn.is-saved { border-color: var(--ff-green); color: var(--ff-green); background: var(--ff-hover-dropdown); }

.ff-article-head__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: pretty;
}
.ff-article-head__excerpt {
  margin: 0;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ff-text-secondary);
  max-width: 60ch;
  font-weight: 500;
  text-wrap: pretty;
}

.ff-article-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-article-figure figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ff-text-soft);
}

.ff-article-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 68ch;
  font-size: 18px;
  line-height: 1.62;
  color: var(--ff-body-copy);
}
/* [ffusers_forum] (klubbforum.se/klubbforum/, se
   template-wide-content-blue-bg.php) renderar en egen bred UI-widget,
   inte löptext - läsbredden på 68ch klämde ihop pluginets egen
   3-kolumnslayout (.ff-new-start2-layout) och lämnade tomt utrymme åt
   höger inne i .ff-col-main. Kundens rättning 2026-08-28: låt widgeten
   fylla hela kolumnen istället - pluginets egen .ff-forum-container
   (max-width: 1200px) sätter redan ett eget tak. */
.ff-article-body:has(.ff-forum-container) { max-width: none; }
/* Mallen "Bred satsyta" (template-wide-content.php, t.ex. /annonsera/,
   /kontakt/) - kundens skärmdump 2026-09-07 med grön markering av
   tomrummet mellan sidans egna rutor/tabeller och kolumn 2. Dessa sidor
   är sälj-/info-material (rutor, tabeller, bilder), inte löptext-
   artiklar, så den vanliga 68ch-läsbredden (ovan) klämmer ihop
   innehållet och lämnar tomt utrymme kvar i .ff-col-main i onödan -
   samma bakomliggande problem som redan lösts för forumwidgeten ovan.
   ff-col-main--full-width sätts bara av template-wide-content.php. */
.ff-col-main--full-width .ff-article-body { max-width: none; }
/* Kundens rättning 2026-09-03: pluginets .ff-forum-container har egen
   vit bakgrund + 2rem padding + centrerande marginal (byggd för att
   klara sig själv om shortcoden klistras in var som helst) - men här
   ligger den redan inne i temats egen artikelyta (.ff-col-main), som
   har sin egen bakgrund/marginal via sidmallen (template-wide-content-
   blue-bg.php). Resultatet blev en vit "ruta i rutan" med dubbel
   marginal. Nollställer här i temat istället för i pluginets CSS, så en
   framtida plugin-uppdatering inte skriver över det. max-width (ovan)
   och kortens egna vita bakgrunder (.ff-new-start2-form-card m.fl.)
   påverkas inte - bara ytterrutan. */
.ff-article-body .ff-forum-container {
  background: transparent;
  padding: 0;
  margin: 0;
}
/* Kundens rättning 2026-09-03 (samma dag, andra omgången): samma "vit
   ruta i rutan"-problem gällde forum-headern (.ff-forum-header, raden
   med "Forum"-rubriken + sökrutan) - egen vit bakgrund ovanpå en yta som
   redan är ljus. Bara bakgrunden tas bort, paddingen/mellanrummet runt
   rubriken och sökrutan behålls oförändrat. */
.ff-article-body .ff-forum-header {
  background: transparent;
}
/* [ffusers_my_points]/[ffusers_top_users] (poang.se/poang/, se
   template-wide-content.php) - samma problem som forumet: 68ch-taket
   klämde ihop topplistorna mot vänsterkanten och lämnade tomt utrymme
   åt höger. Kundens rättning 2026-08-28. Widgetarna sätter själva
   ingen egen max-width (till skillnad från forumets
   .ff-forum-container), så vi ger dem ett eget njutbart läsdjup
   istället för att låta dem sträcka sig hela vägen till sidopanelen. */
.ff-article-body:has(.ff-top-users),
.ff-article-body:has(.ff-my-points) {
  max-width: none;
}
.ff-article-body:has(.ff-top-users) .ff-top-users,
.ff-article-body:has(.ff-my-points) .ff-my-points {
  max-width: 900px;
}
/* RÄTTNING 2026-09-10 (kunden, skärmdump av /poang/: "Kan poängsidan
   använda ytan bättre?"): 900px-taket ovan sattes 2026-08-28 när sidan
   fortfarande hade tre kolumner (kolumn 1 var då bara ~900-980px bred,
   se .ff-single-shell--no-col2 i grid.css) - ett medvetet läsdjup, inte
   en bugg. Sedan kolumn 2 togs bort på just den här sidan
   (template-wide-content.php, is_page(68323)) är kolumn 1 uppemot
   1300px bred, och samma 900px-tak lämnar nu tomt utrymme till höger
   om topplistorna igen - samma problem som rättningen ovan löste en
   gång, fast nu orsakat av att kolumnen blev bredare i stället för för
   smal. Höjs bara när .ff-single-shell--no-col2 är satt (bara
   /poang/ just nu) - höjer inte 900px-taket på någon annan sida som
   råkar visa samma widgetar med tre kolumner kvar. */
.ff-single-shell--no-col2 .ff-article-body:has(.ff-top-users) .ff-top-users,
.ff-single-shell--no-col2 .ff-article-body:has(.ff-my-points) .ff-my-points {
  max-width: 1200px;
}
.ff-article-body p { margin: 0; text-wrap: pretty; }
.ff-article-body h2 {
  margin: 12px 0 0;
  font-family: var(--ff-font-serif);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
}
.ff-article-body h3 {
  margin: 8px 0 0;
  font-family: var(--ff-font-serif);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.ff-article-body blockquote {
  margin: 8px 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--ff-green);
  font-family: var(--ff-font-serif);
  font-size: 26px;
  line-height: 1.3;
  color: var(--ff-dark);
}
.ff-article-body ul, .ff-article-body ol { margin: 0; padding-left: 20px; }
.ff-article-body img { display: block; max-width: 100%; height: auto; }
.ff-article-body a { text-decoration: underline; }

.ff-factbox {
  background: var(--ff-hover-dropdown);
  border: 1px solid var(--ff-border);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ff-factbox img { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; height: auto; }
.wp-caption img { max-width: 100%; height: auto; }
.wp-caption .wp-caption-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ff-text-soft);
  margin: 6px 0 0;
}
.ff-factbox__eyebrow {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ff-blue);
}
.ff-factbox ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ff-body-copy);
}

/* UTSTÄLLARE-loggor (kundens instruktion 2026-09-08: "stila upp
   visningar av ikoner under Utställare", se t.ex.
   /seminarie/framtidensdigitala-sthlm-2026/). Innehållet är en rå
   <table class="logotable"> - inklistrad direkt i en textwidget/sidas
   innehåll, inte i temats filer (samma klass användes i gamla temat,
   se dess style.css: ".single-seminarie .textwidget table") - med en
   logga per <td>, men med helt olika bildstorlekar/proportioner rakt
   av (native pixelmått från 154px till 512px höjd om varandra).
   Bekräftat att samma klass återanvänds på flera
   "Vill du vara med som utställare"-sidor, så en global regel här
   snyggar till alla dem också, inte bara det rapporterade seminariet.
   Görs om till ett jämnt rutnät med likadana "kort" per logga istället
   för att ändra markupen (den ligger i databasen, inte här) - display:
   contents på tbody/tr gör <td> till riktiga grid-items direkt under
   <table> utan att skriva om HTML:en. */
table.logotable {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  border-collapse: separate;
}
table.logotable tbody,
table.logotable tr {
  display: contents;
}
table.logotable td {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ff-card-bg);
  border: 1px solid var(--ff-border);
  border-radius: 4px;
  padding: 14px;
  height: 90px;
  box-sizing: border-box;
}
table.logotable td a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
table.logotable img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* "Partnerinfon" (kundens instruktion 2026-09-07: "under artikeln men
   ovanför Partnerartiklar från XXX. Gärna på färgad ruta."). Innehållet
   (right_column/column_text, se inc/partner-articles.php) är en
   redaktörsskriven WYSIWYG-blob som redan innehåller både företagstext
   och ett färdigbyggt kontaktkort - ingen egen struktur att style:a här
   utöver att ge den plats att andas i den färgade rutan. Samma
   blått-tonade "ruta med tyngd"-mönster som --ff-blue-tint redan används
   till på andra ställen i temat (se tokens.css). */
.ff-partner-info {
  background: var(--ff-blue-tint);
  border-left: 4px solid var(--ff-blue);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-partner-info__eyebrow {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ff-blue);
}
.ff-partner-info__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ff-body-copy);
}
.ff-partner-info__text img { max-width: 100%; height: auto; }
.ff-partner-info__text p { margin: 0 0 10px; }
.ff-partner-info__text p:last-child { margin-bottom: 0; }
.ff-partner-info__text a { color: var(--ff-blue); }

.ff-read-also {
  border-top: 1px solid var(--ff-border);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ff-read-also__title {
  margin: 0;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ff-dark);
}
.ff-read-also__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.ff-read-also__grid .ff-card__title { font-size: 22px; }

@media (max-width: 1023px) {
  .ff-article-head__title { font-size: 32px; line-height: 1.12; letter-spacing: -0.01em; max-width: none; }
  .ff-article-head__excerpt { font-size: 17px; line-height: 1.5; font-weight: 500; max-width: none; }
  .ff-article-head__meta { row-gap: 8px; }
  .ff-share { width: 100%; }
  .ff-share__btn { flex: 1; justify-content: center; }
  .ff-article-figure img { display: block; width: 100%; margin: 0; }
  .ff-article-figure figcaption { padding: 0 14px; }
  .ff-article-body { font-size: 17px; line-height: 1.6; color: #23302A; }
  .ff-article-body h2 { font-size: 25px; }
  .ff-article-body blockquote { font-size: 22px; padding-left: 18px; }
  .ff-read-also__grid { grid-template-columns: 1fr; gap: 24px; }
  .ff-read-also__grid .ff-card__title { font-size: 20px; }
}

/* ---- Betalvägg (FastighetsKlubben) ----
   Se inc/paywall.php. Utdraget ovanför tonas ut mot vitt så det är tydligt
   att artikeln fortsätter bakom rutan, sedan säljrutan i temats egen
   färgskala (inte gamla temats guldgradient - anpassad till nya
   designsystemet, men samma text/pris/länkar). */
.ff-article-body--locked {
  position: relative;
  max-height: 260px;
  overflow: hidden;
}
.ff-article-body--locked::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0) 0%, var(--ff-body-bg) 90%);
}

.ff-paywall {
  background: var(--ff-dark);
  color: #ffffff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ff-paywall__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  max-width: 42ch;
}
.ff-paywall__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ff-font-sans);
}
.ff-paywall__price-from {
  font-size: 13px;
  color: var(--ff-green-light);
}
.ff-paywall__price-amount {
  font-size: 28px;
  font-weight: 700;
}
.ff-paywall__price-period {
  font-size: 15px;
  color: #ffffffb3;
}
.ff-paywall__benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
}
.ff-paywall__benefits li {
  padding-left: 26px;
  position: relative;
}
.ff-paywall__benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ff-green-light);
  font-weight: 700;
}
.ff-paywall__btn {
  background: var(--ff-green);
  color: var(--ff-dark);
  text-align: center;
  padding: 16px;
  font-family: var(--ff-font-sans);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.ff-paywall__btn:hover {
  background: var(--ff-green-hover);
}
.ff-paywall__login {
  text-align: center;
  color: #ffffff;
  text-decoration: underline;
  font-size: 15px;
}

@media (max-width: 1023px) {
  .ff-paywall { padding: 28px 24px; }
  .ff-paywall__title { font-size: 22px; max-width: none; }
}

/* Litet mellanrum ovanför FFUsers "Diskutera denna artikel"-widget, som
   levereras helt förstylad av pluginet självt (ffusers-public.css). */
.ff-article-body + .ff-discuss-article {
  margin-top: 8px;
}

/* RÄTTNING 2026-09-10 (kunden, om "Diskutera denna artikel i forumet"-
   knappen: "Knappen är fortfarande gul/guld. Gör den i linje med nya
   temats färger och design."): pluginets .ff-btn-primary för just den
   här knappen (.ff-discuss-article .ff-btn-primary i ffusers-public.css)
   är en animerad guldgradient med svart text/kant - vi rör fortfarande
   inte pluginets egen CSS-fil, men skriver över just den här knappens
   färg här i temat med samma gröna CTA-look som övriga primärknappar
   (se t.ex. .ff-paywall__btn ovan/.ff-commerce-cta i commerce.css).
   Highlight-knappen (Lägg till som favorit) är opåverkad - kunden
   flaggade bara guldknappen. */
.ff-discuss-article .ff-btn-primary {
  background: var(--ff-green) !important;
  animation: none !important;
  border: none !important;
  color: var(--ff-dark) !important;
  font-weight: 700;
}
.ff-discuss-article .ff-btn-primary:hover {
  background: var(--ff-green-hover) !important;
}

/* PartnerPortalen (/inlogg/, template-parts/single/partnerportalen.php)
   - Profile::profileView()s tabeller ("Förvaltarforum statistik", upp
   till 8 månadskolumner, samt "Dina partnersidor") kommer ostylade och
   ogravitationsbundna direkt från pluginet, samma situation som forumet
   och poängwidgetarna hade. Egen wrapperklass istället för :has() här,
   eftersom den här sidan/mallen är dedikerad åt just detta innehåll -
   inget behov av att villkora på vad som råkar finnas i brödtexten.
   Kundens rättning 2026-08-29. */
.ff-partnerportal-body {
  max-width: none;
}
.ff-partnerportal-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.ff-partnerportal-body table td {
  padding: 6px 10px;
  white-space: nowrap;
}

/* ---- Banner i artikelflödet (kolumn 1), se inc/banners.php +
   template-parts/module/banner-strip.php. Bilderna har ofta mycket
   breda annonsformat (upp till ~5.9:1, inte artiklarnas fasta 16:9), så
   de visas i sin egen proportion istället för att beskäras. ---- */
.ff-feed-banner {
  position: relative;
  margin: 8px 0;
}
.ff-feed-banner__label {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  font-size: 9px;
  color: var(--ff-text-meta);
  background: var(--ff-body-bg);
  padding: 2px 6px;
}
.ff-feed-banner__link {
  display: block;
}
.ff-feed-banner__img,
.ff-feed-banner__video {
  display: block;
  width: 100%;
  height: auto;
}