/* 
 * College Directory - College Card Components
 * Styling for college cards and their contents
 */

/* ===========================================
   COLLEGE CARDS - BASE STYLES
   =========================================== */
.college-directory-main .box,
.college-directory-container .box {
  align-self: flex-start;
  border: 1.5px solid var(--border-color);
  margin: 0 auto 10px;
  padding: 4px;
  text-align: center;
  border-radius: var(--border-radius-md);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  width: 100%;
  font-family: var(--font-family);
  background: rgba(255, 255, 255, 0.95);
  position: relative;
  overflow: hidden;
}

.college-directory-main .box:hover,
.college-directory-container .box:hover {
  box-shadow: var(--hover-shadow);
  transform: translateY(-2px);
}

/* ===========================================
   COLLEGE TABLE STRUCTURE
   =========================================== */
.college-directory-main .box table,
.college-directory-container .box table {
  width: 100%;
  border-collapse: collapse;
}

.college-directory-main .box .college-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.college-directory-main .box td,
.college-directory-main .box th,
.college-directory-container .box td,
.college-directory-container .box th {
  padding: 0.5rem 0.25rem;
  vertical-align: middle;
  text-align: center;
}

/* ===========================================
   COLLEGE CARD CELLS
   =========================================== */
.college-directory-main .box .rank-cell {
  width: 60px;
  text-align: center;
  padding: 8px 4px;
  vertical-align: middle;
}

.college-directory-main .box .college-name-cell {
  padding: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.college-directory-main .box .info-cell {
  padding: 8px 6px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  vertical-align: top;
}

.college-directory-main .box .grade-cell {
  width: 80px;
  text-align: center;
  padding: 8px 4px;
  vertical-align: middle;
}

.college-directory-main .box .button-cell {
  width: 100px;
  text-align: center;
  padding: 8px 4px;
  vertical-align: middle;
}

/* ===========================================
   TYPOGRAPHY IN CARDS
   =========================================== */
.college-directory-main .box h1,
.college-directory-container .box h1 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.college-directory-main .box h2,
.college-directory-container .box h2 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.college-directory-main .box h3,
.college-directory-container .box h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--margin-sm) 0;
}

.college-directory-main .box p,
.college-directory-main .box a,
.college-directory-container .box p,
.college-directory-container .box a {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: 0;
  color: var(--text-secondary);
}

/* ===========================================
   BUTTONS IN CARDS
   =========================================== */
.college-directory-main .box button,
.college-directory-container .box button {
  color: white;
  background: var(--primary-gradient);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  font-size: var(--font-size-sm);
  min-height: 44px;
}

.college-directory-main .box button:hover,
.college-directory-container .box button:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--secondary-color) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.college-directory-main .box button:active,
.college-directory-container .box button:active {
  transform: translateY(0);
}

/* ===========================================
   TILE GRADIENT CLASSES
   =========================================== */
.college-directory-main .tile-gradient-1,
.college-directory-container .tile-gradient-1 {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(255, 218, 224, 0.4));
}

.college-directory-main .tile-gradient-2,
.college-directory-container .tile-gradient-2 {
  background: linear-gradient(135deg, rgba(173, 216, 230, 0.3), rgba(209, 233, 241, 0.4));
}

.college-directory-main .tile-gradient-3,
.college-directory-container .tile-gradient-3 {
  background: linear-gradient(135deg, rgba(144, 238, 144, 0.3), rgba(199, 245, 199, 0.4));
}

.college-directory-main .tile-gradient-4,
.college-directory-container .tile-gradient-4 {
  background: linear-gradient(135deg, rgba(255, 218, 185, 0.3), rgba(255, 235, 218, 0.4));
}

.college-directory-main .tile-gradient-5,
.college-directory-container .tile-gradient-5 {
  background: linear-gradient(135deg, rgba(230, 230, 250, 0.3), rgba(242, 242, 250, 0.4));
}

.college-directory-main .tile-gradient-6,
.college-directory-container .tile-gradient-6 {
  background: linear-gradient(135deg, rgba(176, 224, 230, 0.3), rgba(214, 237, 240, 0.4));
}

.college-directory-main .tile-gradient-7,
.college-directory-container .tile-gradient-7 {
  background: linear-gradient(135deg, rgba(255, 192, 203, 0.3), rgba(255, 223, 229, 0.4));
}

.college-directory-main .tile-gradient-8,
.college-directory-container .tile-gradient-8 {
  background: linear-gradient(135deg, rgba(216, 191, 216, 0.3), rgba(235, 223, 235, 0.4));
}

.college-directory-main .tile-gradient-9,
.college-directory-container .tile-gradient-9 {
  background: linear-gradient(135deg, rgba(240, 230, 140, 0.3), rgba(247, 242, 190, 0.4));
}

.college-directory-main .tile-gradient-10,
.college-directory-container .tile-gradient-10 {
  background: linear-gradient(135deg, rgba(176, 196, 222, 0.3), rgba(214, 224, 238, 0.4));
}

/* ===========================================
   DUAL LAYOUT CONTROL
   =========================================== */
/* Desktop Layout - Show on larger screens, hide on mobile */
.college-directory-main .desktop-layout {
  display: table;
  width: 100%;
}

.college-directory-main .mobile-layout {
  display: none;
}

/* ===========================================
   GRADE CELL EMERGENCY FIXES
   =========================================== */
.college-directory-main .box .grade-cell,
.college-directory-main .box table .grade-cell,
.college-directory-main .box tbody .grade-cell,
.college-directory-main .box tr .grade-cell,
table .grade-cell,
tbody .grade-cell,
tr .grade-cell,
td.grade-cell {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 70px !important;
  min-width: 70px !important;
  padding: 6px 4px !important;
  text-align: center !important;
  vertical-align: middle !important;
  border: none !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.college-directory-main .box .grade-cell h3,
.college-directory-main .box table .grade-cell h3,
.college-directory-main .box tbody .grade-cell h3,
.college-directory-main .box tr .grade-cell h3,
table .grade-cell h3,
tbody .grade-cell h3,
tr .grade-cell h3,
td.grade-cell h3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--font-size-sm) !important;
  font-weight: bold !important;
  color: var(--success-color) !important;
  line-height: var(--line-height-tight) !important;
  text-align: center !important;
  white-space: nowrap !important;
  background: none !important;
  border: none !important;
  z-index: 2 !important;
}