/* ------------------------------ */
/* Badge Grid Container */
.badge-grid {
  display: grid;
  justify-content: center;
  align-items: start; /* align items to top so rows line up */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 2rem;
}

/* ------------------------------ */
/* Individual Badge Cards */
.badge-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: #ffffff;        /* Light theme card background */
  color: #222;                /* Dark text for readability */
  border: 1px solid #e5e5e5; /* subtle border */
  transition: none;           /* remove hover transition */
}

/* Images inside badges */
.badge-card img {
  max-width: 100%;
  height: auto;
  transition: none;           /* remove scale on hover */
}

/* ------------------------------ */
/* TryHackMe Badge - unified card style */
.badge-card.thm-wrapper {
  grid-column: 1 / -1;       /* span full width */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;             
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: #ffffff;        
  color: #222;
  border: 1px solid #e5e5e5;
  overflow: hidden;          
  position: relative;         
  cursor: default;            /* static cursor */
}

/* Container for the THM badge */
.thm-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
}

/* THM Badge itself */
.thm-badge {
  width: 100%;               /* scale to fit card */
  max-width: 980px;          /* optional max width for large screens */
  height: auto;
  border: none;
  display: block;
  transition: none;          /* remove hover scale */
}

/* ------------------------------ */
/* Responsive Adjustments */
@media (max-width: 980px) {
  .thm-badge {
    width: 100%;             /* ensure full width on smaller screens */
  }
}

@media (max-width: 600px) {
  .badge-card {
    padding: 12px;
  }
}