/*
 * Continuing Education page: certificate cards built on the award cards (css/award-cards.css).
 * Certificates are landscape (1198 x 926); the image and the placeholder share that frame.
 */
.ce-content {
  max-width: 1040px;
}

.ce-card.award-card {
  grid-template-columns: 250px minmax(0, 1fr);
}

/* The whole certificate, never cropped or stretched. */
.ce-card-image img {
  aspect-ratio: 1198 / 926;
  object-fit: contain;
  background: #fff;
}

/* Upright (A4 portrait) certificates: the narrower award-card-image-portrait frame. */
.ce-card-image-portrait img {
  aspect-ratio: 1000 / 1415;
}

.ce-card-placeholder.award-card-placeholder {
  aspect-ratio: 1198 / 926;
}

.ce-card-placeholder .bi {
  font-size: 48px;
}

.ce-card-title {
  overflow-wrap: anywhere;
}

/* The CE code at 78% of the title size, in the publication-code colour. */
.ce-card-title .publication-code {
  font-size: 0.78em;
  margin-right: 2px;
}

.ce-card-subtitle {
  margin: 0 0 10px;
  color: var(--muted-color);
  font-size: 14.5px;
}

.ce-card-institution {
  line-height: 1.5;
}

.ce-card-meta,
.ce-card-detail {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.6;
}

.ce-card-parts {
  margin: 0 0 6px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
}

.ce-card-parts li + li {
  margin-top: 4px;
}

.ce-card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.ce-card-separator {
  color: var(--subtle-color);
}

/* Tablets: a narrower image column. */
@media (max-width: 991.98px) {
  .ce-card.award-card {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

/* Phones: certificate above the text, at a recognisable size. */
@media (max-width: 575.98px) {
  .ce-card.award-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-card .award-card-media {
    max-width: 300px;
  }

  .ce-card-placeholder.award-card-placeholder {
    aspect-ratio: 1198 / 926;
    min-height: 0;
  }
}