/* ==========================================================================
   ijoo.org — GitHub page (profile header + repo cards)
   ========================================================================== */

.ghhero{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:26px; padding:52px 0 30px;
}

.ghhero__id{ display:flex; align-items:center; gap:22px; min-width:0; }

.ghhero__avatar{
  width:112px; height:112px; flex:0 0 112px;
  border-radius:4px; border:1px solid var(--line);
  background:#120424; padding:3px;
  box-shadow:0 0 30px -12px rgba(255,47,208,.5);
}

.ghhero__name{
  font-size:clamp(34px,6vw,54px); letter-spacing:-.02em; line-height:1.05;
  padding-bottom:.08em;   /* keeps descenders inside the gradient box — see .hero__title */
  background:linear-gradient(96deg,#fff 6%,var(--cyan) 46%,var(--mag) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ghhero__sub{
  margin:8px 0 0; font-size:13px; letter-spacing:.12em; color:var(--dim);
}
.ghhero__bio{ margin:10px 0 0; max-width:52ch; font-size:13.5px; color:var(--dim); }

.ghhero__side{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.ghhero__side .stats{ justify-content:flex-end; }

/* ---------- language filter ------------------------------------------------- */

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:7px 15px; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--dim); background:rgba(255,47,208,.05);
  border:1px solid var(--line); border-radius:3px; transition:.16s;
}
.chip:hover{ color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 16px rgba(34,240,255,.2); }
.chip.is-active{
  color:#0a0110; font-weight:700;
  background:linear-gradient(90deg,var(--mag),var(--vio)); border-color:transparent;
  box-shadow:0 0 20px rgba(255,47,208,.35);
}
.chip__count{ font-size:10.5px; opacity:.75; }

/* ---------- repo grid --------------------------------------------------------- */

.ghgrid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  padding-bottom:70px;
}

.ghcard{
  position:relative; display:flex; flex-direction:column;
  padding:20px 20px 16px;
  background:rgba(12,3,20,.66); border:1px solid var(--line); border-radius:4px;
  transition:transform .24s cubic-bezier(.2,.7,.3,1), border-color .24s, box-shadow .24s;
}
.ghcard:hover{
  transform:translateY(-4px); border-color:var(--mag);
  box-shadow:0 18px 44px -24px rgba(255,47,208,.6);
}
.ghcard::before{                      /* corner bracket */
  content:""; position:absolute; top:8px; right:8px;
  width:10px; height:10px; border-top:1px solid var(--mag); border-right:1px solid var(--mag);
  opacity:.5;
}

.ghcard__top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px; }
.ghcard__name{ font-size:15.5px; color:var(--cyan); word-break:break-word; }
.ghcard:hover .ghcard__name{ color:#fff; }

.ghcard__lang{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--vio);
  padding:1px 8px; border:1px solid rgba(160,107,255,.32); border-radius:3px;
}
.ghcard__badge{
  font-size:9px; letter-spacing:.14em; color:var(--faint);
  padding:1px 8px; border:1px solid var(--line); border-radius:3px;
}
.ghcard__badge--warn{ color:var(--amber); border-color:rgba(255,179,64,.35); }

.ghcard__desc{
  margin:0 0 14px; font-size:13px; line-height:1.6; color:var(--dim);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; overflow:hidden;
}
.ghcard__desc--empty{ color:var(--faint); font-style:italic; }

.ghcard__meta{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:auto; padding-top:13px;
  border-top:1px solid rgba(255,47,208,.14); font-size:10.5px; color:var(--faint);
}

/* ---------- states ------------------------------------------------------------- */

.ghcard--sk{
  min-height:148px;
  background:linear-gradient(100deg,rgba(20,4,34,.7) 8%,rgba(44,8,66,.7) 22%,rgba(20,4,34,.7) 36%);
  background-size:1000px 100%; animation:ghsweep 1.6s linear infinite;
  border-color:var(--line);
}
@keyframes ghsweep{ to{ background-position:-1000px 0; } }

.ghstate{
  grid-column:1/-1; padding:34px; text-align:center;
  border:1px dashed var(--line); border-radius:4px; background:rgba(20,4,34,.5);
}
.ghstate h3{ font-size:15px; margin-bottom:8px; letter-spacing:.1em; color:var(--mag); }
.ghstate p{ margin:0 0 16px; font-size:13px; color:var(--dim); }

/* ---------- responsive ------------------------------------------------------------ */

@media (max-width:820px){
  .ghhero{ padding:38px 0 22px; }
  .ghhero__side{ align-items:flex-start; width:100%; }
  .ghhero__side .stats{ justify-content:flex-start; }
}

@media (max-width:620px){
  .ghhero__id{ flex-direction:column; align-items:flex-start; gap:14px; }
  .ghhero__avatar{ width:84px; height:84px; flex:0 0 84px; }
  .ghgrid{ gap:14px; }
}