/* CIDE FIELD RESEARCH — Page-Specific Stylesheet
   Depends on: cide-global.css (load that first)
   Last updated: 2026-05-29
   ============================================================
   Only rules that are NOT in cide-global.css live here.

   Jim's layout change (2026-05-29):
   RCP project cards — image now fills the entire right column
   top-to-bottom, like "See Our Work in Action" on Our Services.
   - .t-rcpTitle → grid-column: 1 (was 1/-1)
   - .t-rcpMedia → grid-row: 1/-1, display:flex, overflow:hidden
   - .t-rcpMedia img → height:100%, object-fit:cover

   Removals handled by cide-global.css:
   - :root design tokens
   - Full hero section
   - .cide-impact-card, .cide-impact-cta (global fixes contrast 0.08→0.55)
   - .mdtd-container1, .mdtd-header__title1 (and responsive)
   - .cide-work-row base, .cide-work-img-col base, .cide-case-study-card base

   Contents:
   1. Work row — gold bottom border
   2. Work image column — <picture> support + object-position override
   3. Case study card overrides
   4. cide-indServ scoped styles (h3, p, infoBox)
   5. Funding note
   6. ctaButton external link icon
   7. RCP widget grid layout (native CMS class targeting)
   ============================================================ */


/* ============================================================
   0. RESEARCH AREAS HEADING
   .mdtd-header1 is not in cide-global.css — centering must
   be set here. (.mdtd-header__title1 is global but needs a
   centered parent to display correctly.)
   ============================================================ */

.mdtd-header1 {
  text-align: center;
  width: 100%;
}


/* ============================================================
   1. SECTION HEADERS — Active Projects / Past Projects
   H2 separators between project groups on the Field Research page.
   ============================================================ */

.cide-indServ h2.cide-section-header {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-dark);
  border-bottom: 3px solid var(--cu-gold);
  padding-bottom: 10px;
  margin-bottom: 2rem;
  margin-top: 3rem;
}

.cide-indServ h2.cide-section-header:first-of-type {
  margin-top: 1rem;
}


/* ============================================================
   2. WORK ROW — GOLD BOTTOM BORDER
   Field Research adds a gold separator between project entries.
   Global .cide-work-row only has padding-bottom: 32px.
   ============================================================ */

.cide-work-row {
  border-bottom: 2px solid var(--cu-gold);
}


/* ============================================================
   2. WORK IMAGE COLUMN
   Field Research uses <picture> elements (not just <img>).
   object-position: top keeps subjects visible on crop.
   ============================================================ */

.cide-work-img-col picture {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.cide-work-img-col img {
  object-position: top;
}


/* ============================================================
   3. CASE STUDY CARD OVERRIDES
   ============================================================ */

.cide-case-study-card h3 {
  padding-top: 0;
  margin-bottom: 12px;
}

.cide-case-study-card p {
  font-size: 1.2rem;
}

.cide-case-study-card a.ctaButton p {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}


/* ============================================================
   4. cide-indServ SCOPED STYLES
   Scoped to avoid bleeding into other sections.
   ============================================================ */

.cide-indServ h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 5px;
  line-height: 1.4;
  padding-bottom: 24px;
}

.cide-indServ p {
  font-size: 1.15rem;
  color: var(--text-dark);
}

.cide-indServ .cide-infoBox {
  border: none;
  border-left: 4px solid var(--cu-gold);
  border-top: 1px solid var(--cu-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 40px;
  margin: 1rem 0 2rem;
  background: var(--white);
}

@media (max-width: 991.98px) {
  .cide-indServ .cide-infoBox { padding: 24px; }
}


/* ============================================================
   5. FUNDING NOTE
   ============================================================ */

.cide-funding-note {
  padding: 12px 16px;
  background-color: var(--bg-light-gray);
  border-top: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-dark);
  line-height: 1.3;
  margin-top: 1rem;
  margin-bottom: 0;
}

.cide-funding-note p {
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 0;
}


/* ============================================================
   6. ctaButton EXTERNAL LINK ICON
   ============================================================ */

.cide-indServ a.ctaButton[href^="https://"] p::after,
.cide-indServ a.ctaButton[href^="http://"] p::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: text-top;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ============================================================
   7. RCP WIDGET — NATIVE CMS CLASS TARGETING
   Targets Sitefinity's .t-rcp* classes to reshape the native
   Research and Creative Projects widget output.
   ============================================================ */

.cide-indServ .t-rcpDetail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  border: none;
  border-left: 4px solid var(--cu-gold);
  border-top: 1px solid var(--cu-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 40px;
  margin: 1rem 0 2rem;
  background: var(--white);
}

.cide-indServ .t-rcpDate { display: none; }

.cide-indServ .t-rcpTitle {
  grid-column: 1; /* left column only — frees right column for image from row 1 */
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 5px;
  line-height: 1.4;
  padding-bottom: 24px;
}

/* Image fills the entire right column top-to-bottom.
   NOTE: uses 1/99 not 1/-1 — -1 only works on explicit grids
   (requires grid-template-rows). Implicit grids need a large number. */
.cide-indServ .t-rcpMedia {
  grid-column: 2;
  grid-row: 1 / 99;
  display: flex;
  flex-direction: column; /* stack image above caption */
  align-self: stretch;
  overflow: hidden;
  border-radius: 8px;
}

.cide-indServ .t-rcpMedia img {
  width: 100%;
  flex: 1;       /* fill remaining height after caption */
  min-height: 0; /* allow flex shrink */
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0; /* handled by parent */
}

/* Caption — shown when present, hidden when empty */
.cide-indServ .t-imageCaption {
  display: block;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--text-dark);
  background: var(--bg-light-gray);
  padding: 8px 12px;
  line-height: 1.4;
  border-radius: 0 0 8px 8px;
}

.cide-indServ .t-rcpDetailInfo { display: contents; }

.cide-indServ .t-rcpPrincipalResearchers,
.cide-indServ .t-rcpOthers,
.cide-indServ .t-rcpAdvisoryBoard,
.cide-indServ .t-rcpFacultyAdvisor,
.cide-indServ .t-rcpLocation,
.cide-indServ .t-rcpDescription,
.cide-indServ .t-rcpMoreInfo,
.cide-indServ .t-rcpContact { grid-column: 1; }

.cide-indServ .t-rcpDescription {
  grid-column: 1;
  font-size: 1.15rem;
  color: var(--text-dark);
}

.cide-indServ .t-rcpMoreInfo p { font-size: 1.15rem; color: var(--text-dark); }

.cide-indServ .t-rcpMoreInfo a[href^="https://"]::after,
.cide-indServ .t-rcpMoreInfo a[href^="http://"]::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: text-top;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cide-indServ .t-rcpFunding {
  grid-column: 1 / -1;
  order: 99;
  display: block;
  padding: 12px 16px;
  background-color: var(--bg-light-gray);
  border-top: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-dark);
  line-height: 1.3;
  margin-top: 1rem;
  margin-bottom: 0;
}

.cide-indServ .t-rcpFunding p { font-size: 1rem; color: var(--text-dark); margin-bottom: 0; }

/* Source order overrides */
.cide-indServ .t-rcpDescription          { order: 3; }
.cide-indServ .t-rcpPrincipalResearchers { order: 4; }
.cide-indServ .t-rcpOthers               { order: 5; }
.cide-indServ .t-rcpAdvisoryBoard        { order: 6; }
.cide-indServ .t-rcpFacultyAdvisor       { order: 7; }
.cide-indServ .t-rcpLocation             { order: 8; }
.cide-indServ .t-rcpMoreInfo             { order: 9; }
.cide-indServ .t-rcpContact              { order: 10; }

/* RCP WIDGET — LABEL OVERRIDES
   t-rcpPrincipalResearchers is reused by Sitefinity for BOTH the PI
   field and the Student Researcher field, so CSS ::before can't
   distinguish them. PI and Student labels are handled via JavaScript
   (Script widget on the page). Only t-rcpOthers is safe to do in CSS.

   Faculty-requested renames:
     Principal Researchers → Principal Investigator   (via JS)
     Student Researchers   → Student Researcher       (via JS)
     Others Involved       → Co-Investigators         (CSS below) */

.cide-indServ .t-rcpOthers strong {
  display: none;
}

.cide-indServ .t-rcpOthers::before {
  content: "Co-Investigators: ";
  font-weight: 700;
}


/* Mobile: single column */
@media (max-width: 991.98px) {
  .cide-indServ .t-rcpDetail { grid-template-columns: 1fr; padding: 24px; }
  .cide-indServ .t-rcpMedia,
  .cide-indServ .t-rcpPrincipalResearchers,
  .cide-indServ .t-rcpOthers,
  .cide-indServ .t-rcpAdvisoryBoard,
  .cide-indServ .t-rcpFacultyAdvisor,
  .cide-indServ .t-rcpLocation,
  .cide-indServ .t-rcpDescription,
  .cide-indServ .t-rcpMoreInfo,
  .cide-indServ .t-rcpContact,
  .cide-indServ .t-rcpFunding { grid-column: 1; }
  .cide-indServ .t-rcpMedia { grid-row: auto; }
}