/* Monster profiles.
   Absorbed verbatim from Monster Profiles for Divi so that retiring that
   plugin changes which code draws these pages and nothing about how they look.
   Colours come from the Customizer (Appearance > Customize > Monster Profiles)
   as CSS variables, so a recoloured site keeps its colours. */

body.single-monster,
body.post-type-archive-monster,
body.single-monster #page-container,
body.post-type-archive-monster #page-container,
body.single-monster #main-content,
body.post-type-archive-monster #main-content,
.mpd-single-profile,
.mpd-profile-grid,
.mpd-archive {
  background: var(--mpd-bg, #000000) !important;
  color: var(--mpd-body, #ffffff) !important;
}

body.single-monster #main-content,
body.post-type-archive-monster #main-content {
  min-height: 80vh;
}

.mpd-single-profile,
.mpd-archive {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 52px) 24px clamp(56px, 7vw, 96px);
}

.mpd-hero {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: center;
  margin-bottom: clamp(34px, 4vw, 54px);
}

.mpd-portrait {
  max-width: 360px;
}

.mpd-portrait img,
.mpd-card-image img,
.mpd-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

.mpd-portrait img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  background: #050505;
}

.mpd-eyebrow,
.mpd-tagline {
  color: var(--mpd-headline, #b00020) !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.mpd-single-profile h1,
.mpd-single-profile h2,
.mpd-archive h1,
.mpd-profile-card h3,
.mpd-profile-card h3 a,
.mpd-creature-file h2,
.mpd-gallery-wrap h2 {
  color: var(--mpd-headline, #b00020) !important;
}

.mpd-single-profile h1 {
  font-size: clamp(3.4rem, 6vw, 5.45rem);
  line-height: 0.94;
  letter-spacing: -0.028em;
  font-weight: 900;
  margin: 0 0 18px;
  max-width: 720px;
}

.mpd-single-profile h2,
.mpd-archive h1,
.mpd-gallery-wrap h2,
.mpd-creature-file h2 {
  font-size: clamp(2rem, 3vw, 3.05rem);
  line-height: .95;
  font-weight: 900;
  margin: 0 0 24px;
}

.mpd-single-profile p,
.mpd-single-profile li,
.mpd-single-profile span,
.mpd-profile-card p,
.mpd-archive p,
.mpd-bio,
.mpd-bio p {
  color: var(--mpd-body, #ffffff) !important;
}

.mpd-single-profile a,
.mpd-profile-grid a,
.mpd-archive a {
  color: var(--mpd-link, #e0002a) !important;
  text-decoration: none;
}

.mpd-single-profile a:hover,
.mpd-profile-grid a:hover,
.mpd-archive a:hover {
  color: #ff304f !important;
}

.mpd-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mpd-socials a,
.mpd-threshold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--mpd-body, #ffffff) !important;
  padding: 9px 13px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
}

.mpd-socials a:hover,
.mpd-threshold:hover {
  background: var(--mpd-headline, #b00020);
  color: #ffffff !important;
}

.mpd-profile-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
  margin-bottom: clamp(44px, 5vw, 72px);
}

.mpd-bio {
  font-size: clamp(1.08rem, 1.16vw, 1.2rem);
  line-height: 1.72;
  max-width: 710px;
  color: rgba(255, 255, 255, 0.9) !important;
}

.mpd-bio p {
  margin: 0 0 1.15em;
}

/* Bio text is rendered as clean prose, but this keeps any theme/editor
   leftovers from casting a white rectangle. */
body.single-monster .mpd-bio,
body.single-monster .mpd-bio::before,
body.single-monster .mpd-bio::after {
  background: transparent !important;
  background-color: transparent !important;
  min-height: 0 !important;
}

body.single-monster .mpd-bio:empty {
  display: none !important;
}

body.single-monster .mpd-profile-content:has(.mpd-bio:empty) {
  grid-template-columns: 1fr;
}

.mpd-creature-file {
  background: var(--mpd-card, #080808) !important;
  border: 0;
  padding: clamp(22px, 2.4vw, 30px);
  margin-top: 0;
  box-shadow: none;
  width: 100%;
}

.mpd-file-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 0;
}

.mpd-file-row:first-of-type {
  border-top: 0;
}

.mpd-file-row span {
  display: block;
  color: rgba(255, 255, 255, 0.62) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.mpd-file-row strong {
  color: var(--mpd-body, #ffffff) !important;
  font-weight: 800;
}

.mpd-gallery-wrap {
  clear: both;
}

.mpd-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.mpd-gallery-item {
  display: block;
  overflow: hidden;
  background: #050505;
  border: 0;
  min-height: 0;
}

.mpd-gallery-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 220ms ease, opacity 220ms ease;
}

.mpd-gallery-item:hover img {
  transform: scale(1.035);
  opacity: 0.86;
}

/* Readability and gallery balance. */
.mpd-bio p,
.mpd-bio li,
.mpd-bio blockquote {
  color: rgba(255, 255, 255, 0.9) !important;
}

.mpd-bio blockquote {
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  margin: 1.35em 0 0;
  padding: 0 0 0 18px;
  color: rgba(255, 255, 255, 0.78) !important;
}

.mpd-gallery-grid .mpd-gallery-item:only-child {
  max-width: 380px;
}

.mpd-gallery-grid .mpd-gallery-item:nth-last-child(1):nth-child(3n + 1) {
  grid-column: 1 / 2;
}

.mpd-gallery-grid .mpd-gallery-item img {
  min-height: 100%;
}

.mpd-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.mpd-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mpd-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpd-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mpd-profile-card {
  background: var(--mpd-card, #080808) !important;
  border: 0;
  overflow: hidden;
}

.mpd-card-image {
  display: block;
  background: #050505;
}

.mpd-card-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mpd-card-body {
  padding: 22px;
}

.mpd-card-body h3 {
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 900;
  margin: 0 0 10px;
}

.mpd-card-body p {
  margin-bottom: 18px;
}

@media (max-width: 980px) {
  .mpd-single-profile,
  .mpd-archive {
    max-width: 760px;
  }

  .mpd-hero,
  .mpd-profile-content {
    grid-template-columns: 1fr;
  }

  .mpd-hero {
    gap: 24px;
    margin-bottom: 34px;
  }

  .mpd-portrait {
    max-width: 420px;
  }

  .mpd-creature-file {
    max-width: 420px;
  }

  .mpd-profile-grid,
  .mpd-columns-2,
  .mpd-columns-3,
  .mpd-columns-4,
  .mpd-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mpd-single-profile,
  .mpd-archive {
    padding: 28px 18px 56px;
  }

  .mpd-single-profile h1 {
    font-size: clamp(2.7rem, 15vw, 4rem);
    letter-spacing: -0.045em;
  }

  .mpd-profile-grid,
  .mpd-columns-2,
  .mpd-columns-3,
  .mpd-columns-4,
  .mpd-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* No red outline treatment; crimson typography stays. */
.mpd-portrait img,
.mpd-creature-file,
.mpd-gallery-item,
.mpd-profile-card {
  border: 0 !important;
  box-shadow: none !important;
}

.mpd-socials a,
.mpd-threshold {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.mpd-bio blockquote {
  border-left-color: rgba(255, 255, 255, 0.18) !important;
}