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

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

/* =========================================================
   Layout principale e aree widget
   ========================================================= */

.mv-members-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
   gap: 24px;
}

.mv-members-page.has-sidebar .mv-members-layout {
   grid-template-columns: minmax(0, 1fr) 310px;
}

.mv-members-main,
.mv-members-sidebar {
   min-width: 0;
}

.mv-members-sidebar {
   position: sticky;
   top: 124px;
   align-self: start;
}

.mv-members-widget-area {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));

   width: 100%;
   min-width: 0;

   gap: 14px;
}

.mv-members-widget-area-before {
   margin-bottom: 22px;
}

.mv-members-widget-area-after {
   margin-top: 24px;
}

.mv-members-widget-area-sidebar {
   grid-template-columns: minmax(0, 1fr);

   gap: 12px;
}

.mv-members-widget-area-sidebar .mv-widget,
.mv-members-widget-area-sidebar .mv-block-width-12,
.mv-members-widget-area-sidebar .mv-block-width-9,
.mv-members-widget-area-sidebar .mv-block-width-8,
.mv-members-widget-area-sidebar .mv-block-width-6,
.mv-members-widget-area-sidebar .mv-block-width-4,
.mv-members-widget-area-sidebar .mv-block-width-3 {
   grid-column: 1 / -1;

   width: 100%;
}

.mv-members-page .mv-widget {
   min-width: 0;

   box-sizing: border-box;

   padding: 16px 18px;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: var(--mv-surface);

   box-shadow: none;
}

.mv-members-page .mv-widget-title {
   margin: 0 0 12px;
   padding-bottom: 9px;

   border-bottom: 1px solid var(--mv-border);

   color: var(--mv-text);

   font-size: 16px;
   font-weight: 800;
   line-height: 1.3;
}

.mv-members-page .mv-widget-content {
   min-width: 0;

   color: var(--mv-muted);

   font-size: 13px;
   line-height: 1.6;

   overflow-wrap: anywhere;
}

.mv-members-page .mv-widget-content > :first-child {
   margin-top: 0;
}

.mv-members-page .mv-widget-content > :last-child {
   margin-bottom: 0;
}

.mv-members-page .mv-block-width-12 {
   grid-column: span 12;
}

.mv-members-page .mv-block-width-9 {
   grid-column: span 9;
}

.mv-members-page .mv-block-width-8 {
   grid-column: span 8;
}

.mv-members-page .mv-block-width-6 {
   grid-column: span 6;
}

.mv-members-page .mv-block-width-4 {
   grid-column: span 4;
}

.mv-members-page .mv-block-width-3 {
   grid-column: span 3;
}

.mv-members-page.has-sidebar .mv-members-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.mv-members-search {
   display: grid;
   grid-template-columns: minmax(0, 1fr);

   width: 100%;

   margin: 0 0 14px;
   padding: 14px;

   box-sizing: border-box;

   gap: 9px;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: var(--mv-surface);

   box-shadow: none;
}

.mv-members-search-field {
   position: relative;

   min-width: 0;
}

.mv-members-search-field > i {
   position: absolute;
   z-index: 2;

   top: 50%;
   left: 13px;

   display: flex;
   align-items: center;
   justify-content: center;

   width: 16px;
   height: 16px;

   color: var(--mv-muted);

   font-size: 12px;
   line-height: 1;

   pointer-events: none;

   transform: translateY(-50%);
}

.mv-members-search
.mv-members-search-field
input[type="search"] {
   display: block;

   width: 100%;
   height: 40px;

   box-sizing: border-box;

   padding: 0 42px 0 38px !important;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: #fff;
   color: var(--mv-text);

   font: inherit;
   font-size: 13px;

   appearance: none;

   transition:
      border-color .15s ease,
      background-color .15s ease;
}

/* Safari / WebKit */

.mv-members-search-field input[type="search"] {
   -webkit-appearance: none;
   appearance: none;
}

.mv-members-search-field input[type="search"]::-webkit-search-decoration,
.mv-members-search-field input[type="search"]::-webkit-search-cancel-button,
.mv-members-search-field input[type="search"]::-webkit-search-results-button,
.mv-members-search-field input[type="search"]::-webkit-search-results-decoration {
   display: none;

   -webkit-appearance: none;
}

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

   opacity: .75;
}

.mv-members-search-field input:focus {
   outline: none;

   border-color: #c5bbb5;

   background: #fffdfb;

   box-shadow: none;
}

.mv-members-search-reset {
   position: absolute;

   top: 50%;
   right: 6px;

   display: grid;
   place-items: center;

   width: 28px;
   height: 28px;

   border-radius: 0;

   color: var(--mv-muted);

   text-decoration: none;

   transform: translateY(-50%);

   transition:
      background-color .15s ease,
      color .15s ease;
}

.mv-members-search-reset:hover {
   background: #f3efeb;
   color: var(--mv-primary);
}

.mv-members-search button {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   width: 100%;
   height: 36px;

   padding: 0 12px;

   gap: 7px;

   border: 0;
   border-bottom: 2px solid var(--mv-primary);
   border-radius: 0;

   background: transparent;
   color: var(--mv-text);

   font: inherit;
   font-size: 12px;
   font-weight: 800;

   cursor: pointer;

   transition:
      background-color .15s ease,
      color .15s ease;
}

.mv-members-search button:hover {
   background: #fffaf7;
   color: var(--mv-primary);
}

/* =========================================================
   Toolbar
   ========================================================= */

.mv-members-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;

   gap: 20px;

   margin-bottom: 18px;
}

.mv-members-summary {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;

   gap: 7px;

   color: var(--mv-muted);

   font-size: 13px;
}

.mv-members-summary > strong {
   color: var(--mv-text);

   font-size: 19px;
   font-weight: 850;
}

.mv-members-search-info {
   margin-left: 8px;

   color: var(--mv-muted);
}

.mv-members-search-info strong {
   color: var(--mv-text);

   font-size: inherit;
   font-weight: 750;
}

.mv-members-view-switcher {
   display: inline-flex;
   align-items: center;

   gap: 2px;

   padding: 0;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: var(--mv-surface);
}

.mv-members-view-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   min-height: 34px;

   padding: 7px 10px;

   gap: 7px;

   border: 0;
   border-radius: 0;

   background: transparent;
   color: var(--mv-muted);

   font: inherit;
   font-size: 11px;
   font-weight: 750;

   cursor: pointer;

   transition:
      background-color .15s ease,
      color .15s ease;
}

.mv-members-view-button:hover {
   background: #fffaf7;
   color: var(--mv-text);
}

.mv-members-view-button.is-active {
   background: transparent;
   color: var(--mv-primary);

   box-shadow: inset 0 -2px 0 var(--mv-primary);
}

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

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

   gap: 14px;
}

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

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

.mv-member-card-link {
   display: flex;
   flex-direction: column;

   min-height: 280px;

   padding: 20px;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: var(--mv-surface);
   color: var(--mv-text);

   text-decoration: none;

   box-shadow: none;

   transition:
      border-color .15s ease,
      background-color .15s ease;
}

.mv-member-card-link:hover {
   border-color: #c5bbb5;

   background: #fffaf7;

   box-shadow: none;

   transform: none;
}

.mv-member-card-link:focus-visible {
   outline: 2px solid var(--mv-primary);
   outline-offset: 2px;
}

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

.mv-member-avatar {
   display: grid;
   place-items: center;

   flex: 0 0 auto;

   width: 64px;
   height: 64px;

   margin-bottom: 16px;

   overflow: hidden;

   border: 1px solid var(--mv-border);
   border-radius: 50%;

   background: var(--mv-surface);

   box-shadow: none;
}

.mv-member-avatar img {
   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;
}

.mv-member-avatar span {
   color: #fff;

   font-size: 25px;
   font-weight: 850;
   line-height: 1;
}

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

.mv-member-card-content {
   display: flex;
   flex: 1;
   flex-direction: column;

   min-width: 0;
}

.mv-member-card-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;

   gap: 12px;
}

.mv-member-card-heading h2 {
   min-width: 0;

   margin: 0;

   overflow: hidden;

   color: var(--mv-text);

   font-size: 19px;
   font-weight: 850;
   line-height: 1.2;
   letter-spacing: -.025em;

   text-overflow: ellipsis;
   white-space: nowrap;
}

.mv-member-card-heading > i {
   flex: 0 0 auto;

   color: var(--mv-muted);

   font-size: 10px;

   opacity: .45;

   transition:
      color .15s ease,
      opacity .15s ease,
      transform .15s ease;
}

.mv-member-card-link:hover
.mv-member-card-heading > i {
   color: var(--mv-primary);

   opacity: 1;

   transform: translateX(2px);
}

.mv-member-motto {
   display: -webkit-box;

   min-height: 40px;

   margin: 7px 0 0;

   overflow: hidden;

   color: var(--mv-muted);

   font-size: 12px;
   line-height: 1.55;

   overflow-wrap: anywhere;

   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}

.mv-member-motto.is-empty {
   opacity: .7;

   font-style: italic;
}

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

.mv-member-interests {
   display: flex;
   flex-wrap: wrap;

   gap: 8px;

   margin-top: 14px;
}

.mv-member-interests span {
   display: inline-flex;
   align-items: center;

   min-height: 22px;

   padding: 2px 0;

   border: 0;
   border-bottom: 1px solid var(--mv-border);
   border-radius: 0;

   background: transparent;
   color: var(--mv-muted);

   font-size: 10px;
   font-weight: 700;
   line-height: 1.2;

   transition:
      border-color .15s ease,
      color .15s ease;
}

.mv-member-card-link:hover
.mv-member-interests span {
   border-bottom-color: #c5bbb5;

   color: var(--mv-text);
}

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

.mv-member-card-action {
   display: flex;
   align-items: center;
   justify-content: space-between;

   gap: 14px;

   margin-top: auto;
   padding-top: 14px;

   border-top: 1px solid var(--mv-border);

   color: var(--mv-primary);

   font-size: 11px;
   font-weight: 750;
}

.mv-member-card-action i {
   flex: 0 0 auto;

   color: var(--mv-muted);

   font-size: 9px;

   opacity: .5;

   transition:
      color .15s ease,
      opacity .15s ease,
      transform .15s ease;
}

.mv-member-card-link:hover
.mv-member-card-action i {
   color: var(--mv-primary);

   opacity: 1;

   transform: translateX(3px);
}

/* =========================================================
   Vista elenco
   ========================================================= */

.mv-members-page.is-list-view .mv-members-grid {
   display: grid;
   grid-template-columns: 1fr;

   gap: 0;
}

.mv-members-page.is-list-view .mv-member-card-link {
   display: grid;
   grid-template-columns: 58px minmax(0, 1fr) auto;
   align-items: center;

   gap: 16px;

   min-height: 92px;

   padding: 14px 16px;

   border: 0;
   border-bottom: 1px solid var(--mv-border);
   border-radius: 0;

   background: var(--mv-surface);

   transform: none;
}

.mv-members-page.is-list-view .mv-member-card:first-child
.mv-member-card-link {
   border-top: 1px solid var(--mv-border);
}

.mv-members-page.is-list-view .mv-member-card-link:hover {
   background: #fffaf7;

   transform: none;
}

.mv-members-page.is-list-view .mv-member-avatar {
   width: 56px;
   height: 56px;

   margin: 0;

   border-radius: 50%;
}

.mv-members-page.is-list-view .mv-member-avatar span {
   font-size: 22px;
}

.mv-members-page.is-list-view .mv-member-card-content {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
      "heading"
      "motto"
      "interests";
   align-items: center;

   min-width: 0;

   row-gap: 4px;
}

.mv-members-page.is-list-view .mv-member-card-heading {
   grid-area: heading;

   display: block;

   min-width: 0;
}

.mv-members-page.is-list-view
.mv-member-card-heading h2 {
   font-size: 17px;
   line-height: 1.25;
}

.mv-members-page.is-list-view
.mv-member-card-heading > i {
   display: none;
}

.mv-members-page.is-list-view .mv-member-motto {
   grid-area: motto;

   display: block;

   min-height: 0;

   margin: 0;

   overflow: hidden;

   color: var(--mv-muted);

   font-size: 12px;
   line-height: 1.45;

   text-overflow: ellipsis;
   white-space: nowrap;
}

.mv-members-page.is-list-view .mv-member-interests {
   grid-area: interests;

   justify-content: flex-start;

   gap: 8px;

   margin: 5px 0 0;
}

.mv-members-page.is-list-view
.mv-member-interests span {
   min-height: 20px;

   padding: 2px 0;

   border-bottom: 1px solid var(--mv-border);

   font-size: 10px;
}

.mv-members-page.is-list-view
.mv-member-card-action {
   display: flex;
   align-items: center;
   justify-content: flex-end;

   width: auto;
   height: auto;

   margin: 0;
   padding: 0;

   border: 0;
   border-radius: 0;

   background: transparent;
   color: var(--mv-muted);
}

.mv-members-page.is-list-view
.mv-member-card-action span {
   display: none;
}

.mv-members-page.is-list-view
.mv-member-card-action i {
   font-size: 11px;

   opacity: .45;

   transition:
      color .15s ease,
      opacity .15s ease,
      transform .15s ease;
}

.mv-members-page.is-list-view
.mv-member-card-link:hover
.mv-member-card-action i {
   color: var(--mv-primary);

   opacity: 1;

   transform: translateX(3px);
}

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

.mv-empty-state {
   padding: 42px 28px;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: var(--mv-surface);

   text-align: center;

   box-shadow: none;
}

.mv-empty-state-icon {
   display: grid;
   place-items: center;

   width: 46px;
   height: 46px;

   margin: 0 auto 16px;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: #f3efeb;
   color: var(--mv-primary);

   font-size: 18px;
}

.mv-empty-state h2 {
   margin: 0;

   color: var(--mv-text);

   font-size: 20px;
   font-weight: 800;
}

.mv-empty-state p {
   margin: 9px 0 0;

   color: var(--mv-muted);

   font-size: 13px;
   line-height: 1.6;
}

.mv-empty-state a {
   display: inline-flex;

   margin-top: 18px;
   padding-bottom: 3px;

   border-bottom: 1px solid var(--mv-primary);

   color: var(--mv-primary);

   font-size: 12px;
   font-weight: 800;

   text-decoration: none;
}

.mv-empty-state a:hover {
   color: var(--mv-text);
}

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

.mv-members-pagination {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;

   gap: 20px;

   margin-top: 28px;
}

.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: 36px;

   padding: 7px 11px;

   gap: 7px;

   border: 1px solid var(--mv-border);
   border-radius: 0;

   background: var(--mv-surface);
   color: var(--mv-muted);

   font-size: 11px;
   font-weight: 750;

   text-decoration: none;

   transition:
      border-color .15s ease,
      background-color .15s ease,
      color .15s ease;
}

.mv-members-pagination-side a:hover,
.mv-members-pagination-pages a:hover {
   border-color: #c5bbb5;

   background: #fffaf7;
   color: var(--mv-primary);
}

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

   gap: 4px;
}

.mv-members-pagination-pages a {
   min-width: 36px;

   padding-right: 8px;
   padding-left: 8px;
}

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

   background: transparent;
   color: var(--mv-primary);

   box-shadow: inset 0 -2px 0 var(--mv-primary);
}

.mv-members-pagination-pages span {
   color: var(--mv-muted);

   font-size: 13px;
}

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

@media (max-width: 1080px) {

   .mv-members-page {
      width: min(820px, 100%);
   }

   .mv-members-page.has-sidebar .mv-members-layout {
      grid-template-columns: minmax(0, 1fr);
   }

   .mv-members-sidebar {
      display: contents;
   }

   .mv-members-sidebar .mv-members-search {
      order: 1;
      margin-bottom: 0;
   }

   .mv-members-main {
      order: 2;
   }

   .mv-members-sidebar .mv-members-widget-area-sidebar {
      order: 3;
   }

   .mv-members-page.has-sidebar .mv-members-grid,
   .mv-members-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .mv-members-widget-area-sidebar {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }

   .mv-members-widget-area-sidebar .mv-widget,
   .mv-members-widget-area-sidebar .mv-block-width-12,
   .mv-members-widget-area-sidebar .mv-block-width-9,
   .mv-members-widget-area-sidebar .mv-block-width-8,
   .mv-members-widget-area-sidebar .mv-block-width-6 {
      grid-column: span 12;
   }

   .mv-members-widget-area-sidebar .mv-block-width-4,
   .mv-members-widget-area-sidebar .mv-block-width-3 {
      grid-column: span 6;
   }
}

@media (max-width: 680px) {

   .mv-members-page {
      padding: 0 0 44px;
   }

   .mv-members-layout {
      gap: 18px;
   }

   .mv-members-widget-area {
      gap: 12px;
   }

   .mv-members-widget-area-before {
      margin-bottom: 18px;
   }

   .mv-members-widget-area-after {
      margin-top: 20px;
   }

   .mv-members-widget-area-sidebar .mv-widget,
   .mv-members-widget-area-sidebar .mv-block-width-12,
   .mv-members-widget-area-sidebar .mv-block-width-9,
   .mv-members-widget-area-sidebar .mv-block-width-8,
   .mv-members-widget-area-sidebar .mv-block-width-6,
   .mv-members-widget-area-sidebar .mv-block-width-4,
   .mv-members-widget-area-sidebar .mv-block-width-3 {
      grid-column: span 12;
   }

   .mv-members-page .mv-widget {
      padding: 14px;

      border-radius: 0;
   }

   .mv-members-search {
      grid-template-columns: 1fr;

      gap: 8px;

      margin-bottom: 18px;
      padding: 12px;
   }

   .mv-members-search-field input {
      height: 44px;

      padding-left: 42px !important;

      border-radius: 0;
   }

   .mv-members-search-field > i {
      left: 14px;
   }

   .mv-members-search button {
      width: 100%;
      height: 40px;

      border-radius: 0;
   }

   .mv-members-toolbar {
      align-items: flex-start;
      flex-direction: column;

      gap: 10px;
   }

   .mv-members-view-switcher {
      width: 100%;

      border-radius: 0;
   }

   .mv-members-view-button {
      flex: 1;

      border-radius: 0;
   }

   .mv-members-page.has-sidebar .mv-members-grid,
   .mv-members-grid {
      grid-template-columns: 1fr;

      gap: 12px;
   }

   .mv-member-card-link {
      display: flex;
      flex-direction: column;

      min-height: 0;

      padding: 16px;

      border-radius: 0;
   }

   .mv-member-avatar {
      width: 60px;
      height: 60px;

      margin-bottom: 13px;

      border-radius: 50%;
   }

   .mv-member-card-content {
      display: flex;
      flex-direction: column;

      min-width: 0;
   }

   .mv-member-card-heading h2 {
      font-size: 18px;
   }

   .mv-member-motto {
      min-height: 0;

      margin-top: 6px;

      font-size: 12px;

      -webkit-line-clamp: 2;
   }

   .mv-member-interests {
      gap: 7px;

      margin-top: 11px;
   }

   .mv-member-interests span {
      min-height: 20px;

      padding: 2px 0;

      border-radius: 0;

      font-size: 10px;
   }

   .mv-member-card-action {
      margin-top: 14px;
      padding-top: 12px;

      font-size: 11px;
   }

   .mv-members-page.is-list-view
   .mv-members-grid {
      gap: 0;
   }

   .mv-members-page.is-list-view
   .mv-member-card-link {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: center;

      gap: 12px;

      min-height: 72px;

      padding: 11px 12px;

      border: 0;
      border-bottom: 1px solid var(--mv-border);
      border-radius: 0;
   }

   .mv-members-page.is-list-view
   .mv-member-card:first-child
   .mv-member-card-link {
      border-top: 1px solid var(--mv-border);
   }

   .mv-members-page.is-list-view
   .mv-member-avatar {
      width: 48px;
      height: 48px;

      margin: 0;

      border-radius: 50%;
   }

   .mv-members-page.is-list-view
   .mv-member-card-content {
      display: block;

      min-width: 0;
   }

   .mv-members-page.is-list-view
   .mv-member-card-heading {
      display: block;

      min-width: 0;
   }

   .mv-members-page.is-list-view
   .mv-member-card-heading h2 {
      font-size: 15px;
      line-height: 1.25;
   }

   .mv-members-page.is-list-view
   .mv-member-card-heading > i {
      display: none;
   }

   .mv-members-page.is-list-view
   .mv-member-motto {
      display: block;

      min-height: 0;

      margin: 3px 0 0;

      overflow: hidden;

      font-size: 11px;
      line-height: 1.35;

      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .mv-members-page.is-list-view
   .mv-member-interests {
      display: none;
   }

   .mv-members-page.is-list-view
   .mv-member-card-action {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 28px;
      height: 28px;

      margin: 0;
      padding: 0;

      border: 0;
      border-radius: 0;

      background: transparent;
      color: var(--mv-muted);
   }

   .mv-members-page.is-list-view
   .mv-member-card-action span {
      display: none;
   }

   .mv-members-page.is-list-view
   .mv-member-card-action i {
      font-size: 12px;
   }

   .mv-members-pagination {
      grid-template-columns: 1fr 1fr;

      gap: 10px;
   }

   .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;
   }
}