/* =========================================================================
   基督教恩湧教會 · NU Church — 標準直式名片 55 × 90 mm（雙面）
   High-fidelity reconstruction of the design handoff.
   All measurements are in millimetres — the physical unit of the card.
   Tokens: deep #1b6a95 · ink #13435f · sky #62b4d8 · pale #e6f3f9
           line #06c755 · label-light #a9daf0 · muted #5d7380
   ========================================================================= */

.nu-card {
  --deep: #1b6a95;
  --ink: #13435f;
  --sky: #62b4d8;
  --pale: #e6f3f9;
  --line: #06c755;
  --label-light: #a9daf0;
  --muted: #5d7380;

  position: relative;
  width: 55mm;
  height: 90mm;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: "Barlow", "Noto Sans TC", system-ui, sans-serif;
  border-radius: 0.6mm;
  box-shadow: 0 0.6mm 2.5mm rgba(0, 0, 0, 0.18);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.nu-card *,
.nu-card *::before,
.nu-card *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------- FRONT -- */
.fc-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5mm;
}

.fc-logo {
  display: block;
  width: 45mm;
  height: auto;
}

.fc-rule {
  width: 8mm;
  height: 0.35mm;
  background: var(--sky);
  margin: 2.8mm 0 2.2mm;
}

.fc-verse {
  font: 500 2.35mm/1.6 "Noto Sans TC", sans-serif;
  letter-spacing: 0.35mm;
  color: var(--ink);
  text-align: center;
}

.fc-verse span {
  display: block;
  font: 500 1.75mm/1.6 "Noto Sans TC", sans-serif;
  color: var(--sky);
  letter-spacing: 0.3mm;
  margin-top: 0.6mm;
}

.fc-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54mm;
  padding: 3.6mm 5mm 4.4mm;
  color: #fff;
  background: linear-gradient(180deg, #3e93bf 0%, var(--deep) 55%, #155577 100%);
}

/* soft fade bridging the white top and the blue panel */
.fc-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6mm;
  height: 6mm;
  background: linear-gradient(180deg, rgba(98, 180, 216, 0) 0%, rgba(98, 180, 216, 0.35) 100%);
}

.fc-row {
  display: grid;
  grid-template-columns: 7.5mm 1fr;
  align-items: baseline;
  margin-bottom: 1.3mm;
}

.fc-row .k {
  font: 600 1.75mm/1.35 "Barlow", sans-serif;
  letter-spacing: 0.25mm;
  color: var(--label-light);
  text-transform: uppercase;
}

.fc-row .v {
  font: 500 2.55mm/1.35 "Barlow", "Noto Sans TC", sans-serif;
  color: #fff;
}

.fc-row .v--big {
  font: 600 3.5mm/1.35 "Barlow", sans-serif;
  letter-spacing: 0.15mm;
}

.fc-row .v--addr {
  font: 500 2.25mm/1.45 "Noto Sans TC", sans-serif;
}

.fc-row .v--addr .tr {
  display: block;
  font: 500 1.85mm/1.45 "Noto Sans TC", sans-serif;
  color: var(--label-light);
  letter-spacing: 0.05mm;
  margin-top: 0.5mm;
}

.fc-social {
  position: absolute;
  left: 5mm;
  right: 5mm;
  bottom: 3.6mm;
  border-top: 0.2mm solid rgba(255, 255, 255, 0.28);
  padding-top: 2.4mm;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5mm;
}

.fc-social .q {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1mm;
  text-decoration: none;
  color: inherit;
}

.fc-social .qbox {
  width: 12mm;
  height: 12mm;
  background: #fff;
  border-radius: 1mm;
  padding: 0.9mm;
}

.fc-social .qbox svg,
.fc-social .qbox img {
  width: 100%;
  height: 100%;
  display: block;
}

.fc-social .lb {
  font: 700 1.75mm/1.2 "Barlow", sans-serif;
  letter-spacing: 0.25mm;
  color: #fff;
  text-align: center;
}

.fc-social .lb small {
  display: block;
  text-align: center;
  font: 500 1.5mm/1.2 "Barlow", "Noto Sans TC", sans-serif;
  color: var(--label-light);
  letter-spacing: 0.1mm;
  margin-top: 0.2mm;
}

/* ----------------------------------------------------------------- BACK -- */
.nu-card--back {
  background: linear-gradient(180deg, #fff 0%, #fff 30%, var(--pale) 62%, #bfe0ef 100%);
}

.bc-head {
  position: absolute;
  top: 5.5mm;
  left: 0;
  right: 0;
  text-align: center;
}

.bc-head .t {
  font: 900 3.4mm/1.2 "Noto Sans TC", sans-serif;
  color: var(--line);
  letter-spacing: 0.3mm;
}

.bc-head .s {
  font: 500 2mm/1.35 "Noto Sans TC", sans-serif;
  color: var(--muted);
  letter-spacing: 0.6mm;
  margin-top: 0.8mm;
}

.bc-qr {
  position: absolute;
  top: 15.5mm;
  left: 50%;
  transform: translateX(-50%);
  width: 30mm;
  height: 30mm;
  background: #fff;
  border-radius: 2.4mm;
  padding: 2mm;
  box-shadow: 0 0.3mm 1.6mm rgba(19, 67, 95, 0.14);
}

.bc-qr img {
  width: 100%;
  height: 100%;
  display: block;
}

/* The QR ends at 45.5mm and the giving block starts at 51mm — 5.5mm of runway.
   With the "ID" label dropped the short link can run at a heavier, larger size;
   it is still ≈7pt, so it must be proofed on paper before the print run. */
.bc-qr-url {
  position: absolute;
  top: 46.2mm;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}

.bc-qr-url .val {
  font: 800 2.7mm/1 "Barlow", sans-serif;
  color: var(--deep);
  letter-spacing: 0.06mm;
}

.bc-give {
  position: absolute;
  left: 4.5mm;
  right: 4.5mm;
  top: 51mm;
}

.bc-give .gt {
  display: flex;
  align-items: center;
  gap: 1.6mm;
  font: 700 2.5mm/1.3 "Noto Sans TC", sans-serif;
  color: var(--deep);
  letter-spacing: 0.4mm;
  margin-bottom: 1.8mm;
  white-space: nowrap;
}

.bc-give .gt::after {
  content: "";
  flex: 1;
  height: 0.2mm;
  background: rgba(27, 106, 149, 0.35);
}

.bc-give dl {
  display: grid;
  grid-template-columns: 6mm 1fr;
  row-gap: 1.15mm;
}

.bc-give dt {
  font: 500 1.95mm/1.35 "Noto Sans TC", sans-serif;
  color: var(--muted);
}

.bc-give dd {
  font: 500 2.1mm/1.35 "Noto Sans TC", sans-serif;
  color: var(--ink);
}

.bc-give dd.acct {
  font: 700 3mm/1.35 "Barlow", sans-serif;
  letter-spacing: 0.2mm;
  color: var(--deep);
}

.bc-assoc {
  position: absolute;
  left: 4.5mm;
  right: 4.5mm;
  bottom: 4mm;
  border-top: 0.2mm solid rgba(27, 106, 149, 0.3);
  /* 2mm pushed the four-line block up into the giving section; 1.2mm keeps a
     clear gap above the rule without crowding it. */
  padding-top: 1.2mm;
}

.bc-assoc p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 1.9mm/1.42 "Noto Sans TC", sans-serif;
  color: var(--ink);
}

/* Two associations × (name+tax ID, registration number). Four lines must fit
   between the giving block (ends 70.9mm) and the 4mm bottom margin — measured
   at ~13mm of room, so the registration lines run small and the leading is
   tight. Verified with a pixel measurement against the 90mm card height. */
.bc-assoc p.reg {
  font: 500 1.55mm/1.32 "Noto Sans TC", sans-serif;
  color: var(--muted);
  padding-left: 0.3mm;
  margin-bottom: 0.28mm;
}

.bc-assoc p.reg b {
  font-size: 1.7mm;
  letter-spacing: 0.05mm;
  color: var(--ink-soft);
}

.bc-assoc .lb {
  font-size: 1.6mm;
  color: var(--muted);
  margin-right: 0.6mm;
}

.bc-assoc b {
  font: 600 2mm/1.7 "Barlow", sans-serif;
  color: var(--deep);
  letter-spacing: 0.1mm;
}

/* --------------------------------------------------- screen presentation -- */
/* The card is laid out at true physical size, then scaled to preview width. */
.card-stage {
  --z: 2.6;
  width: calc(55mm * var(--z));
  height: calc(90mm * var(--z));
  flex: none;
}

.card-stage > .nu-card {
  transform: scale(var(--z));
  transform-origin: top left;
}

.card-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3mm;
}

.card-tag {
  font: 600 2.6mm/1 "Barlow", "Noto Sans TC", sans-serif;
  letter-spacing: 0.3mm;
  color: #6b7680;
  white-space: nowrap;
}

@media (max-width: 1140px) {
  .card-stage { --z: 2.1; }
}

@media (max-width: 780px) {
  .card-stage { --z: 1.62; }
}

@media (max-width: 420px) {
  .card-stage { --z: 1.45; }
}

/* ------------------------------------------------------------- print -- */
@media print {
  @page {
    size: 55mm 90mm;
    margin: 0;
  }

  html,
  body {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .nu-card {
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-after: always;
    break-after: page;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .nu-card:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }

  .card-stage {
    --z: 1 !important;
    width: 55mm !important;
    height: 90mm !important;
  }

  .card-stage > .nu-card {
    transform: none !important;
  }
}