/* /assets/css/user-profile-home-v20.css
   WebNigerians Profile V20 — Home-style activity experience
*/

.wnProfilePage{
  --wp-blue:#0867d1;
  --wp-navy:#071d3d;
  --wp-text:#233b59;
  --wp-muted:#6c7e93;
  --wp-line:#dbe6f1;
  --wp-soft:#f4f8fc;
}

/* Wider, more expressive profile canvas */
.wnProfilePage .liGrid{
  grid-template-columns:minmax(0,1fr) 286px!important;
  gap:18px!important;
}

.wnProfilePage main{min-width:0}

.wnProfilePage .liCard{
  border-color:var(--wp-line)!important;
  border-radius:18px!important;
  box-shadow:0 8px 28px rgba(10,37,74,.045)!important;
}

/* Hero refinement */
.wnProfilePage .hero{
  border:0!important;
  border-radius:16px!important;
  background:#fff!important;
}

.wnProfilePage .heroCover img{
  height:255px!important;
}

.wnProfilePage .heroAva{
  width:110px!important;
  height:110px!important;
  left:20px!important;
  bottom:16px!important;
}

.wnProfilePage .heroBody{
  padding:17px 18px 18px!important;
}

.wnProfilePage .pName{
  font-size:24px!important;
  font-weight:900!important;
  color:var(--wp-navy)!important;
  letter-spacing:-.025em;
}

.wnProfilePage .pHandle{
  color:var(--wp-muted)!important;
}

.wnProfilePage .pLine{
  color:#455b74!important;
  font-size:13px!important;
}

.wnProfilePage .statBox{
  border-color:#dce7f2!important;
  background:#f8fbff!important;
  padding:12px!important;
}

.wnProfilePage .statBox .v{
  color:var(--wp-navy)!important;
  font-size:17px!important;
  font-weight:900!important;
}

/* Home-like tab rail */
.wnProfilePage .tabs{
  flex-wrap:nowrap!important;
  overflow-x:auto;
  padding:3px 0 2px;
  scrollbar-width:none;
}

.wnProfilePage .tabs::-webkit-scrollbar{display:none}

.wnProfilePage .tab{
  flex:0 0 auto;
  min-height:40px;
  border-color:#d9e5f1!important;
  color:#52657d!important;
  font-weight:850!important;
  background:#fff!important;
}

.wnProfilePage .tab.active{
  color:#0867d1!important;
  background:#edf5ff!important;
  border-color:#c8def8!important;
}

/* Activity container itself becomes transparent so each item has expression */
.wnProfilePage .profileActivityCard{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.wnProfilePage .profileActivityHead{
  position:sticky;
  top:72px;
  z-index:7;
  margin-bottom:12px;
  padding:14px 16px!important;
  border:1px solid var(--wp-line)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(12px);
  box-shadow:0 7px 22px rgba(13,43,79,.045);
}

.wnProfilePage .profileActivityHead .liTitle{
  color:var(--wp-navy)!important;
  font-size:17px!important;
  font-weight:900!important;
}

.wnProfilePage .profileActivitySub{
  margin-top:3px;
  font-size:10.5px!important;
}

/* POSTS — visually aligned with Home */
.wnProfilePage #postsList{
  display:grid;
  gap:12px;
}

.wnProfilePage .profilePostCard{
  background:#fff;
  border:1px solid var(--wp-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 7px 24px rgba(8,38,75,.045);
}

.wnProfilePage .profilePostTop{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:15px 16px 9px;
}

.wnProfilePage .profilePostAvatar{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#0a66c2,#10a7a5);
  font-weight:900;
}

.wnProfilePage .profilePostAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.wnProfilePage .profilePostIdentity{
  min-width:0;
  flex:1;
}

.wnProfilePage .profilePostNameLine{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}

.wnProfilePage .profilePostName{
  color:var(--wp-navy);
  text-decoration:none;
  font-size:13.5px;
  line-height:1.25;
  font-weight:900;
}

.wnProfilePage .profileVerified{
  display:inline-grid;
  place-items:center;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#1684e8;
  color:#fff;
  font-size:9px;
  font-weight:950;
}

.wnProfilePage .profilePostHandle,
.wnProfilePage .profilePostTime{
  color:#76869a;
  font-size:10.5px;
  font-weight:720;
}

.wnProfilePage .profilePostType{
  display:inline-flex;
  margin-top:5px;
  padding:3px 8px;
  border-radius:999px;
  background:#f2f6fb;
  border:1px solid #e0e8f1;
  color:#5b6e84;
  font-size:9px;
  font-weight:850;
}

.wnProfilePage .profilePostMenu{
  color:#74869b;
  text-decoration:none;
  font-weight:900;
  letter-spacing:1px;
  padding:4px 1px;
}

.wnProfilePage .profilePostText{
  padding:4px 16px 13px 73px;
  color:#152b47;
  font-size:13px;
  line-height:1.65;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

.wnProfilePage .profilePostText a{
  color:#0870d8;
  font-weight:800;
  text-decoration:none;
}

.wnProfilePage .profilePostText a:hover{text-decoration:underline}

.wnProfilePage .profilePostMedia,
.wnProfilePage .profileYTPoster{
  width:calc(100% - 32px);
  margin:0 16px 13px;
  border:1px solid #dce6f0;
  border-radius:15px;
  overflow:hidden;
  background:#06152c;
  position:relative;
}

.wnProfilePage .profilePostMedia img,
.wnProfilePage .profileYTPoster img{
  width:100%;
  max-height:560px;
  display:block;
  object-fit:cover;
}

.wnProfilePage .profilePostMedia video{
  width:100%;
  max-height:560px;
  display:block;
  background:#000;
}

.wnProfilePage .profileYTPoster{
  cursor:pointer;
  aspect-ratio:16/9;
}

.wnProfilePage .profileYTPoster img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.wnProfilePage .profileYTPoster iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.wnProfilePage .profileYTShade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(2,12,26,.35),rgba(2,12,26,.03));
  pointer-events:none;
}

.wnProfilePage .profileYTPlay{
  position:absolute;
  left:50%;
  top:50%;
  width:74px;
  height:52px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:15px;
  background:#ff0033;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  cursor:pointer;
}

.wnProfilePage .profileYTPlay:after{
  content:"";
  position:absolute;
  left:30px;
  top:15px;
  border-left:18px solid #fff;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}

.wnProfilePage .profileYTLabel{
  position:absolute;
  left:12px;
  bottom:11px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(3,18,40,.78);
  color:#fff;
  font-size:9px;
  font-weight:850;
}

.wnProfilePage .profilePostMetrics{
  min-height:42px;
  padding:0 16px;
  border-top:1px solid #e8eef5;
  border-bottom:1px solid #e8eef5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#718196;
  font-size:10.5px;
  font-weight:760;
}

.wnProfilePage .profilePostActions{
  min-height:46px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.wnProfilePage .profilePostActions a,
.wnProfilePage .profilePostActions button{
  border:0;
  background:#fff;
  color:#5e7188;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}

.wnProfilePage .profilePostActions a:hover,
.wnProfilePage .profilePostActions button:hover{
  color:#0867d1;
  background:#f6faff;
}

/* ARTICLE EXPRESSION */
.wnProfilePage .profileArticleGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.wnProfilePage .profileArticleCard{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--wp-line);
  border-radius:17px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 20px rgba(8,38,75,.04);
}

.wnProfilePage .profileArticleCover{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#eaf3fd;
}

.wnProfilePage .profileArticleCover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .2s ease;
}

.wnProfilePage .profileArticleCard:hover .profileArticleCover img{
  transform:scale(1.025);
}

.wnProfilePage .profileArticleFallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#0867d1;
  background:linear-gradient(135deg,#eaf4ff,#f8fbff);
  font-size:18px;
  font-weight:900;
}

.wnProfilePage .profileArticleBody{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:15px;
}

.wnProfilePage .profileArticleKicker{
  color:#0a72d8;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:900;
}

.wnProfilePage .profileArticleBody h3{
  margin:6px 0 7px;
  font-size:16px;
  line-height:1.28;
  letter-spacing:-.018em;
}

.wnProfilePage .profileArticleBody h3 a{
  color:var(--wp-navy);
  text-decoration:none;
}

.wnProfilePage .profileArticleBody p{
  margin:0;
  color:#66788e;
  font-size:11.5px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.wnProfilePage .profileArticleMeta{
  margin-top:auto;
  padding-top:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#7a899b;
  font-size:10px;
  font-weight:760;
}

.wnProfilePage .profileArticleMeta a{
  color:#0867d1;
  text-decoration:none;
  font-weight:900;
}

/* PAGES / COMPANIES / BIO PAGES / TOOLS */
.wnProfilePage .profileEntityGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.wnProfilePage .profileEntityCard{
  min-width:0;
  border:1px solid var(--wp-line);
  border-radius:17px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(8,38,75,.04);
  display:flex;
  flex-direction:column;
}

.wnProfilePage .profileEntityCover{
  display:block;
  aspect-ratio:16/6.8;
  overflow:hidden;
  background:#eef5fd;
}

.wnProfilePage .profileEntityCover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.wnProfilePage .profileEntityBody{
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.wnProfilePage .profileEntityTop{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.wnProfilePage .profileEntityLogo{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:13px;
  border:1px solid #e0e8f1;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#f3f8fe;
  color:#0867d1;
  font-weight:950;
}

.wnProfilePage .profileEntityLogo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.wnProfilePage .profileEntityTop h3{
  margin:2px 0 0;
  font-size:14px;
  line-height:1.25;
}

.wnProfilePage .profileEntityTop h3 a{
  color:var(--wp-navy);
  text-decoration:none;
}

.wnProfilePage .profileEntitySub{
  margin-top:4px;
  color:#718196;
  font-size:10.5px;
  line-height:1.35;
}

.wnProfilePage .profileEntityExcerpt{
  margin:11px 0 0;
  min-height:52px;
  color:#64768c;
  font-size:11px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.wnProfilePage .profileEntityMeta{
  margin-top:auto;
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#8290a1;
  font-size:9.5px;
  font-weight:760;
}

.wnProfilePage .profileEntityOpen{
  margin-top:11px;
  min-height:34px;
  border-radius:10px;
  background:#edf5ff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0867d1;
  text-decoration:none;
  font-size:10.5px;
  font-weight:900;
}

/* DISCUSSIONS */
.wnProfilePage #forumList{
  display:grid;
  gap:10px;
}

.wnProfilePage .profileDiscussionCard{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid var(--wp-line);
  border-radius:15px;
  background:#fff;
}

.wnProfilePage .profileDiscussionIcon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eef6ff;
  color:#0867d1;
  font-size:18px;
  font-weight:950;
}

.wnProfilePage .profileDiscussionKicker{
  color:#718196;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.wnProfilePage .profileDiscussionCard h3{
  margin:4px 0;
  font-size:13px;
  line-height:1.35;
}

.wnProfilePage .profileDiscussionCard h3 a{
  color:var(--wp-navy);
  text-decoration:none;
}

.wnProfilePage .profileDiscussionMeta{
  color:#8190a2;
  font-size:9.5px;
}

.wnProfilePage .profileDiscussionOpen{
  color:#0867d1;
  text-decoration:none;
  font-size:10px;
  font-weight:900;
}

/* Right rail */
.wnProfilePage aside .liCard{
  border-radius:17px!important;
}

@media(max-width:1100px){
  .wnProfilePage .liGrid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:760px){
  .wnProfilePage .profileArticleGrid,
  .wnProfilePage .profileEntityGrid{
    grid-template-columns:1fr!important;
  }

  .wnProfilePage .profilePostText{
    padding-left:16px;
  }

  .wnProfilePage .profileActivityHead{
    top:62px;
  }
}

@media(max-width:520px){
  .wnProfilePage .heroCover img{
    height:190px!important;
  }

  .wnProfilePage .heroAva{
    width:88px!important;
    height:88px!important;
  }

  .wnProfilePage .pName{
    font-size:21px!important;
  }

  .wnProfilePage .profilePostMetrics{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    padding-top:9px;
    padding-bottom:9px;
  }

  .wnProfilePage .profilePostActions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}