/* Visitkortet på bman.link. Ersätter Bootstrap från CDN — sidan använde
   bara en ram, tre kolumner och en tabell. Färger och mått är Bootstraps,
   så att kortet ser ut som förut. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background: #fff;
}

a { color: #0d6efd; }

img { max-width: 100%; height: auto; }

.card {
  max-width: 1140px;
  margin: 3rem auto;
  padding: .5rem;
  border: 5px solid #0d6efd;
  border-radius: 1rem;
}

@media (max-width: 1172px) {
  .card { margin: 1rem; }
}

h1 {
  margin: 0 .75rem;
  padding: 0 0 1rem;
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  border-bottom: 1px solid #dee2e6;
}

.flag { max-width: 64px; vertical-align: baseline; }

.columns {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 0 280px;
  padding: 1rem .75rem 0;
}

.profile, .wsj { text-align: center; }
.profile img, .wsj img { max-width: 240px; }

table { width: 100%; border-collapse: collapse; }
th, td {
  padding: .5rem;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
  overflow-wrap: anywhere;
}
th.group { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }

.wsj-entry img { display: block; margin: 0 auto; }

/* Tre punkter mellan uppdragen. */
.wsj-entry + .wsj-entry::before {
  content: "•••";
  display: block;
  margin: .5rem 0;
  font-size: .75rem;
  letter-spacing: 3px;
}