/* Engine-fed surfaces: role chips, role blocks, events.
 *
 * Every value here is an Organic token. That sentence was at the top of this
 * file while it carried thirteen bare pixel sizes, seven literal hexes and four
 * opacities doing hierarchy — including 11.5px labels, below the brand's floor,
 * on the first section of the home page.
 *
 * The chips and the buttons are gone from this sheet entirely: they are
 * `.chip`/`.chip-main`/`.role-chips` and `.btn`/`.btn-primary`/`.btn-ghost`,
 * styled once in styles.css. A second implementation of a control the design
 * system already draws is how a site ends up with two of everything.
 */

/* ── Role chips ──────────────────────────────────────────────────────────────
   Layout only. `.chip-row.role-chips` carries the gap and the 44px control
   height; `.chip-main[aria-pressed="true"]` carries the pressed fill. The
   `.eca-chip*` class names survive as the SCRIPT's handles — engine.js reads
   them — and style nothing. */

.eca-roles .chip.is-on { border-color: var(--color-accent); }

/* ── The per-role block ──────────────────────────────────────────────────── */

.eca-role { display: flex; flex-direction: column; }

.eca-role__lead,
.eca-role__changes,
.eca-role__apply {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) 0;
}

/* The middle section is tinted — it separates what changes from what you must
   bring. `--radius-xl` is the ladder's largest, for a feature surface. */
.eca-role__changes {
  padding: var(--space-12) var(--space-7);
  margin: 0 calc(var(--space-7) * -1);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
}

.eca-role__cover {
  min-height: 260px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xl);
}

/* The eyebrow, exactly as `.eyebrow` draws it. It was 11.5px SemiBold in Forest
   Canopy — under the 12px floor, off the weight, and a coloured label where the
   brand asks for a quiet overline in the primary type colour. styles.css
   carries that argument in a comment on `.eyebrow`; this sheet had not read
   it. */
.eca-role__eyebrow,
.eca-role__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text);
}

.eca-role__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-display-xl));
  line-height: 1.10;
}

.eca-role__subtitle {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-4xl), 3.4vw, var(--text-6xl));
  line-height: 1.15;
}

.eca-role__lede {
  margin: 0; max-width: 62ch;
  font-size: var(--text-3xl); line-height: 1.6;
}

.eca-role__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-2);
}

.eca-role__grid h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
}
.eca-role__grid p {
  margin: 0; max-width: 42ch;
  font-size: var(--text-xl); line-height: var(--leading-body);
}

.eca-role__tags {
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.eca-role__tags li {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-base);
  border: 1px solid var(--color-taupe);
  /* Not a pill. The brand's Do list rules them out and Organic's own `.chip`
     sits at --radius-md; these were 999px, which is the only pill left. */
  border-radius: var(--radius-md);
}

/* Secondary lines take secondary INK. They were body colour at 0.85 opacity,
   which is the one thing `.card-body` in styles.css exists to argue against —
   opacity is not a hierarchy tool in this system. */
.eca-role__note {
  margin: 0; max-width: 62ch;
  font-size: var(--text-base); line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

.eca-role__pack {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
  max-width: 62ch;
}

.eca-role__pack h4 {
  margin: 0; font-family: var(--font-heading); font-size: var(--text-xl);
}
.eca-role__pack p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base); line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

.eca-role__fee {
  margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2);
}

/* Copy the association has not agreed reads as provisional — and carries no
   figure, because a number on this domain reads as a published price whatever
   the styling says. */
.eca-role__provisional {
  margin: 0;
  max-width: 62ch;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-body);
}

.eca-role__cta {
  margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3);
}

/* ── Events ────────────────────────────────────────────────────────────────
   The events listing is built from Organic's own components — `.section`,
   `.wrap`, `.eyebrow`, `.rail`, `.card-gallery` — in eca_engine_events_markup().
   It has no styles of its own and should not grow any.

   A second, complete card implementation lived here until it was removed:
   `.eca-event`, `.eca-event__cover/__body/__kind/__name/__when/__blurb/__link`
   and `.eca-events__grid/__label`. The markup for it went in 15a20d0, when the
   listing moved to gallery cards; the CSS stayed, orphaned, for a week.

   It mattered more than dead weight usually does. It was a plausible, complete
   card in the old system — 21px titles, 13.5/14.5px body, 12px radii, 14px
   gaps, opacity for hierarchy, a Forest Canopy label — so anything that reached
   for those class names would have got the pre-brand system back, silently and
   looking deliberate.

   It survived review because a grep cannot tell the two apart: `eca-events` is
   also the Elementor WIDGET SLUG, registered in widgets.php and named in
   scripts/pages/events.py and home.py. Those hits are real. The CSS class of
   the same name never matched anything — Elementor wraps a widget in
   `elementor-widget-<slug>`, not `<slug>`. */

/* ── Rails ───────────────────────────────────────────────────────────────── */

/* `.rail` and `.card-gallery` are Organic's own components, styled in
   styles.css. Only the bits Elementor's container CSS would otherwise fight
   are set here. */

/* The value chain band. It is its own section on the page now, so it takes no
   top margin of its own — the section's padding places it. The heading sits
   inside the wrapper because it labels the row for a screen reader. */
.eca-roles__chain-label {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  line-height: 1.15;
}
.eca-roles .rail .card-gallery { text-align: left; }

/* `hidden` is only `display: none` in the user-agent stylesheet, so ANY author
   `display` beats it — and every element here has one, as does every Elementor
   container. Without this the browse view and every role block render at once,
   which is most of the page.

   `.eca-roles__clear` is on the list because it is a `.btn`, and `.btn` sets a
   display: the button shipped carrying `hidden` and offering "Show everything"
   in the state where everything was already shown. */
.eca-role[hidden],
.eca-roles__clear[hidden],
.eca-browse[hidden] { display: none !important; }

/* A card with nothing behind it yet should not look clickable. */
.card-gallery--static { cursor: default; }
.card-gallery--static:hover { transform: none; }