/* STEM pages: list, document page and the funding block. Uses the site's theme variables. */

.stem-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md, 2rem); }
.stem-project-logo {
  width: clamp(150px, 22vw, 260px); height: auto; flex-shrink: 0; background: #fff;
  padding: 10px 14px; border-radius: var(--radius-lg, 8px); box-shadow: 0 6px 20px rgba(8, 16, 31, .12);
}
.stem-card-link { color: inherit; text-decoration: none; }
.stem-card-link:hover { color: var(--colour-accent); }
.stem-card-placeholder .material-symbols-outlined { font-size: 3rem; color: var(--colour-accent); opacity: .75; }

/* ---------- the document ("paper") ---------- */
.stem-doc-section { max-width: 920px; }
.stem-doc {
  background: var(--colour-surface, #fff); border-radius: var(--radius-lg, 8px);
  box-shadow: 0 1px 3px rgba(8, 16, 31, .08), 0 12px 32px rgba(8, 16, 31, .07);
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 6vw, 4rem); overflow: hidden;
}
.stem-doc-cover {
  display: block; width: calc(100% + 2 * clamp(1.25rem, 6vw, 4rem)); max-width: none; height: clamp(180px, 34vw, 380px);
  object-fit: cover; margin: calc(-1 * clamp(1.5rem, 5vw, 3.5rem)) calc(-1 * clamp(1.25rem, 6vw, 4rem)) clamp(1.5rem, 4vw, 2.5rem);
}
.stem-lang-note {
  font-size: .9rem; color: var(--colour-text-muted); background: var(--colour-bg, #E6EDF5);
  padding: .6rem .9rem; border-radius: var(--radius, 4px); margin-bottom: 1.5rem;
}

/* ---------- funding block (logos + reference) ---------- */
.stem-funding {
  margin-top: var(--space-lg, 4rem); padding: clamp(1.25rem, 3vw, 2rem); background: #fff;
  border: 1px solid var(--colour-border, #A1B5CC); border-radius: var(--radius-lg, 8px); text-align: center;
}
.stem-funding-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); margin-bottom: 1.1rem; }
.stem-funding-logos img { height: clamp(56px, 9vw, 84px); width: auto; max-width: 100%; object-fit: contain; }
.stem-funding-text { margin: 0 auto; max-width: 62ch; font-size: .9rem; line-height: 1.6; color: #2b3445; }
.stem-funding-text--en { margin-top: .5rem; color: #5a6475; font-size: .85rem; }

/* ---------- draft preview ---------- */
.stem-draft-banner {
  display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem;
  background: #fff4d6; color: #7a5200; font-weight: 500; border-bottom: 1px solid #f1d58f;
}

@media (max-width: 760px) {
  .stem-hero-inner { flex-direction: column; align-items: flex-start; }
  .stem-project-logo { width: 180px; }
}