/* =========================================================
   /public/lib/css/contributors.css
   Contributors module styling (profile layout + embeds)
   Depends on ui.css + public.css + article.css
   ========================================================= */

/* ---------------------------------------------------------
   Scope: Prefer not to globally alter mk-page across site.
   We scope to contributors routes by using a light body hook.
   If you later add body class like "mk-contributors", switch to that.
--------------------------------------------------------- */
body .mk-page { padding: 18px 0; }
body .mk-page-actions { margin: 8px 0 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Compact hero lede */
body .mk-hero--compact { margin-top: 14px; }
body .mk-lede { margin-top: 8px; max-width: 88ch; line-height: 1.75; }

/* ---------------------------------------------------------
   Profile shell
--------------------------------------------------------- */
body .mk-profile { margin-top: 14px; }

body .mk-profile__grid{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Avatar column */
body .mk-profile__avatar{
  width: 92px;
  flex: 0 0 auto;
}

/* Main content */
body .mk-profile__content{
  min-width: 220px;
  flex: 1 1 320px;
}

/* Avatar image/fallback */
body .mk-avatar{
  width: 84px;
  height: 84px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

body .mk-avatar--fallback{
  width: 84px;
  height: 84px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

/* Section titles used within contributor pages */
body .mk-section-title{
  margin: 0 0 8px;
  font-size: 1.1rem;
  line-height: 1.25;
}

/* Action row */
body .mk-profile__actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

body .mk-attach-hint{
  margin-top: 10px;
  font-size: .92rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   Embeds (used by attachments engine)
--------------------------------------------------------- */
body .mk-embed{
  position: relative;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

body .mk-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------
   Responsive tuning
--------------------------------------------------------- */
@media (max-width: 560px) {
  body .mk-profile__avatar{
    width: 100%;
  }

  body .mk-profile__grid{
    gap: 12px;
  }

  body .mk-avatar,
  body .mk-avatar--fallback{
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }

  body .mk-profile__content{
    min-width: 0;
    flex-basis: 100%;
  }
}

/* contributor card bar color */
.mk-contrib-card .mk-card__bar {
  height: 8px;
  background: #2b6cb0;
  display: block;
  width: 100%;
}
.mk-contrib-card:nth-child(2) .mk-card__bar { background: #7b341e; }
.mk-contrib-card:nth-child(3) .mk-card__bar { background: #2f855a; }
.mk-contrib-card:nth-child(4) .mk-card__bar { background: #805ad5; }
.mk-contrib-card:nth-child(5) .mk-card__bar { background: #c05621; }
.mk-contrib-card:nth-child(6) .mk-card__bar { background: #b83280; }

/* contributor avatar styling */
.mk-contrib-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #1a2744;
  color: #f0c060;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.2rem;
  border: 2px solid #f0c060;
  flex: 0 0 auto;
}

/* === Enhanced styling added === */
.mk-contrib-card:nth-child(1) .mk-contrib-avatar{background:#1a2744;color:#f0c060;border-color:#f0c060}
.mk-contrib-card:nth-child(2) .mk-contrib-avatar{background:#1a3a1a;color:#60c840;border-color:#60c840}
.mk-contrib-card:nth-child(3) .mk-contrib-avatar{background:#2a1a3a;color:#c080ff;border-color:#c080ff}
.mk-contrib-card:nth-child(4) .mk-contrib-avatar{background:#3a1a1a;color:#ff8060;border-color:#ff8060}
.mk-contrib-card:nth-child(5) .mk-contrib-avatar{background:#1a3030;color:#40d0d0;border-color:#40d0d0}
.mk-contrib-card:nth-child(6) .mk-contrib-avatar{background:#3a2a10;color:#f0a040;border-color:#f0a040}
.mk-contrib-avatar{width:56px!important;height:56px!important;border-radius:14px!important;font-size:1.4rem!important;border-width:2px!important;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .15s}
.mk-contrib-card:hover .mk-contrib-avatar{transform:scale(1.08)}
.mk-contrib-card{border-radius:16px!important;transition:transform .14s,box-shadow .14s;border:1px solid rgba(0,0,0,.09)!important}
.mk-contrib-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.12)!important}
.mk-contrib-card .mk-card__bar{height:5px!important}
.mk-contrib-card h3{font-size:1rem!important;font-weight:800!important;color:#111!important}
.mk-grid--contributors{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:14px!important;margin-top:12px!important}
.contributors-page .mk-hero__bar{background:linear-gradient(90deg,#1a2744,#2b6cb0,#805ad5)!important;height:5px!important;opacity:1!important}
.contributors-page .mk-pill{background:rgba(43,108,176,.08)!important;color:#2b6cb0!important;border:1px solid rgba(43,108,176,.2)!important;border-radius:999px!important;padding:3px 10px!important;font-size:.78rem!important;font-weight:700!important}
.contributors-page h2{font-size:1.1rem;font-weight:800;color:#111;border-bottom:2px solid rgba(0,0,0,.06);padding-bottom:8px;margin-bottom:14px!important}
@media(max-width:480px){.mk-grid--contributors{grid-template-columns:1fr 1fr!important;gap:10px!important}.mk-contrib-avatar{width:44px!important;height:44px!important;font-size:1.1rem!important}}