/* Visitkortets sidor. Mått i mm/pt för exakt utskrift.
   --w/--h = slutformat, --b = utfall (bleed) runt om. */

.face {
  --safe: 4mm;
  position: relative;
  box-sizing: border-box;
  width: calc(var(--w) + 2 * var(--b));
  height: calc(var(--h) + 2 * var(--b));
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 7pt;
  line-height: 1.3;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.face *, .face *::before, .face *::after { box-sizing: border-box; }

.face .content {
  position: absolute;
  inset: calc(var(--b) + var(--safe));
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- Bakgrundsbild ---- */
.face .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.face .bg-veil { position: absolute; inset: 0; }
.has-bg.logo-black .logo { filter: brightness(0); }
.has-bg.logo-white .logo { filter: brightness(0) invert(1); }
.has-bg.logo-white .logo-text { color: #fff; }

/* ---- Gemensamma element ---- */
.face .logo {
  display: block;
  height: 7mm;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  align-self: flex-start;
}
.face .logo-text {
  height: auto;
  font-weight: 700;
  font-size: 9pt;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.face .identity { margin-top: 3.2mm; }
.face .name {
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
}
.face .title { margin-top: .6mm; font-size: 7.5pt; opacity: .72; }
.face .company { margin-top: .4mm; font-size: 7.5pt; font-weight: 500; }

.face .contacts { list-style: none; margin: 0; padding: 0; font-size: 6.6pt; line-height: 1.32; }
.face .contacts li { display: flex; gap: 1.5mm; align-items: flex-start; }
.face .contacts li + li { margin-top: .55mm; }
.face .contacts span { min-width: 0; overflow-wrap: anywhere; }
.face .ico { flex: none; width: 2.5mm; height: 2.5mm; margin-top: .25mm; fill: var(--accent); }

.face .qr { flex: none; width: 16.5mm; height: 16.5mm; background: #fff; }
.face .qr svg { display: block; width: 100%; height: 100%; }

.face .bottom {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2mm;
}

/* ---- Framsida: foto till vänster ---- */
.tpl-photo-left .photo-col {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--b) + var(--w) * .34);
  background: #ddd;
}
.tpl-photo-left .photo-col::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1.2mm;
  background: var(--accent);
}
.tpl-photo-left .photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpl-photo-left .content { left: calc(var(--b) + var(--w) * .34 + 4.5mm); }

/* ---- Framsida: foto till vänster, inom marginalen ---- */
.tpl-photo-float .photo-col {
  position: absolute;
  left: calc(var(--b) + var(--safe));
  top: calc(var(--b) + var(--safe));
  bottom: calc(var(--b) + var(--safe));
  width: calc(var(--w) * .30);
  border-radius: 1.5mm;
  overflow: hidden;
  background: #ddd;
}
.tpl-photo-float .photo-col::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1.2mm;
  background: var(--accent);
}
.tpl-photo-float .photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpl-photo-float .content { left: calc(var(--b) + var(--safe) + var(--w) * .30 + 4mm); }

/* ---- Framsida: rund / kvadratisk bild ---- */
.tpl-round .stripe, .tpl-square .stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--b) + 2.2mm);
  background: var(--accent);
}
.tpl-round .content, .tpl-square .content { left: calc(var(--b) + 2.2mm + 4.5mm); flex-direction: row; gap: 3mm; }
.tpl-round .main, .tpl-square .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tpl-round .main .contacts, .tpl-square .main .contacts { margin-top: auto; }
.tpl-round .side, .tpl-square .side {
  flex: none;
  width: 19mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.tpl-round .photo, .tpl-square .photo {
  width: 19mm; height: 19mm;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 .6mm var(--accent);
}
.tpl-square .photo {
  /* Samma proportioner och rundning som miniatyren i redigeraren (56 × 72) */
  height: calc(19mm * 72 / 56);
  border-radius: 2.4mm;
}

/* ---- Framsida: minimal ---- */
.tpl-minimal .content { inset: calc(var(--b) + 5mm); bottom: calc(var(--b) + 1.8mm + 4mm); }
.tpl-minimal .logo { height: 8mm; }
.tpl-minimal .identity { margin-top: 4mm; }
.tpl-minimal .name { font-size: 12pt; }
.tpl-minimal .rule { width: 10mm; height: .7mm; margin-top: 2mm; background: var(--accent); }
.tpl-minimal .band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--b) + 1.8mm);
  background: var(--accent);
}

/* ---- Baksidor ---- */
.back .content { justify-content: center; align-items: center; }
.back .logo { height: auto; max-height: 45%; max-width: 62%; align-self: center; object-position: center; }
.back .logo-text { font-size: 13pt; }

.tpl-mark .mark {
  position: absolute;
  top: 50%;
  right: calc(var(--b) - var(--h) * .32);
  height: calc(var(--h) * 1.15);
  transform: translateY(-50%);
}
.tpl-mark .content { align-items: flex-start; right: calc(var(--b) + var(--w) * .42); }
.tpl-mark .logo { max-width: 100%; max-height: 50%; align-self: flex-start; object-position: left center; }

.tpl-logo-accent { background: var(--accent); }
.tpl-logo-accent .logo { filter: brightness(0); }

.tpl-qr .qr { width: 24mm; height: 24mm; }
.tpl-qr .caption { margin-top: 1.5mm; font-size: 7pt; text-align: center; }