/* ============================================================
   Research Questions page
   ============================================================ */

/* ---- Intro — navy band, white text (mirrors the homepage
   mission/.hero section) ---------------------------------- */
.rq-intro {
  background: var(--navy);
  padding: 2.75rem 2.5rem;
}
.rq-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.rq-intro__inner p {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: rgba(247, 232, 228, 0.85);
  line-height: 1.8;
}

/* ---- Switcher section — light pink, matches the homepage
   research-cards section ----------------------------------- */
.rq-section {
  background: var(--blush);
  padding: 3.5rem 0 5rem;
}
.rq-section .container {
  padding: 0 2.5rem;
}

.rq-switcher {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.rq-switcher.has-active .rq-card:not(.active) {
  opacity: 0.72;
}

/* ---- Card ----------------------------------------------------
   Stacked vertically, staggered left/right/left. Collapsed cards
   sit at ~64% width; the active one grows to fill the row while
   its panel opens underneath.
------------------------------------------------------------- */
.rq-card {
  position: relative;
  width: 72%;
  min-width: 0;
  background: var(--blue-dark);
  border-left: 3px solid var(--red);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(7, 22, 44, 0.12);
  will-change: width;
  transition: width var(--dur-slow) var(--ease-inout),
              opacity var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.rq-card:nth-child(odd)  { align-self: flex-start; }
.rq-card:nth-child(even) { align-self: flex-end; }

.rq-card.active {
  width: 100%;
  box-shadow: 0 14px 40px rgba(7, 22, 44, 0.24);
}
.rq-card:not(.active):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(7, 22, 44, 0.20);
}

/* Faint watermark numeral — echoes the profile-page motif.

   It lives inside the header, not beside it. As a child of .rq-card it was
   anchored to a box that grows when the card opens, and pinned to the top of
   it, so it lined up with nothing: not the question, not the chevron, and not
   its own row. Anchored to the header it shares one centre line with the icon,
   the question and the chevron — the row reads as a row.

   Horizontally it sits one header gap clear of the chevron, the same 1.25rem
   that separates every other pair of items in that row, so the offset is the
   row's own rhythm rather than a number picked to avoid a collision.

   `top: 50%` + `translateY(-50%)` centres the numeral's own line box on the
   header's centre line — the same line `align-items: center` centres the
   icon on, since the header's padding is symmetric top/bottom. No further
   optical correction is needed: DM Sans's digits sit close enough to the
   middle of a `line-height: 1` box that a manual nudge here did more harm
   than good, pushing the ink visibly below the icon instead of centring it. */
.rq-card__num {
  position: absolute;
  top: 50%;
  right: calc(2rem + 18px + 1.25rem);
  transform: translateY(-50%);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blush);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* The numeral is positioned, so it would otherwise paint over its static
   siblings. It is a watermark: it stays behind the row it sits in. */
.rq-card__icon,
.rq-card__title,
.rq-card__chevron {
  position: relative;
  z-index: 1;
}
.rq-card.active .rq-card__num {
  opacity: 0.09;
}

/* ---- Header / toggle button — horizontal bar -------------- */
.rq-card__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  background: none;
  border: none;
  padding: 1.65rem 2rem;
  font-family: var(--font-base);
  color: inherit;
  cursor: pointer;
  text-align: left;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.rq-card__header:focus-visible {
  outline: 2px solid var(--blush);
  outline-offset: -4px;
  border-radius: var(--radius);
}
.rq-card__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--blush);
  opacity: 0.65;
  transition: opacity var(--dur-base) var(--ease-out);
}
.rq-card.active .rq-card__icon {
  opacity: 0.95;
}
.rq-card__title {
  flex: 1;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
}
.rq-card__chevron {
  flex-shrink: 0;
  color: rgba(247, 232, 228, 0.45);
  transition: transform var(--dur-base) var(--ease-spring),
              color var(--dur-fast) var(--ease-out);
}
.rq-card__header:hover .rq-card__chevron {
  color: rgba(247, 232, 228, 0.75);
}
.rq-card.active .rq-card__chevron {
  transform: rotate(180deg);
  color: rgba(247, 232, 228, 0.75);
}

/* ---- Panel — collapse/expand via grid-template-rows,
   the same pattern used for publication year sections. Delayed to
   start after the width transition is underway, rather than at the
   exact same instant, so the two layout-affecting animations don't
   both hit their heaviest reflow moment on the same frames. -------- */
.rq-card__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-inout);
}
.rq-card.active .rq-card__panel {
  grid-template-rows: 1fr;
  transition-delay: 280ms;
}
/* No padding on this element. It is the grid item the panel collapses to
   `grid-template-rows: 0fr`, and a zero-height row does not collapse padding —
   with border-box the used height cannot go below the padding, so ~36px of
   dead space stayed under every closed card. The padding lives on the
   children instead, which are clipped away with the rest of the content. */
.rq-card__panel-inner {
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.rq-card__text   { padding: 0.25rem 2rem 0; }
.rq-card__papers { margin: 0 2rem 2.25rem; }
/* The two delays here and above are a deliberate choreography, not stray
   values: the panel starts opening after the width change is underway, and the
   text fades in after that. The width has effectively finished settling by the
   time the words appear, which is the point — the question stops reflowing
   before there is anything to read beside it. Left as literal ms because they
   are offsets in a sequence rather than durations. */
.rq-card.active .rq-card__panel-inner {
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out) 420ms;
}

.rq-card__text p {
  font-size: var(--fs-md);
  color: rgba(247, 232, 228, 0.85);
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
.rq-card__text p:last-child {
  margin-bottom: 0;
}

/* ---- Key papers — a boxed panel below the text so it reads as a
   distinct reference block instead of a continuation of the copy. --- */
.rq-card__papers {
  background: rgba(247, 232, 228, 0.05);
  border: 1px solid rgba(247, 232, 228, 0.12);
  border-radius: 14px;
  padding: 1.5rem 1.75rem 1.75rem;
}
/* A heading, styled as one. This was an <h3> wearing a button's clothes —
   background, border and a 999px radius — which invited a click that did
   nothing. The panel around it already sets the block apart, so the label only
   has to name it. */
.rq-card__papers-heading {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(247, 232, 228, 0.92);
  margin-bottom: 1rem;
}

.rq-paper {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(247, 232, 228, 0.10);
}
.rq-paper:last-child {
  border-bottom: none;
}
.rq-paper__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--white);
  line-height: 1.45;
  margin-bottom: 0.2rem;
}
.rq-paper__title-link {
  color: inherit;
  transition: color var(--transition);
}
.rq-paper__title-link:hover {
  color: var(--blush);
}
.rq-paper__title-link svg {
  width: 10px;
  height: 10px;
  margin-left: 0.35em;
  vertical-align: 1px;
  opacity: 0.45;
  transition: opacity var(--transition);
}
.rq-paper__title-link:hover svg {
  opacity: 0.9;
}
.rq-paper__meta {
  font-size: 0.78rem;
  color: rgba(247, 232, 228, 0.55);
  line-height: 1.5;
}
.rq-paper__empty {
  font-size: var(--fs-sm);
  color: rgba(247, 232, 228, 0.5);
  font-style: italic;
}

.rq-card__papers-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--blush);
  border-bottom: 1px solid rgba(247, 232, 228, 0.35);
  padding-bottom: 2px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.rq-card__papers-cta:hover {
  border-color: var(--blush);
}
/* The arrow moves, not the gap. Animating `gap` runs layout on every frame of
   every hover; a transform on the icon is composited and is what .card__arrow
   already does elsewhere on the site. */
.rq-card__papers-cta svg {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.rq-card__papers-cta:hover svg { transform: translateX(3px); }

/* ---- Responsive --------------------------------------------- */
@media (max-width: 900px) {
  .rq-card {
    width: 100%;
  }
  .rq-card:nth-child(odd),
  .rq-card:nth-child(even) {
    align-self: stretch;
  }
  .rq-card__header {
    padding: 1.25rem 1.25rem;
    gap: 1rem;
  }
  .rq-card__icon svg {
    width: 36px;
    height: 36px;
  }
  .rq-card__title {
    font-size: var(--fs-md);
  }
  .rq-card__text   { padding: 0 1.25rem 0; }
  .rq-card__papers { margin: 0 1.25rem 1.75rem; }
}

@media (max-width: 600px) {
  .rq-intro {
    padding: 2rem 1.5rem;
  }
  .rq-section .container {
    padding: 0 1.25rem;
  }
  .rq-section {
    padding: 2.5rem 0 3.5rem;
  }
  .rq-card__num {
    display: none;
  }
}