/* ==========================================================================
   TRANSMOG GALLERY STYLES
   Extends css/style.css. `.transmog-card` is one repeatable submission —
   meant to become a PHP loop over a transmog_submissions table later.
   ========================================================================== */

.transmog-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px;
  max-width:1200px; margin:0 auto; padding:0 5% 100px;
}
.transmog-card{
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  transition:border-color .25s ease, transform .25s ease;
}
.transmog-card:hover{border-color:var(--frost-dim); transform:translateY(-4px);}
.transmog-card-img{aspect-ratio:4/5; background-size:cover; background-position:center;}
.transmog-card-body{padding:20px 22px;}
.transmog-card-body h3{font-family:var(--font-display); font-size:1rem; margin-bottom:4px;}
.transmog-owner{color:var(--text-dim); font-size:0.8rem;}
.transmog-vote{display:flex; align-items:center; gap:12px; margin-top:16px;}
.transmog-vote .btn{padding:8px 16px; font-size:0.7rem;}
.transmog-count{color:var(--frost-glow); font-weight:700; font-family:var(--font-display);}

.transmog-submit{
  text-align:center; padding:110px 5% 150px; max-width:640px; margin:0 auto;
  background:radial-gradient(ellipse at 50% 50%, rgba(111,216,255,0.08), transparent 65%), var(--bg);
}
.transmog-submit h2{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.4rem); margin-top:16px;}
.transmog-submit p{color:var(--text-dim); margin-top:16px; line-height:1.8;}
.transmog-submit .hero-actions{justify-content:center; margin-top:34px;}