/* certificates.css: the certificate cards and their pop-up viewer (components/CertificateGrid.astro),
   imported by the Certifications page and the Service and peer review page. Tokens only.

   The cards are the cards of Projects (site.css, section 11) with a 4 to 3 frame in which the whole
   certificate stands, landscape or portrait, on the surface colour. The viewer is a native dialog over
   the whole window: on a phone the picture fills the width and the previous and next buttons stand
   under it; from 48rem they stand at its two sides. */

.sheet.is-cert { aspect-ratio: 4 / 3; background: var(--wash); }
.sheet.is-cert img {
  padding: var(--s1);
  object-fit: contain;
  mix-blend-mode: normal;
}
.certificates-group > h2 + .certs { margin-top: var(--s3); }

/* the viewer */
html:has(.viewer[open]) { overflow: hidden; }
.viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--s3);
  border: 0;
  background: transparent;
  color: var(--on-scrim);
}
.viewer::backdrop { background: var(--scrim); }
.viewer[open] {
  display: grid;
  grid-template-columns: var(--hit) minmax(0, 1fr) var(--hit);
  grid-template-rows: var(--hit) minmax(0, 1fr) var(--hit);
  gap: var(--s2);
}
.viewer-figure {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: var(--s2);
  min-height: 0;
  margin: 0;
}
.viewer-img {
  place-self: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 16rem);   /* room for the buttons and a caption of four lines */
  object-fit: contain;
  border-radius: var(--radius-in);
}
.viewer-caption {
  justify-self: center;
  max-width: var(--measure);
  text-align: center;
  font-size: var(--size-small);
  line-height: var(--lh-title);
}
.viewer-title { display: block; font-weight: var(--wght-strong); color: var(--on-scrim); }
.viewer-line { display: block; color: var(--on-scrim-2); font-stretch: var(--wdth-tight); }
.viewer-count { font-variant-numeric: tabular-nums; }

.viewer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: var(--stroke) solid var(--on-scrim-2);
  border-radius: var(--radius-out);
  background: transparent;
  color: var(--on-scrim);
  cursor: pointer;
}
.viewer-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viewer-close { grid-column: 3; grid-row: 1; }
.viewer-prev { grid-column: 1; grid-row: 3; }
.viewer-next { grid-column: 3; grid-row: 3; }
.viewer :focus-visible { outline-color: var(--on-scrim); }

@media (min-width: 48rem) {
  .viewer { padding: var(--s4); }
  .viewer[open] { grid-template-rows: var(--hit) minmax(0, 1fr); column-gap: var(--s3); }
  .viewer-figure { grid-column: 2; }
  .viewer-img { max-height: calc(100dvh - 13rem); }
  .viewer-prev,
  .viewer-next { grid-row: 2; align-self: center; }
}

/* the picture comes up from a little below and fades in; hover changes colour only */
.viewer[open] .viewer-figure {
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@starting-style {
  .viewer[open] .viewer-figure { opacity: 0; transform: translateY(var(--s2)); }
}
@media (hover: hover) and (pointer: fine) {
  .viewer-btn { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
  .viewer-btn:hover { background-color: var(--on-scrim); color: var(--scrim-solid); }
}
@media (prefers-reduced-motion: reduce) {
  .viewer[open] .viewer-figure,
  .viewer-btn { transition: none; }
}

/* the small lines of a certificate card stand close together */
.card.cert .meta + .meta { margin-top: 0; }