/* ==========================================================================
   SHADOWGRAM — in-realm social feed (Instagram-style, Shadowburn skin)
   Extends css/style.css. Feed markup is rendered by js/shadowgram.js from the
   #sg-feed JSON block — every .sg-post is one row of a future `shadowgram_post`
   table; comments map to `shadowgram_comment`.
   ========================================================================== */

.sg-wrap{
  max-width:1280px; margin:0 auto; padding:56px 5% var(--block-gap);
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:60px; align-items:start;
}
.sg-main{min-width:0; display:flex; flex-direction:column; gap:40px;}

/* ---------- COMPOSE (locked) ---------- */
.sg-compose{
  position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.sg-compose-row{display:flex; align-items:center; gap:14px; padding:18px 20px;}
.sg-compose-row input{
  flex:1; background:rgba(8,13,24,0.6); border:1px solid var(--border); border-radius:10px;
  padding:11px 14px; color:var(--text); font-family:var(--font-body); font-size:0.9rem;
}
.sg-compose-row input::placeholder{color:var(--text-dim);}
.sg-compose-actions{
  display:flex; gap:10px; padding:0 20px 18px; flex-wrap:wrap;
}
.sg-compose-actions button{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid var(--border);
  background:rgba(111,216,255,0.06); color:var(--text-dim);
  font-family:var(--font-display); font-size:0.72rem; letter-spacing:1px; text-transform:uppercase;
}
.sg-compose-actions button img{width:16px; height:16px; filter:drop-shadow(0 0 2px rgba(111,216,255,0.55));}
.sg-lock{
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-top:1px solid var(--border);
  background:rgba(111,216,255,0.05); color:var(--frost-glow);
  font-size:0.78rem; letter-spacing:0.4px;
}
.sg-lock svg{width:15px; height:15px; flex-shrink:0;}
.sg-compose.is-locked .sg-compose-row input,
.sg-compose.is-locked .sg-compose-actions button{opacity:0.5; pointer-events:none;}

/* ---------- AVATARS ---------- */
.sg-av{
  --h:210; width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.95rem; color:#050810;
  background:linear-gradient(140deg, hsl(var(--h) 75% 62%), hsl(calc(var(--h) + 40) 65% 42%));
  box-shadow:0 0 14px rgba(111,216,255,0.18);
}
.sg-av.sg-av-sm{width:30px; height:30px; font-size:0.8rem;}
.sg-av.sg-av-lg{width:46px; height:46px; font-size:1.05rem;}

/* ---------- POST ---------- */
.sg-post{
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.sg-post-head{display:flex; align-items:center; gap:13px; padding:18px 20px;}
.sg-post-who{display:flex; flex-direction:column; min-width:0;}
.sg-post-name{
  font-family:var(--font-display); font-size:0.92rem; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:7px;
}
.sg-fac{width:15px; height:15px; object-fit:contain; filter:drop-shadow(0 0 2px rgba(111,216,255,0.55));}
.sg-post-sub{font-size:0.72rem; color:var(--text-dim); margin-top:2px;}
.sg-post-menu{margin-left:auto; color:var(--text-dim); font-size:1.2rem; letter-spacing:2px; cursor:default;}

.sg-media{
  position:relative; width:100%; aspect-ratio:16/10; background:#05070d center/cover no-repeat;
  cursor:pointer; user-select:none;
}
.sg-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;}
.sg-media-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  padding:5px 11px; border-radius:20px; background:rgba(5,8,16,0.72);
  border:1px solid var(--frost-dim); color:var(--frost-glow);
  font-family:var(--font-display); font-size:0.6rem; letter-spacing:1.5px; text-transform:uppercase;
}
.sg-media-heart{
  position:absolute; inset:0; margin:auto; width:96px; height:96px; z-index:3;
  opacity:0; transform:scale(0.4); pointer-events:none;
  fill:#fff; filter:drop-shadow(0 6px 24px rgba(0,0,0,0.5));
}
.sg-media-heart.pop{animation:sg-heart-pop .9s ease;}
@keyframes sg-heart-pop{
  0%{opacity:0; transform:scale(0.4);}
  15%{opacity:0.95; transform:scale(1.15);}
  35%{transform:scale(0.95);}
  50%{transform:scale(1);}
  100%{opacity:0; transform:scale(1);}
}

.sg-actions{display:flex; align-items:center; gap:8px; padding:14px 16px 4px;}
.sg-act{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer; padding:6px;
  color:var(--text-dim); transition:color .15s ease, transform .12s ease;
}
.sg-act:hover{color:var(--text);}
.sg-act:active{transform:scale(0.88);}
.sg-act svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;}
.sg-act.sg-like.is-on{color:#ff5a6a;}
.sg-act.sg-like.is-on svg{fill:#ff5a6a; stroke:#ff5a6a;}
.sg-act.sg-save{margin-left:auto;}
.sg-act.sg-save.is-on{color:var(--frost-glow);}
.sg-act.sg-save.is-on svg{fill:var(--frost-glow); stroke:var(--frost-glow);}

.sg-likes{padding:4px 20px; font-family:var(--font-display); font-weight:700; font-size:0.86rem; color:var(--text);}
.sg-caption{padding:8px 20px 0; font-size:0.92rem; line-height:1.65; color:var(--text-dim);}
.sg-caption b{font-family:var(--font-display); color:var(--text); margin-right:6px;}
.sg-caption a{color:var(--frost-glow);}
.sg-tags{padding:8px 20px 0; display:flex; flex-wrap:wrap; gap:9px;}
.sg-tag{font-size:0.82rem; color:var(--frost-glow);}

.sg-comments{padding:12px 20px 0;}
.sg-comments-toggle{
  background:none; border:none; padding:0 0 6px; cursor:pointer;
  color:var(--text-dim); font-size:0.82rem;
}
.sg-comments-toggle:hover{color:var(--text);}
.sg-comment{display:flex; gap:10px; padding:8px 0;}
.sg-comment-body{min-width:0; flex:1;}
.sg-comment-text{font-size:0.86rem; line-height:1.55; color:var(--text-dim);}
.sg-comment-text b{font-family:var(--font-display); color:var(--text); margin-right:6px;}
.sg-comment-meta{display:flex; gap:14px; margin-top:4px; font-size:0.72rem; color:var(--text-dim);}
.sg-comment-meta button{background:none; border:none; color:inherit; cursor:pointer; padding:0; font-size:inherit;}
.sg-comment-meta button:hover{color:var(--text);}
.sg-comment-meta .sg-clike.is-on{color:#ff5a6a;}
.sg-replies{margin:4px 0 0 40px; padding-left:14px; border-left:1px solid var(--border);}
.sg-comment.hidden{display:none;}

.sg-post-time{padding:12px 20px 18px; font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim);}
.sg-addcomment{
  display:flex; align-items:center; gap:10px; padding:13px 20px 16px; border-top:1px solid var(--border);
}
.sg-addcomment input{
  flex:1; background:none; border:none; color:var(--text); font-family:var(--font-body); font-size:0.86rem;
}
.sg-addcomment input::placeholder{color:var(--text-dim);}
.sg-addcomment input:focus{outline:none;}
.sg-addcomment .sg-post-btn{
  background:none; border:none; color:var(--frost-glow); font-family:var(--font-display);
  font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; opacity:0.4;
}

/* ---------- RIGHT RAIL ---------- */
.sg-rail{display:flex; flex-direction:column; gap:26px; position:sticky; top:96px;}
.sg-card{
  border:1px solid var(--border); border-radius:14px; padding:22px 22px 24px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.sg-card h3{
  font-family:var(--font-display); font-size:0.72rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:14px;
}
.sg-access-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.sg-access-row .sg-who{display:flex; flex-direction:column;}
.sg-access-row .sg-who b{font-family:var(--font-display); font-size:0.9rem; color:var(--text);}
.sg-access-row .sg-who span{font-size:0.74rem; color:var(--text-dim);}
.sg-bar{height:8px; border-radius:6px; background:rgba(8,13,24,0.8); overflow:hidden; border:1px solid var(--border);}
.sg-bar span{display:block; height:100%; background:linear-gradient(90deg, var(--frost-dim), var(--frost));}
.sg-access-note{margin-top:10px; font-size:0.78rem; line-height:1.6; color:var(--text-dim);}
.sg-access-note b{color:var(--frost-glow); font-family:var(--font-display);}

.sg-suggest-row{display:flex; align-items:center; gap:11px; padding:8px 0;}
.sg-suggest-row .sg-who{display:flex; flex-direction:column; min-width:0;}
.sg-suggest-row .sg-who b{font-family:var(--font-display); font-size:0.84rem; color:var(--text);}
.sg-suggest-row .sg-who span{font-size:0.72rem; color:var(--text-dim);}
.sg-follow{
  margin-left:auto; background:none; border:1px solid var(--frost-dim); border-radius:7px;
  color:var(--frost-glow); font-family:var(--font-display); font-size:0.66rem; letter-spacing:1px;
  text-transform:uppercase; padding:6px 12px; cursor:pointer; transition:all .18s ease;
}
.sg-follow:hover{background:rgba(111,216,255,0.12);}
.sg-follow.is-on{border-color:var(--border); color:var(--text-dim);}

.sg-trend-list{display:flex; flex-wrap:wrap; gap:8px;}
.sg-trend-list a{
  padding:6px 12px; border-radius:20px; border:1px solid var(--border);
  background:rgba(111,216,255,0.05); color:var(--frost-glow); font-size:0.78rem;
  transition:border-color .18s ease;
}
.sg-trend-list a:hover{border-color:var(--frost-dim);}

.sg-rail-foot{font-size:0.74rem; color:var(--text-dim); line-height:1.8;}
.sg-rail-foot a{color:var(--text-dim);}
.sg-rail-foot a:hover{color:var(--frost-glow);}

@media(max-width:1080px){
  .sg-wrap{grid-template-columns:minmax(0,1fr); max-width:620px; gap:40px;}
  .sg-rail{display:none;}
}
@media(max-width:560px){
  .sg-media{aspect-ratio:4/3;}
  .sg-wrap{padding-top:40px;}
}