/* Certification page presentation. Source certificate scans remain unaltered. */
.cert-page-hero {
  isolation: isolate;
  background: #171b1e;
}

.cert-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 16, 18, .2), rgba(13, 16, 18, 0) 46%, rgba(13, 16, 18, .12));
}

.cert-page-hero img,
.cert-page-hero .img-auto {
  height: 380px !important;
  object-position: center 51% !important;
  filter: saturate(.92) contrast(1.04);
}

.cert-page-intro {
  position: relative;
  padding: 64px 0 56px;
  border-bottom: 1px solid #e5e8ea;
}

.cert-page-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 3px;
  transform: translateX(-50%);
  background: #ff7820;
}

.cert-page-intro h1 {
  font-size: 40px;
}

.cert-page-highlights {
  gap: 0;
  max-width: 720px;
  margin: 28px auto 0;
  border: 1px solid #dfe3e6;
  border-radius: 6px;
  background: #f7f8f8;
  overflow: hidden;
}

.cert-page-highlights span {
  flex: 1 1 200px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 0;
  border-right: 1px solid #dfe3e6;
  border-radius: 0;
  background: transparent;
}

.cert-page-highlights span:last-child {
  border-right: 0;
}

.cert-page-documents {
  padding: 62px 0 68px;
  background: #f2f4f5;
}

.cert-page-documents .cert-page-heading {
  margin-bottom: 34px;
}

.cert-filter-toolbar {
  margin-bottom: 30px;
  padding: 16px;
  border: 1px solid #dfe3e6;
  border-radius: 6px;
  background: #e9edef;
}

.cert-filter-dropdown summary,
.cert-filter-clear {
  border-radius: 4px;
}

.cert-page-doc-grid {
  gap: 20px;
}

.cert-page-doc {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dce0e3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(22, 28, 32, .08);
}

.cert-page-paper,
.cert-page-paper-preview {
  min-height: 0;
  flex: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cert-page-paper:hover,
.cert-page-paper:focus-visible {
  border-color: transparent;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.cert-page-paper-visual {
  position: relative;
  height: 338px;
  padding: 22px;
  border-bottom: 1px solid #dce0e3;
  background: #e8ecee;
}

.cert-page-paper-visual::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(120, 130, 137, .18);
  pointer-events: none;
}

.cert-page-paper-visual img {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid rgba(104, 112, 118, .2);
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 28, 32, .15);
  transition: transform .24s ease, box-shadow .24s ease;
}

.cert-page-paper:hover .cert-page-paper-visual img,
.cert-page-paper:focus-visible .cert-page-paper-visual img {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(23, 28, 32, .2);
}

.cert-page-paper:focus-visible {
  outline: 3px solid rgba(255, 120, 32, .45);
  outline-offset: -3px;
}

.cert-page-paper-copy {
  padding: 20px 20px 22px;
  border-top: 3px solid #ff7820;
}

.cert-page-paper-copy > span {
  margin-bottom: 8px;
  color: #8a4a1b;
}

.cert-page-paper-copy h3 {
  min-height: 48px;
  font-size: 17px;
}

.cert-page-paper-copy p {
  color: #626a72;
  font-size: 12px;
}

.cert-page-doc-meta {
  min-height: 48px;
  padding: 12px 16px;
  background: #24292d;
}

.cert-page-doc-meta b {
  border-radius: 3px;
}

.cert-page-evidence {
  padding: 64px 0 70px;
}

.cert-page-evidence-grid {
  gap: 20px;
}

.cert-page-evidence-grid article {
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(24, 31, 36, .07);
}

.cert-page-evidence-grid img {
  height: auto;
  aspect-ratio: 16 / 10;
  filter: saturate(.9) contrast(1.03);
}

.cert-page-evidence-grid article > div {
  min-height: 92px;
  padding: 18px;
  border-top: 3px solid #ff7820;
}

@media (max-width: 991px) {
  .cert-page-hero img,
  .cert-page-hero .img-auto {
    height: 280px !important;
  }

  .cert-page-highlights span:nth-child(2) {
    border-right: 0;
  }

  .cert-page-highlights span:last-child {
    flex-basis: 100%;
    border-top: 1px solid #dfe3e6;
  }
}

@media (max-width: 767px) {
  .cert-page-hero img,
  .cert-page-hero .img-auto {
    object-position: 48% center !important;
  }

  .cert-page-intro h1 {
    font-size: 31px;
  }

  .cert-page-highlights {
    display: block;
  }

  .cert-page-highlights span {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #dfe3e6;
  }

  .cert-page-highlights span:last-child {
    border-top: 0;
    border-bottom: 0;
  }

  .cert-filter-toolbar {
    padding: 12px;
  }

  .cert-page-paper-visual {
    height: 348px;
    padding: 20px;
  }

  .cert-page-paper-copy h3 {
    min-height: 0;
  }
}

@media (max-width: 575px) {
  .cert-page-hero img,
  .cert-page-hero .img-auto {
    height: 205px !important;
  }

  .cert-page-intro {
    padding: 46px 0 42px;
  }

  .cert-page-documents,
  .cert-page-evidence {
    padding: 48px 0 52px;
  }

  .cert-page-paper-visual {
    height: 330px;
  }

  .cert-page-evidence-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cert-page-evidence-grid article > div {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-page-paper-visual img {
    transition: none;
  }
}
