/* Hamed Academic Dashboard 4.5.8
   Fully visible overview imagery, automatic credential colour stages, and
   non-text media protection effects for record popups. */

/* --------------------------------------------------------------------------
   Teaching and publication overview cards
   -------------------------------------------------------------------------- */
.had-teaching-overview-card .had-overview-card-image,
.had-publications-final .had-publication-overview-card .had-overview-card-image {
  width: calc(100% + 2px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 80 / 21 !important;
  margin: -1px -1px 10px !important;
  flex: 0 0 auto !important;
  background: #eaf4f6 !important;
}

.had-teaching-overview-card .had-overview-card-image img,
.had-publications-final .had-publication-overview-card .had-overview-card-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}

/* The new assets use the same aspect ratio as the visible card stage. */
.had-overview-card-image img[src*="/v458-stages/"],
.had-overview-card-image img[src*="/v452-stages/"] {
  object-fit: contain !important;
  padding: 0 !important;
}

/* Keep the publication cards as readable as the four teaching overview cards.
   The catalogue already scrolls independently, so images no longer need to be
   compressed to a 60-pixel strip on shorter desktop screens. */
.had-publications-final .had-output-grid,
.had-publications-final .had-dissemination-grid {
  grid-auto-rows: minmax(292px, auto) !important;
}

.had-publications-final .had-publication-overview-card {
  min-height: 292px !important;
  padding: 9px 11px 10px !important;
}

.had-publications-final .had-publication-overview-card .had-overview-card-image {
  width: calc(100% + 22px) !important;
  margin: -9px -11px 8px !important;
}

.had-publications-final .had-publication-overview-head {
  min-height: 28px !important;
}

.had-publications-final .had-publication-overview-head > span {
  width: 28px !important;
  height: 28px !important;
}

.had-publications-final .had-publication-overview-head > b {
  font-size: 17px !important;
}

.had-publications-final .had-publication-overview-card h3 {
  margin: 5px 0 3px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.had-publications-final .had-publication-card-subtitle {
  display: -webkit-box !important;
  min-height: 25px !important;
  margin: 0 !important;
  font-size: 8.5px !important;
  line-height: 1.38 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.had-publications-final .had-publication-overview-card .had-publication-evidence-summary {
  margin-top: auto !important;
  padding-top: 7px !important;
  gap: 6px !important;
}

.had-publications-final .had-publication-overview-card .had-publication-evidence-summary > span {
  min-height: 42px !important;
  padding: 5px 7px !important;
}

.had-publications-final .had-publication-overview-card .had-publication-evidence-summary b {
  font-size: 14px !important;
}

.had-publications-final .had-publication-overview-card .had-publication-evidence-summary small {
  margin-top: 3px !important;
  font-size: 6.5px !important;
}

.had-publications-final .had-publication-card-action {
  margin-top: 6px !important;
  font-size: 7.5px !important;
  letter-spacing: .065em !important;
}

/* --------------------------------------------------------------------------
   Automatic credential colour system
   -------------------------------------------------------------------------- */
.had-credentials-v3 .had-credential-detail,
.had-detail-drawer.is-credential-record {
  --had-credential-accent: hsl(var(--had-credential-hue, 174) 78% 46%);
  --had-credential-accent-soft: hsl(var(--had-credential-hue, 174) 78% 46% / .16);
  --had-credential-accent-faint: hsl(var(--had-credential-hue, 174) 78% 46% / .07);
}

.had-credential-list [data-had-credential-select] {
  --had-credential-accent: hsl(var(--had-credential-hue, 174) 78% 48%);
  border-left: 2px solid transparent !important;
  transition: border-color .22s ease, background .22s ease, color .22s ease;
}

.had-credential-list [data-had-credential-select].is-active,
.had-credential-list [data-had-credential-select]:hover,
.had-credential-list [data-had-credential-select]:focus-visible {
  border-left-color: var(--had-credential-accent) !important;
  background: linear-gradient(90deg, hsl(var(--had-credential-hue, 174) 78% 46% / .22), hsl(var(--had-credential-hue, 174) 78% 46% / .07)) !important;
}

.had-credential-list [data-had-credential-select].is-active > span,
.had-credential-list [data-had-credential-select].is-active .dashicons,
.had-credential-list [data-had-credential-select]:focus-visible > span {
  color: var(--had-credential-accent) !important;
}

.had-credentials-v3 [data-had-credential-issuer] {
  color: var(--had-credential-accent) !important;
}

.had-credentials-v3 .had-credential-meta,
.had-credentials-v3 .had-skill-grid span,
.had-credentials-v3 .had-credential-actions a {
  border-color: hsl(var(--had-credential-hue, 174) 62% 48% / .55) !important;
}

.had-credentials-v3 .had-credential-meta b,
.had-credentials-v3 .had-skill-grid .dashicons,
.had-credentials-v3 .had-credential-actions a {
  color: var(--had-credential-accent) !important;
}

/* One reusable stage supplies the coloured border, diagonal lines and white
   image board for every credential, including new records. */
.had-credentials-v3 .had-credential-certificate,
.had-detail-drawer.is-credential-record .had-record-cover {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: clamp(28px, 3vw, 44px) clamp(34px, 4.2vw, 66px) !important;
  border: 1px solid hsl(var(--had-credential-hue, 174) 66% 48% / .62) !important;
  background:
    radial-gradient(circle at 5% 105%, hsl(var(--had-credential-hue, 174) 78% 48% / .34) 0 18%, transparent 18.5%),
    radial-gradient(circle at 98% -10%, hsl(calc(var(--had-credential-hue, 174) + 28) 78% 54% / .28) 0 22%, transparent 22.5%),
    repeating-linear-gradient(128deg, transparent 0 42px, hsl(var(--had-credential-hue, 174) 70% 42% / .24) 43px 44px),
    linear-gradient(135deg, #eaf5f7 0%, #f8fbfc 48%, #dcecf0 100%) !important;
  box-shadow: 0 18px 40px rgba(0, 26, 40, .22), inset 0 0 0 7px rgba(255,255,255,.34) !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.had-credentials-v3 .had-credential-certificate {
  width: min(940px, 100%) !important;
  height: clamp(275px, 36vh, 365px) !important;
  min-height: 275px !important;
  margin-top: 14px !important;
}

.had-credentials-v3 .had-credential-certificate::before,
.had-detail-drawer.is-credential-record .had-record-cover::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: clamp(17px, 1.7vw, 25px) !important;
  display: block !important;
  border: 1px solid hsl(var(--had-credential-hue, 174) 52% 45% / .42) !important;
  border-radius: 8px;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 28px rgba(0, 40, 55, .13), inset 0 0 0 1px rgba(255,255,255,.9) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none;
}

.had-credentials-v3 .had-credential-image,
.had-detail-drawer.is-credential-record .had-record-cover img {
  position: relative !important;
  z-index: 3 !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 86% !important;
  max-height: 83% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 16px rgba(0, 24, 38, .13)) !important;
  transform: translateZ(0) scale(1) !important;
  transition: transform .35s ease, filter .35s ease;
  pointer-events: none !important;
}

.had-credential-certificate.is-portrait .had-credential-image,
.had-detail-drawer.is-credential-record .had-record-cover.is-portrait img {
  max-width: 60% !important;
  max-height: 88% !important;
}

.had-credential-certificate.is-landscape .had-credential-image,
.had-detail-drawer.is-credential-record .had-record-cover.is-landscape img {
  max-width: 88% !important;
  max-height: 78% !important;
}

.had-credential-certificate.is-square .had-credential-image,
.had-detail-drawer.is-credential-record .had-record-cover.is-square img {
  max-width: 78% !important;
  max-height: 86% !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.018) !important;
  filter: drop-shadow(0 13px 19px rgba(0, 24, 38, .18)) !important;
}

.had-detail-drawer.is-credential-record .had-drawer-body {
  grid-template-columns: minmax(280px, 365px) minmax(0, 1fr) !important;
  gap: clamp(24px, 3vw, 44px) !important;
  align-items: start !important;
}

.had-detail-drawer.is-credential-record .had-record-cover {
  width: 100% !important;
  height: clamp(360px, 57vh, 510px) !important;
  color: #0b3443;
}

/* --------------------------------------------------------------------------
   Popup image cleanup and visual protection layer
   -------------------------------------------------------------------------- */
.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;
}

.had-record-cover.has-record-image {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.had-record-cover.has-record-image > img {
  z-index: 2;
  pointer-events: none !important;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Existing decorative fallback circle is removed when an actual image exists. */
.had-record-cover.has-record-image > i {
  display: none !important;
}

.had-media-motion {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: .58;
}

.had-media-motion::before {
  content: "";
  position: absolute;
  inset: -45% -30%;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.035) 53%, transparent 60%);
  transform: translateX(-42%);
  animation: hadV458MediaSweep 7.5s ease-in-out infinite;
}

.had-media-motion::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: 14%;
  background: linear-gradient(90deg, transparent, hsl(var(--had-credential-hue, 184) 88% 54% / .52), transparent);
  box-shadow: 0 0 14px hsl(var(--had-credential-hue, 184) 88% 54% / .24);
  animation: hadV458ScanLine 6.2s linear infinite;
}

.had-media-motion > i {
  position: absolute;
  right: 7%;
  bottom: 10%;
  width: clamp(44px, 8vw, 92px);
  aspect-ratio: 1;
  border: 1px solid hsl(var(--had-credential-hue, 184) 82% 48% / .32);
  border-radius: 50%;
  animation: hadV458Radar 5.4s ease-out infinite;
}

.had-media-motion > i + i {
  animation-delay: 1.8s;
}

.had-record-cover.has-record-image::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(3, 35, 48, .025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%, transparent 82%, rgba(3, 35, 48, .05));
}

/* The same non-text protection treatment is available on full record images. */
.had-v450-record-hero,
.had-blog-single-inner > figure {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.had-v450-record-hero img,
.had-blog-single-inner > figure img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

@keyframes hadV458MediaSweep {
  0%, 18% { transform: translateX(-48%); opacity: 0; }
  34% { opacity: .72; }
  58% { transform: translateX(48%); opacity: .28; }
  100% { transform: translateX(48%); opacity: 0; }
}

@keyframes hadV458ScanLine {
  0% { top: 10%; opacity: 0; }
  10% { opacity: .56; }
  88% { opacity: .42; }
  100% { top: 90%; opacity: 0; }
}

@keyframes hadV458Radar {
  0% { transform: scale(.45); opacity: 0; }
  24% { opacity: .45; }
  100% { transform: scale(1.65); opacity: 0; }
}

@media (min-width: 901px) and (max-height: 920px) {
  .had-teaching-overview-card .had-overview-card-image,
  .had-publications-final .had-publication-overview-card .had-overview-card-image {
    height: auto !important;
    min-height: 0 !important;
  }

  .had-publications-final .had-output-grid,
  .had-publications-final .had-dissemination-grid {
    grid-auto-rows: minmax(282px, auto) !important;
  }

  .had-publications-final .had-publication-overview-card {
    min-height: 282px !important;
  }

  .had-credentials-v3 .had-credential-certificate {
    height: clamp(250px, 31vh, 315px) !important;
    min-height: 250px !important;
  }
}

@media (max-width: 900px) {
  .had-publications-final .had-output-grid,
  .had-publications-final .had-dissemination-grid {
    grid-auto-rows: auto !important;
  }

  .had-publications-final .had-publication-overview-card {
    min-height: 0 !important;
  }

  .had-credentials-v3 .had-credential-certificate {
    height: clamp(270px, 64vw, 430px) !important;
    padding: 28px !important;
  }

  .had-detail-drawer.is-credential-record .had-drawer-body {
    display: block !important;
  }

  .had-detail-drawer.is-credential-record .had-record-cover {
    width: min(100%, 430px) !important;
    height: min(540px, 66vh) !important;
    margin: 0 auto 24px !important;
    padding: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .had-media-motion::before,
  .had-media-motion::after,
  .had-media-motion > i {
    animation: none !important;
  }

  .had-media-motion::before {
    opacity: .16;
    transform: translateX(0);
  }

  .had-media-motion::after {
    top: 50%;
    opacity: .22;
  }
}

/* 4.5.8 final specificity repairs. Earlier viewport rules treated every direct
   paragraph as a three-column activity row; the publication subtitle is normal
   prose and must occupy the complete card width. */
.had-publications-final .had-publication-overview-card > p.had-publication-card-subtitle {
  display: -webkit-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 30px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  color: #88a9b6 !important;
  font-size: 10px !important;
  line-height: 1.42 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* The left publication catalogue is intentionally scrollable. This keeps all
   six evidence cards full-size rather than crushing their images to strips. */
.had-publications-final .had-publication-dashboard {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-content: start !important;
  scrollbar-gutter: stable;
}

.had-publications-final .had-publication-section,
.had-publications-final .had-publication-card-grid {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.had-publications-final .had-publication-section {
  display: block !important;
}

.had-publications-final .had-publication-section + .had-publication-section {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid #16475d !important;
}

.had-publications-final .had-publication-card-grid {
  display: grid !important;
  margin-top: 8px !important;
}

/* The motion layer belongs only to real images, never to the fallback graphic. */
.had-record-cover:not(.has-record-image) > .had-media-motion {
  display: none !important;
}

/* Protect the source image while leaving buttons and metadata fully usable. */
.had-protected-media img,
.had-record-cover.has-record-image img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}