/* =========================================================
   CONTACT SOCIALS — GTA STYLE RADIAL (ICON + LABEL ONLY)
   Scoped to .page-social-hub
   Mode-safe for OUTLXW 3-mode system (body[data-mode])
   Uses: --panel, --panel2, --stroke, --text, --muted, --accent, --spot-1
   ========================================================= */

.page-social-hub{
  min-height: calc(100vh - 140px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px 14px 140px;
}

.social-hub{
  position:relative;
  width:min(720px,92vw);
  height:min(720px,92vw);
}

/* SVG wheel */
.social-wheel{
  width:100%;
  height:100%;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6));
}

.social-sector{
  fill: color-mix(in srgb, var(--panel) 55%, transparent);
  stroke: color-mix(in srgb, var(--accent) 35%, transparent);
  stroke-width: 1;
  cursor: pointer;
  transition: fill .18s ease, filter .18s ease, stroke .18s ease;
}

.social-sector:hover{
  fill: color-mix(in srgb, var(--spot-1) 55%, transparent);
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 40%, transparent));
}

/* icon */
.social-item-icon{
  pointer-events:none;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 28%, transparent));
}

/* label */
.social-item-label{
  pointer-events:none;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--text) 92%, transparent);
  text-anchor: middle;
}

/* center */
.social-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:170px;
  height:170px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: radial-gradient(
    circle at top,
    color-mix(in srgb, var(--panel2) 88%, transparent),
    color-mix(in srgb, var(--panel) 92%, transparent)
  );
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
}

.social-center span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--text);
}

/* mobile */
@media(max-width:640px){
  .social-center{ width:140px; height:140px; }
  .social-item-label{ font-size: 10px; }
}