/* CIDE RESEARCH — 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.
   ============================================================

   Embed 2 (cide-home-4 / impact nav + featured story):
   ENTIRELY covered by cide-global.css — delete the embed, no
   page-specific sheet needed for that block.

   Removals from Embed 1 handled by cide-global.css:
   - .section-background-gray, .section-background-white
   - .cide-course-card-link (all variants)
   - .cide-gold-cta (all variants) — global also fixes contrast (0.08→0.55)
   - .cide-stories-grid and responsive rules
   - .cide-impact-card, ::after, :hover, -content
   - .cide-impact-card-content .cide-gold-cta

   Contents:
   1. Section backgrounds — Research-specific (mdtd system)
   2. mdtd-container1 layout
   3. mdtd-header1 / title / subtitle
   4. mdtd-grid1
   5. mdtd-card1 (link wrapper, card, header, icon, title, description)
   6. mdtd-impact-container1 (card image)
   7. mdtd-btn-link1 (full-width CTA button)
   8. Utility backgrounds
   9. Course grid — 4-column override
  10. Course card — spacious/centered/large-icon overrides
  11. Impact card image height override (250px)
  12. Responsive
*/


/* ============================================================
   1–3. SECTION / HEADER SYSTEM
   ============================================================ */

/* flex: 1 1 100% is required — .mdtd-container1 is display:flex, so without an
   explicit basis this header shrinks to fit its text. Short subtitles then hug
   left (centering has nothing to center against) while long, wrapping subtitles
   fill the row and appear centered. Full width keeps alignment consistent. */
.mdtd-header1 {
  flex: 1 1 100%;
  text-align: center;
  margin-bottom: 0;
}

/* Research-specific title size (global standard is 2.5rem — intentionally
   smaller here per Research page design) */
.mdtd-header__title1 {
  font-size: 2rem;
  margin-bottom: 2rem;
  margin-top: 0; /* override global's 2.5rem top margin */
}

/* Research uses .mdtd-header__subtitle1; global equivalent is .mdtd-intro__text.
   Keep until HTML is updated to use the global class. */
.mdtd-header__subtitle1 {
  font-size: 1.15rem;
  color: var(--text-dark);
}


/* ============================================================
   4. CONTAINER (mdtd-container1)
   ============================================================ */

.mdtd-container1 {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.mdtd-container1 > [class*="col"] {
  display: flex;
  flex-direction: column;
}

.mdtd-container1 > [class*="col"] > .t-contentBlock,
.mdtd-container1 > [class*="col"] > .t-contentBlock > .sf-Long-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}


/* ============================================================
   5. GRID (mdtd-grid1)
   No column count set here — defined per section via inline style
   or section-level override.
   ============================================================ */

.mdtd-grid1 {
  display: grid;
  gap: 2rem;
  padding: 1rem;
}


/* ============================================================
   6. CARD LINK WRAPPER (mdtd-card-link1)
   ============================================================ */

.mdtd-card-link1 {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  height: 100%;
  position: relative;
}

.mdtd-card-link1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--cu-gold), #e5d5a8);
  border-radius: 0.5rem 0.5rem 0 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mdtd-card-link1:hover::before {
  opacity: 1;
}

.mdtd-card-link1:hover {
  text-decoration: none;
}


/* ============================================================
   7. CARD (mdtd-card1)
   ============================================================ */

.mdtd-card1 {
  background: var(--white);
  border-radius: 0.4rem;
  padding: 0.9rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  border: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mdtd-card1:hover {
  box-shadow: 0 4px 12px rgba(207, 184, 124, 0.2);
  border-color: var(--cu-gold);
}

.mdtd-card__header1 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}

.mdtd-card__icon1 {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--cu-gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mdtd-card__title1 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-dark);
}

.mdtd-card__description1 {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}


/* ============================================================
   8. CARD IMAGE CONTAINER (mdtd-impact-container1)
   ============================================================ */

.mdtd-impact-container1 {
  margin: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  width: 100%;
  background-color: var(--bg-gray);
}

.mdtd-impact-container1 img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}


/* ============================================================
   9. FULL-WIDTH CTA BUTTON (mdtd-btn-link1)
   ============================================================ */

.mdtd-btn-link1 {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--cu-gold);
  color: #000;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.mdtd-btn-link1:hover {
  color: inherit;
  text-decoration: none;
  background-color: var(--cu-gold-hover);
  box-shadow: 0 4px 12px rgba(207, 184, 124, 0.2);
}


/* ============================================================
   10. UTILITY BACKGROUNDS
   TODO: Add --cu-gold-tint token to design tokens so these can
   use var() instead of hardcoded values.
   ============================================================ */

.bg-CU_goldLight20 { background-color: #FCFBF7; }
.bg-CU_greyLight20 { background-color: var(--bg-gray); }


/* ============================================================
   11. COURSE GRID — 4-COLUMN OVERRIDE
   Research uses 4-col fixed grid. Global default is auto-fit.
   TODO: Add .cide-course-grid--4col modifier to global instead.
   ============================================================ */

.cide-course-grid {
  grid-template-columns: repeat(4, 1fr);
}


/* ============================================================
   12. COURSE CARD — SPACIOUS / CENTERED / LARGE-ICON OVERRIDES
   Research cards use the same layout as Home (2.7rem padding,
   column-centered header, 50px icon, 1.4rem/weight-200 title).
   Global defaults to the compact row layout.
   TODO: Update Research HTML to use modifier classes:
     .cide-course-card--spacious
     .cide-course-card-header--centered
     .cide-course-card-icon--lg
   Then delete these overrides.
   ============================================================ */

.cide-course-card {
  padding: 2.7rem;
}

.cide-course-card-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin-bottom: 20px;
}

.cide-course-card-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  flex: 0 0 50px;
}

.cide-course-card-title {
  font-size: 1.4rem;
  font-weight: 200;
  text-align: center;
  padding-top: 0;
}


/* ============================================================
   13. IMPACT CARD IMAGE HEIGHT OVERRIDE
   Research impact cards use 250px. Global default is 200px.
   ============================================================ */

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


/* ============================================================
   14. NATIVE CARD WIDGET — EQUAL HEIGHT FIX
   The row is d-flex so columns stretch to equal height.
   t-cardStandard must fill its column or cards look uneven.
   ============================================================ */

.t-cardStandard {
  height: 100%;
}


/* ============================================================
   15. RESEARCHER BIO CARD
   Linked card: photo on top, name + credentials below.
   Use inside a grid (e.g. cide-course-grid or a custom grid).
   ============================================================ */

.cide-researcher-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border-interactive);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cide-researcher-card:hover {
  border-color: var(--cu-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.cide-researcher-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  display: block;
}

.cide-researcher-card-info {
  padding: 16px;
}

.cide-researcher-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.cide-researcher-card-title {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0;
}


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

/* mdtd container / header */
@media (max-width: 1600px) {
  .mdtd-container1 { padding: 2rem 50px; }
  .mdtd-header__title1 { font-size: 2rem; }
  .mdtd-header__subtitle1 { font-size: 1.15rem; }
}

@media (max-width: 768px) {
  .mdtd-container1 { padding: 1.5rem 20px; }
  .mdtd-header__title1 { font-size: 1.8rem; }
  .mdtd-header__title1::after { width: 200px; }
  .mdtd-card__title1 { font-size: 1.1rem; }
  .mdtd-impact-container1 img { height: 150px; }
}

@media (max-width: 576px) {
  .mdtd-container1 { padding: 1rem 15px; }
  .mdtd-card__icon1 { width: 2rem; height: 2rem; }
}

/* Course grid responsive (overrides global) */
@media (max-width: 991px) {
  .cide-course-grid { grid-template-columns: repeat(2, 1fr); }
}

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