/*
 * Webdev Zimbabwe — /certificates (v2026)
 * Load AFTER webdev-base.css. Primitives live there; this file adds only the
 * blocks specific to the certifications page.
 *
 * The page replaces an unconverted Antler template that stacked six full-width
 * certificate scans down a single column with no headings, no issuer names and
 * no indication of what each document covered. The job here is to make each
 * document identifiable BEFORE it is opened, so a procurement officer can scan
 * the page rather than download six images.
 *
 * Every fact rendered on this page is transcribed from the certificate images
 * themselves — issuer, category and the validity period exactly as printed.
 * Verification codes and the TIN are deliberately NOT transcribed into markup:
 * they are legible in the scans for anyone who needs them, and putting them in
 * text would only make them cheap to scrape.
 */

/* ---------- hero ---------- */

.wd-subhero--certs {
  --wd-subhero-art: url("../img/hero-developer.jpg");
}

/* ---------- certificate grid ---------- */

.wd-certs {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-cert {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  padding: 0;
}

/*
 * The scan sits at the TOP of the card, not the bottom. Certificates are
 * recognised by their letterhead, so the image is the fastest identifier — the
 * text below it exists to say what the document covers, not to introduce it.
 */
.wd-cert__shot {
  background: var(--wd-grey-100);
  border-bottom: 1px solid var(--wd-grey-200);
  display: block;
  overflow: hidden;
  position: relative;
}

/*
 * A fixed 4:3 window so cards in a row match height, but the scan is CONTAINED
 * inside it, not cropped to fill.
 *
 * `cover` was the first attempt and it was useless: the scans are a mix of one
 * landscape (ZIMRA) and five tall portraits, so cropping a portrait to 4:3 --
 * from any anchor -- showed a sliver of border and nothing identifiable. A
 * contained miniature letterboxes, but the whole document is legible as a
 * shape, which is the entire job of a document thumbnail.
 */
.wd-cert__shot img {
  aspect-ratio: 4 / 3;
  background: var(--wd-white);
  display: block;
  /*
   * !important, and it is not optional. The Antler theme ships a global
   * `li img { height: 42px !important }` -- meant for the footer payment marks
   * -- and these cards are list items, so every thumbnail collapsed to a 42px
   * sliver. This selector is more specific, but an !important declaration only
   * loses to another !important, so it has to match.
   */
  height: auto !important;
  object-fit: contain;
  padding: 0.625rem;
  transition: transform var(--wd-duration) var(--wd-ease);
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .wd-cert__shot:hover img {
    transform: scale(1.03);
  }
}

.wd-cert__shot:focus-visible {
  box-shadow: var(--wd-focus);
  outline: 0;
}

.wd-cert__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 clamp(1.25rem, 2vw, 1.5rem) clamp(1.25rem, 2vw, 1.5rem);
}

.wd-cert__issuer {
  align-items: center;
  color: var(--wd-orange-700);
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.wd-cert__issuer .wd-icon {
  color: var(--wd-orange-600);
  height: 1.125rem;
  width: 1.125rem;
}

.wd-cert h3 {
  font-size: 1.0625rem;
  margin: 0;
}

.wd-cert p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0;
}

/*
 * The validity period, printed exactly as it appears on the document. It is
 * pushed to the bottom so the dates line up across a row regardless of how long
 * the category description runs.
 */
.wd-cert__period {
  align-items: center;
  border-top: 1px solid var(--wd-grey-100);
  color: var(--wd-grey-500);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.wd-cert__period .wd-icon {
  color: var(--wd-grey-500);
  flex: none;
  height: 1rem;
  width: 1rem;
}

/* ---------- responsive ---------- */

@media (max-width: 1099.98px) {
  .wd-certs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .wd-certs {
    grid-template-columns: minmax(0, 1fr);
  }
}