/* ══════════════════════════════════════
   STUDENT.CSS — Student page styles
══════════════════════════════════════ */

/* ─── HERO ─── */
.hero {
  padding: 36px 22px 32px;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute;
  left: 0; top: 0; width: 4px; height: 100%;
  background: var(--lime);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--red); margin-bottom: 16px;
}
.hero-eyebrow::before { content: ''; width: 16px; height: 2px; background: var(--red); display: block; }
.hero-title {
  font-size: 32px; font-weight: 900; color: var(--black);
  line-height: 1.1; margin-bottom: 10px; letter-spacing: -0.5px;
}
.hero-title em { font-style: italic; font-weight: 300; color: var(--blue); }
.hero-sub { font-size: 12px; font-weight: 400; color: var(--mid); line-height: 1.6; }

/* ─── FEATURED CARD ─── */
.feat-card {
  margin: 0 22px;
  background: var(--blue);
  border-radius: 16px; padding: 24px 22px;
  display: flex; align-items: center; gap: 18px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s; position: relative; overflow: hidden;
}
.feat-card::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; height: 3px; width: 60px;
  background: var(--lime); border-radius: 0 2px 0 0;
}
.feat-card:active { transform: scale(0.98); }
.feat-icon { font-size: 38px; flex-shrink: 0; }
.feat-body { flex: 1; }
.feat-label {
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--lime); margin-bottom: 5px;
}
.feat-title { font-size: 18px; font-weight: 900; color: var(--white); line-height: 1.2; }
.feat-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; font-weight: 400; }
.feat-arrow {
  width: 32px; height: 32px; background: rgba(255,255,255,0.1);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: var(--lime); font-size: 14px; flex-shrink: 0;
}

/* ─── 2-COL GRID ─── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 22px; }
.gcard {
  background: var(--off); border-radius: 14px; padding: 18px 16px 16px;
  text-decoration: none; cursor: pointer; display: flex;
  flex-direction: column; gap: 7px; transition: transform 0.15s;
  position: relative; overflow: hidden; border: 1px solid var(--border);
}
.gcard:active { transform: scale(0.97); }
.gcard:hover { transform: translateY(-2px); }
.gcard::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0;
}
.gcard.r::after { background: var(--red); }
.gcard.b::after { background: var(--blue); }
.gcard.l::after { background: var(--lime); }
.gcard.k::after { background: var(--black); }
.gcard-icon { font-size: 26px; margin-top: 4px; }
.gcard-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.gcard-desc { font-size: 11px; color: var(--mid); line-height: 1.4; font-weight: 400; }
.gcard-badge {
  display: inline-block; font-size: 8px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px;
  border-radius: 4px; margin-top: 2px; align-self: flex-start;
}
.gcard.r .gcard-badge { background: #fdecea; color: var(--red); }
.gcard.b .gcard-badge { background: #e8f0f9; color: var(--blue); }
.gcard.l .gcard-badge { background: #f7fce0; color: #7a8c00; }
.gcard.k .gcard-badge { background: #ebebeb; color: var(--black); }