/* Career Grid Layout */
/* Mobile: 1 column by default */
.grid {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 1rem;
  margin-top: 1rem;
}

/* Tablets and PC: Exactly 2 columns */
@media (min-width: 48em) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Optional: Large Monitors */
/* If you want to keep it at 2 columns even on massive screens, 
   the code above handles it. If you want a 3rd column ONLY on 
   huge screens, you'd add a 64em media query here. */

.grid-item {
  position: relative; /* CRITICAL for the whole-card-link to work */
  display: flex;
  flex-direction: column; /* Stacks header and body vertically */
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0rem;
}

.grid-item:hover {
  border: 1px solid rgba(141, 141, 141, 0.692);
  background: rgba(160, 160, 160, 0.02);
  text-decoration: none !important;
}

.grid-item-header {
  display: flex;
  align-items: center; /* Aligns logo and text vertically */
  gap: 1rem;
  margin-bottom: 0rem; /* Space between header and description */
}

.grid-item-logo img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  object-fit: contain; 
  flex-shrink: 0; /* Prevents the logo from getting squished if title is long */
}

.grid-item-title {
  flex: 1; /* Allows text to take up remaining space in the header */
  min-width: 0; /* Critical for preventing flexbox overflow with long strings */
}

.grid-item-title a:hover {
    text-decoration: none !important;
}

.grid-item-title h4 {
  margin: 0;
  font-size: 1.15rem; /* Slightly smaller to accommodate long school names */
  line-height: 1.2;
  word-wrap: break-word; /* Prevents long names from overflowing the card */
}

.grid-item-subtext {
  font-size: 0.85rem;
  color: rgba(32, 32, 32, 0.8);
}

.grid-item-subtext span {
  display: inline-block;
  margin-right: 0.5rem;
}

.grid-item-body p, ul, ol {
  margin: 0;
  margin-top: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(32, 32, 32, 0.8);
}

.grid-item-badge {
    display: inline-block;
    background-color: #0366d6; /* Solid GitHub Blue */
    color: #ffffff;            /* White text for contrast */
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 10px;        /* More padding for the "sticker" feel */
    border-radius: 6px;       /* Rounded square corners */
    margin: 5px 0;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle lift */
}

.scholar-box {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #e1e4e8;
    max-width: 400px;
    
    /* This is the magic line for centering */
    margin: 20px auto; 
    
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }

.stats-row {
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e4e8;
}

.stat-item {
  text-align: center;
}

.stat-value { 
  display: block; 
  font-size: 1.5rem; 
  font-weight: bold; 
  color: #0366d6; 
}
.stat-label {
  font-size: 0.8rem; color: #586069; text-transform: uppercase;
}

.updated-flag {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #6a737d;
  text-align: center;
  font-style: italic;
}