/* ════════════════════════════════════════════════════════
   rete-extra.css — sovrascritture visive uniformi
   Usa selettori specifici per vincere su tutte le definizioni
   ════════════════════════════════════════════════════════ */

/* ── 1. Animazione card — fluida, senza scatti ── */
@keyframes cardEnterLeft {
  0%   { opacity:0; transform:translateY(24px) scale(.94); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cardEnterRight {
  0%   { opacity:0; transform:translateY(24px) scale(.94); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cardEnterUp {
  0%   { opacity:0; transform:translateY(24px) scale(.94); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.member-card:nth-child(3n+1).is-visible { animation: cardEnterLeft  .75s cubic-bezier(.16,1,.3,1) both !important; }
.member-card:nth-child(3n+2).is-visible { animation: cardEnterUp    .75s cubic-bezier(.16,1,.3,1) both !important; }
.member-card:nth-child(3n+3).is-visible { animation: cardEnterRight .75s cubic-bezier(.16,1,.3,1) both !important; }
@media (max-width: 768px) {
  .member-card:nth-child(3n+1).is-visible,
  .member-card:nth-child(3n+2).is-visible,
  .member-card:nth-child(3n+3).is-visible {
    animation: cardEnterLeft .6s cubic-bezier(.16,1,.3,1) both !important;
  }
}

/* ── 2. Hover card ── */
.member-card:hover {
  border-color: rgba(123,228,255,.45) !important;
  box-shadow: 0 0 0 1px rgba(123,243,255,.08) inset, 0 0 32px rgba(123,243,255,.14), 0 8px 40px rgba(0,100,200,.18) !important;
  transform: translateY(-3px) !important;
  transition: border-color .22s, box-shadow .22s, transform .22s !important;
}
@media (max-width: 768px) {
  .member-card:hover {
    transform: none !important;
    border-color: rgba(123,228,255,.22) !important;
    box-shadow: 0 0 0 1px rgba(124,243,255,.03) inset, 0 0 22px rgba(124,243,255,.05) !important;
  }
}

/* ── 3. Tags specialità ── */
.member-tag { transition: box-shadow .2s, background .2s !important; }
.member-tag[data-tag*="diving"],    .member-tag[data-tag*="subacquea"],  .member-tag[data-tag*="underwater"] { --tag-color:#38bdf8 !important; }
.member-tag[data-tag*="iperbarica"],.member-tag[data-tag*="hyperbaric"]  { --tag-color:#7be4ff !important; }
.member-tag[data-tag*="aerospaziale"],.member-tag[data-tag*="aerospace"],.member-tag[data-tag*="spazio"],.member-tag[data-tag*="space"] { --tag-color:#a78bfa !important; }
.member-tag[data-tag*="emergenza"], .member-tag[data-tag*="emergency"],  .member-tag[data-tag*="trauma"] { --tag-color:#f87171 !important; }
.member-tag[data-tag*="ricerca"],   .member-tag[data-tag*="research"]    { --tag-color:#4dffd6 !important; }
.member-tag[data-tag*="militare"],  .member-tag[data-tag*="military"]    { --tag-color:#86efac !important; }
.member-tag[data-tag*="psicologia"],.member-tag[data-tag*="psychology"]  { --tag-color:#f0abfc !important; }
.member-card:hover .member-tag {
  background: color-mix(in srgb, var(--tag-color,#7be4ff) 18%, transparent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--tag-color,#7be4ff) 40%, transparent) !important;
}

/* ── 4. LABEL SEZIONI — tutte le istanze ── */
.profile-section-label,
.profile-body .profile-section-label,
.profile-modal .profile-section-label,
.profile-modal__dialog .profile-section-label {
  color: rgba(123,228,255,.88) !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

/* ── 5. BADGE DISPONIBILITÀ — tutte le istanze ── */
.avail-badge,
.profile-modal .avail-badge,
.profile-body .avail-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  margin: 0 6px 8px 0 !important;
}
.avail-badge--speaker,
.profile-modal .avail-badge--speaker {
  background: rgba(123,228,255,.12) !important;
  border: 1px solid rgba(123,228,255,.42) !important;
  color: #7ce8ff !important;
}
.avail-badge--podcast,
.profile-modal .avail-badge--podcast {
  background: rgba(196,176,255,.12) !important;
  border: 1px solid rgba(196,176,255,.42) !important;
  color: #c4b0ff !important;
}
.avail-badge--research,
.profile-modal .avail-badge--research {
  background: rgba(77,255,214,.1) !important;
  border: 1px solid rgba(77,255,214,.38) !important;
  color: #4dffd6 !important;
}

/* ── 6. LINK PILL — tutte le istanze uniformate ── */
.profile-link-pill,
.profile-modal .profile-link-pill,
.profile-body .profile-link-pill,
.profile-links .profile-link-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: rgba(8,24,56,.75) !important;
  border: 1px solid rgba(123,200,255,.28) !important;
  color: rgba(200,225,255,.88) !important;
  transition: filter .15s !important;
}
.profile-link-pill:hover,
.profile-modal .profile-link-pill:hover,
.profile-links .profile-link-pill:hover {
  filter: brightness(1.25) !important;
  box-shadow: none !important;
}

/* Icon badge dentro ogni pill */
.profile-link-pill__icon,
.profile-modal .profile-link-pill__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  background: rgba(123,200,255,.16) !important;
  color: rgba(180,225,255,.9) !important;
}

/* Colori per piattaforma — tutte le istanze */
.profile-link-pill[href*="linkedin"] { background:rgba(10,102,194,.13)!important; border-color:rgba(10,102,194,.48)!important; color:#7ab8f5!important; }
.profile-link-pill[href*="linkedin"] .profile-link-pill__icon { background:rgba(10,102,194,.26)!important; color:#90c4ff!important; }
.profile-link-pill[href*="researchgate"] { background:rgba(0,168,120,.1)!important; border-color:rgba(0,168,120,.42)!important; color:#3ddba8!important; }
.profile-link-pill[href*="researchgate"] .profile-link-pill__icon { background:rgba(0,168,120,.22)!important; color:#5aecc0!important; }
.profile-link-pill[href*="scholar"] { background:rgba(66,133,244,.1)!important; border-color:rgba(66,133,244,.4)!important; color:#89b4ff!important; }
.profile-link-pill[href*="scholar"] .profile-link-pill__icon { background:rgba(66,133,244,.22)!important; color:#9fc0ff!important; }
.profile-link-pill[href*="orcid"] { background:rgba(166,206,57,.08)!important; border-color:rgba(166,206,57,.38)!important; color:#c2dd50!important; }
.profile-link-pill[href*="orcid"] .profile-link-pill__icon { background:rgba(166,206,57,.18)!important; color:#d0e870!important; }
.profile-link-pill[href*="twitter"], .profile-link-pill[href*="x.com"] { background:rgba(180,200,220,.06)!important; border-color:rgba(180,200,220,.24)!important; color:#b8cce0!important; }
.profile-link-pill[href*="instagram"] { background:rgba(225,100,180,.08)!important; border-color:rgba(225,100,180,.35)!important; color:#f0a0cc!important; }
.profile-link-pill[href*="instagram"] .profile-link-pill__icon { background:rgba(225,100,180,.18)!important; color:#f8b8da!important; }

/* ── 7. Checkbox disponibilità nel form ── */
.edit-checkbox:has(#ef-speaker) { border-color:rgba(123,228,255,.3)!important; background:rgba(123,228,255,.06)!important; }
.edit-checkbox:has(#ef-speaker):hover { border-color:rgba(123,228,255,.58)!important; background:rgba(123,228,255,.12)!important; }
.edit-checkbox:has(#ef-speaker) input { accent-color:#7be4ff!important; }
.edit-checkbox:has(#ef-podcast) { border-color:rgba(196,176,255,.3)!important; background:rgba(196,176,255,.06)!important; }
.edit-checkbox:has(#ef-podcast):hover { border-color:rgba(196,176,255,.58)!important; background:rgba(196,176,255,.12)!important; }
.edit-checkbox:has(#ef-podcast) input { accent-color:#c4b0ff!important; }
.edit-checkbox:has(#ef-research) { border-color:rgba(77,255,214,.26)!important; background:rgba(77,255,214,.05)!important; }
.edit-checkbox:has(#ef-research):hover { border-color:rgba(77,255,214,.52)!important; background:rgba(77,255,214,.1)!important; }
.edit-checkbox:has(#ef-research) input { accent-color:#4dffd6!important; }

/* ── 8. Form label e campi ── */
.edit-field label { color:rgba(190,225,255,.9)!important; font-weight:700!important; }
.edit-field__input-wrap { background:rgba(6,22,58,.85)!important; border:1px solid rgba(123,200,255,.28)!important; }
.edit-field__input-wrap:focus-within { border-color:rgba(123,228,255,.62)!important; box-shadow:0 0 0 3px rgba(123,228,255,.1)!important; }
.edit-field__prefix { color:rgba(123,228,255,.88)!important; border-right-color:rgba(123,200,255,.2)!important; }
.edit-field__input-wrap:has(#ef-linkedin) { border-color:rgba(10,102,194,.38)!important; }
.edit-field__input-wrap:has(#ef-linkedin) .edit-field__prefix { color:#60a8fb!important; background:rgba(10,102,194,.16)!important; border-right-color:rgba(10,102,194,.28)!important; }
.edit-field__input-wrap:has(#ef-researchgate) { border-color:rgba(0,204,136,.32)!important; }
.edit-field__input-wrap:has(#ef-researchgate) .edit-field__prefix { color:#3ddba8!important; background:rgba(0,204,136,.14)!important; border-right-color:rgba(0,204,136,.24)!important; }
.edit-field__input-wrap:has(#ef-scholar) { border-color:rgba(66,133,244,.32)!important; }
.edit-field__input-wrap:has(#ef-scholar) .edit-field__prefix { color:#89b4ff!important; background:rgba(66,133,244,.14)!important; border-right-color:rgba(66,133,244,.24)!important; }
.edit-field__input-wrap:has(#ef-orcid) { border-color:rgba(166,206,57,.3)!important; }
.edit-field__input-wrap:has(#ef-orcid) .edit-field__prefix { color:#b8e04a!important; background:rgba(166,206,57,.11)!important; border-right-color:rgba(166,206,57,.22)!important; }
.edit-field__input-wrap:has(#ef-twitter) .edit-field__prefix { color:#c8d4e0!important; background:rgba(180,200,220,.07)!important; }
.edit-field__input-wrap:has(#ef-instagram) { border-color:rgba(225,100,180,.28)!important; }
.edit-field__input-wrap:has(#ef-instagram) .edit-field__prefix { color:#f0a0cc!important; background:rgba(225,100,180,.1)!important; border-right-color:rgba(225,100,180,.2)!important; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .profile-link-pill,
  .profile-modal .profile-link-pill { padding:8px 14px!important; font-size:13px!important; }
  .profile-link-pill__icon,
  .profile-modal .profile-link-pill__icon { width:22px!important; height:22px!important; }
  .edit-checkbox { padding:13px 14px!important; font-size:.88rem!important; }
  .member-tag { font-size:.65rem!important; padding:4px 10px!important; }
  .profile-section-label { font-size:.68rem!important; }
}

/* ════════════════════════════════════════════════════════
   MIGLIORAMENTI MODAL PROFILO
   ════════════════════════════════════════════════════════ */

/* ── Fade-in apertura modal ── */
.profile-modal.is-open .profile-modal__dialog {
  animation: profileModalIn .32s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes profileModalIn {
  0%   { opacity:0; transform:scale(.97) translateY(10px); }
  100% { opacity:1; transform:none; }
}

/* ── Header profilo — sfondo con gradiente ── */
.profile-hero,
.profile-modal .profile-hero {
  background: linear-gradient(135deg, rgba(10,40,90,.6), rgba(4,16,40,.8)) !important;
  border-bottom: 1px solid rgba(123,228,255,.12) !important;
}

/* ── Kicker più visibile ── */
.profile-hero__kicker,
.profile-modal .profile-hero__kicker {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(123,228,255,.75) !important;
  margin-bottom: 6px !important;
}

/* ── Nome e ruolo ── */
.profile-hero__name,
.profile-modal .profile-hero__name {
  color: #eef6ff !important;
}
.profile-hero__role,
.profile-modal .profile-hero__role {
  color: rgba(190,220,255,.65) !important;
}

/* ── Tags nell'header modal — uniformati ai member-tag ── */
.pm-tag,
.profile-tags .profile-tag,
.profile-modal .pm-tag {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(123,228,255,.85) !important;
  background: rgba(123,228,255,.1) !important;
  border: 1px solid rgba(123,228,255,.25) !important;
}

/* ── Label sezioni con linea decorativa ── */
.profile-section-label,
.profile-body .profile-section-label,
.profile-modal .profile-section-label,
.profile-modal__dialog .profile-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(123,228,255,.88) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  margin-top: 20px !important;
}
.profile-section-label::after,
.profile-body .profile-section-label::after,
.profile-modal .profile-section-label::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(123,228,255,.1) !important;
}
.profile-section-label:first-child,
.profile-body .profile-section-label:first-child {
  margin-top: 0 !important;
}

/* ── Bio box — sfondo e bordo uniformi ── */
.profile-bio-box,
.profile-modal .profile-bio-box {
  background: rgba(10,30,70,.7) !important;
  border: 1px solid rgba(100,180,255,.2) !important;
  border-left: 3px solid rgba(123,228,255,.55) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}
.profile-bio-box p,
.profile-modal .profile-bio-box p {
  font-size: .88rem !important;
  line-height: 1.85 !important;
  color: rgba(220,240,255,.92) !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════
   BIO TRONCATA — max 6 righe con "Leggi di più"
   ════════════════════════════════════════════════════════ */

/* Stato collassato — max 6 righe */
.profile-bio-box.bio-collapsible p {
  display: -webkit-box !important;
  -webkit-line-clamp: 6 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Stato espanso */
.profile-bio-box.bio-collapsible.bio-expanded p {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Pulsante leggi di più */
.bio-read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(123,228,255,.65) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  letter-spacing: .04em !important;
  transition: color .15s !important;
}
.bio-read-more:hover { color: #7be4ff !important; }
.bio-read-more .bio-arrow {
  font-size: 10px !important;
  transition: transform .2s !important;
}
.bio-expanded .bio-read-more .bio-arrow {
  transform: rotate(180deg) !important;
}