/* CIDE ACADEMICS — Page-Specific Stylesheet
   Depends on: cide-global.css (load that first)
   Last updated: 2026-05-26
   ============================================================
   Only rules that are NOT in cide-global.css live here.
   Do NOT add global components to this file.
   ============================================================

   Removals handled by linking cide-global.css:
   - .cide-impact-card-content, .cide-impact-cta (and all variants)
   - .cide-course-subheading, .cide-course-item
   - All .cide-course-card-btn variants
   - .card-inner, .card-header, .card-icon, .card-title,
     .card-number, .card-desc, .card-chevron
   - .disclosure-panel and all .panel-* classes
   - All responsive breakpoints for the above

   Contents:
   1. Impact card (border variant — lighter than global standard)
   2. Impact card image height override (250px vs global 200px)
   3. Course grid layout override (2-col fixed vs global auto-fit)
*/


/* ============================================================
   1. IMPACT CARD — BORDER VARIANT
   Academics uses a lighter border (#eeeeee + transparent top bar)
   vs. global's standard (#949494 border + ::after gradient top bar).
   Page-specific override required to preserve current appearance.

   ⚠️  Future: align with global standard when redesigning this page.
   ============================================================ */

.cide-impact-card {
  border: 1px solid #eeeeee;
  border-top: 4px solid transparent;
  transition: border-color 0.25s ease, border-top-color 0.25s ease;
  height: 100%;
}

.cide-impact-card:hover {
  border-color: var(--cu-gold);
  border-top-color: var(--cu-gold);
  box-shadow: none; /* suppress global's box-shadow on hover */
}

/* Also suppress the ::after gold bar (global adds it — not needed here
   because the border-top approach handles the hover accent) */
.cide-impact-card::after {
  display: none;
}


/* ============================================================
   2. IMPACT CARD IMAGE HEIGHT
   Academics cards use 250px images. Global default is 200px.
   ============================================================ */

.cide-impact-card img {
  height: 250px;
}


/* ============================================================
   3. COURSE GRID LAYOUT OVERRIDE
   Academics needs a fixed 2-column layout with align-items: start.
   Global .cide-course-grid uses auto-fit minmax(280px, 1fr).

   TODO: Update Academics HTML to use .cide-course-grid--disclosure
   instead of .cide-course-grid — then this override can be deleted.
   ============================================================ */

.cide-course-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .cide-course-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}