/* GRIGLIA PERSONAGGI - versione universale */
.tip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
  margin:1.5em 0
}
.tip-grid-editor .block-editor-inner-blocks > .block-editor-block-list__layout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px
}

.tip-card{
  /* Reso neutro: un grigio leggerissimo che fa da bordo sia su sfondi chiari che scuri */
  border:1px solid rgba(128, 128, 128, 0.2); 
  border-radius:14px;
  overflow:hidden;
  /* background e font-family rimossi: ora prende quelli del tema (o quelli scelti nell'editor) */
  box-shadow:0 4px 12px rgba(0,0,0,.15); /* Ombra leggermente ammorbidita per temi chiari */
  height:100%;
  display:flex;
  flex-direction:column;
  /* color rimosso: il testo si adatterà da solo in bianco o nero in base al tema */
}

.tip-photo{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

.tip-body{padding:14px;flex:1}

.tip-nome{
  margin:0 0 4px;
  font-size:1.15em;
  font-weight:700;
  /* color rimosso: il titolo prenderà il colore dei titoli del tuo tema */
}

.tip-kanji{
  font-weight:400;
  font-size:.9em;
  margin-left:5px;
  /* Invece di un colore fisso, usiamo l'opacità così resta leggibile su ogni sfondo */
  opacity: 0.7; 
}

.tip-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:.88em;
  margin-bottom:8px;
  /* Usiamo l'opacità per renderlo "secondario" rispetto al testo principale */
  opacity: 0.8; 
}

.tip-voci{
  /* Sfondo grigio semi-trasparente: funziona benissimo sia se il sito è scuro sia se è chiaro */
  background: rgba(128, 128, 128, 0.1); 
  padding:6px 8px;
  border-radius:6px;
  font-size:.85em;
  margin-bottom:8px;
  border-left:3px solid #7c3aed; /* Ho lasciato il bordino viola perché è un ottimo tocco di stile universale */
}

.tip-body p{
  margin:5px 0;
  font-size:.92em;
  line-height:1.45;
  opacity: 0.9;
}

@media(max-width:640px){
  .tip-grid{grid-template-columns:1fr}
}