/* ============================================================
   Research topic cards + topic sub-pages
   Shared by research.html and the research_*.html sub-pages
   (loaded only there, so it stays out of mystyle.css).
   Breakpoints follow the template: medium 737-980, small <=736.
   ============================================================ */

.rcard-list {
  margin-top: 1em;
}

/* One card = image + text side by side */
.rcard {
  display: flex;
  align-items: flex-start;
  gap: 2.2em;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fff;
  padding: 1.8em 2.2em;
  margin: 0 0 1.8em 0;
}

/* Alternate image side for rhythm */
.rcard:nth-child(even) {
  flex-direction: row-reverse;
}

/* Gentle lift on hover; touch devices simply never match hover:hover */
@media (hover: hover) {
  .rcard {
    transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
  }
  .rcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
}

/* Uniform 16:10 frame for every topic image */
.rcard-media {
  flex: 0 0 42%;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
}
.rcard-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Paper figures / diagrams: matted on light gray instead of cropped */
.rcard-media.fit-contain {
  background: #f7f7f7;
  border: 1px solid #ececec;
}
.rcard-media.fit-contain img {
  object-fit: contain;
}

.rcard-body {
  flex: 1;
  min-width: 0;
}
.rcard-body h3 {
  margin: 0 0 0.5em 0;
  color: #000;
}
/* Justified like the homepage paragraphs */
.rcard-desc {
  text-align: justify;
  line-height: 1.5;
  font-size: 21px; /* match .opening_text used in the overview */
  margin-bottom: 0.7em;
}

/* "Read more" link on cards: same size as the card text */
.rcard-more {
  text-align: left;
  font-size: 21px;
  margin: 0;
}
.rcard-more.muted {
  color: #aaa;
}

/* Card image and title link to the topic sub-page; suppress the theme's
   default link underline, and give the title a quiet underline on hover
   (the theme's orange accent felt too loud) */
a.rcard-media,
.rcard h3 a {
  border-bottom: none;
}
a.rcard-media:hover,
.rcard h3 a:hover {
  border-bottom: none;
}
.rcard h3 a:hover {
  text-decoration: underline;
  text-decoration-color: #bbb;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Publications list (sub-pages); one <li> per citation group */
.rcard-pubs {
  font-size: 0.95em;
  color: #555;
  line-height: 1.5;
}
.rcard-pubs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcard-pubs li {
  display: block;
  padding-left: 1.1em;
  text-indent: -1.1em;
  margin-bottom: 0.15em;
}

/* ------------------------------------------------------------
   Topic sub-page (research_<topic>.html)
   ------------------------------------------------------------ */
.rpage {
  max-width: 62em;
  margin: 0 auto;
}
.rpage p {
  text-align: justify;
  line-height: 1.5;
}
/* Description paragraph and "Back to Research": same size as the overview's .opening_text */
.rpage > p {
  font-size: 21px;
}
/* Big topic title: tighten the theme's default 2px tracking */
.rpage h2 {
  letter-spacing: 1px;
}

/* Paper / series card on sub-pages: same horizontal layout as .rcard */
.pcard {
  display: flex;
  align-items: flex-start;
  gap: 1.6em;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fff;
  padding: 1.2em 1.6em 1.3em;
  margin: 0 0 1.2em 0;
}
@media (hover: hover) {
  .pcard {
    transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
  }
  .pcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
  }
}
.pcard-media {
  flex: 0 0 42%;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
}
.pcard-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcard-body {
  flex: 1;
  min-width: 0;
}
.pcard-cite {
  text-align: left;
  font-size: 1.15em;
  font-weight: 600;
  margin: 0 0 0.45em 0;
}
.pcard-sum {
  text-align: justify;
  font-size: 0.95em;
  line-height: 1.5;
  color: #444;
  margin: 0;
}

/* medium (737-980px): keep horizontal, image takes a bit more room */
@media screen and (max-width: 980px) {
  .rcard {
    gap: 1.6em;
    padding: 1.4em 1.6em;
  }
  /* .opening_text steps down to 18px at this breakpoint — follow it */
  .rcard-desc,
  .rcard-more {
    font-size: 18px;
  }
  .rpage > p {
    font-size: 18px;
  }
  /* Fixed-but-flexible image width in this band: a pure percentage shrinks
     with the window; clamp() keeps the figure legible (~240-320px) while
     the text column absorbs the narrowing */
  .rcard-media {
    flex: 0 0 auto;
    width: clamp(240px, 40%, 320px);
  }
  .pcard-media {
    flex: 0 0 auto;
    width: clamp(220px, 36%, 280px);
  }
}

/* Sub-pages: paper summaries wrap around the image instead of two fixed columns.
   Enabled by "rwrap" on .rpage (the main page's short card blurbs keep two columns);
   small screens keep the stacked layout. */
@media screen and (min-width: 737px) {
  .rwrap .rcard,
  .rwrap .pcard {
    display: flow-root; /* contain the float */
  }
  .rwrap .rcard-media,
  .rwrap .pcard-media {
    float: left;
    width: 42%;
    margin: 0.3em 2em 0.8em 0;
  }
  .rwrap .rcard:nth-child(even) .rcard-media {
    float: right;
    margin: 0.3em 0 0.8em 2em;
  }
}
@media screen and (min-width: 737px) and (max-width: 980px) {
  .rwrap .rcard-media {
    width: clamp(240px, 40%, 320px);
  }
  .rwrap .pcard-media {
    width: clamp(220px, 36%, 280px);
  }
}

/* small (<=736px): stack, image on top */
@media screen and (max-width: 736px) {
  .rcard,
  .rcard:nth-child(even) {
    flex-direction: column;
    gap: 1.1em;
    padding: 1.2em 1.3em 1.4em;
  }
  .rcard-media {
    flex: none;
    width: 100%;
  }
  .pcard {
    flex-direction: column;
    gap: 1em;
    padding: 1.1em 1.3em 1.2em;
  }
  .pcard-media {
    flex: none;
    width: 100%;
  }
}