/* ============================================================
   NB Category Grid for Elementor — base styles (.nbcg- prefix)
   Elementor Style-tab controls override colors/spacing on top.
   ============================================================ */

.nbcg-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  box-sizing:border-box;
}
.nbcg-grid *,
.nbcg-grid *::before,
.nbcg-grid *::after{box-sizing:border-box;}

/* card */
.nbcg-card{
  background:#fff;
  border:1px solid rgba(0,51,102,.08);
  border-radius:16px;
  padding:22px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align:left;
  text-decoration:none;
  display:flex;
  flex-direction:column;
}
.nbcg-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px -12px rgba(0,51,102,.18);
  border-color:rgba(161,0,255,.10);
}

/* icon (fallback) */
.nbcg-ic{
  width:48px;
  height:48px;
  border-radius:12px;
  background:rgba(161,0,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#A100FF;
  margin-bottom:14px;
  flex:none;
}
.nbcg-ic svg{width:50%;height:50%;}

/* category image */
.nbcg-card-thumb{
  width:48px;
  height:48px;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:14px;
  flex:none;
  background:rgba(161,0,255,.06);
}
.nbcg-card-thumb .nbcg-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* text */
.nbcg-title{
  font-size:16.5px;
  line-height:1.15;
  margin:0 0 5px;
  color:#003366;
  font-weight:700;
}
.nbcg-desc{
  font-size:13px;
  color:#6d7a88;
  margin:0 0 12px;
  line-height:1.45;
  flex:1;
}

/* footer */
.nbcg-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
}
.nbcg-count{
  font-size:12px;
  font-weight:600;
  color:#318BE6;
  background:rgba(0,51,102,.05);
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.nbcg-explore{
  color:#A100FF;
  font-weight:600;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.nbcg-explore svg{
  width:15px;
  height:15px;
  transition:transform .2s ease;
}
.nbcg-card:hover .nbcg-explore svg{transform:translateX(4px);}

/* empty message */
.nbcg-empty{
  color:#6d7a88;
  padding:24px;
  text-align:center;
}

/* responsive fallback (Elemento responsive controls also apply) */
@media(max-width:1024px){
  .nbcg-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .nbcg-grid{grid-template-columns:1fr;}
}