/* Fold-over membership cards. Real sizes in mm: half = 85.6 × 54, strip = 171.2 × 54, sheet = A4. */

@page {
  size: A4 portrait;
  margin: 0;
}

.sheet {
  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  padding: 13.5mm 19.4mm;
  background: #fff;
  color: #111;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  overflow: hidden;
}

/* Solid outline = cut line, dashed middle = fold line. */
.strip {
  position: relative;
  display: flex;
  width: 171.2mm;
  height: 54mm;
  outline: 0.25mm solid #9a9a9a;
}

.strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 85.6mm;
  border-left: 0.25mm dashed #9a9a9a;
}

.half {
  width: 85.6mm;
  height: 54mm;
  box-sizing: border-box;
  padding: 1.5mm;
}

.face {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2mm 3.5mm;
  border: 0.5mm solid #333;
  border-radius: 3mm;
}

.head {
  display: flex;
  align-items: center;
  gap: 2.5mm;
}

.stamp {
  display: block;
  width: 22mm;
}

.club {
  flex: 1;
  color: #543c7d;
  font-size: 4.6mm;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.title {
  margin: 0.2mm 0 0.4mm;
  font-size: 5.6mm;
  font-weight: 800;
  letter-spacing: 1.5mm;
  text-align: center;
}

.row {
  font-size: 3.7mm;
  line-height: 1.5;
  white-space: nowrap;
}

.lbl {
  display: inline-block;
  width: 18mm;
  margin-right: 1mm;
  text-align-last: justify;
}

.line {
  display: inline-block;
  width: 30mm;
  height: 1em;
  border-bottom: 0.25mm solid #111;
  vertical-align: -0.5mm;
}

/* Long names shrink so they stay on one line. */
.name[data-len="6"], .name[data-len="7"], .name[data-len="8"] { font-size: 3.2mm; }
.name[data-len="9"], .name[data-len="10"], .name[data-len="11"], .name[data-len="12"] { font-size: 2.6mm; }

.pending {
  color: #b05a00;
}

.back .row {
  line-height: 1.55;
}

.back.lifetime {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lifetime-text {
  color: #543c7d;
  font-size: 9mm;
  font-weight: 800;
  letter-spacing: 3mm;
  margin-right: -3mm; /* balance the trailing letter-spacing */
}

.back .period + .period {
  margin-top: 2mm;
}

@media screen {
  .sheet {
    margin: 0 auto 8mm;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
}

@media print {
  .sheet {
    break-after: page;
  }
  .sheet:last-child {
    break-after: auto;
  }
}