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

* { box-sizing: border-box; }

body {
  margin: 0;
  color: #111;
  background: #e8ebef;
  font-family: "TH Sarabun New", "Sarabun", serif;
  font-size: 16pt;
  line-height: 1.15;
}

.a4-sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 14px auto;
  padding: 18mm 20mm;
  overflow: hidden;
  background: #fff;
  break-after: page;
}

.a4-sheet:last-child { break-after: auto; }
.document-header { margin-bottom: 4mm; text-align: center; }
.document-header h1 { margin: 0; font-size: 20pt; }
.certificate-group-title { font-weight: 700; text-align: center; }
.document-header p { margin: 2mm 0 0; font-style: italic; }
.document-details-page h2 { margin: 0 0 3mm; font-size: 18pt; }
.document-details { padding-bottom: 5mm; border-bottom: 1px solid #cfd5dc; }
.document-recipient-list { margin-top: 9mm; }
.document-recipient-list h2 { margin-bottom: 2mm; }
.document-recipient-list p { margin: 0; }
.document-awards { margin-top: 9mm; }
.document-awards h2 { margin-bottom: 3mm; }
.award-summary-table { width: 100%; border-collapse: collapse; }
.award-summary-table th,
.award-summary-table td { padding: 2.5mm 3mm; border: 1px solid #cfd5dc; text-align: left; vertical-align: top; }
.award-summary-table th { background: #f4f6f8; }
.achievement-meta { margin-bottom: 4mm; }
.achievement-meta p { margin: 0 0 2mm; }
.achievement-meta .description { margin-top: 4mm; white-space: pre-wrap; }
.recipient-certificate { margin-top: 3mm; text-align: center; break-inside: avoid; }
.recipient-certificate h2 { margin: 0; font-size: 16pt; font-weight: 400; }
.recipient-names { min-height: 7mm; margin: 1mm 0 2mm; }

.certificate-frame {
  display: grid;
  width: 100%;
  height: 175mm;
  overflow: hidden;
  place-items: center;
}

.certificate-frame img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: top center;
}
.certificate-page .document-header { margin-bottom: 5mm; }
.certificate-grid {
  display: grid;
  height: 238mm;
  min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6mm;
}
.certificate-card {
  display: grid;
  min-height: 0;
  padding: 4mm;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid #cfd5dc;
  border-radius: 3mm;
  text-align: center;
  break-inside: avoid;
}
.certificate-award { margin: 0; font-weight: 700; }
.certificate-card .recipient-names { min-height: 0; margin: 1mm 0 2mm; }
.certificate-card .certificate-frame { height: auto; min-height: 0; }
.activity-photo img { width: 100%; height: 100%; object-fit: contain; }
.pdf-evidence { color: #111; text-decoration: none; }
.pdf-evidence small { font-size: 16pt; }
.mixed .achievement-meta { margin-bottom: 2mm; }
.mixed .recipient-certificate { margin-top: 1mm; }
.mixed .certificate-frame { height: 55mm; }
.mixed .recipient-names { min-height: 5mm; margin: 0 0 1mm; }

.activity-sheet > h2 { margin: 0 0 3mm; text-align: center; font-size: 18pt; font-weight: 400; }
.activity-sheet { break-before: page; }
.activity-photo { margin: 0 0 5mm; text-align: center; break-inside: avoid; }
.activity-photo img { height: 82mm; }
.activity-sheet.two-photos .activity-photo img { height: 103mm; }
.activity-photo figcaption { margin-top: 2mm; }

@media print {
  body { background: #fff; }
  .a4-sheet { margin: 0; }
}

@media screen and (max-width: 820px) {
  body { font-size: clamp(15px, 4.4vw, 16pt); }
  .a4-sheet {
    width: 100%;
    min-height: 141.43vw;
    margin: 0;
    padding: 8vw 7vw;
  }
  .document-header h1 { font-size: 1.35em; }
  .document-details-page h2 { font-size: 1.15em; }
  .recipient-certificate h2 { font-size: 1em; }
  .certificate-frame { height: 52vw; }
  .certificate-grid { height: 125vw; gap: 3vw; }
  .certificate-card { padding: 2vw; }
  .mixed .certificate-frame { height: 29vw; }
  .activity-sheet > h2 { font-size: 1.15em; }
  .activity-photo img { height: 48vw; }
  .activity-sheet.two-photos .activity-photo img { height: 48vw; }
}