/* Version 4.6.2
   Complete credential content, true image centering/containment, and a reusable
   non-text protected-media treatment for document imagery. */

/* --------------------------------------------------------------------------
   1. Credential detail image containment
   -------------------------------------------------------------------------- */
.had-credentials-v3 .had-credential-certificate,
.had-detail-drawer.is-credential-record .had-record-cover {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Fill the usable content box and let object-fit do the scaling. This removes
   the old dependence on the natural pixel size, which made some certificates
   look tiny and could push wide images outside the intended white board. */
.had-credentials-v3 .had-credential-certificate .had-credential-image,
.had-detail-drawer.is-credential-record .had-record-cover img,
.had-credentials-v3 .had-credential-certificate.is-portrait .had-credential-image,
.had-credentials-v3 .had-credential-certificate.is-landscape .had-credential-image,
.had-credentials-v3 .had-credential-certificate.is-square .had-credential-image,
.had-detail-drawer.is-credential-record .had-record-cover.is-portrait img,
.had-detail-drawer.is-credential-record .had-record-cover.is-landscape img,
.had-detail-drawer.is-credential-record .had-record-cover.is-square img,
.had-credentials-v3 .had-credential-image[src*="matlab-onramp-certificate"],
.had-credentials-v3 .had-credential-image[src*="challenge-turku-logo"],
.had-detail-drawer.is-credential-record .had-record-cover img[src*="matlab-onramp-certificate"],
.had-detail-drawer.is-credential-record .had-record-cover img[src*="challenge-turku-logo"] {
  position: relative !important;
  inset: auto !important;
  place-self: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: transparent !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center !important;
  box-sizing: border-box !important;
}

.had-credentials-v3 .had-credential-certificate:hover .had-credential-image,
.had-credentials-v3 .had-credential-certificate:focus-within .had-credential-image,
.had-detail-drawer.is-credential-record .had-record-cover:hover img {
  transform: translateZ(0) scale(1.014) !important;
}

/* Keep a generous, predictable inner board. The actual image remains inside
   the padded content area and cannot overlap the outer coloured frame. */
.had-credentials-v3 .had-credential-certificate {
  padding: clamp(42px, 4.8vw, 68px) !important;
}

.had-detail-drawer.is-credential-record .had-record-cover {
  padding: clamp(38px, 4vw, 58px) !important;
}

/* --------------------------------------------------------------------------
   2. Rich credential content in the popup and full-page reader
   -------------------------------------------------------------------------- */
.had-detail-drawer.is-credential-record .had-record-copy {
  min-height: 0 !important;
}

.had-detail-drawer.is-credential-record .had-rich-content {
  max-height: min(43vh, 440px) !important;
  overflow: auto !important;
  padding-right: 10px !important;
  color: #365965 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  scrollbar-width: thin;
  scrollbar-color: #16889a #e0eaed;
}

.had-detail-drawer.is-credential-record .had-rich-content[hidden] {
  display: none !important;
}

.had-credential-profile {
  color: inherit;
}

.had-credential-profile > :first-child {
  margin-top: 0 !important;
}

.had-credential-profile-summary {
  margin: 0 0 16px !important;
  color: #214b58 !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
}

.had-credential-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 20px;
}

.had-credential-profile-facts span {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #c5d8de;
  background: #eef5f7;
}

.had-credential-profile-facts small,
.had-credential-profile-facts b {
  display: block;
}

.had-credential-profile-facts small {
  margin-bottom: 4px;
  color: #6a8791;
  font: 700 7px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.had-credential-profile-facts b {
  color: #153f4d;
  font-size: 11px;
  line-height: 1.35;
}

.had-detail-drawer.is-credential-record .had-credential-profile h2,
.had-v450-record-reader[data-had-record-post-type="credential"] .had-credential-profile h2 {
  margin: 20px 0 8px !important;
  color: #0a7f91 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}

.had-credential-profile p,
.had-credential-profile li {
  color: #365965;
}

.had-credential-profile ul,
.had-credential-profile ol {
  margin: 8px 0 14px 1.2rem;
  padding: 0;
}

.had-credential-profile li + li {
  margin-top: 5px;
}

.had-credential-profile blockquote {
  margin: 14px 0;
  padding: 11px 14px;
  border-left: 3px solid #10a7b8;
  background: #e9f4f6;
}

/* Full credential pages use the same calm white/cyan information hierarchy. */
.had-v450-record-reader[data-had-record-post-type="credential"] .had-v450-reader-copy {
  color: #355762 !important;
}

.had-v450-record-reader[data-had-record-post-type="credential"] .had-credential-profile {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.had-v450-record-reader[data-had-record-post-type="credential"] .had-credential-profile-summary {
  font-size: 15px !important;
}

.had-v450-record-reader[data-had-record-post-type="credential"] .had-credential-profile-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   3. Full-page credential/document image stage
   -------------------------------------------------------------------------- */
.had-v450-record-reader[data-had-record-post-type="credential"] .had-v450-record-hero.is-credential-document {
  position: relative !important;
  isolation: isolate;
  width: min(100%, 980px) !important;
  height: clamp(380px, 56vh, 640px) !important;
  max-height: none !important;
  padding: clamp(42px, 5vw, 76px) !important;
  overflow: hidden !important;
  border: 1px solid hsl(var(--had-credential-hue, 184) 68% 48% / .55) !important;
  background:
    radial-gradient(circle at 3% 104%, hsl(var(--had-credential-hue, 184) 82% 48% / .28) 0 19%, transparent 19.5%),
    radial-gradient(circle at 101% -8%, hsl(calc(var(--had-credential-hue, 184) + 28) 78% 54% / .22) 0 24%, transparent 24.5%),
    repeating-linear-gradient(128deg, transparent 0 47px, hsl(var(--had-credential-hue, 184) 70% 42% / .19) 48px 49px),
    linear-gradient(135deg, #e9f4f7, #f9fbfc 48%, #dcecf0) !important;
  box-shadow: 0 18px 42px rgba(0, 37, 50, .16) !important;
}

.had-v450-record-reader[data-had-record-post-type="credential"] .had-v450-record-hero.is-credential-document::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: clamp(20px, 2.2vw, 30px);
  border: 1px solid hsl(var(--had-credential-hue, 184) 55% 45% / .38);
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 12px 30px rgba(0, 41, 55, .12);
  pointer-events: none;
}

.had-v450-record-reader[data-had-record-post-type="credential"] .had-v450-record-hero.is-credential-document img {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 11px 18px rgba(0, 31, 44, .12));
}

/* --------------------------------------------------------------------------
   4. Reusable non-text motion/protection treatment for document images
   -------------------------------------------------------------------------- */
.had-secure-media,
.had-protected-media,
.had-v450-record-hero,
.had-blog-single-inner figure,
.had-rich-content figure,
.wp-block-image.had-secure-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.had-secure-media img,
.had-protected-media img,
.had-v450-record-hero img,
.had-blog-single-inner figure img,
.had-rich-content figure img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* Real record images never receive generated labels, initials or year text. */
.had-record-cover.has-record-image > [data-had-detail-cover-label],
.had-record-cover.has-record-image > [data-had-detail-monogram],
.had-record-cover.has-record-image > [data-had-detail-year] {
  display: none !important;
}

/* Keep the original image itself non-interactive while the surrounding card or
   link remains usable. This is a browser-level deterrent, not DRM. */
.had-secure-media img,
.had-protected-media img,
[data-had-protected-image="true"] {
  pointer-events: none !important;
}

/* Overview images receive a quieter version of the home-page style motion so
   the card design remains clean. */
.had-overview-card-image > .had-media-motion {
  opacity: .24 !important;
}

.had-overview-card-image > .had-media-motion::after {
  height: 1px !important;
}

.had-secure-media > .had-media-motion,
.had-v450-record-hero > .had-media-motion {
  z-index: 7;
}

/* A restrained orbit layered over the existing sweep, scan and radar pulses. */
.had-secure-media > .had-media-motion > i:first-child,
.had-v450-record-hero > .had-media-motion > i:first-child {
  border-style: dashed;
  animation: hadV462ProtectedOrbit 8.8s linear infinite, hadV458Radar 5.4s ease-out infinite !important;
}

@keyframes hadV462ProtectedOrbit {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@media (max-width: 900px) {
  .had-credentials-v3 .had-credential-certificate {
    padding: 38px !important;
  }

  .had-detail-drawer.is-credential-record .had-record-cover {
    padding: 36px !important;
  }

  .had-detail-drawer.is-credential-record .had-rich-content {
    max-height: none !important;
    overflow: visible !important;
  }

  .had-credential-profile-facts,
  .had-v450-record-reader[data-had-record-post-type="credential"] .had-credential-profile-facts {
    grid-template-columns: 1fr 1fr !important;
  }

  .had-v450-record-reader[data-had-record-post-type="credential"] .had-v450-record-hero.is-credential-document {
    height: clamp(320px, 74vw, 540px) !important;
    padding: 38px !important;
  }
}

@media (max-width: 560px) {
  .had-credential-profile-facts,
  .had-v450-record-reader[data-had-record-post-type="credential"] .had-credential-profile-facts {
    grid-template-columns: 1fr !important;
  }

  .had-credentials-v3 .had-credential-certificate,
  .had-detail-drawer.is-credential-record .had-record-cover,
  .had-v450-record-reader[data-had-record-post-type="credential"] .had-v450-record-hero.is-credential-document {
    padding: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .had-secure-media > .had-media-motion > i:first-child,
  .had-v450-record-hero > .had-media-motion > i:first-child {
    animation: none !important;
  }
}