/* ==========================================================================
   /tfe/ — components carried over from the project's WordPress theme.

   The markup of the member profiles and the imported page bodies still uses the
   old theme's class names, so those classes are redefined here against the
   MIRAI-ENERGY design tokens. Loaded after site.css, only on /tfe/ pages.
   ========================================================================== */

/* ----- Imported page bodies (WordPress content) -------------------------- */
.page-header { padding: var(--sp-7) 0 var(--sp-5); }
.page-header__title { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: var(--sp-3); }
.page-header__desc { font-size: 1.15rem; color: var(--c-muted); max-width: 62ch; }

.page-content { max-width: var(--maxw-narrow); padding-bottom: var(--sp-8); }
.page-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: var(--sp-7) 0 var(--sp-4); }
.page-content h3 { font-size: 1.2rem; margin: var(--sp-6) 0 var(--sp-3); }
.page-content p  { color: var(--c-ink); }
.page-content ul { list-style: disc; padding-left: 1.4em; }
.page-content ol { list-style: decimal; padding-left: 1.4em; }
.page-content img { border-radius: var(--radius); margin: var(--sp-5) 0; }
.page-content iframe { width: 100%; border: 1px solid var(--c-line); border-radius: var(--radius); }

/* ----- Researcher profile ------------------------------------------------ */
.profile { max-width: 860px; }

.profile__back {
  display: inline-block; font-size: 0.9rem; font-weight: 600;
  color: var(--c-muted); padding: var(--sp-5) 0 var(--sp-4); text-decoration: none;
}
.profile__back:hover { color: var(--c-accent-d); text-decoration: underline; }

.profile__header {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-6);
  align-items: start; padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-7);
}
@media (max-width: 620px) {
  .profile__header { grid-template-columns: 110px 1fr; gap: var(--sp-4); }
  .profile__photo-wrap { width: 110px !important; height: 110px !important; }
}
.profile__photo-wrap {
  width: 160px; height: 160px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--c-line-2); background: var(--c-sand-2);
}
.profile__photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.profile__name { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: var(--sp-3); }
.profile__meta {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.profile__inst { font-size: 0.98rem; color: var(--c-muted); }
.profile__role { font-size: 0.98rem; color: var(--c-ink); margin-bottom: var(--sp-1); }
.profile__focus { font-size: 0.92rem; color: var(--c-muted); font-style: italic; margin-bottom: var(--sp-4); }

.profile__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.profile__link {
  display: inline-block; font-size: 0.85rem; font-weight: 600;
  color: var(--c-teal-ink); padding: 5px 13px;
  border: 1.5px solid var(--c-line-2); border-radius: 100px;
  text-decoration: none; transition: border-color .15s ease, background .15s ease;
}
.profile__link:hover { border-color: var(--c-teal); background: var(--c-paper); color: var(--c-accent-d); }

.profile__section { margin-bottom: var(--sp-7); }
.profile__section-title {
  font-size: 0.75rem; font-weight: 700; color: var(--c-muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-4);
  font-family: var(--font-sans);
}
.profile__bio { max-width: 68ch; }
.profile__list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.profile__list li { position: relative; padding-left: 1.2em; margin: 0; }
.profile__list li::before {
  content: "—"; position: absolute; left: 0; color: var(--c-accent); font-weight: 700;
}

/* Linked visualisations on a profile */
.viz-list { display: grid; gap: var(--sp-4); }
.viz-card {
  display: flex; gap: var(--sp-5); padding: var(--sp-5);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-paper); box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.viz-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.viz-card__num {
  font-family: var(--font-display); font-size: 1.8rem; line-height: 1;
  color: var(--c-accent); flex: 0 0 auto; width: 36px;
}
.viz-card__body { flex: 1 1 auto; min-width: 0; }
.viz-card__title { font-weight: 700; color: var(--c-deep); margin-bottom: var(--sp-2); }
.viz-card__desc { font-size: 0.95rem; color: var(--c-muted); margin-bottom: var(--sp-3); }
.viz-card__link { font-size: 0.88rem; font-weight: 700; }

/* CV timeline */
.cv-timeline { display: flex; flex-direction: column; }
.cv-timeline__row {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); align-items: baseline;
}
.cv-timeline__row:last-child { border-bottom: 1px solid var(--c-line); }
.cv-timeline__year { font-size: 0.85rem; font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.cv-timeline__desc { font-size: 0.98rem; }
@media (max-width: 560px) {
  .cv-timeline__row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ----- Odds and ends ----------------------------------------------------- */
.badge--collab { background: #ece9f4; color: #4c3f8a; border-color: #d9d3ea; }

/* the old theme's outline button, kept so imported markup still looks right */
.btn--outline {
  background: transparent; color: var(--c-deep); border-color: var(--c-line-2);
}
.btn--outline:hover { border-color: var(--c-deep); color: var(--c-deep); }

.muted-note { font-size: 0.92rem; color: var(--c-muted); }