/* ==========================================================================
   research.css
   Styles used only on the Research page (research/index.html).

   Contents
     1. Areas and topics (two columns)
     2. Applications
     3. CoDesign Lab EU
     4. Folding sections, research supervisions
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Areas and topics
   Side by side on wide screens, stacked on phones.
   -------------------------------------------------------------------------- */

.research-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem clamp(2rem, 6vw, 4rem);
  padding-bottom: calc(var(--space) * .6);   /* the motivation sentence follows closely */
}

.research-overview p:not(.list-title) {   /* the column heads keep the small-heading gap, so both lists line up */
  margin: 0 0 var(--para-space);
}

/* Small bold list heading, e.g. "Basic Topics of Interest" */
.list-title {                          /* style: small heading, base.css */
  margin: 0 0 var(--heading-below);
}

.areas-list,
.topics-list {
  margin: 0;
  padding-left: 1.1rem;
}

.areas-list li,
.topics-list li {
  padding: .15rem 0;
}

.areas-list li::marker,
.topics-list li::marker {
  color: var(--ink-soft);
}

/* Both lists look the same; the column heads are small headings (base.css) */

/* Section shortcuts below the two columns (boxes from disclosure.css),
   then Expand All / Collapse All */
.research-jumps {
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* three shortcuts */
}

/* Phones: the CoDesign Lab box takes a full row, the other two below it */
@media (max-width: 640px) {
  .research-jumps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-jumps .jump-featured {
    grid-column: 1 / -1;
  }
}

/* The CoDesign Lab box comes first and stands out in the brand yellow;
   the other boxes stay plain */
.research-jumps .jump-featured {
  background: var(--highlight);
  border-color: var(--highlight-strong);
}

.research-jumps .jump-featured strong,
.research-jumps .jump-featured > :last-child {
  color: var(--on-highlight);
}

.research-jumps .jump-featured:hover {
  background: var(--highlight-strong);
  border-color: var(--ink);
}

/* Motivation sentence between the two columns and the shortcuts */
.research-motivation {
  max-width: var(--measure);
  margin: 0 0 var(--space);
}

@media (max-width: 640px) {
  .research-overview {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   2. Applications
   A real numbered list (<ol>); the numbers are drawn as bold "(1)" … "(4)",
   as on the original page.
   -------------------------------------------------------------------------- */

.applications-list {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: application;
}

.applications-list li {
  margin: 0 0 .9rem;
  counter-increment: application;
}

.applications-list li::before {
  content: "(" counter(application) ") ";
  font-weight: 700;
}

.applications-list li:last-child {
  margin-bottom: 0;
}

/* The industry-transfer paragraph after the list */
.applications-list + p {
  margin-top: 1.5rem;
}


/* --------------------------------------------------------------------------
   3. CoDesign Lab EU
   The lab name sits on the same soft-yellow label as the News years.
   -------------------------------------------------------------------------- */

.lab-subtitle {
  margin-bottom: 1rem;
}

/* The lab's full name: a quiet two-line subtitle, broken at its own "/" */
.lab-subtitle {
  font-size: inherit;                  /* reading size */
  line-height: var(--leading);
}

.lab-subtitle-line {
  display: block;
}

/* First line ("Artificial and Human Intelligence"): subtly stronger */
.lab-subtitle-line:first-child {
  font-family: var(--heading);
  font-size: inherit;                  /* same size; the heading font and weight set it apart */
  font-weight: 600;
  color: var(--ink);
}

.lab-subtitle .mark {
  font-weight: 700;
  color: var(--accent);
}

.lab-areas {
  display: grid;
  gap: 1.75rem;
  max-width: var(--measure);
  margin-top: 1.75rem;
}

/* Each area's name uses the shared entry-heading style (--entry-title-* in
   base.css), as the events and grants do */
.lab-area h3 {
  margin: 0 0 var(--entry-title-gap);
  padding-left: .7rem;
  border-left: var(--entry-title-bar);
  font-family: var(--entry-title-font);
  font-size: var(--entry-title-size);
  font-weight: var(--entry-title-weight);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--entry-title-color);
}

.lab-area p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   4. Folding sections, and the research supervisions
   Each section is a collapsible block (styled in disclosure.css). The
   supervisions hold five groups, as on the original page: one bulleted name
   per line, a little space between groups.
   -------------------------------------------------------------------------- */

/* The surrounding section already draws the rule above; avoid a double line */
/* Every section on this page folds (Applications, Industry, CoDesign Lab EU,
   Supervisions): the section's own dividing line replaces the folding block's */
.section > .disclosure {
  border-top: 0;
  border-bottom: 0;
}

.section > .disclosure > .disclosure-summary {
  padding-top: 0;
}

.people-list {
  max-width: var(--content-max);
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
}

.people-list:last-child {
  margin-bottom: 0;
}

.people-list li {
  padding: .15rem 0;
}

.people-list li::marker {
  color: var(--ink-soft);
}