/* =========================================================
   Profilo pubblico — Community Edition
   ========================================================= */

.mv-public-profile {
   width: min(980px, 100%);
   margin: 0 auto;
   padding: 34px 0 72px;
}

/* =========================================================
   Hero
   ========================================================= */

.mv-public-profile-hero {
   position: relative;
   display: grid;
   justify-items: center;
   padding: 24px 24px 34px;
   text-align: center;
}

.mv-public-profile-avatar {
   display: grid;
   place-items: center;
   width: 124px;
   height: 124px;
   margin-bottom: 22px;
   overflow: hidden;
   border: 1px solid var(--mv-border);
   border-radius: 28px;
   background: var(--mv-primary);
   box-shadow:
      0 20px 50px rgba(23, 33, 43, .12),
      0 4px 12px rgba(23, 33, 43, .06);
}

.mv-public-profile-avatar img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.mv-public-profile-avatar span {
   color: #fff;
   font-size: 44px;
   font-weight: 800;
   line-height: 1;
}

.mv-public-profile-kicker {
   margin: 0 0 10px;
   color: var(--mv-primary);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
}

.mv-public-profile-hero h1 {
   margin: 0;
   color: var(--mv-text);
   font-size: clamp(38px, 6vw, 54px);
   font-weight: 800;
   line-height: 1;
   letter-spacing: -.04em;
   overflow-wrap: anywhere;
}

.mv-public-profile-motto {
   max-width: 620px;
   margin: 17px auto 0;
   color: var(--mv-muted);
   font-size: 18px;
   line-height: 1.55;
}

/* =========================================================
   Corpo profilo
   ========================================================= */

.mv-public-profile-content {
   display: grid;
   gap: 18px;
}

.mv-public-profile-section {
   display: grid;
   gap: 20px;
   padding: 28px 30px 30px;
   border: 1px solid var(--mv-border);
   border-radius: 18px;
   background: var(--mv-surface);
   box-shadow: 0 10px 30px rgba(23, 33, 43, .035);
}

.mv-public-profile-section h2 {
   margin: 0;
   padding-bottom: 15px;
   border-bottom: 1px solid var(--mv-border);
   color: var(--mv-text);
   font-size: 18px;
   font-weight: 800;
   line-height: 1.3;
   letter-spacing: -.015em;
}

/* =========================================================
   Informazioni base
   ========================================================= */

.mv-public-profile-details {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin: 0;
}

.mv-public-profile-details > div {
   min-width: 0;
   padding: 4px 24px;
   border-left: 1px solid var(--mv-border);
}

.mv-public-profile-details > div:first-child {
   padding-left: 0;
   border-left: 0;
}

.mv-public-profile-details dt {
   margin: 0 0 7px;
   color: var(--mv-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.mv-public-profile-details dd {
   margin: 0;
   color: var(--mv-text);
   font-size: 17px;
   font-weight: 750;
   overflow-wrap: anywhere;
}

/* =========================================================
   Statistiche IRC
   ========================================================= */

.mv-public-profile-irc {
   gap: 24px;
}

.mv-public-profile-irc-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 24px;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--mv-border);
}

.mv-public-profile-irc-header h2 {
   padding: 0;
   border: 0;
   font-size: 22px;
   letter-spacing: -.025em;
}

.mv-public-profile-irc-kicker {
   margin: 0 0 6px;
   color: var(--mv-primary);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.mv-public-profile-irc-status {
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
   gap: 8px;
   min-height: 36px;
   padding: 8px 12px;
   border: 1px solid var(--mv-border);
   border-radius: 10px;
   background: var(--mv-bg);
   color: var(--mv-muted);
   font-size: 13px;
   font-weight: 800;
}

.mv-public-profile-irc-status > span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #9aa3ad;
   box-shadow: 0 0 0 4px rgba(154, 163, 173, .12);
}

.mv-public-profile-irc-status.is-online {
   border-color: rgba(66, 185, 146, .28);
   background: rgba(66, 185, 146, .08);
   color: #176747;
}

.mv-public-profile-irc-status.is-online > span {
   background: var(--mv-primary);
   box-shadow: 0 0 0 4px rgba(66, 185, 146, .14);
}

.mv-public-profile-irc-status.is-offline {
   color: var(--mv-muted);
}

.mv-public-profile-irc-role {
   display: inline-flex;
   align-items: center;
   justify-self: start;
   min-height: 36px;
   padding: 8px 12px;
   border: 1px solid rgba(66, 185, 146, .24);
   border-radius: 10px;
   background: rgba(66, 185, 146, .08);
   color: #176747;
   font-size: 13px;
   font-weight: 800;
}

.mv-public-profile-irc-metrics {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
}

.mv-public-profile-irc-metrics > div {
   min-width: 0;
   padding: 20px 18px;
   border: 1px solid var(--mv-border);
   border-radius: 14px;
   background: var(--mv-bg);
}

.mv-public-profile-irc-metrics strong {
   display: block;
   color: var(--mv-text);
   font-size: clamp(22px, 3vw, 30px);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -.035em;
   overflow-wrap: anywhere;
}

.mv-public-profile-irc-metrics span {
   display: block;
   margin-top: 8px;
   color: var(--mv-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.mv-public-profile-irc-client {
   display: grid;
   gap: 7px;
   padding: 18px 20px;
   border-left: 3px solid var(--mv-primary);
   border-radius: 0 12px 12px 0;
   background: var(--mv-bg);
}

.mv-public-profile-irc-client span {
   color: var(--mv-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.mv-public-profile-irc-client strong {
   color: var(--mv-text);
   font-size: 14px;
   font-weight: 700;
   line-height: 1.6;
   overflow-wrap: anywhere;
}

/* =========================================================
   Bio
   ========================================================= */

.mv-public-profile-bio {
   max-width: 720px;
   color: var(--mv-text);
   font-size: 17px;
   line-height: 1.8;
   overflow-wrap: anywhere;
}

/* =========================================================
   Interessi e alias
   ========================================================= */

.mv-public-profile-interests {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.mv-public-profile-interests span {
   display: inline-flex;
   align-items: center;
   min-height: 38px;
   padding: 9px 13px;
   border: 1px solid rgba(66, 185, 146, .24);
   border-radius: 10px;
   background: rgba(66, 185, 146, .08);
   color: #176747;
   font-size: 13px;
   font-weight: 750;
}

/* =========================================================
   Collegamenti
   ========================================================= */

.mv-public-profile-links {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
}

.mv-public-profile-links a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   min-height: 58px;
   padding: 16px 18px;
   border: 1px solid var(--mv-border);
   border-radius: 14px;
   background: var(--mv-bg);
   color: var(--mv-text);
   font-size: 15px;
   font-weight: 700;
   text-decoration: none;
   transition:
      border-color .18s ease,
      background .18s ease,
      transform .18s ease,
      box-shadow .18s ease;
}

.mv-public-profile-links a::after {
   content: "↗";
   color: var(--mv-primary);
   font-size: 18px;
   font-weight: 700;
}

.mv-public-profile-links a:hover {
   border-color: rgba(66, 185, 146, .45);
   background: #f6fcf9;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(66, 185, 146, .12);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {
   .mv-public-profile {
      padding: 24px 0 44px;
   }

   .mv-public-profile-hero {
      padding: 30px 18px 34px;
   }

   .mv-public-profile-avatar {
      width: 98px;
      height: 98px;
      margin-bottom: 18px;
      border-radius: 23px;
   }

   .mv-public-profile-avatar span {
      font-size: 34px;
   }

   .mv-public-profile-hero h1 {
      font-size: clamp(36px, 12vw, 48px);
   }

   .mv-public-profile-motto {
      font-size: 16px;
   }

   .mv-public-profile-content {
      gap: 12px;
   }

   .mv-public-profile-section {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 21px 18px;
      border-radius: 15px;
   }

   .mv-public-profile-section h2 {
      color: var(--mv-muted);
      font-size: 11px;
      letter-spacing: .09em;
      text-transform: uppercase;
   }

   .mv-public-profile-details {
      grid-template-columns: 1fr;
   }

   .mv-public-profile-details > div {
      padding: 13px 0;
      border-top: 1px solid var(--mv-border);
      border-left: 0;
   }

   .mv-public-profile-details > div:first-child {
      padding-top: 0;
      border-top: 0;
   }

   .mv-public-profile-irc {
      gap: 18px;
   }

   .mv-public-profile-irc-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
      padding-bottom: 16px;
   }

   .mv-public-profile-irc-header h2 {
      color: var(--mv-text);
      font-size: 20px;
      letter-spacing: -.02em;
      text-transform: none;
   }

   .mv-public-profile-irc-status {
      min-height: 34px;
      padding: 7px 11px;
   }

   .mv-public-profile-irc-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
   }

   .mv-public-profile-irc-metrics > div {
      padding: 17px 14px;
      border-radius: 12px;
   }

   .mv-public-profile-irc-metrics strong {
      font-size: 22px;
   }

   .mv-public-profile-irc-client {
      padding: 16px;
   }

   .mv-public-profile-bio {
      font-size: 15px;
      line-height: 1.75;
   }

   .mv-public-profile-links {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 420px) {
   .mv-public-profile-irc-metrics {
      grid-template-columns: 1fr;
   }
}