/* Toppbanner + trekolumnsrutnät + brytpunkter.
   Brytpunktsstrategi (README "Responsivt"):
   ≥1240px  desktop, ff-grid-cols
   1024–1239px  desktop-regler men smalare sidokolumner
   <1024px  mobil, en kolumn (tablet har ingen egen design) */

.ff-banner {
  max-width: var(--ff-container-max);
  min-width: var(--ff-container-min);
  margin: 0 auto;
  padding: 20px var(--ff-container-pad) 0;
}
.ff-banner__link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1600 / 270;
  background: repeating-linear-gradient(135deg, #ededea 0 10px, #f6f7f4 10px 20px);
  border: 1px solid var(--ff-border);
}
.ff-banner__label {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ff-text-meta);
  background: var(--ff-body-bg);
  padding: 6px 10px;
}

/* Den admin-uppladdade toppbannern (Toppbanner-inställningssidan, se
   inc/ads.php) - egna klasser, inte .ff-banner__link/.ff-banner__label,
   så den inte ärver den randiga dev-platshållarens bakgrund/kantlinje. */
.ff-banner__custom-link {
  display: block;
}
.ff-banner__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 270;
  object-fit: cover;
}

@media (max-width: 1239px) {
  /* Samma resonemang som .ff-container i base.css: får inte tvinga
     1240px min-bredd i 1024-1239px-bandet. */
  .ff-banner { min-width: 0; }
}

@media (max-width: 1023px) {
  .ff-banner { padding: 14px 14px 0; }
  .ff-banner__label { font-size: 9px; padding: 4px 8px; }
}

/*
 * Desktop (kolumnbaserad) och mobil (fast, interfläckad innehållsordning)
 * har så olika informationsarkitektur - se README "Innehållsordning" - att de
 * renderas som två separata DOM-träd från samma PHP-data (ingen dubbel
 * WP_Query, bara dubbel markup) och växlas med CSS media queries. Detta
 * undviker klient-JS-ombyggnad av DOM (CLS-krav i README Steg 4) helt.
 */

.ff-desktop-layout {
  max-width: var(--ff-container-max);
  min-width: var(--ff-container-min);
  margin: 0 auto;
  padding: 32px var(--ff-container-pad) 72px;
  display: grid;
  grid-template-columns: var(--ff-grid-cols);
  column-gap: var(--ff-grid-col-gap);
  row-gap: var(--ff-grid-row-gap);
  align-items: start;
  overflow-wrap: break-word;
}

@media (max-width: 1239px) and (min-width: 1024px) {
  .ff-desktop-layout {
    min-width: 0;
    grid-template-columns: minmax(360px, 1fr) 280px 280px;
    column-gap: 16px;
  }
}

.ff-col-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
  margin-right: 20px;
}
.ff-col-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.ff-mobile-layout {
  display: none;
}

@media (max-width: 1023px) {
  .ff-desktop-layout { display: none; }
  .ff-mobile-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 22px 14px 56px;
  }
  .ff-col-main { margin-right: 0; }
}

/*
 * single.php: artikelinnehållet är IDENTISKT på desktop och mobil (bara
 * typografi/layout skiljer, se article.css) - till skillnad från
 * startsidan behöver vi alltså INTE duplicera själva artikeltexten i två
 * DOM-träd. Bara sidomodulernas gruppering skiljer (två separata kolumner
 * på desktop kontra en platt sekvens på mobil), så .ff-single-shell byter
 * bara display-läge (grid <-> flex) och de faktiska modulblocken
 * markeras .ff-desktop-only / .ff-mobile-only.
 */
.ff-single-shell {
  max-width: var(--ff-container-max);
  min-width: var(--ff-container-min);
  margin: 0 auto;
  padding: 32px var(--ff-container-pad) 72px;
  display: grid;
  grid-template-columns: var(--ff-grid-cols);
  column-gap: var(--ff-grid-col-gap);
  row-gap: var(--ff-grid-row-gap);
  align-items: start;
  overflow-wrap: break-word;
}
@media (max-width: 1239px) and (min-width: 1024px) {
  .ff-single-shell {
    min-width: 0;
    grid-template-columns: minmax(360px, 1fr) 280px 280px;
    column-gap: 16px;
  }
}

/*
 * RÄTTNING 2026-09-10 (kunden, om PartnerPortalen/inlogg: "När man är
 * inloggad ... så vill jag att kolumn 2 göms och att vi använder ytan
 * för sidans innehåll"). Sätts av template-semiwide-content.php bara för
 * /inlogg/ (is_page(47436)) när ff_is_logged_in() - övriga ~20 sidor med
 * samma mall/samma .ff-single-shell är opåverkade. Kolumn 2
 * (aside-editorial.php) renderas inte alls i det läget (se PHP-villkoret
 * runt den divven) - här tar vi bort dess kolumnspår helt istället för
 * att bara dölja den, så huvudinnehållet (kolumn 1, redan 1fr) får
 * använda ytan. Kolumn 3 (aside-commerce.php) behåller sin egen
 * kolumnbredd oförändrad, bara en position tidigare i rutnätet.
 */
.ff-single-shell--no-col2 {
  grid-template-columns: minmax(420px, 1fr) 300px;
}
@media (max-width: 1239px) and (min-width: 1024px) {
  .ff-single-shell--no-col2 {
    grid-template-columns: minmax(360px, 1fr) 280px;
  }
}

/*
 * UPPFÖLJNING 2026-09-08 (kundens instruktion: "Låt innehållet i kolumn 1
 * använda mer av bredden" på eventsidan, sedan uppföljt med "Kolumn 2
 * skulle kunna vara något bredare - samma bredd som kolumn 2 den
 * ersatte"). Provade först att smalna av kolumn 2 här (260/240px) för att
 * ge kolumn 1 mer utrymme - men den faktiska flaskhalsen visade sig vara
 * .ff-article-bodys 68ch läsbredd (se ff-col-main--full-width i
 * article.css, samma mönster som mallen "Bred satsyta"), inte
 * kolumnbredden i sig. Kolumn 2 (nu bara eventets egna, kompakta rutor -
 * se aside-editorial.php:s modules=>false) har därför gått tillbaka till
 * SAMMA bredd som den vanliga kolumn 2 (--ff-grid-cols/reglerna ovan) -
 * .ff-single-shell--event-klassen finns kvar i single-seminarie.php ifall
 * den behövs igen, men ger just nu inga egna kolumnbredder.
 */

.ff-desktop-only { display: contents; }
.ff-mobile-only { display: none; }
@media (max-width: 1023px) {
  .ff-single-shell {
    /* RÄTTNING 2026-09-08 (kundens rapport: bilderna på en artikelsida
       var förbreda på mobil och skapade sidoskroll). Grundorsaken var
       inte bilderna själva utan att .ff-single-shell aldrig fick sin
       min-width: var(--ff-container-min) (1240px, se tokens.css)
       återställd i det här brytpunktsbandet - till skillnad från både
       .ff-banner ovan och samma element självt i 1024-1239px-bandet,
       som redan gör exakt detta (se kommentaren vid .ff-banner). Utan
       återställningen tvingades HELA artikelsidan (och därmed alla
       bilder i den, eftersom de fyller sin kolumn) att vara minst
       1240px bred även i mobilens flex-kolumn-läge - därav sidoskrollet.
       Här (redan <1024px) behövs ingen egen min-bredd alls.

       UPPFÖLJNING 2026-09-08 (kundens rapport efter denna rättning: kvar
       en LITEN sidoskroll på riktig mobilbredd (420px), och modulboxarna
       i mobilflödet hade lite olika bredd sinsemellan). Samma bakomliggande
       mönster som ovan: basreglens align-items: start (rad ~132) är till
       för DESKTOP-GRIDEN (hindrar kolumnerna från att sträcka sig till
       varandras höjd) men ärvdes in oförändrad hit när layouten byter till
       flex-column - och i en flex-column styr align-items BREDDEN
       (tväraxeln), inte höjden. Med "start" krymper varje modulsektion
       till sitt eget innehålls bredd istället för att fylla hela
       kolumnen - därför blev t.ex. "Mest läst" full bredd (bildtungt
       innehåll) medan "Jobb" bara blev ~55% bred (kortare innehåll), och
       en modul med en rad omöjlig att radbryta (t.ex. ett listobjekt med
       fast datum-kolumn) kunde bli marginellt bredare än viewporten -
       precis den kvarvarande sidoskrollen. .ff-mobile-layout (startsidan)
       har aldrig haft det här problemet eftersom DEN basregeln inte
       sätter align-items alls (float till standardvärdet stretch) - gör
       samma sak explicit här. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 22px 14px 56px;
  }
  .ff-desktop-only { display: none; }
  .ff-mobile-only { display: contents; }
}