/* frontend/site/press.css, the press certificates on /press/. On screen they
 * stack down the page; printed, each fills one A4 landscape sheet. */

/* This page is always in English, so the shared header's language menu would
 * do nothing here. */
.site .site-lang { display: none; }

.press-list { padding-block: clamp(32px, 5vw, 72px); }
.press-list .wrap { display: grid; gap: clamp(24px, 4vw, 48px); max-width: 1040px; }

/* A certificate is a sheet of paper in either theme and on any printer, so it
 * keeps the cream theme's own values wherever the page around it is dark. */
.press-cert {
  --surface: var(--on-photo);
  --ink: var(--night);
  --ink2: #3F3631;
  --muted: #80746A;
  --line: #E7DDD0;
  --accent: #9A2C4C;
  scroll-margin-top: calc(var(--header-h) + 24px);
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(32px, 6vw, 72px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  outline: 1px solid var(--accent);
  outline-offset: -10px;
}

.press-cert-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.press-cert-brand { font-family: var(--font-display); font-size: 24px; }
.press-cert-number { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink2); }

.press-cert-title { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--accent); }
.press-cert-lead { margin-top: clamp(16px, 3vw, 32px); font-size: 17px; color: var(--ink2); }
.press-cert-name { margin-top: 6px; font-family: var(--font-display); font-size: clamp(32px, 8vw, 76px); line-height: 1.12; overflow-wrap: anywhere; }
.press-cert-role { margin-top: 12px; font-size: clamp(17px, 2.2vw, 22px); line-height: 1.45; }
.press-cert-request { margin-top: 16px; max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--ink2); }

.press-cert-foot { display: grid; gap: 24px; align-items: end; }
.press-cert-dates { display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.press-cert-dates > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.press-cert-dates dt { color: var(--muted); }
.press-cert-dates dd { margin: 0; }
.press-cert-id { color: var(--muted); }

/* The rule is left empty for a pen. */
.press-cert-sign { padding-top: 56px; font-size: 13px; line-height: 1.45; color: var(--ink2); background: linear-gradient(var(--ink), var(--ink)) left 48px / 100% 1px no-repeat; }

.press-cert-qr { display: grid; justify-items: start; gap: 6px; font-size: 13px; color: var(--ink2); }
.press-qr { width: 132px; height: 132px; background: var(--on-photo); fill: var(--night); }

.press-note { max-width: 70ch; font-size: 14px; line-height: 1.7; color: var(--ink2); }

@media (min-width: 720px) {
  .press-cert-foot { grid-template-columns: 1.1fr 1fr auto; gap: clamp(24px, 4vw, 48px); }
  .press-cert-qr { justify-items: center; text-align: center; }
}

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

@media print {
  html, body.site { background: none; }
  .site-header, .site-footer, .site-page-hero, .press-note, .skip-link { display: none; }
  main { padding: 0; }
  .press-list { padding: 0; }
  .press-list .wrap { display: block; max-width: none; padding: 0; }

  .press-cert {
    box-sizing: border-box;
    width: 297mm;
    height: 209mm;
    grid-template-rows: auto 1fr auto;
    gap: 8mm;
    padding: 18mm 20mm;
    break-after: page;
    border: 0;
    outline-offset: -8mm;
    print-color-adjust: exact;
  }
  .press-cert-body { align-self: center; }
  .press-cert-name { font-size: 64pt; }
  .press-cert-foot { grid-template-columns: 1.1fr 1fr auto; gap: 14mm; }
  .press-cert-qr { justify-items: center; text-align: center; }
  .press-qr { width: 34mm; height: 34mm; }
}