/* Events page — Figma v4 (RzeLtCm9OafORGhYPS7w1d), frame 2062:715 (1440 x 3108).
   Unlike the For CROs / For Heads of Sales pages, the Figma frame puts the
   navigation in flow above the hero rather than on top of it, so the site nav
   band stays a normal 88px section here. */

/* ---- Hero (2062:724) — 1440 x 256, lime ---- */
.ev-hero {
  position: relative;
  height: 256px;
  background: var(--lime);
  box-shadow: inset 0 -2px 0 var(--obsidian);
  display: flex;
  align-items: center;
  gap: 48px;
  padding-left: 80px;   /* no right padding: the line art runs to the edge */
  overflow: hidden;
}

.ev-hero__intro { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.ev-hero h1 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-hero__sub {
  width: 720px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-filters { display: flex; align-items: center; gap: 8px; }

.ev-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--muted);
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
}

.ev-filter > span { transform: translateY(var(--figma-baseline-shift-inter)); }

.ev-filter--on {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--obsidian);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: var(--obsidian);
}

.ev-hero__lines { flex: 0 0 328.196px; width: 328.196px; height: 256px; }

.ev-hero__node {
  position: absolute;
  top: 103px;
  right: 109px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 12px 16px;
  border-radius: 100px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--muted);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--obsidian);
  white-space: nowrap;
}

.ev-hero__node > span { transform: translateY(var(--figma-baseline-shift-mono)); }

/* ---- Featured event (2062:737) — 1440 x 446 ---- */
.ev-featured {
  height: 446px;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
  padding: 0 80px;
}

.ev-card {
  display: flex;
  width: 1280px;
  height: 446px;
  background: var(--white);
  overflow: hidden;
  text-decoration: none;
}

/* The photo is wider than its frame and Figma centres it rather than fitting
   it, so the crop is horizontal-centre, not object-fit's default. */
.ev-card__visual {
  flex: 0 0 510px;
  height: 446px;
  box-shadow: inset 2px 0 0 var(--obsidian), inset -2px 0 0 var(--obsidian);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-card__visual img { width: 838px; height: 560px; max-width: none; object-fit: cover; }

.ev-card__body {
  flex: 0 0 770px;
  height: 446px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: var(--off-white);
  box-shadow: inset -2px 0 0 var(--obsidian);
}

.ev-card__top { display: flex; flex-direction: column; gap: 20px; }

.ev-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--lime);
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--obsidian);
  white-space: nowrap;
}

.ev-tag > span { display: block; transform: translateY(var(--figma-baseline-shift-inter)); }

.ev-card__body h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-card__meta {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: #697386;
  transform: translateY(var(--figma-baseline-shift-inter));
}

.ev-card__lede {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-card__body .btn {
  align-self: flex-start;
  padding: 13px 22px;
  font-family: var(--font-inter);
}

.ev-card__body .btn > span { transform: translateY(var(--figma-baseline-shift-inter)); }

/* ---- Past events (2062:821) — 1440 x 1160 ---- */
.ev-past { background: var(--off-white); padding: 0 80px; }

/* 1282, not 1280: the first card in each row carries a left stroke that sits
   outside the 1280 column, and Figma lets the row grow by those 2px. */
.ev-past__grid {
  display: flex;
  flex-wrap: wrap;
  width: 1282px;
  background: var(--white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.ev-post { display: flex; flex-direction: column; text-decoration: none; }

.ev-post:nth-child(1) { width: 428px; box-shadow: inset 2px 0 0 var(--obsidian), inset -2px 0 0 var(--obsidian); }
.ev-post:nth-child(2) { width: 426px; box-shadow: inset -2px 0 0 var(--obsidian); }
.ev-post:nth-child(3) { width: 426px; box-shadow: inset -2px 0 0 var(--obsidian); }
.ev-post:nth-child(4) { width: 428px; box-shadow: inset 2px 0 0 var(--obsidian), inset -2px 0 0 var(--obsidian); }
.ev-post:nth-child(5) { width: 428px; box-shadow: inset -2px 0 0 var(--obsidian); }
.ev-post:nth-child(6) { width: 426px; box-shadow: inset -2px 0 0 var(--obsidian); }

.ev-post__thumb {
  position: relative;
  height: 424px;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 var(--muted);
}

.ev-post__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Two of the six cards place their photo by hand instead of filling the box. */
.ev-post__thumb--offset img { position: absolute; width: 480px; height: 723px; left: -28px; top: -87px; }
.ev-post__thumb--tall img {
  position: absolute;
  width: 687px;
  height: 1031px;
  left: 50%;
  top: -135px;
  transform: translateX(calc(-50% + 0.5px));
}

.ev-post__content { display: flex; flex-direction: column; gap: 8px; padding: 32px 16px; overflow: hidden; }

.ev-post__content h3 {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift-inter));
}

.ev-post__content p {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
  transform: translateY(var(--figma-baseline-shift-inter));
}

.ev-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 1280px; padding: 20px 0; }

.ev-pager span,
.ev-pager a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--obsidian);
  text-decoration: none;
  transform: translateY(var(--figma-baseline-shift));
}

.ev-pager .ev-pager__on { background: var(--obsidian); box-shadow: none; color: var(--white); }

.ev-pager .ev-pager__arrow {
  background: var(--off-white);
  font-family: var(--font-inter);
  font-weight: 500;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift-inter));
}

/* ---- Upcoming events (2062:752) — 1440 x 525 ---- */
.ev-next { background: var(--off-white); box-shadow: inset 0 -2px 0 var(--obsidian); }

/* The 2px rule under the heading is an OUTSIDE stroke in Figma, so it adds to
   the band's height (194, not 192) rather than eating into its padding. */
.ev-next__head {
  padding: 120px 80px 40px;
  border-bottom: 2px solid var(--obsidian);
}

.ev-next__head h2 {
  width: 1280px;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-next__rows { display: flex; height: 331px; padding: 0 80px; }

.ev-row {
  flex: 1 0 0;
  min-width: 0;
  height: 331px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px 24px 24px;
  overflow: hidden;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian), inset 2px 0 0 var(--obsidian);
}

.ev-row:first-child { box-shadow: inset 0 -2px 0 var(--obsidian), inset 2px 0 0 var(--obsidian), inset -2px 0 0 var(--obsidian); }
.ev-row:nth-child(2) { box-shadow: inset 0 -2px 0 var(--obsidian); }
.ev-row:last-child { box-shadow: inset 0 -2px 0 var(--obsidian), inset 2px 0 0 var(--obsidian), inset -2px 0 0 var(--obsidian); }

.ev-row__kind {
  width: 180px;
  margin: 0;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
  transform: translateY(var(--figma-baseline-shift-inter));
}

.ev-row__stack { flex: 1 0 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }

.ev-row__when {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--orange);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-row__stack h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-row .btn {
  align-self: flex-start;
  padding: 13px 22px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--obsidian);
  color: var(--obsidian);
  font-family: var(--font-inter);
}

.ev-row .btn > span { transform: translateY(var(--figma-baseline-shift-inter)); }

/* ---- Newsletter (2063:1115) — 1440 x 223, sky blue ---- */
.ev-news {
  height: 223px;
  background: var(--sky-blue);
  padding: 80px 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.ev-news__copy { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.ev-news__copy h2 {
  width: 654px;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.ev-news__copy p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
  transform: translateY(var(--figma-baseline-shift));
}

.ev-news__form { flex: 1 0 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.ev-news__form input {
  flex: 1 0 0;
  min-width: 0;
  max-width: 400px;
  padding: 14px 16px;
  border: 0;
  border-radius: 100px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--muted);
  font-family: var(--font-inter);
  font-size: 13px;
  line-height: 1.4;
  color: var(--obsidian);
}

.ev-news__form input::placeholder { color: var(--muted); }
.ev-news__form input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.ev-news__form .btn { padding: 13px 22px; font-family: var(--font-inter); }
.ev-news__form .btn > span { transform: translateY(var(--figma-baseline-shift-inter)); }