/*
 * The three templates: Project Profile, News Article, Audience page.
 */

/* ── Project Profile ──────────────────────────────────────────────────── */

.ema-profile__location { margin: 0; color: var(--cw-bg); opacity: 0.9; }

/*
 * The two blocks that are DELIBERATELY NOT MODULES — a chip and a blocked API
 * field. They read as facts about the record rather than as composition, and
 * they are styled to look like it.
 */
/*
 * ⚠️ A BORDERED BOX CANNOT TAKE THE PAGE GUTTER AS PADDING (#99). The shared
 * rule gives anything outside a module `max-width: content-max` plus the
 * gutter as padding — right for text, wrong for a box with a visible edge,
 * which then draws its border at the screen edge rather than on the logo's.
 * This box carries its own padding and sits inside the gutter.
 */
.ema-profile > .ema-facts,
.ema-main > .ema-facts {
  max-width: calc(var(--content-max) - 2 * var(--gutter));
  margin-inline: auto;
  padding: 20px;
}

.ema-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 40px;
  padding: 20px;
  border: 1px solid var(--cw-rule);
  border-radius: var(--r-media);
  background: color-mix(in srgb, var(--cw-ink) 5%, var(--cw-bg));
}

@media (min-width: 760px) {
  .ema-facts { grid-template-columns: auto auto 1fr; align-items: center; gap: 32px; }
  .ema-facts__note { grid-column: 1 / -1; }
}

.ema-facts__line { margin: 0; font-size: 14px; }
.ema-facts__figure { margin: 0; font-size: 26px; line-height: 1.1; }
.ema-facts__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 760px) { .ema-facts__actions { justify-content: flex-end; } }

.ema-card--participant .ema-card__media { display: grid; place-items: center; padding: 20px; }
.ema-card--participant .ema-card__media img { max-height: 70px; width: auto; }

/* ── News Article — deliberately NOT modular ──────────────────────────── */

/*
 * Laid out as MODULE 3 (BugHerd #25): date as the eyebrow on the left; title,
 * lead image and body in the right-hand column, which at 804px is itself a
 * reasonable reading measure. The grid, title and column rhythm come from the
 * module's own .ema-section classes — only article extras are set here.
 */
.ema-article { padding-block: var(--module-y); }

.ema-article__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ema-article__aside > * { margin: 0; }

.ema-article__lead { width: 100%; }
.ema-article__lead-image { display: block; width: 100%; height: auto; }

.ema-article__embed { width: 100%; }
.ema-article__embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.ema-article__body { line-height: 1.7; }
.ema-article__body > :first-child { margin-top: 0; }
.ema-article__body > :last-child { margin-bottom: 0; }

/* Inline images and embeds sit in the flow, placed by the author. */
.ema-article__body img { height: auto; border-radius: var(--r-media); }
.ema-article__body figure { margin: 24px 0; }
.ema-article__body blockquote {
  margin: 24px 0;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--cw-rule);
  color: var(--cw-ink-soft);
}

/* ── Audience page — ONE template, NINE terms ─────────────────────────── */

/*
 * The door tints the page's own accent, and the CROSS-DOOR ROUTER at the bottom
 * carries the OTHER door's colour. That contrast is the point: the router is a
 * way out, and its colour says so.
 */
.ema-audience .ema-hero__media { background: var(--door-bg, color-mix(in srgb, var(--cw-ink) 9%, var(--cw-bg))); }

.ema-chip--door-invest      { border-color: var(--door-invest); }
.ema-chip--door-participate { border-color: var(--door-participate); }