/* 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. */
.ff-module--logos { padding: 18px; }
.ff-module--logos .ff-module__header-wrap {
  margin: -18px -18px 14px;
}
.ff-module__logo-divider {
  height: 1px;
  background: var(--ff-border);
  margin: 0 -18px 16px;
}
.ff-module__logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ff-module__logo-slot {
  height: 46px;
  border: 1px solid var(--ff-border-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.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; padding-bottom: 16px; }
  .ff-module__logo-divider { margin-left: -16px; margin-right: -16px; }
  /* .ff-module--logos padding krymper till 16px här - header-wrap måste
     bryta ut med samma mått, annars läcker den 2px förbi kanten. */
  .ff-module--logos .ff-module__header-wrap { margin: -16px -16px 14px; }
  .ff-module__row,
  .ff-module__row-avatar { min-height: 44px; justify-content: center; }
  .ff-linkedin-box__badge { flex-basis: 34px; width: 34px; height: 34px; }
}