/*
 * The table card — 10x15cm, the size of a photograph.
 *
 * A keepsake, not a technical notice: the QR is a mounted print like every
 * other image in the product, and the words around it are the couple's, not
 * the software's. What prints is the card and nothing else.
 */

.card-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  min-block-size: 100svh;
  padding: var(--space-10) var(--container-margin);
}

.card-page__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  max-inline-size: 28rem;
}

/* ---- The card itself ---------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  inline-size: 100mm;
  block-size: 150mm;
  padding: 10mm 9mm;
  background: var(--print);
  border: 1px solid var(--ink-edge);
  border-radius: var(--radius-print);
  box-shadow: var(--shadow-print);
  text-align: center;
}

.card__seal {
  position: absolute;
  inset-block-start: -1.1rem;
  inset-inline-end: -1.1rem;
}

/* The card is a fixed 10cm, so on a narrow phone its overhanging seal would be
   the one thing pushing the page sideways. It tucks in instead. */
@media (max-width: 30rem) {
  .card__seal {
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
  }
}

.card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.card__date {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--soft-ink);
}

.card__print {
  inline-size: 62mm;
  margin-block-start: auto;
}

.card__print .print__well {
  background: var(--print);
}

.card__print svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.card__url {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--ink);
  margin-block-start: auto;
  overflow-wrap: anywhere;
}

.card__mark {
  font-family: var(--font-ui);
  font-size: var(--text-fine);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft-ink);
}

/* ---- On paper ----------------------------------------------------------- *
 * The sheet becomes the card. Every browser's print dialog offers "Save as
 * PDF" from here, which is how the organizer gets a file.                     */

@page {
  size: 100mm 150mm;
  margin: 0;
}

@media print {
  .card-page__hint {
    display: none;
  }

  .card-page {
    display: block;
    min-block-size: 0;
    padding: 0;
  }

  .card {
    inline-size: 100mm;
    block-size: 150mm;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* The paper is already the colour of the card; asking for a background
       fights the printer and wastes ink. */
    background: none;
  }

  .card__seal {
    display: none;
  }

  .print {
    box-shadow: none;
  }
}