/* ==========================================================================
   Research And Publication Cell  —  /page/research-publication-cell/
   Loaded alongside two shared files: page-head.css for the photo banner and
   the heading with its rule, and tabs.css for the four pills, their mobile
   dropdown and the show/hide of the panels.

   This file is what sits INSIDE a panel.

   THREE OF THE FOUR PANELS ARE THE SAME TWO SHAPES
   Mission, Vision and Objectives are a numbered blue chip followed by the
   paragraph belonging to it, repeated. Activity is the odd one: a department
   heading, a red category under it, and a numbered list of citations.
   ========================================================================== */

.rpc-section { background: var(--paper); }

/* The name of the open panel, sitting under the pills. */
.rpc-pane__title {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

/* ============================================ NUMBERED CHIP + COPY ======= */
/* Square and shrink-to-fit, so the tint ends where the words do. An <h4>,
   because the paragraph under it belongs to it.

   The number is typed into the text rather than generated by a list, because
   these are separate blocks with a paragraph between them rather than one
   list, and an <ol> cannot carry that without the numbering breaking the
   moment a block is moved. */
.rpc-tag {
  display: table;
  margin: 0;
  padding: 7px 15px;
  background: #cfe4f7;
  color: var(--ink);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.4;
}

/* A chip sits closer to its own paragraph than to the block before it, which
   is what makes each numbered point read as one unit. */
.rpc-tag + .rpc-text { margin-top: 12px; }
.rpc-text + .rpc-tag { margin-top: 26px; }

.rpc-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.75;
}

/* ==================================================== ACTIVITY PANEL ===== */
/* A department, and under it one or more categories of output. */
.rpc-dept {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}
* + .rpc-dept { margin-top: 34px; }

/* Conference, Journal, Book Chapter — the kind of output listed beneath. */
.rpc-cat {
  margin: 18px 0 0;
  color: var(--red);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
}
.rpc-cat + * { margin-top: 10px; }

/* An <ol>, so the numbers are generated: adding a citation in the middle
   renumbers everything after it by itself and nothing has to be retyped. */
.rpc-cites {
  margin: 0;
  padding-left: 26px;
  list-style: decimal;
}
.rpc-cites li {
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.7;
  /* A citation is a solid run of names, titles and numbers with long
     unbreakable strings — DOIs and URLs — in it. Breaking inside one is
     better than letting it push the page sideways. */
  overflow-wrap: anywhere;
}
.rpc-cites li + li { margin-top: 9px; }
.rpc-cites li::marker { color: var(--ink); }
.rpc-cites strong { color: var(--ink); font-weight: 700; }

/* A panel, or a category, with nothing in it yet. */
.rpc-empty {
  margin: 0;
  padding: 24px 22px;
  background: var(--page-alt);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .89rem;
  font-style: italic;
  line-height: 1.7;
}

/* ==========================================================================
   Responsive
   One column at every width — every panel is a list read top to bottom, so
   only the type and the spacing come down.
   ========================================================================== */
@media (max-width: 767.98px) {
  .rpc-tag { font-size: .92rem; padding: 6px 13px; }
  .rpc-text + .rpc-tag { margin-top: 22px; }
}

@media (max-width: 575.98px) {
  .rpc-tag { font-size: .87rem; padding: 6px 11px; }
  .rpc-text { font-size: .88rem; line-height: 1.7; }
  .rpc-dept { font-size: .97rem; }
  .rpc-cat { font-size: .9rem; }
  .rpc-cites { padding-left: 22px; }
  .rpc-cites li { font-size: .84rem; }
}