@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Container de cards: 3 colunas, largura máx 720px */
.wpc-group-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:720px;
  margin:0 auto;
  font-family:'Roboto',sans-serif;
}
@media (max-width:900px){ .wpc-group-cards{ grid-template-columns:repeat(2,1fr); max-width:640px; } }
@media (max-width:600px){ .wpc-group-cards{ grid-template-columns:1fr; max-width:420px; } }

/* Card */
.wpc-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #ddd; /* linha fina */
  box-shadow:0 4px 12px rgba(0,0,0,.12);  /* mais sombra */
  border-radius:12px; padding:16px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wpc-card:hover{ transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,.15); }

/* Imagem do card (sem cortar) */
.wpc-card img{
  width:100%; height:260px;
  object-fit:contain; object-position:center;
  background:#f9fafb; border-radius:8px; margin-bottom:12px;
}

/* Título e texto */
.wpc-card h3{ font-size:18px; margin:0 0 6px; font-weight:500; font-family:'Roboto',sans-serif; }
.wpc-card p{ font-size:14px; color:#444; margin:0 0 12px; font-family:'Roboto',sans-serif; }

/* Meta (idade + online) */
.wpc-meta{ display:flex; align-items:center; gap:10px; margin:2px 0 10px; font-size:14px; color:#555; }
.wpc-age{ font-weight:500; }

/* Status "Online" inline (cards) */
.wpc-status-inline{
  display:inline-flex; align-items:center; gap:6px;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
  padding:2px 8px; border-radius:9999px; font-size:12px; font-weight:600; line-height:1;
}

/* Ponto verde pulsando */
.wpc-dot{ width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:wpc-pulse 1.5s infinite cubic-bezier(0.66,0,0,1); }
@keyframes wpc-pulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.6);} 70%{box-shadow:0 0 0 10px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }

/* SUMÁRIO DO GRUPO */
.wpc-group-summary{
  border:1px solid #e6e6e6; background:#fff; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08); padding:16px; max-width:720px; margin:0 auto 18px;
  font-family:'Roboto',sans-serif;
}
.wpc-group-summary h3{ margin:6px 0; font-size:20px; font-weight:600; }
.wpc-group-summary .wpc-count{ margin:0 0 10px; color:#555; font-size:14px; }

/* Badge Online no sumário */
.wpc-group-summary .wpc-status{
  display:inline-flex; align-items:center; gap:8px;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
  padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:600; margin-bottom:8px; line-height:1;
}

/* Linha com carrossel + tags + botão à direita */
.wpc-summary-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.wpc-summary-btn-right{ margin-left:auto; align-self:center; white-space:nowrap; }
@media (max-width:680px){ .wpc-summary-btn-right{ margin-left:0; order:3; width:100%; text-align:center; } }

/* Carrossel com fundo suave (4 visíveis) */
.wpc-carousel{ width:240px; overflow:hidden; background:#f8fafc; border:1px solid #eef2f7; border-radius:12px; padding:6px; }
.wpc-carousel-track{ display:flex; gap:8px; will-change:transform; align-items:center; }
.wpc-carousel img{ width:52px; height:52px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.08); object-fit:cover; flex:0 0 auto; }

/* Tags ao lado do carrossel */
.wpc-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.wpc-tags-inline{ max-width:320px; }
.wpc-tag{ background:#f3f4f6; border:1px solid #e5e7eb; color:#374151; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:500; }

/* Resumo menor e em cinza escuro */
.wpc-summary-desc{ text-align:center; margin-top:10px; font-size:13px; color:#6b7280; }

/* Botão padrão */
.wpc-button{
  display:inline-block; padding:10px 16px; border-radius:8px; color:#fff; text-decoration:none; font-weight:500; text-align:center;
  transition:opacity .2s ease; font-family:'Roboto',sans-serif;
}
.wpc-button:hover{ opacity:.9; }