/* 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;
  }
}
.ff-desktop-only { display: contents; }
.ff-mobile-only { display: none; }
@media (max-width: 1023px) {
  .ff-single-shell {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 22px 14px 56px;
  }
  .ff-desktop-only { display: none; }
  .ff-mobile-only { display: contents; }
}