/* Exempelkartan på pelarsidorna: appens egen inbäddningsvy i en ram.
 *
 * En ram och inte en bild, och det är hela poängen. Filip 2026-09-15:
 * "det hade varit bättre om det var rendering som likt inifrån appen
 * istället för att vara en död pdf". Samma princip som heron på
 * landningssidan: en yta som finns slår en avbildning av den.
 *
 * Länkas EFTER sidans egen <style>, av samma skäl som mallgrind.css: den
 * containerscopade artikeltypografin vinner annars oavgjorda strider.
 * Därför är varje regel prefixad med .article-body.
 *
 * CSP: frame-src fick 'self' i main.py samtidigt som det här skrevs. Utan
 * det tystnar ramen helt, utan synligt fel i sidan.
 */

.article-body .exempel-galleri {
  margin: 1.8rem 0 1.6rem;
  padding: 0;
}

.article-body .exempel-ram {
  /* 920 px, och siffran är uppmätt och inte gissad. Kartans innehåll slutar
     på exakt 900 px oavsett rambredd: korten mäter lika mycket på 720, 840
     och 1100 px, layouten är fast. Första försöket satte 620 px och klippte
     då bort stödprocesserna längst ner, vilket Filip såg direkt ("väldigt
     tajt", 2026-09-15). Extra bredd ger ingenting, bara extra höjd. */
  height: 920px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}

.article-body .exempel-ram iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-body .exempel-galleri figcaption {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.article-body .exempel-galleri figcaption a {
  color: var(--green);
  font-weight: 400;
  text-decoration: underline;
}

@media (max-width: 720px) {
  /* Kartan blir 977 px hög under ~400 px, alltså högre än på desktop: banorna
     staplas. */
  .article-body .exempel-ram { height: 1000px; }

  /* Ramen tar hela skärmbredden på mobil, förbi containerns sidpadding.
     Kartan slutar reflowa runt 409 px: i en ram på 311 px blev det 98 px
     vågrät sidled inuti rutan (uppmätt 2026-09-15). Full bredd tar bort
     merparten av det. Kvarvarande pan är inbäddningsvyns eget beteende och
     inte något den här sidan kan rätta.

     calc med --sidpadding i stället för hårdkodade 32 px: containern byter
     padding i en mediefråga längre upp, och en hårdkodad siffra hade gett
     ett glapp eller ett spill vid just den brytpunkten. */
  .article-body .exempel-galleri {
    margin-left: calc(-1 * var(--sidpadding, 32px));
    margin-right: calc(-1 * var(--sidpadding, 32px));
  }
  .article-body .exempel-ram { border-left: 0; border-right: 0; border-radius: 0; }
  .article-body .exempel-galleri figcaption {
    margin-left: var(--sidpadding, 32px);
    margin-right: var(--sidpadding, 32px);
  }
}