/* Kolumn 2 (redaktionella moduler) och kolumn 3 (service/kommers).
   Gemensamt boxskal: .ff-module. Källa: design/Forvaltarforum Redesign.dc.html
   "Kolumn 2" / "Kolumn 3" + README-tabellerna för respektive modul. */

.ff-module {
  background: var(--ff-card-bg);
  border: 1px solid var(--ff-border);
}
/* Rubrikraden (+ ev. ingress) fick en subtil blå topp-ton och en aning
   större rubrikstorlek 2026-09-03 (kundens rättning, ursprungligen bara på
   UTBILDNINGAR där kursnamnen - .ff-module__row-name, fet - syntes
   tydligare än modulens egen rubrik; kundens uppföljning "Den bör vara
   enhetlig" gjorde det till en generell regel för ALLA moduler, inte en
   scopad modifierare). Gäller alla moduler som använder ff_module_open()
   (delad .ff-module__header-wrap) OCH Företag/Sök leverantör
   (.ff-module--logos), som återanvänder samma .ff-module__header-wrap-
   markup trots att de inte går via ff_module_open() - se
   .ff-module--logos-reglerna längre ner för hur de bryter ut ur sin egen
   18px-padding för att få samma kant-till-kant-ton. */
.ff-module__header-wrap {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ff-border);
  background: var(--ff-blue-tint);
}
.ff-module__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ff-module__heading {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  color: var(--ff-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.ff-module__dot {
  width: 6px; height: 6px;
  background: var(--ff-green);
  border-radius: 50%;
  flex: 0 0 6px;
  display: inline-block;
}
.ff-module__all-link { font-size: 12px; color: var(--ff-blue); white-space: nowrap; }
.ff-module__intro {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ff-text-soft);
}
.ff-module__intro strong { font-weight: 700; color: var(--ff-dark); }

.ff-module__list {
  display: flex;
  flex-direction: column;
}
.ff-module__row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ff-border-weak);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ff-dark);
}
.ff-module__row:last-child { border-bottom: 0; }
a.ff-module__row:hover { background: var(--ff-hover-row); color: var(--ff-dark); }
.ff-module__row-date {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  color: var(--ff-text-meta);
}

/* TRÅDAR */
.ff-module__row-sub { font-size: 12px; color: var(--ff-text-meta); }
.ff-module__row-title { font-size: 15px; line-height: 1.35; font-weight: 400; color: var(--ff-dark); }

/* MEST LÄST */
.ff-module__ol {
  margin: 0;
  padding: 6px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.ff-module__ol li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ff-border-weak);
}
.ff-module__ol li:last-child { border-bottom: 0; }
.ff-module__ol li:hover { background: var(--ff-hover-row); }
.ff-module__ol a { font-size: 15px; line-height: 1.35; color: var(--ff-dark); }

/* EXPERTSVAR / FOLK I FARTEN / PODD - rad med avatar */
.ff-module__row-avatar {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ff-border-weak);
  align-items: center;
  /* Ingen färg sattes tidigare här, så en otaggad titel-span föll
     tillbaka på webbläsarens blå länkfärg (upptäckt på EXPERTSVAR,
     samma bugg fanns i LYSSNA PÅ) - se även .ff-module__row-avatar-title
     nedan för själva titelstilen. */
  color: var(--ff-dark);
}
.ff-module__row-avatar:last-child { border-bottom: 0; }
a.ff-module__row-avatar:hover { background: var(--ff-hover-row); color: var(--ff-dark); }
.ff-module__avatar-round {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: repeating-linear-gradient(135deg, #dfe4dd 0 6px, #eef1ec 6px 12px);
}
.ff-module__avatar-round--sm { flex-basis: 44px; width: 44px; height: 44px; }
.ff-module__row-avatar-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ff-module__row-avatar-text--tight { gap: 2px; }
/* Vikten var 600 (fet) fram till kundens rättning 2026-09-03 - kursnamnen
   i UTBILDNINGAR (samma klass som JOBB/FOLK I FARTEN) syntes tydligare än
   modulens egen rubrik. "Den bör vara enhetlig" => normalvikt för alla tre,
   samma princip som .ff-module__row-avatar-title nedan. */
.ff-module__row-name { font-size: 15px; font-weight: 400; color: var(--ff-dark); }
.ff-module__row-role {
  font-size: 13px;
  color: var(--ff-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* EXPERTSVAR / LYSSNA PÅ - till skillnad från FOLK I FARTENs fetstilta
   namn (.ff-module__row-name) ska de här titlarna se ut precis som
   NOTISER & AFFÄRER (.ff-module__row): samma typsnitt, färg och vikt.
   Kundens beslut 2026-08-28. */
.ff-module__row-avatar-title {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--ff-dark);
}

/* KRÖNIKOR */
.ff-module__row-serif {
  font-family: var(--ff-font-serif);
  font-size: 17px;
  line-height: 1.25;
  color: var(--ff-dark);
}

/* NYHETSBREV (kolumn 3, alltid order 0 på desktop - se front-page.php som
   sätter inline style="order" bara i desktopträdet. Mobilträdet återanvänder
   samma partial utan order, dess plats i flödet styrs helt av DOM-ordningen). */
.ff-module--newsletter {
  background: var(--ff-blue);
  color: #fff;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 0;
}
.ff-module--newsletter h4 {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
}
.ff-module--newsletter p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.ff-module--newsletter form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ff-module--newsletter input {
  border: 0;
  padding: 12px 14px;
  font-size: 14px;
  outline: 0;
  width: 100%;
}
.ff-module--newsletter button {
  background: var(--ff-green);
  color: #fff;
  border: 0;
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.ff-module--newsletter button:hover { background: var(--ff-green-hover); }

/* Logotyprutnät (FÖRETAG / SÖK LEVERANTÖR) - återanvänder sedan
   2026-09-03 samma .ff-module__header-wrap-markup som övriga moduler
   (för den enhetliga blå topp-tonen), men eftersom hela .ff-module--logos
   redan har egen 18px-padding runt allt innehåll måste header-wrap bryta
   ut ur den med negativ marginal för att bli kant-till-kant - exakt samma
   knep som .ff-module__logo-divider redan använde för sin linje. */
/* RÄTTNING 2026-09-07 (kunden, skärmdump med grön inringning runt
   utrymmet mellan divider-linjen och rutnätet samt runt rutnätets
   sidor/underkant: "Ta bort marginaler vid grönt"): rutnätet var
   MEDVETET tänkt att ligga kant i kant med sig SJÄLVT redan (gap: 0,
   se rättningen nedan), men låg ändå kvar inuti .ff-module--logos egna
   18px-padding, precis som vilket annat modulinnehåll som helst - därav
   den kvarvarande marginalen runt hela rutnätet som kunden nu pekar ut.
   Lösning: rutnätet bryter ut kant-till-kant på samma sätt som
   .ff-module__header-wrap/.ff-module__logo-divider redan gör (negativ
   marginal), och eftersom rutnätet alltid är det SISTA innehållet i de
   här tre modulerna (partners.php/foretag.php/leverantorer.php) tar vi
   bort .ff-module--logos egen padding-bottom helt istället för att lägga
   en negativ bottenmarginal på rutnätet - enklare och samma resultat. */
.ff-module--logos { padding: 18px 18px 0; }
/* RÄTTNING 2026-09-07 (kunden: "Ta bort avståndet mellan logotyperna och
   det ljusblåa"): header-wrap hade kvar samma 14px-marginal som övriga
   moduler använder före sitt listinnehåll (rad-/artikellistor har luft
   att hämta andan i - se .ff-module__header-wrap-regeln högst upp i
   filen), men här ville kunden istället att den ljusblå ytan går rakt
   över i rutnätet utan mellanrum. Scopad till just .ff-module--logos,
   ändrar inte övriga moduler. */
.ff-module--logos .ff-module__header-wrap {
  margin: -18px -18px 0;
}
.ff-module__logo-divider {
  height: 1px;
  background: var(--ff-border);
  margin: 0 -18px 0;
}
/* Ingen gap (kundens instruktion 2026-09-07: "Jag vill att vi inte ska ha
   några marginaler mellan boxarna. Se det som en skiss") - rutorna ska
   ligga kant i kant. */
.ff-module__logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 -18px;
}
/* RÄTTNING 2026-09-07 (kunden, skärmdump av VÅRA PARTNERS/SÖK FÖRETAG/
   SÖK LEVERANTÖR: "Kan logotypboxarna göras större så de 6 boxarna
   fyller ut hela rutan?"): en fast height: 46px blev en smal, hoptryckt
   remsa - särskilt i mobilfallbacken (.ff-mobile-only) där modulen är
   mycket bredare än i kolumn 3 på desktop, så samma 46px-höjd såg ännu
   mindre ut i förhållande till hur breda de tre (redan 1fr-baserade,
   alltså redan fullbredds-) kolumnerna blir där. aspect-ratio: 1 löser
   grundorsaken istället för att bara byta ut ett nytt fast pixelmått:
   varje ruta blir kvadratisk i förhållande till sin EGEN kolumnbredd,
   oavsett om modulen visas smal (desktop kolumn 3) eller bred (mobil) -
   rutorna fyller alltså alltid ut sin del av raden på ett proportionerligt
   sätt. */
/* RÄTTNING 2026-09-07 (kunden: "Kan de gråa linjerna vara lika tunna som
   andra boxar?"): med gap: 0 (se ovan) och en hel 1px-border på VARJE
   ruta fick angränsande rutor en DUBBEL (2px) linje mellan sig - tjockare
   och därmed mörkare/tydligare än den enkla 1px-linjen kortet självt
   (.ff-module) och andra listor (t.ex. MEST LÄST:s radlinjer) använder.
   Löst med samma "collapsed border"-knep som en klassisk HTML-tabell:
   varje ruta har bara höger+underkant som grundregel. */
/* RÄTTNING 2026-09-07, uppföljning (kunden: "I botten och toppen ligger
   det nog linje bredvid linje som gör att det ser tjockt ut"): rutnätet
   ligger sen tidigare kant-i-kant med resten av kortet (se
   .ff-module__logo-grid ovan: margin: 0 -18px, samt "Ta bort marginaler
   vid grönt"-ändringen) - alltså ligger rutnätets ytterkanter EXAKT på
   samma linjer som redan finns: vänster/höger/underkant är kortets EGEN
   1px-ram (.ff-module { border }, se allra högst upp i filen), och
   överkanten är antingen header-wrap:ens border-bottom eller
   .ff-module__logo-divider - i båda fallen redan en färdig linje. Att
   FÖRSTA kolumnen/raden dessutom lade till sin egen vänster-/överkant (git-
   historik, borttaget här) och att SISTA kolumnen/raden behöll sin
   höger-/underkant från grundregeln ovan gav alltså "linje bredvid linje"
   på alla fyra ytterkanter samtidigt, inte bara mellan rutorna. Lösning:
   rutorna lägger ALDRIG till en linje på en kant som redan är rutnätets
   ytterkant - bara de inre linjerna (mellan rutor) kommer från
   .ff-module__logo-slot självt. */
.ff-module__logo-slot {
  aspect-ratio: 1;
  /* RÄTTNING 2026-09-07 (kunden: "Lägg till en intern marginal så att
     loggorna inte går i kant i sin resp box") - utan padding fyllde
     img:ens max-width/max-height: 100% (nedan) hela flex-innehållsytan
     ända ut till kantlinjen. */
  padding: 10px;
  border-right: 1px solid var(--ff-border-logo);
  border-bottom: 1px solid var(--ff-border-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Sista kolumnen (höger ytterkant) och sista raden (underkant) tar bort
   sin egen border-right/border-bottom - den kanten är redan kortets egen
   ram (se kommentaren ovan).

   RÄTTNING 2026-09-08 (kundens instruktion att VÅRA PARTNERS ska visa 9
   loggor istället för 6, se partners.php - FÖRETAG/SÖK LEVERANTÖR har
   fortfarande 6 och delar samma CSS-klasser). Sista-raden-selectorn var
   hårdkodad för exakt två rader (":nth-child(n+4)" = "position 4 och
   uppåt", vilket bara råkar träffa sista raden när totalen är 6): med 9
   loggor (tre rader i 3-kolumnsrutnätet) tog den bort underkanten från
   HELA rad 2 (positionerna 4-9) istället för bara sista raden (7-9), så
   rad 2 och rad 3 flöt ihop utan linje mellan sig. ":nth-last-child(-n+3)"
   ("de tre sista, oavsett totalt antal") träffar alltid rätt sista rad i
   ett 3-kolumnsrutnät oavsett om totalen är 6, 9 eller något annat
   multipel av 3 - fungerar alltså oförändrat för FÖRETAG/SÖK LEVERANTÖR
   också. */
.ff-module__logo-slot:nth-child(3n) { border-right: 0; }
.ff-module__logo-slot:nth-last-child(-n+3) { border-bottom: 0; }
.ff-module__logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ff-module__logo-slot span {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 9px;
  color: var(--ff-text-placeholder);
}

/* TIPSA EN KOLLEGA (grön ruta) - order sätts inline på desktop, se ovan */
.ff-module--tip {
  background: var(--ff-green);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
}
.ff-module--tip h4 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  color: var(--ff-dark);
  text-transform: uppercase;
}
.ff-module--tip form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-module--tip input {
  border: 0;
  padding: 11px 12px;
  font-size: 14px;
  outline: 0;
  width: 100%;
}
.ff-module--tip button {
  /* Blå knapp (kundens instruktion 2026-09-04: "Tipsa en kollega - gör
     knapp blå") - samma --ff-blue som modulernas "se alla"-länkar och
     nyhetsbrevsrutans bakgrund, så den sticker ut tydligt mot rutans
     gröna bakgrund utan att smälta ihop med den. Var tidigare
     --ff-green-dark (kundens rättning 2026-09-03, se git-historik). */
  background: var(--ff-blue);
  color: #fff;
  border: 0;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.ff-module--tip button:hover { background: var(--ff-dark); }
.ff-module--tip__status { font-size: 12px; color: var(--ff-dark); }

/* LinkedIn-följ-box - order sätts inline på desktop, se ovan */
.ff-linkedin-box {
  background: #fff;
  border: 1px solid var(--ff-border);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ff-linkedin-box:hover { border-color: var(--ff-blue); }
.ff-linkedin-box__text { display: flex; flex-direction: column; gap: 3px; }
.ff-linkedin-box__title { font-size: 15px; font-weight: 600; color: var(--ff-dark); }
.ff-linkedin-box__meta { font-size: 13px; color: var(--ff-text-soft); }
.ff-linkedin-box__badge {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  background: var(--ff-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--ff-radius-control);
}

@media (max-width: 1023px) {
  .ff-module__header-wrap,
  .ff-module__row,
  .ff-module__row-avatar,
  .ff-module__ol li,
  .ff-module--logos { padding-left: 16px; padding-right: 16px; }
  .ff-module--logos { padding-top: 16px; }
  .ff-module__logo-divider { margin-left: -16px; margin-right: -16px; }
  /* .ff-module--logos padding krymper till 16px här - header-wrap och
     rutnätet måste bryta ut med samma (mindre) mått, annars läcker de
     2px förbi kanten. */
  .ff-module--logos .ff-module__header-wrap { margin: -16px -16px 0; }
  .ff-module__logo-grid { margin: 0 -16px; }
  .ff-module__row,
  .ff-module__row-avatar { min-height: 44px; justify-content: center; }
  .ff-linkedin-box__badge { flex-basis: 34px; width: 34px; height: 34px; }
}