/* ==========================================================================
   iSpazio — Badge CSS (single source of truth)
   Used by: homepage (theme), /account (mu-plugin), sidebar widgets.
   ========================================================================== */
.wc-badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wc-badge-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 12px 18px;background:var(--wc-surface);border:1.5px solid var(--wc-border-soft);border-radius:14px;transition:transform .2s,box-shadow .2s,border-color .2s;min-height:220px;justify-content:center;min-width:0}
.wc-badge-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(15,29,54,.10)}
.wc-badge-medal{position:relative;width:80px;height:80px;border-radius:50%;margin-bottom:12px;flex-shrink:0}
.wc-badge-medal::before{content:'';position:absolute;inset:0;border-radius:50%;padding:3px;background:linear-gradient(145deg,rgba(255,255,255,.9) 0%,var(--wc-badge-color) 25%,rgba(255,255,255,.6) 50%,var(--wc-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}
.wc-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(--wc-badge-color) 20%,white) 0%,color-mix(in srgb,var(--wc-badge-color) 30%,white) 40%,var(--wc-badge-color) 100%);overflow:hidden;transition:filter .3s,opacity .3s}
.wc-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}
.wc-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 */
.wc-badge-item.earned{border-color:color-mix(in srgb,var(--wc-badge-color,var(--wc-brand)) 30%,transparent);box-shadow:0 4px 16px color-mix(in srgb,var(--wc-badge-color,var(--wc-brand)) 12%,transparent)}
.wc-badge-item.earned .wc-badge-medal::after{content:'';position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 12px 2px color-mix(in srgb,var(--wc-badge-color) 35%,transparent);pointer-events:none}
/* Not earned */
.wc-badge-item:not(.earned) .wc-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%)}
.wc-badge-item:not(.earned) .wc-badge-icon{background:radial-gradient(circle at 35% 35%,#e5e5e5 0%,#d0d0d0 40%,#b0b0b0 100%)}
.wc-badge-item:not(.earned) .wc-badge-icon::after{display:none}
.wc-badge-item:not(.earned) .wc-badge-icon svg{color:#999;stroke:#999;opacity:.5}
.wc-badge-item:not(.earned) .wc-badge-name,.wc-badge-item:not(.earned) .wc-badge-desc{opacity:.45}
/* Text */
.wc-badge-name{font-size:13px;font-weight:700;color:var(--wc-ink);margin-bottom:3px}
.wc-badge-desc{font-size:11.5px;color:var(--wc-mute);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Earned-at date chip */
.wc-badge-earned-at{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.2px;line-height:1;color:var(--wc-badge-color,var(--wc-brand));background:color-mix(in srgb,var(--wc-badge-color,var(--wc-brand)) 10%,transparent)}
.wc-badge-earned-at::before{content:'';width:12px;height:12px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain}
/* Progress */
.wc-badge-progress{width:100%;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.wc-badge-progress-bar{width:80%;height:5px;border-radius:3px;background:var(--wc-border-soft);overflow:hidden}
.wc-badge-progress-fill{height:100%;border-radius:3px;background:var(--wc-badge-color);transition:width .4s ease}
.wc-badge-progress-label{font-size:10.5px;font-weight:600;color:var(--wc-mute)}
.wc-badge-counter{font-size:14px;font-weight:700;color:var(--wc-brand)}
.wc-badge-counter-total{color:var(--wc-mute);font-weight:500}
/* Context overrides (profile cards, dashboard) */
.wc-public-card .wc-badge-item.earned,.wc-dash-card--badges .wc-badge-item.earned{border-color:transparent;box-shadow:none}
.wc-public-card .wc-badge-item.earned .wc-badge-medal::after,.wc-dash-card--badges .wc-badge-item.earned .wc-badge-medal::after{display:none}
/* Responsive */
@media(max-width:1024px){.wc-badge-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.wc-badge-grid{grid-template-columns:repeat(2,1fr)}.wc-badge-medal{width:66px;height:66px}.wc-badge-icon svg{width:24px;height:24px}#wc-pub-badges-grid{grid-template-columns:1fr!important}}

/* Dashboard variant: 4 desktop, 2 tablet, 1 mobile */
.wc-badge-grid--dash{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.wc-badge-grid--dash{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.wc-badge-grid--dash{grid-template-columns:1fr}}