/* ==========================================================================
   iSpazio — Badge CSS (single source of truth)
   Used by: homepage (theme), /account (mu-plugin), sidebar widgets.
   ========================================================================== */
.isp-badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.isp-badge-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 12px 18px;background:var(--isp-surface);border:1.5px solid var(--isp-border-soft);border-radius:14px;transition:transform .2s,box-shadow .2s,border-color .2s;min-height:220px;justify-content:center}
.isp-badge-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(15,29,54,.10)}
.isp-badge-medal{position:relative;width:80px;height:80px;border-radius:50%;margin-bottom:12px;flex-shrink:0}
.isp-badge-medal::before{content:'';position:absolute;inset:0;border-radius:50%;padding:3px;background:linear-gradient(145deg,rgba(255,255,255,.9) 0%,var(--isp-badge-color) 25%,rgba(255,255,255,.6) 50%,var(--isp-badge-color) 75%,rgba(255,255,255,.8) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.isp-badge-icon{position:absolute;inset:3px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--isp-badge-color) 20%,white) 0%,color-mix(in srgb,var(--isp-badge-color) 30%,white) 40%,var(--isp-badge-color) 100%);overflow:hidden;transition:filter .3s,opacity .3s}
.isp-badge-icon::after{content:'';position:absolute;top:-2px;left:10%;width:80%;height:50%;border-radius:0 0 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 60%,transparent 100%);pointer-events:none}
.isp-badge-icon svg{width:30px;height:30px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));color:#fff;stroke:#fff}
/* Earned */
.isp-badge-item.earned{border-color:color-mix(in srgb,var(--isp-badge-color,var(--isp-brand)) 30%,transparent);box-shadow:0 4px 16px color-mix(in srgb,var(--isp-badge-color,var(--isp-brand)) 12%,transparent)}
.isp-badge-item.earned .isp-badge-medal::after{content:'';position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 12px 2px color-mix(in srgb,var(--isp-badge-color) 35%,transparent);pointer-events:none}
/* Not earned */
.isp-badge-item:not(.earned) .isp-badge-medal::before{background:linear-gradient(145deg,rgba(200,200,200,.7) 0%,#b0b0b0 25%,rgba(220,220,220,.5) 50%,#b0b0b0 75%,rgba(200,200,200,.6) 100%)}
.isp-badge-item:not(.earned) .isp-badge-icon{background:radial-gradient(circle at 35% 35%,#e5e5e5 0%,#d0d0d0 40%,#b0b0b0 100%)}
.isp-badge-item:not(.earned) .isp-badge-icon::after{display:none}
.isp-badge-item:not(.earned) .isp-badge-icon svg{color:#999;stroke:#999;opacity:.5}
.isp-badge-item:not(.earned) .isp-badge-name,.isp-badge-item:not(.earned) .isp-badge-desc{opacity:.45}
/* Text */
.isp-badge-name{font-size:13px;font-weight:700;color:var(--isp-ink);margin-bottom:3px}
.isp-badge-desc{font-size:11.5px;color:var(--isp-mute);line-height:1.4}
/* Progress */
.isp-badge-progress{width:100%;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.isp-badge-progress-bar{width:80%;height:5px;border-radius:3px;background:var(--isp-border-soft);overflow:hidden}
.isp-badge-progress-fill{height:100%;border-radius:3px;background:var(--isp-badge-color);transition:width .4s ease}
.isp-badge-progress-label{font-size:10.5px;font-weight:600;color:var(--isp-mute)}
.isp-badge-counter{font-size:14px;font-weight:700;color:var(--isp-brand)}
.isp-badge-counter-total{color:var(--isp-mute);font-weight:500}
/* Context overrides (profile cards, dashboard) */
.isp-public-card .isp-badge-item.earned,.isp-dash-card--badges .isp-badge-item.earned{border-color:transparent;box-shadow:none}
.isp-public-card .isp-badge-item.earned .isp-badge-medal::after,.isp-dash-card--badges .isp-badge-item.earned .isp-badge-medal::after{display:none}
/* Responsive */
@media(max-width:900px){.isp-badge-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.isp-badge-grid{grid-template-columns:repeat(2,1fr)}.isp-badge-medal{width:66px;height:66px}.isp-badge-icon svg{width:24px;height:24px}}