/* =========================================================
   Directory membri — Community Edition
   ========================================================= */

.mv-members-page {
   width: min(1120px, 100%);
   margin: 0 auto;
   padding: 34px 0 72px;
}

/* =========================================================
   Ricerca
   ========================================================= */

.mv-members-search {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 12px;
   margin: 10px 0 30px;
}

.mv-members-search-field {
   position: relative;
   min-width: 0;
}

.mv-members-search-field input {
   display: block;
   width: 100%;
   height: 58px;
   padding: 0 54px 0 50px;
   border: 1px solid var(--mv-border);
   border-radius: 14px;
   background: var(--mv-surface);
   color: var(--mv-text);
   font: inherit;
   font-size: 15px;
   box-shadow: 0 8px 26px rgba(23, 33, 43, .035);
   appearance: none;
   transition:
      border-color .18s ease,
      box-shadow .18s ease;
}

.mv-members-search-field input::placeholder {
   color: var(--mv-muted);
   opacity: .75;
}

.mv-members-search-field input:focus {
   outline: none;
   border-color: var(--mv-primary);
   box-shadow:
      0 0 0 4px rgba(66, 185, 146, .12),
      0 10px 30px rgba(23, 33, 43, .045);
}

.mv-members-search-icon {
   position: absolute;
   top: 50%;
   left: 18px;
   width: 20px;
   height: 20px;
   color: var(--mv-muted);
   pointer-events: none;
   transform: translateY(-50%);
}

.mv-members-search-icon circle,
.mv-members-search-icon path {
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
}

.mv-members-search-reset {
   position: absolute;
   top: 50%;
   right: 10px;
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   border-radius: 9px;
   color: var(--mv-muted);
   text-decoration: none;
   transform: translateY(-50%);
   transition:
      background .18s ease,
      color .18s ease;
}

.mv-members-search-reset svg {
   width: 17px;
   height: 17px;
}

.mv-members-search-reset path {
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
}

.mv-members-search-reset:hover {
   background: rgba(66, 185, 146, .1);
   color: #176747;
}

.mv-members-search button {
   height: 58px;
   padding: 0 25px;
   border: 1px solid var(--mv-primary);
   border-radius: 12px;
   background: var(--mv-primary);
   color: #fff;
   font: inherit;
   font-size: 14px;
   font-weight: 800;
   cursor: pointer;
   box-shadow: 0 8px 20px rgba(66, 185, 146, .18);
   transition:
      background .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      transform .18s ease;
}

.mv-members-search button:hover {
   border-color: #36a982;
   background: #36a982;
   box-shadow: 0 12px 24px rgba(66, 185, 146, .22);
   transform: translateY(-1px);
}

.mv-members-search button:focus-visible,
.mv-members-search-reset:focus-visible {
   outline: 3px solid rgba(66, 185, 146, .24);
   outline-offset: 3px;
}

/* =========================================================
   Riepilogo
   ========================================================= */

.mv-members-summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin: 0 0 22px;
   color: var(--mv-muted);
   font-size: 14px;
}

.mv-members-summary > div:first-child {
   display: flex;
   align-items: baseline;
   gap: 7px;
}

.mv-members-summary strong {
   color: var(--mv-text);
   font-size: 20px;
   font-weight: 800;
}

.mv-members-search-info {
   font-size: 13px;
}

.mv-members-search-info strong {
   font-size: inherit;
   font-weight: 750;
}

/* =========================================================
   Griglia
   ========================================================= */

.mv-members-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
}

/* =========================================================
   Card
   ========================================================= */

.mv-member-card {
   min-width: 0;
}

.mv-member-card-link {
   display: flex;
   flex-direction: column;
   min-height: 350px;
   padding: 25px;
   border: 1px solid var(--mv-border);
   border-radius: 18px;
   background: var(--mv-surface);
   color: var(--mv-text);
   text-decoration: none;
   box-shadow: 0 10px 30px rgba(23, 33, 43, .04);
   transition:
      border-color .18s ease,
      box-shadow .18s ease,
      transform .18s ease;
}

.mv-member-card-link:hover {
   border-color: rgba(66, 185, 146, .48);
   box-shadow: 0 18px 40px rgba(23, 33, 43, .08);
   transform: translateY(-3px);
}

.mv-member-card-link:focus-visible {
   outline: 3px solid rgba(66, 185, 146, .22);
   outline-offset: 3px;
}

/* =========================================================
   Avatar
   ========================================================= */

.mv-member-avatar {
   display: grid;
   place-items: center;
   width: 82px;
   height: 82px;
   margin-bottom: 21px;
   overflow: hidden;
   border: 1px solid rgba(66, 185, 146, .25);
   border-radius: 20px;
   background: var(--mv-primary);
}

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

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

/* =========================================================
   Contenuto card
   ========================================================= */

.mv-member-card-content {
   display: flex;
   flex: 1;
   flex-direction: column;
   min-width: 0;
}

.mv-member-card-content h2 {
   margin: 0;
   color: var(--mv-text);
   font-size: 23px;
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -.03em;
   overflow-wrap: anywhere;
}

.mv-member-motto {
   display: -webkit-box;
   min-height: 44px;
   margin: 10px 0 0;
   overflow: hidden;
   color: var(--mv-muted);
   font-size: 14px;
   line-height: 1.55;
   overflow-wrap: anywhere;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}

/* =========================================================
   Interessi
   ========================================================= */

.mv-member-interests {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 18px;
}

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

/* =========================================================
   Azione card
   ========================================================= */

.mv-member-card-action {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   margin-top: auto;
   padding-top: 21px;
   color: #176747;
   font-size: 13px;
   font-weight: 800;
}

.mv-member-interests + .mv-member-card-action {
   margin-top: 28px;
   border-top: 1px solid var(--mv-border);
}

.mv-member-motto + .mv-member-card-action {
   border-top: 1px solid var(--mv-border);
}

.mv-member-card-action svg {
   width: 18px;
   height: 18px;
   flex: 0 0 auto;
   transition: transform .18s ease;
}

.mv-member-card-action path {
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.mv-member-card-link:hover .mv-member-card-action svg {
   transform: translateX(3px);
}

/* =========================================================
   Stato vuoto
   ========================================================= */

.mv-empty-state {
   padding: 48px 30px;
   border: 1px solid var(--mv-border);
   border-radius: 18px;
   background: var(--mv-surface);
   text-align: center;
   box-shadow: 0 10px 30px rgba(23, 33, 43, .035);
}

.mv-empty-state h2 {
   margin: 0;
   color: var(--mv-text);
   font-size: 22px;
   font-weight: 800;
}

.mv-empty-state p {
   margin: 10px 0 0;
   color: var(--mv-muted);
   font-size: 15px;
   line-height: 1.65;
}

.mv-empty-state a {
   display: inline-flex;
   margin-top: 20px;
   color: #176747;
   font-size: 14px;
   font-weight: 800;
   text-decoration: none;
}

.mv-empty-state a:hover {
   text-decoration: underline;
}

/* =========================================================
   Paginazione
   ========================================================= */

.mv-members-pagination {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 20px;
   margin-top: 36px;
}

.mv-members-pagination-side {
   display: flex;
   justify-content: flex-start;
}

.mv-members-pagination-side.is-next {
   justify-content: flex-end;
}

.mv-members-pagination-side a,
.mv-members-pagination-pages a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 42px;
   padding: 9px 14px;
   border: 1px solid var(--mv-border);
   border-radius: 10px;
   background: var(--mv-surface);
   color: var(--mv-text);
   font-size: 13px;
   font-weight: 750;
   text-decoration: none;
   transition:
      border-color .18s ease,
      background .18s ease,
      color .18s ease;
}

.mv-members-pagination-side a:hover,
.mv-members-pagination-pages a:hover {
   border-color: var(--mv-primary);
   background: #f0faf6;
   color: #176747;
}

.mv-members-pagination-pages {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
}

.mv-members-pagination-pages a {
   min-width: 42px;
   padding-right: 10px;
   padding-left: 10px;
}

.mv-members-pagination-pages a.is-current {
   border-color: var(--mv-primary);
   background: var(--mv-primary);
   color: #fff;
}

.mv-members-pagination-pages span {
   color: var(--mv-muted);
   font-size: 14px;
}

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

@media (max-width: 980px) {
   .mv-members-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 680px) {
   .mv-members-page {
      padding: 24px 0 44px;
   }

   .mv-members-search {
      grid-template-columns: 1fr;
      gap: 9px;
      margin-bottom: 24px;
   }

   .mv-members-search-field input {
      height: 54px;
      padding-left: 46px;
      border-radius: 13px;
   }

   .mv-members-search-icon {
      left: 16px;
   }

   .mv-members-search button {
      width: 100%;
      height: 50px;
      border-radius: 11px;
   }

   .mv-members-summary {
      align-items: flex-start;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 18px;
   }

   .mv-members-grid {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .mv-member-card-link {
      min-height: 0;
      padding: 21px;
      border-radius: 16px;
   }

   .mv-member-avatar {
      width: 74px;
      height: 74px;
      margin-bottom: 18px;
      border-radius: 18px;
   }

   .mv-member-avatar span {
      font-size: 28px;
   }

   .mv-member-card-content h2 {
      font-size: 21px;
   }

   .mv-member-motto {
      min-height: 42px;
      font-size: 13px;
   }

   .mv-member-interests + .mv-member-card-action {
      margin-top: 24px;
   }

   .mv-members-pagination {
      grid-template-columns: 1fr 1fr;
      gap: 12px;
   }

   .mv-members-pagination-pages {
      grid-column: 1 / -1;
      grid-row: 1;
      flex-wrap: wrap;
   }

   .mv-members-pagination-side {
      grid-column: 1;
      grid-row: 2;
   }

   .mv-members-pagination-side.is-next {
      grid-column: 2;
      grid-row: 2;
   }
}