/* ============================================================
   Optiledger — /car-dealers/ (page-specific blocks)
   ------------------------------------------------------------
   Sidan använder sajtens vanliga undersidemall från article.css:
   page-head + .placeholder-body > .inner, samt steps, comparison
   och faq-item därifrån. Här bor bara de tre block som saknas:
   bildfigur, nyckeltalsrad och kortrutnät. Designvariabler
   kommer från tokens.css — deklarera ALDRIG om dem här.
   ============================================================ */

/* Kolumnbredd. .placeholder-body ger .inner 760 px vänsterställt, vilket
   lämnar en tom högersida på en lång sida som den här. Blocken (bild,
   nyckeltal, kort, tabell) får därför gå ut till 1040 px medan löptexten
   stannar på läsbar radlängd. Vänsterställt — som resten av sajten. */
.page-bilhandlare .placeholder-body .inner{max-width:1040px}
.page-bilhandlare .placeholder-body .inner>p,
.page-bilhandlare .placeholder-body .inner>h2,
.page-bilhandlare .placeholder-body .inner>h3,
.page-bilhandlare .placeholder-body .faq-item{max-width:800px}
/* Stegen får samma högerkant som nyckeltalen, annars bryter linjerna av
   olika långt ut. Texten i varje steg är kort nog att tåla bredden. */
.page-bilhandlare .steps{max-width:none}
/* Luft mellan avsnitten. Sidan består av växlande text- och blockpartier;
   article.css 52 px räcker för ren löptext men blir trångt när ett h2
   följer direkt på ett kortrutnät eller en tabell. */
.page-bilhandlare .placeholder-body h2{margin:88px 0 20px}
.page-bilhandlare .placeholder-body h2:first-child{margin-top:0}
/* CTA-rutan har egen linje och padding — den ska inte också ärva
   avsnittsluften ovan. */
.page-bilhandlare .article-cta h2{margin:0 0 12px}

/* Bildfigur — samma ram och bildtext som .article-figure */
.bh-figure{margin:0 0 44px}
.bh-figure img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.bh-figure figcaption{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.55}
.bh-figure figcaption a{color:var(--teal-dark);text-underline-offset:3px}
.bh-figure--intro{max-width:940px}

/* Rapporten — text och dokumentbild sida vid sida i stället för att
   bilden hamnar löst under stycket. */
/* Dokumentbilden är högre än texten även efter beskärningen. Kolumnerna
   centreras därför mot varandra i stället för att texten hänger i toppen. */
.bh-report{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:center;margin:20px 0 8px}
.bh-report-copy>p{margin:0 0 20px}
.bh-report-copy>p:last-child{margin-bottom:0}
.bh-report-copy ul{margin:0 0 22px;padding-left:20px}
.bh-report-copy li{margin-bottom:8px}
.bh-report-copy a{color:var(--teal-dark);text-underline-offset:3px}
.bh-report-shot{display:block;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
/* A4-formatet gör att en helsidesbild blir ~1,4 gånger så hög som
   textkolumnen bredvid och sticker ut nedanför avsnittet. Bilden visas
   därför som en förhandsvisning av rapportens övre del, klippt i höjd
   så att de två kolumnerna slutar på ungefär samma rad. */
.bh-report-shot img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover;object-position:top center}

/* Ägande och kontroll — storlek och luft inom sajtens vanliga linjespråk. */
.bh-ownership{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:96px;max-width:1040px;margin:128px 0 0;padding:56px 0 64px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.page-bilhandlare .placeholder-body .bh-ownership h2{margin:0;color:var(--ink);font-size:clamp(36px,3.6vw,46px);line-height:1.1}
.bh-ownership p{margin:0 0 18px;color:var(--body);font-size:18px;line-height:1.7}
.bh-ownership p:last-child{margin-bottom:0}

/* Nyckeltal — mer luft, men samma vita och återhållna formspråk som sajten. */
.bh-demand{max-width:1040px;margin:112px 0 0}
.page-bilhandlare .placeholder-body .bh-demand h2{margin:0 0 16px}
.bh-demand>p{max-width:720px}
.bh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:46px 0 28px;padding:38px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.bh-stats>div{padding:0 44px 0 0}
.bh-stats>div+div{padding-left:44px;border-left:1px solid var(--line)}
.bh-stats b{display:block;color:var(--ink);font-size:46px;font-weight:700;letter-spacing:var(--track-1);line-height:1}
.bh-stats span{display:block;max-width:23ch;margin-top:18px;color:var(--body);font-size:15px;line-height:1.6}
.placeholder-body p.bh-source{max-width:820px;margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}

/* Vardagsfakta — vertikala informationsrader, tydligt skilda från statistiken. */
.page-bilhandlare .bh-demand+h2{margin-top:128px}
.bh-grid{display:block;max-width:940px;margin:36px 0 8px;border-top:1px solid var(--ink)}
.bh-card{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.bh-card h3{margin:0;font-size:20px;letter-spacing:var(--track-2)}
.bh-card p{max-width:600px;margin:0;font-size:16px;line-height:1.65}
.bh-card a{color:var(--teal-dark);text-underline-offset:3px}

@media(max-width:900px){
  .bh-report{grid-template-columns:1fr;gap:28px}
  .bh-report-shot{max-width:420px}
  /* Staplade kolumner — ingen höjd att matcha, visa hela sidan. */
  .bh-report-shot img{max-height:none}
}

@media(max-width:760px){
  .bh-ownership{grid-template-columns:1fr;gap:28px;margin-top:88px;padding:42px 0 48px}
  .page-bilhandlare .placeholder-body .bh-ownership h2{font-size:clamp(32px,6vw,36px)}
  .bh-ownership p{font-size:17px}

  .bh-demand{margin-top:72px}
  .bh-stats{grid-template-columns:1fr;margin:34px 0 24px;padding:0}
  .bh-stats>div{display:block;padding:24px 0}
  .bh-stats>div+div{padding-left:0;border-top:1px solid var(--line);border-left:0}
  .bh-stats b{font-size:32px}
  .bh-stats span{max-width:34ch;margin-top:7px;font-size:14.5px;line-height:1.45}
}

@media(max-width:600px){
  /* Nyckeltalen staplades som siffra över bildtext, med hela radbredden
     till en 14px-underrubrik. Siffran och texten hörde inte ihop och
     blocket blev tre lösa fragment. På mobil ligger siffran i stället i
     en egen vänsterkolumn med texten bredvid, på gemensam baslinje —
     samma hårfina linjespråk som desktop, men ett block i stället för tre. */
  .bh-demand{margin-top:72px}
  .bh-stats{grid-template-columns:1fr;margin:34px 0 24px;padding:0}

  /* Siffra och text låg sida vid sida på gemensam baslinje. Med en
     tvåradig text hamnade textblockets tyngdpunkt långt under siffrans,
     och raden såg skev ut. Desktop staplar siffran över texten — samma
     ordning här, men med tight avstånd så de läser som ett par. */
  .bh-stats>div{
    display:block;
    padding:24px 0;
  }

  .bh-stats>div+div{
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .bh-stats b{
    font-size:32px;
    line-height:1;
  }

  .bh-stats span{
    max-width:34ch;
    margin-top:7px;
    font-size:14.5px;
    line-height:1.45;
  }

  .placeholder-body p.bh-source{font-size:13.5px;line-height:1.55}

  /* Avsnittsluften är satt för desktop; 88px blir ett tomrum på telefon. */
  .page-bilhandlare .placeholder-body h2{margin:56px 0 16px}

  .page-bilhandlare .bh-demand+h2{margin-top:88px}
  .bh-grid{margin-top:28px}
  .bh-card{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .bh-card h3{margin-bottom:10px;line-height:1.3}
  .bh-card p{font-size:15.5px;line-height:1.6}

  .bh-figure{margin-bottom:32px}
  .bh-figure figcaption{font-size:13.5px}

  .bh-report{gap:24px}
  .bh-report-shot{max-width:none}

  .bh-ownership{grid-template-columns:1fr;gap:28px;margin-top:88px;padding:42px 0 48px}
  .page-bilhandlare .placeholder-body .bh-ownership h2{font-size:32px}
  .bh-ownership p{font-size:17px}
}