/* ============================================================
   SECTION 3 — universities.css
   Featured Universities — 4-card grid layout
   Reference: "Our Results" card layout from screenshot
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════════════════════════ */
.universities-section {
  position  : relative;
  background: #05050e;
  padding   : 100px 0 120px;
  overflow  : hidden;
}

/* Subtle top fade from about section */
.universities-section::before {
  content   : '';
  position  : absolute;
  top       : 0; left: 0; right: 0;
  height    : 160px;
  background: linear-gradient(to bottom, rgba(30,6,90,0.04) 0%, transparent 100%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   SECTION CONTAINER
══════════════════════════════════════════════════════════ */
.uni-container {
  max-width: 1200px;
  margin   : 0 auto;
  padding  : 0 40px;
}

/* ══════════════════════════════════════════════════════════
   HEADER ROW — title left, tagline right
   Exactly matches the reference layout
══════════════════════════════════════════════════════════ */
.uni-header {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 40px;
  margin-bottom  : 52px;

  /* entrance */
  opacity  : 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.uni-header.visible {
  opacity  : 1;
  transform: translateY(0);
}

/* Large title — left */
.uni-title {
  font-family   : 'Inter', sans-serif;
  font-size     : clamp(2.5rem, 5vw, 4.2rem);
  font-weight   : 800;
  letter-spacing: -0.03em;
  line-height   : 1.05;
  color         : #ffffff;
  margin        : 0;
  flex-shrink   : 0;
}

/* Tagline — right, aligned top */
.uni-tagline {
  font-family  : 'Inter', sans-serif;
  font-size    : 0.92rem;
  font-weight  : 400;
  line-height  : 1.65;
  color        : rgba(255,255,255,0.42);
  max-width    : 280px;
  text-align   : right;
  padding-top  : 6px;
  letter-spacing: 0.005em;
}

/* ══════════════════════════════════════════════════════════
   CARD GRID — 4 columns
══════════════════════════════════════════════════════════ */
.uni-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 14px;
}

/* ══════════════════════════════════════════════════════════
   INDIVIDUAL CARD
══════════════════════════════════════════════════════════ */
.uni-card {
  background   : rgba(255,255,255,0.038);
  border       : 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding      : 28px 26px 30px;
  display      : flex;
  flex-direction: column;
  gap          : 0;
  cursor       : default;
  position     : relative;
  overflow     : hidden;

  /* entrance stagger — set via inline style */
  opacity  : 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.35s ease;
}
.uni-card.visible {
  opacity  : 1;
  transform: translateY(0);
}
.uni-card:hover {
  background  : rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.13);
  box-shadow  : 0 0 40px rgba(90,30,200,0.10),
                0 8px 30px rgba(0,0,0,0.3);
}

/* Inner glow on hover */
.uni-card::before {
  content     : '';
  position    : absolute;
  inset       : 0;
  border-radius: 14px;
  background  : radial-gradient(
    ellipse at 30% 0%,
    rgba(120, 60, 255, 0.06) 0%,
    transparent 70%
  );
  opacity     : 0;
  transition  : opacity 0.4s ease;
  pointer-events: none;
}
.uni-card:hover::before { opacity: 1; }

/* ── Clickable card variant ── */
.uni-card-link {
  display        : flex;   /* override <a> inline */
  text-decoration: none;
  color          : inherit;
  cursor         : pointer;
}
.uni-card-link:hover {
  background  : rgba(255,255,255,0.065);
  border-color: rgba(124,58,237,0.30);
  transform   : translateY(-4px);
  box-shadow  : 0 0 40px rgba(90,30,200,0.14),
                0 12px 36px rgba(0,0,0,0.35);
}

/* Arrow indicator shown at bottom of clickable card */
.uni-card-arrow {
  display    : block;
  margin-top : auto;
  padding-top: 18px;
  font-size  : 1rem;
  color      : rgba(167,139,250,0.55);
  transition : color 0.2s ease, transform 0.25s ease;
}
.uni-card-link:hover .uni-card-arrow {
  color    : rgba(167,139,250,0.90);
  transform: translateX(4px);
}

/* ── Card top row: badge + optional dot ── */
.uni-card-top {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 28px;
}

/* Large badge — NAAC grade or key stat / university name */
.uni-badge {
  font-family   : 'Inter', sans-serif;
  font-size     : clamp(1.5rem, 2.8vw, 2.9rem);
  font-weight   : 800;
  letter-spacing: -0.02em;
  line-height   : 1.15;
  color         : #ffffff;
  word-break    : break-word;
  overflow-wrap : break-word;
}

/* Small accent dot — matches reference */
.uni-card-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : rgba(255,255,255,0.22);
  flex-shrink  : 0;
  align-self   : flex-start;
  margin-top   : 8px;
}

/* ── University name (bold label) ── */
.uni-name {
  font-family   : 'Inter', sans-serif;
  font-size     : 1.02rem;
  font-weight   : 700;
  color         : #ffffff;
  letter-spacing: -0.01em;
  margin-bottom : 8px;
  line-height   : 1.3;
}

/* ── Short description ── */
.uni-desc {
  font-family  : 'Inter', sans-serif;
  font-size    : 0.83rem;
  font-weight  : 400;
  color        : rgba(255,255,255,0.40);
  line-height  : 1.6;
  letter-spacing: 0.005em;
}

/* ══════════════════════════════════════════════════════════
   CTA BUTTON — below the card grid
══════════════════════════════════════════════════════════ */
.uni-cta-wrap {
  text-align : center;
  margin-top : 48px;
}

.uni-cta-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 14px 36px;
  background     : linear-gradient(135deg, rgba(124,58,237,0.22) 0%, rgba(91,33,182,0.15) 100%);
  border         : 1px solid rgba(124,58,237,0.40);
  border-radius  : 999px;
  color          : #ffffff;
  font-family    : 'Inter', sans-serif;
  font-size      : 0.92rem;
  font-weight    : 600;
  letter-spacing : -0.005em;
  cursor         : pointer;
  backdrop-filter: blur(12px);
  transition     : background 0.28s ease,
                   border-color 0.28s ease,
                   transform 0.3s cubic-bezier(0.16,1,0.3,1),
                   box-shadow 0.28s ease;
  box-shadow     : 0 4px 20px rgba(124,58,237,0.15);
}
.uni-cta-btn:hover {
  background  : linear-gradient(135deg, rgba(124,58,237,0.38) 0%, rgba(91,33,182,0.28) 100%);
  border-color: rgba(124,58,237,0.65);
  transform   : translateY(-2px);
  box-shadow  : 0 8px 32px rgba(124,58,237,0.30);
  color       : #ffffff;
}
.uni-cta-btn:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* Large tablet — 2 columns */
@media (max-width: 1100px) {
  .uni-badge        { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
}

/* Tablet — 2 columns */
@media (max-width: 900px) {
  .uni-container            { padding: 0 24px; }
  .uni-grid                 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .uni-header               { flex-direction: column; gap: 12px; margin-bottom: 40px; }
  .uni-tagline              { text-align: left; max-width: 100%; }
  .universities-section     { padding: 72px 0 90px; }
  .uni-badge                { font-size: clamp(1.3rem, 3vw, 2rem); }
  .uni-card-top             { margin-bottom: 20px; }
}

/* Small tablet */
@media (max-width: 680px) {
  .uni-badge                { font-size: 1.25rem; line-height: 1.2; }
  .uni-card                 { padding: 22px 20px 24px; }
}

/* Mobile — 1 column */
@media (max-width: 520px) {
  .uni-grid                 { grid-template-columns: 1fr; gap: 10px; }
  .uni-title                { font-size: clamp(2rem, 9vw, 2.8rem); }
  .universities-section     { padding: 56px 0 68px; }
  .uni-header               { margin-bottom: 30px; }
  .uni-container            { padding: 0 16px; }
  .uni-card                 { padding: 22px 20px 24px; }
  .uni-badge                { font-size: 1.5rem; }
  .uni-card-top             { margin-bottom: 18px; }
}

/* Extra small */
@media (max-width: 360px) {
  .uni-container            { padding: 0 12px; }
  .uni-card                 { padding: 18px 16px 20px; }
  .uni-badge                { font-size: 1.3rem; }
  .uni-name                 { font-size: 0.92rem; }
  .uni-desc                 { font-size: 0.78rem; }
}