/* GOLFDATA.APP badge system
   One badge component for card and popup. No separate weather/golf badge styles. */

.badge-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
}

.badge-grid--card{
  margin-top:6px;
}

.badge-grid--popup{
  gap:5px;
}

.badge-item{
  min-width:0;
  height:58px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
  padding:6px 5px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}

.badge-item__label{
  display:block;
  width:100%;
  color:var(--muted);
  font-size:8px;
  line-height:1.05;
  text-transform:uppercase;
  font-weight:1000;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

.badge-item__value{
  display:block;
  width:100%;
  margin-top:4px;
  color:var(--ink);
  font-size:15px;
  line-height:1.05;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge-item.is-empty .badge-item__value{
  color:var(--ink);
}

.detail-badges .badge-grid--popup{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.detail-badges .badge-item{
  height:66px;
  border-radius:14px;
  padding:7px 6px;
}

.detail-badges .badge-item__label{
  font-size:9px;
}

.detail-badges .badge-item__value{
  font-size:17px;
}

@media(max-width:900px){
  .badge-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
  }
  .badge-item{
    height:50px;
    padding:5px 4px;
    border-radius:10px;
  }
  .badge-item__label{
    font-size:7px;
  }
  .badge-item__value{
    font-size:13px;
  }
  .detail-badges .badge-item{
    height:54px;
    padding:5px 4px;
    border-radius:11px;
  }
  .detail-badges .badge-item__value{
    font-size:15px;
  }
}

@media(max-width:360px){
  .badge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}