/* Communiverse Circles V14: people stay as circles on phone screens. */

@media (max-width: 600px) {
  html.cv-mobile-v14 .cv-plug.cv-circles-list .stage {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-items:start;
    gap:18px 10px !important;
    padding:12px 0 30px !important;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .node:not([hidden]) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-content:start;
    justify-items:center;
    gap:8px;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:auto !important;
    padding:0 !important;
    overflow:visible !important;
    color:var(--cv-social-ink,#263953);
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .node :is(img,.ph) {
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:center;
    width:min(72px,100%) !important;
    height:auto !important;
    aspect-ratio:1 !important;
    border:2px solid var(--cv-social-card,#fff);
    border-radius:50% !important;
    box-shadow:0 7px 18px rgba(35,53,80,.12),0 0 0 1px var(--cv-social-line,#d7e2ee);
    object-fit:cover;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .cvm-person-copy {
    display:grid !important;
    grid-column:1 !important;
    grid-row:2 !important;
    gap:0 !important;
    width:100%;
    min-width:0;
    overflow:visible;
    text-align:center !important;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .cvm-person-copy strong {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:12px !important;
    font-weight:600;
    line-height:1.3 !important;
    overflow-wrap:anywhere;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .cvm-person-copy small {
    display:none !important;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .node:is(:hover,.is-selected) {
    background:transparent !important;
    border-color:transparent !important;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .node.is-selected :is(img,.ph) {
    box-shadow:0 0 0 3px var(--cv-social-blue,#2662eb),0 9px 24px rgba(35,53,80,.17);
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .node:focus-visible {
    outline:0 !important;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .node:focus-visible :is(img,.ph) {
    outline:3px solid var(--cv-social-blue,#2662eb);
    outline-offset:4px;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .glass-panel-top {
    z-index:3;
  }

  html.cv-mobile-v14 .cv-plug.cv-circles-list .glass-close {
    position:relative;
    z-index:4;
  }
}

@media (max-width: 360px) {
  html.cv-mobile-v14 .cv-plug.cv-circles-list .stage {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px 12px !important;
  }
}
