/**
 * Theme Platform — content-layer components
 *
 * Everything the platform templates need: insight cards, theme grid,
 * engagement paths, archive headers and filters, empty states, prose styling
 * for single posts, people and partner grids, event and resource lists.
 *
 * Loaded after theme-pages.css and before theme-elementor.css, so Elementor
 * overrides still win where they need to.
 *
 * Every value derives from the tokens in theme-base.css. Nothing hardcoded.
 *
 * @package EthicalInfrastructure
 * @since   2.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Theme pills — the connective tissue of the whole platform.
   Every card carries them, every one links to a theme term page. */
.ei-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ei-pill {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-on-surface-variant);
  background: transparent;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.ei-pill:hover,
.ei-pill:focus-visible {
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Status badge — initiatives, events */
.ei-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.ei-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-outline-variant);
  flex: 0 0 auto;
}

.ei-status--active::before         { background: #2F7A55; }
.ei-status--in-development::before { background: #B98B2E; }
.ei-status--planned::before        { background: var(--color-outline-variant); }
.ei-status--concluded::before      { background: var(--color-on-surface-variant); opacity: .5; }

/* Eyebrow used outside Elementor widgets */
.ei-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 20px;
}

/* Hairline section divider used between platform blocks */
.ei-rule {
  border: 0;
  border-top: 1px solid var(--color-outline);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-archive-head {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--color-outline);
}

.ei-archive-head__inner {
  max-width: 760px;
}

.ei-archive-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-primary);
  margin: 0 0 24px;
}

.ei-archive-head__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* Theme term pages render the term description through wpautop(), so the intro
   arrives as three paragraphs rather than one. At ~270 words the first paragraph
   carries the definition and needs to be visually distinct from the two that
   follow it, or the whole block reads as an undifferentiated wall. */
.ei-archive-head__intro > p {
  margin: 0 0 20px;
}

.ei-archive-head__intro > p:last-child {
  margin-bottom: 0;
}

.ei-archive-head__intro > p:first-child {
  font-size: calc(var(--fs-body-lg) + 3px);
  line-height: 1.55;
  color: var(--color-primary);
}

/* A 270-word intro needs a narrower measure than the 760px heading column,
   or lines run past a comfortable reading length. */
.ei-archive-head--long .ei-archive-head__inner {
  max-width: 820px;
}

.ei-archive-head--long .ei-archive-head__intro {
  max-width: 680px;
}

.ei-archive-head__count {
  display: block;
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  opacity: .7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FILTER BAR — insights archive
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-outline);
}

.ei-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.ei-filter-group__label {
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  opacity: .6;
  margin-right: 12px;
}

.ei-filter {
  display: inline-block;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--color-on-surface-variant);
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.ei-filter:hover {
  color: var(--color-primary);
}

.ei-filter--active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHT CARDS — the feed pattern, reused by news and theme pages
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  padding: 72px 0;
}

.ei-insight-grid--two { grid-template-columns: repeat(2, 1fr); }

.ei-insight-card {
  display: flex;
  flex-direction: column;
}

.ei-insight-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-container);
  margin-bottom: 24px;
}

.ei-insight-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter .5s ease, transform .6s ease;
}

.ei-insight-card:hover .ei-insight-card__media img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

.ei-insight-card__kind {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  opacity: .75;
  margin-bottom: 14px;
}

.ei-insight-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-md);
  letter-spacing: var(--ls-tight);
  margin: 0 0 16px;
}

.ei-insight-card__title a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity .25s ease;
}

.ei-insight-card__title a:hover { opacity: .65; }

.ei-insight-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0 0 20px;
}

.ei-insight-card__meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-outline);
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  letter-spacing: .02em;
  color: var(--color-on-surface-variant);
  opacity: .7;
}

/* Featured variant — first insight on the archive spans two columns */
.ei-insight-card--featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.ei-insight-card--featured .ei-insight-card__media {
  margin-bottom: 0;
  aspect-ratio: 1 / 1;
}

.ei-insight-card--featured .ei-insight-card__title {
  font-size: var(--fs-headline-lg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   THEME GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-outline);
  border: 1px solid var(--color-outline);
}

.ei-theme-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 260px;
  padding: 36px 32px;
  background: var(--color-surface);
  text-decoration: none;
  transition: background-color .35s ease, color .35s ease;
}

.ei-theme-card:hover,
.ei-theme-card:focus-visible {
  background: var(--color-primary);
}

.ei-theme-card__index {
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  color: var(--color-on-surface-variant);
  opacity: .5;
  transition: color .35s ease, opacity .35s ease;
}

.ei-theme-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-md);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin: 0;
  transition: color .35s ease;
}

.ei-theme-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0;
  transition: color .35s ease;
}

.ei-theme-card__count {
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  opacity: .6;
  transition: color .35s ease, opacity .35s ease;
}

.ei-theme-card:hover .ei-theme-card__index,
.ei-theme-card:hover .ei-theme-card__title,
.ei-theme-card:hover .ei-theme-card__desc,
.ei-theme-card:hover .ei-theme-card__count {
  color: var(--color-on-primary);
  opacity: 1;
}

.ei-theme-card:hover .ei-theme-card__index,
.ei-theme-card:hover .ei-theme-card__count { opacity: .7; }

/* Featured themes — the first six get a two-column footprint and a description */
.ei-theme-card--featured {
  grid-column: span 2;
  min-height: 300px;
}

.ei-theme-card--featured .ei-theme-card__title {
  font-size: var(--fs-headline-lg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   WHY ETHICAL INFRASTRUCTURE — homepage section, sits directly after the hero
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-why {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}

.ei-why__lede {
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-lg);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin: 0;
}

.ei-why__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0 0 24px;
}

.ei-why__body p:last-of-type { margin-bottom: 0; }

.ei-why__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--color-outline);
}

.ei-why__point-num {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  color: var(--color-on-surface-variant);
  opacity: .5;
  margin-bottom: 16px;
}

.ei-why__point-title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-md);
  color: var(--color-primary);
  margin: 0 0 12px;
}

.ei-why__point-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ENGAGEMENT PATHS — Get Involved
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-engage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-outline);
  border: 1px solid var(--color-outline);
}

.ei-engage-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 40px;
  background: var(--color-surface);
}

.ei-engage-card__num {
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  color: var(--color-on-surface-variant);
  opacity: .5;
}

.ei-engage-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-md);
  color: var(--color-primary);
  margin: 0;
}

.ei-engage-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* "What happens next" — the thing most institutional sites omit and the
   thing every prospective collaborator actually wants to know. */
.ei-engage-card__next {
  margin-top: 8px;
  padding: 16px 20px;
  background: var(--color-surface-container);
  border-left: 2px solid var(--color-outline-variant);
}

.ei-engage-card__next-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  opacity: .7;
  margin-bottom: 6px;
}

.ei-engage-card__next-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.ei-engage-card__cta {
  margin-top: auto;
  padding-top: 24px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT ROUTES — audience-specific entry points
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.ei-route {
  padding-top: 28px;
  border-top: 2px solid var(--color-primary);
}

.ei-route__audience {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: 0 0 12px;
}

.ei-route__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0 0 20px;
}

.ei-route__email {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-outline-variant);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}

.ei-route__email:hover { border-bottom-color: var(--color-primary); }

.ei-route__response {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  letter-spacing: .02em;
  color: var(--color-on-surface-variant);
  opacity: .7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PEOPLE & PARTNERS
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-person-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 32px;
}

.ei-person-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-surface-container);
  margin-bottom: 20px;
}

.ei-person-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter .5s ease;
}

.ei-person-card:hover .ei-person-card__media img { filter: grayscale(0%); }

.ei-person-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: 0 0 6px;
}

.ei-person-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0 0 12px;
}

.ei-person-card__bio {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.ei-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-outline);
  border: 1px solid var(--color-outline);
}

.ei-partner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 180px;
  padding: 32px;
  background: var(--color-surface);
  text-align: center;
  text-decoration: none;
}

.ei-partner img {
  max-width: 140px;
  height: auto;
  filter: grayscale(100%);
  opacity: .7;
  transition: filter .35s ease, opacity .35s ease;
}

.ei-partner:hover img { filter: grayscale(0%); opacity: 1; }

.ei-partner__name {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   EVENT & RESOURCE LISTS — row layout, not cards
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-row-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-outline);
}

.ei-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 40px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid var(--color-outline);
}

.ei-row__aside {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.ei-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-md);
  margin: 0 0 10px;
}

.ei-row__title a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity .25s ease;
}

.ei-row__title a:hover { opacity: .65; }

.ei-row__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0 0 14px;
}

.ei-row__action { white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE POST — prose column
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-single {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 0 120px;
}

.ei-single__head {
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-outline);
}

.ei-single__title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-display);
  color: var(--color-primary);
  margin: 20px 0 24px;
}

.ei-single__standfirst {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0 0 28px;
}

.ei-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  letter-spacing: .02em;
  color: var(--color-on-surface-variant);
  opacity: .8;
}

.ei-single__figure {
  margin: 0 0 56px;
}

.ei-single__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.ei-single__figure figcaption {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  color: var(--color-on-surface-variant);
  opacity: .7;
}

/* Prose — applies to whatever the editor writes in the block editor */
.ei-prose {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--color-on-surface-variant);
}

.ei-prose > * + * { margin-top: 28px; }

.ei-prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-lg);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin-top: 64px;
}

.ei-prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-top: 48px;
}

.ei-prose h4 {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wider);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-top: 48px;
}

.ei-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-outline-variant);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s ease;
}

.ei-prose a:hover { text-decoration-color: var(--color-primary); }

.ei-prose ul,
.ei-prose ol { padding-left: 24px; }

.ei-prose li + li { margin-top: 10px; }

.ei-prose blockquote {
  margin: 48px 0;
  padding-left: 32px;
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-style: italic;
  line-height: var(--lh-headline-md);
  color: var(--color-primary);
}

.ei-prose img,
.ei-prose figure img { max-width: 100%; height: auto; }

.ei-prose hr {
  border: 0;
  border-top: 1px solid var(--color-outline);
  margin: 56px 0;
}

.ei-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-md);
}

.ei-prose th,
.ei-prose td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-outline);
}

.ei-prose th {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Footer of a single post — themes and share */
.ei-single__foot {
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--color-outline);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RELATED CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-related {
  padding: 88px 0;
  border-top: 1px solid var(--color-outline);
  background: var(--color-surface-container-low);
}

.ei-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE — a designed "in development" state, not a blank page
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-empty-state {
  max-width: 620px;
  margin: 0 auto;
  padding: 112px 32px;
  text-align: center;
  border: 1px solid var(--color-outline);
  background: var(--color-surface-container-low);
}

.ei-empty-state__label {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 28px;
  border: 1px solid var(--color-outline-variant);
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.ei-empty-state__heading {
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-lg);
  color: var(--color-primary);
  margin: 0 0 20px;
}

.ei-empty-state__body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0 0 32px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 32px 0 96px;
}

.ei-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-on-surface-variant);
  border: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.ei-pagination a.page-numbers:hover {
  color: var(--color-primary);
  border-color: var(--color-outline-variant);
}

.ei-pagination .page-numbers.current {
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MANIFESTO — Our Vision page
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-manifesto__opening {
  max-width: 820px;
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin: 0 0 64px;
}

.ei-manifesto__article {
  padding: 72px 0;
  border-top: 1px solid var(--color-outline);
}

.ei-manifesto__num {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wider);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  opacity: .6;
}

.ei-manifesto__heading {
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-headline-lg);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin: 20px 0 32px;
  max-width: 760px;
}

.ei-manifesto__body {
  max-width: 720px;
}

.ei-manifesto__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  margin: 0 0 24px;
}

.ei-manifesto__commitments {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  max-width: 720px;
}

.ei-manifesto__commitments li {
  padding: 20px 0 20px 40px;
  border-top: 1px solid var(--color-outline);
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
}

.ei-manifesto__commitments li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET DEFAULTS — shared header block for the platform Elementor widgets
   ═══════════════════════════════════════════════════════════════════════════

   These are DEFAULTS only. Every property here is overridable per widget
   instance through the Elementor Style tab, which writes higher-specificity
   rules into Elementor's own stylesheet. Nothing is set inline in the widget
   render methods, because an inline style attribute would beat the editor's
   controls and make the customisation options silently do nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

.ei-whead {
  max-width: 760px;
  margin-bottom: 48px;
}

.ei-whead__heading {
  font-family: var(--font-display);
  font-size: var(--fs-headline-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-headline);
  color: var(--color-primary);
  margin: 0 0 20px;
}

.ei-whead__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* Header with an action on the same row — used by the Insight Feed */
.ei-whead--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  max-width: none;
}

.ei-waction {
  margin: 40px 0 0;
}

/* Section rule presets, expressed as classes so the Elementor border control
   can still override them. */
.ei-wsection--rule    { border-top: 1px solid var(--color-outline); }
.ei-wsection--no-rule { border-top: none; }

/* Insight Feed's split header keeps the heading tight to the row baseline. */
.ei-whead--split .ei-whead__heading { margin-bottom: 0; }

/* Empty-state wrapper inside a widget */
.ei-wempty { padding: 56px 0 0; }

/* Engagement path audience line — its own element so it has its own
   typography control rather than borrowing the number's. */
.ei-engage-card__who {
  font-family: var(--font-body);
  font-size: var(--fs-label-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--color-on-surface-variant);
  opacity: .85;
  margin: 0;
}

@media (max-width: 768px) {
  .ei-whead { margin-bottom: 32px; }
  .ei-whead__heading { font-size: var(--fs-headline-lg); }
  .ei-whead__intro { font-size: var(--fs-body-md); }
}

/* Per-breakpoint visibility, driven by the widgets' Visibility style section.
   Elementor's own responsive hiding lives on the container, not the widget,
   so these blocks — which are full sections — need their own. */
@media (min-width: 1025px) {
  .ei-hide-desktop { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ei-hide-tablet { display: none !important; }
}
@media (max-width: 768px) {
  .ei-hide-mobile { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION — sizing for the restructured 8-item menu
   ═══════════════════════════════════════════════════════════════════════════

   The header was designed for four nav items. It now carries eight plus a
   Contact button, and the original 48px inter-item gap (--space-6) made the row
   wider than the 1280px container at every viewport — which is what pushed the
   first nav item hard against the logo.

   Three changes, in order of how much they matter:

     1. The header container is allowed to be wider than the 1280px body
        container. Nav needs horizontal room; shrinking the type instead would
        break the design system's label scale.
     2. The inter-item gap drops to a value that actually fits eight items, and
        steps down further as the viewport narrows.
     3. The logo gets a guaranteed minimum separation from the nav, so the two
        can never collide however long the labels get.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Give the header its own wider container. Body content stays at 1280px. */
.ei-header__inner {
  max-width: 1560px;
  gap: 40px;
}

/* 2. A gap that fits eight items. */
.ei-nav__list {
  gap: 26px;
  flex-wrap: nowrap;
}

/* 3. The logo must never touch the first nav item. */
.ei-header__logo {
  margin-right: 24px;
}

/* Nav sits hard right, next to the Contact button, rather than stretching. */
.ei-nav {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}

/* Progressive tightening. Below 1024px the mobile panel takes over entirely. */
@media (max-width: 1500px) {
  .ei-header__inner { max-width: 100%; }
  .ei-nav__list     { gap: 22px; }
}

@media (max-width: 1340px) {
  .ei-nav__list { gap: 16px; }
  .ei-nav-link  { letter-spacing: 0.06em; }
}

@media (max-width: 1180px) {
  .ei-nav__list         { gap: 12px; }
  .ei-nav-link          { letter-spacing: 0.03em; }
  .ei-header__logo      { margin-right: 12px; }
  .ei-header__logo img  { height: 40px; }
  /* The caret costs ~20px per parent item — reclaim some of it. */
  .ei-nav-dropdown-icon { font-size: 14px; }
}

/* Contact reads as an action, not a section. Styling the last top-level item as
   a button keeps the visible row at seven links, which is what makes the
   restructured IA fit. Scoped to the primary desktop menu only — never to
   dropdown children or the footer. */
.ei-nav__list > .ei-nav-item:last-child > .ei-nav-link {
  padding: 11px 22px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}

.ei-nav__list > .ei-nav-item:last-child > .ei-nav-link:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* The button must not fall back to the underline active treatment. */
.ei-nav__list > .ei-nav-item:last-child.current-menu-item > .ei-nav-link,
.ei-nav__list > .ei-nav-item:last-child > .ei-nav-link--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-color: var(--color-primary);
}

/* Dropdowns now carry up to five children with longer labels than the original
   design assumed. */
.ei-nav-dropdown {
  min-width: 264px;
  padding: 8px 10px;
}

.ei-nav-dropdown__link {
  white-space: nowrap;
}

/* Keep the last dropdown from overflowing the viewport's right edge. */
.ei-nav__list > .ei-nav-item:nth-last-child(-n+3) > .ei-nav-dropdown {
  left: auto;
  right: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  .ei-archive-head { padding: 72px 0 44px; }
  .ei-archive-head__title { font-size: var(--fs-headline-xl); }

  .ei-insight-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
    padding: 56px 0;
  }

  .ei-insight-card--featured {
    grid-column: span 2;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ei-insight-card--featured .ei-insight-card__media { aspect-ratio: 16 / 9; }

  .ei-theme-grid       { grid-template-columns: repeat(2, 1fr); }
  .ei-theme-card--featured { grid-column: span 1; min-height: 260px; }
  .ei-theme-card--featured .ei-theme-card__title { font-size: var(--fs-headline-md); }

  .ei-why {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ei-why__points {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 56px;
  }

  .ei-person-grid  { grid-template-columns: repeat(3, 1fr); }
  .ei-partner-grid { grid-template-columns: repeat(3, 1fr); }

  .ei-related__grid { grid-template-columns: repeat(2, 1fr); }

  .ei-row {
    grid-template-columns: 140px 1fr;
    gap: 24px;
  }

  .ei-row__action { grid-column: 2; }

  .ei-single { padding: 72px 0 96px; }
  .ei-single__title { font-size: var(--fs-headline-lg); }
}

@media (max-width: 768px) {

  .ei-archive-head { padding: 56px 0 36px; }
  .ei-archive-head__title { font-size: var(--fs-headline-lg); }
  .ei-archive-head__intro { font-size: var(--fs-body-md); }

  .ei-filter-bar {
    gap: 20px;
    padding: 20px 0;
  }

  .ei-filter-group { width: 100%; }
  .ei-filter-group__label { width: 100%; margin-bottom: 8px; }

  .ei-insight-grid,
  .ei-insight-grid--two {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 40px 0;
  }

  .ei-insight-card--featured { grid-column: span 1; }

  .ei-theme-grid       { grid-template-columns: 1fr; }
  .ei-theme-card       { min-height: 0; padding: 32px 24px; }
  .ei-theme-card--featured { min-height: 0; }

  .ei-engage-grid  { grid-template-columns: 1fr; }
  .ei-engage-card  { padding: 36px 24px; }

  .ei-routes { grid-template-columns: 1fr; gap: 40px; }

  .ei-person-grid  { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .ei-partner-grid { grid-template-columns: repeat(2, 1fr); }

  .ei-related { padding: 56px 0; }
  .ei-related__grid { grid-template-columns: 1fr; gap: 40px; }

  .ei-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }

  .ei-row__action { grid-column: 1; }

  .ei-single { padding: 48px 0 72px; }
  .ei-single__head { margin-bottom: 40px; padding-bottom: 28px; }
  .ei-single__title { font-size: var(--fs-headline-md); }

  .ei-prose { font-size: var(--fs-body-md); }
  .ei-prose h2 { font-size: var(--fs-headline-md); margin-top: 48px; }
  .ei-prose blockquote {
    font-size: var(--fs-body-lg);
    padding-left: 20px;
    margin: 32px 0;
  }

  .ei-empty-state { padding: 72px 24px; }
  .ei-empty-state__heading { font-size: var(--fs-headline-md); }

  .ei-manifesto__opening { font-size: var(--fs-headline-md); margin-bottom: 40px; }
  .ei-manifesto__article { padding: 48px 0; }
  .ei-manifesto__heading { font-size: var(--fs-headline-md); }
  .ei-manifesto__body p  { font-size: var(--fs-body-md); }

  .ei-pagination { padding: 24px 0 64px; }
}

@media (max-width: 480px) {
  .ei-partner-grid { grid-template-columns: 1fr; }
  .ei-person-grid  { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ei-insight-card__media img,
  .ei-person-card__media img,
  .ei-partner img,
  .ei-theme-card,
  .ei-pill {
    transition: none;
  }
  .ei-insight-card:hover .ei-insight-card__media img { transform: none; }
}