/* Loopelo free templates (P07b): presentation for labelgrid, certificateFrame
   and sticker, the three blocks P07a's own vocabulary cannot express. Loaded
   next to print.css, never instead of it; every rule here is scoped to its
   own block class so it can never touch a P07a block's styling. */
.tpl-labelgrid {
  display: grid; grid-template-columns: repeat(var(--tpl-cols), minmax(0, 1fr));
  gap: calc(3mm * var(--tpl-scale));
}
.tpl-label-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1mm * var(--tpl-scale));
  border: calc(0.3mm * var(--tpl-scale)) solid var(--tpl-rule);
  border-radius: calc(1.5mm * var(--tpl-scale));
  padding: calc(2mm * var(--tpl-scale));
  min-height: calc(16mm * var(--tpl-scale));
  text-align: center;
}
.tpl-labelgrid-cut .tpl-label-cell { border-style: dashed }
.tpl-cut-mark { font-size: .8em; color: var(--tpl-muted) }
.tpl-labelgrid-small .tpl-label-text { font-weight: 700; font-size: 1.3em }
.tpl-labelgrid-large .tpl-label-text { font-weight: 800; font-size: 2.1em }
.tpl-label-text { max-width: 100%; overflow-wrap: anywhere }
.tpl-cert-frame {
  position: absolute; inset: calc(6mm * var(--tpl-scale));
  border: calc(1.2mm * var(--tpl-scale)) solid var(--tpl-accent);
  outline: calc(0.35mm * var(--tpl-scale)) solid var(--tpl-accent);
  outline-offset: calc(-3mm * var(--tpl-scale));
  pointer-events: none;
}
.tpl-cert-frame ~ .tpl-facts div { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr) }
.tpl-sticker-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10mm * var(--tpl-scale)); justify-items: center }
.tpl-sticker-badge {
  width: calc(85mm * var(--tpl-scale)); height: calc(85mm * var(--tpl-scale)); border-radius: 50%;
  border: calc(1mm * var(--tpl-scale)) dashed var(--tpl-rule);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2mm * var(--tpl-scale));
  padding: calc(6mm * var(--tpl-scale)); text-align: center; background: var(--tpl-accent); color: #fff;
}
.tpl-sticker-logo { max-width: 40%; max-height: calc(16mm * var(--tpl-scale)); object-fit: contain; filter: brightness(0) invert(1) }
.tpl-sticker-heading { font-weight: 800; font-size: 1.5em; line-height: 1.1 }
.tpl-sticker-sub { font-size: .85em; opacity: .9 }
.tpl-sticker-qr { width: calc(22mm * var(--tpl-scale)); height: calc(22mm * var(--tpl-scale)); background: #fff; border-radius: 3mm; padding: 1.5mm }
.tpl-sticker-link { font-size: .78em; font-weight: 700 }
.tpl-sticker-qr canvas { display: block; width: 100% !important; height: 100% !important }
@media screen and (max-width: 819.98px) { .tpl-preview .tpl-sticker-qr { display: none } }

/* Only the Christmas definition selects this style. All four carols fit A4
   in two columns; the existing lantern sheet retains its own presentation. */
.tpl-style-christmas-songs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start; gap: calc(4mm * var(--tpl-scale));
}
.tpl-style-christmas-songs > * { margin-top: 0 }
.tpl-style-christmas-songs .tpl-song + .tpl-song { margin-top: 0 }
.tpl-style-christmas-songs > :not(.tpl-song) { grid-column: 1 / -1 }