/* ==========================================================================
   Team: directors, the staff per year and the recruitment summary.
   Measured on the original /team at 1612, 1024 and 375 pixels wide.
   ========================================================================== */

.eve-team {
	padding-top: 20px;
	overflow-x: hidden;
}

@media (min-width: 768px) {
	.eve-team { padding-top: 45px; }
}

@media (min-width: 1280px) {
	.eve-team { padding-top: 50px; }
}

.eve-team__heading {
	margin: 0;
	font-size: 22px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Directors
   -------------------------------------------------------------------------- */

/* Edge to edge of the container: its padding is the directors' own (.eve-team
   adds weight, the template stylesheet loads after this one) */
.eve-team .eve-team__directors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 13px;
	margin-bottom: -20px;
	padding: 0;
}

@media (min-width: 768px) {
	.eve-team .eve-team__directors {
		margin-top: 53px;
		margin-bottom: 30px;
	}
}

@media (min-width: 1280px) {
	.eve-team .eve-team__directors {
		margin-top: 35px;
	}
}

.eve-team__director {
	position: relative;
	width: 100%;
	text-align: center;
}

@media (min-width: 768px) {
	.eve-team__director {
		width: 33.3333%;
		padding: 0 20px;
	}
}

.eve-team__photo {
	position: relative;
}

.eve-team__photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid transparent;
}

.eve-team__more {
	position: absolute;
	right: 1px;
	bottom: 1px;
	z-index: 100;
	display: none;
	width: 100px;
	padding: 10px 0;
	color: #fff;
	background: #000;
	transition: color 0.5s ease, opacity 0.5s ease;
}

@media (min-width: 768px) {
	.eve-team__more {
		display: block;
	}
}

/* Its own box, as the original's floated caption: margins stay inside */
.eve-team__caption {
	display: flow-root;
	width: 83.3333%;
	margin-left: 8.3333%;
	padding: 0 5px;
	text-align: left;
}

.eve-team__name {
	display: block;
	margin: 26px 0 31px;
	font-family: var(--eve-font-semibold);
	font-size: 18px;
	text-align: left;
}

/* Phone: 50 under the name, where the original's (empty) text box sat */
@media (max-width: 767px) {
	.eve-team__name:last-child {
		margin-bottom: 50px;
	}
}

@media (min-width: 768px) {
	.eve-team__name {
		margin: 19px 0 10px;
		text-align: center;
	}

	/* The text only shows on phones, as on the original */
	.eve-team__text {
		display: none;
	}
}

@media (min-width: 1280px) {
	.eve-team__name {
		margin-top: 10px;
	}
}

.eve-team__text {
	margin-bottom: 50px;
}

/* --------------------------------------------------------------------------
   Staff
   -------------------------------------------------------------------------- */

/* Its own box: the list's bottom gap stays inside the band */
.eve-staff {
	display: flow-root;
	margin-bottom: 11px;
	padding: 25px 20px 0;
	background: var(--eve-bg-footer);
}

@media (min-width: 1280px) {
	.eve-staff {
		margin-bottom: 27px;
		padding-top: 50px;
	}
}

.eve-staff > .eve-team__heading {
	margin-top: 10px;
}

/* The year navigation: older on the left, the current year with its list in
   the middle, newer on the right */
.eve-staff__nav {
	position: relative;
	z-index: 999;
	height: 22px;
	margin: 46px -20px 0;
	line-height: 1em;
}

@media (min-width: 768px) {
	.eve-staff__nav { margin-top: 21px; }
}

@media (min-width: 1280px) {
	.eve-staff__nav { margin-top: 30.8px; }
}

.eve-staff__step {
	position: absolute;
	top: 0;
	width: 100px;
	min-height: 20px;
	padding: 0;
	line-height: 1em;
	color: #fff;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.eve-staff__step[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.eve-staff__step {
		display: none !important;
	}
}

/* Text at the top (a button would centre it), 2px above, as the original's */
.eve-staff__step {
	display: flex;
	align-items: flex-start;
}

.eve-staff__step [data-eve-staff-older-year],
.eve-staff__step [data-eve-staff-newer-year] {
	position: relative;
	top: -2px;
}

.eve-staff__step--older {
	left: 0;
	justify-content: flex-end;
	padding-right: 15px;
}

.eve-staff__step--newer {
	right: 0;
	justify-content: flex-start;
	padding-left: 15px;
}

.eve-staff__arrow {
	position: absolute;
	top: 1px;
	width: 10px;
	height: 10px;
	background: url(../images/icon-arrowsmall.svg) 50% / contain no-repeat;
}

.eve-staff__step--older .eve-staff__arrow {
	right: 50px;
	transform: rotate(180deg);
}

.eve-staff__step--newer .eve-staff__arrow {
	top: 5px;
	left: 50px;
}

.eve-staff__current {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100px;
	min-height: 22px;
	overflow: hidden;
	transform: translateX(-50%);
	transition: all 0.5s ease;
}

.eve-staff__toggle {
	position: relative;
	z-index: 88;
	display: block;
	width: 100%;
	padding: 0 0 6px;
	line-height: 1em;
	color: #fff;
	background: var(--eve-bg-footer);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.eve-staff__toggle::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 99;
	width: 10px;
	height: 10px;
	margin-left: 25px;
	background: url(../images/icon-arrowsmall.svg) 50% / contain no-repeat;
	transform: rotate(90deg);
}

.eve-staff__current.is-open .eve-staff__toggle::after {
	transform: rotate(-90deg);
}

.eve-staff__years {
	position: absolute;
	width: 100px;
	margin: 0;
	padding: 20px 15px 0;
	list-style: none;
	text-align: left;
	background-color: var(--eve-bg);
	border: 1px solid #2b2f31;
	border-top-color: #fff;
	transform: translateY(-100%);
	transition: transform 0.5s ease;
}

.eve-staff__current.is-open .eve-staff__years {
	transform: translateY(0);
}

.eve-staff__years li {
	margin-bottom: 15px;
	line-height: 1em;
}

.eve-staff__years button {
	padding: 0;
	line-height: 1em;
	color: #45484a;
	background: none;
	border: 0;
}

.eve-staff__years button:hover {
	color: #fff;
}

/* The years side by side, newest on the right; the height follows the year shown */
.eve-staff__viewport {
	margin: 29px 0 30px 30px;
	overflow: hidden;
	transition: height 0.3s ease;
}

/* Phone: the original's 7/12 column less its padding */
@media (max-width: 767px) {
	.eve-staff__viewport {
		width: calc((100% + 40px) * 7 / 12 - 70px);
	}
}

@media (min-width: 768px) {
	.eve-staff__viewport {
		margin: 24px 15px 30px;
	}
}

@media (min-width: 1280px) {
	.eve-staff__viewport {
		/* One twelfth in, as the original's offset column */
		margin: 8px 15px 30px calc((100% + 40px) / 12 + 15px);
	}
}

.eve-staff__track {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	transition: transform 0.3s ease;
}

.eve-staff__year {
	flex: 0 0 100%;
	min-width: 0;
	visibility: hidden;
	transition: visibility 0s 0.3s;
}

.eve-staff__year.is-current {
	visibility: visible;
	transition: none;
}

/* Six columns, as the original's six column groups */
@media (min-width: 768px) {
	.eve-staff__list {
		display: grid;
		align-items: start;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 1em;
	}
}

.eve-staff__column {
	margin-bottom: 20px;
}

/* The last name's gap stays out of the height, as it collapsed on the original */
.eve-staff__column p:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.eve-staff__column {
		margin-bottom: 0;
	}
}

.eve-staff__letter {
	font-family: var(--eve-font-semibold);
	font-size: 16px;
	color: #3e454a;
}

.eve-staff__column p {
	margin: 0 0 10px;
}

@media (min-width: 768px) {
	.eve-staff__column p {
		margin-bottom: 28px;
	}
}

/* --------------------------------------------------------------------------
   Recruitment
   -------------------------------------------------------------------------- */

/* Own boxes, as the original's floated columns: margins do not merge.
   On phones the columns stack and their margins merge, as there. */
.eve-team__jobs,
.eve-team__jobs-row {
	display: flow-root;
}

@media (min-width: 768px) {
	.eve-team__jobs-col {
		display: flow-root;
	}
}

.eve-team__jobs {
	margin-bottom: 15px;
}

@media (min-width: 768px) {
	.eve-team__jobs {
		margin-bottom: 50px;
	}
}

.eve-team__jobs > .eve-team__heading {
	margin: 10px 0 21px;
}

@media (min-width: 768px) {
	.eve-team__jobs > .eve-team__heading { margin-bottom: 55px; }
}

@media (min-width: 1280px) {
	.eve-team__jobs > .eve-team__heading { margin-bottom: 50px; }
}

@media (min-width: 768px) {
	.eve-team__jobs-row {
		display: flex;
		margin: 0 -20px;
	}

	.eve-team__jobs-col {
		width: 33.3333%;
	}
}

.eve-team__jobs-col {
	padding: 0 50px;
}

@media (max-width: 767px) {
	.eve-team__jobs-col {
		margin: 0 -20px;
	}

	.eve-team__jobs-col p {
		margin-bottom: 22px;
	}
}

.eve-team__jobs-title {
	margin: 10px 0 24px;
	font-size: 18px;
	color: #3e454a;
}

@media (min-width: 768px) {
	.eve-team__jobs-title { margin-bottom: 20px; }
}

@media (min-width: 1280px) {
	.eve-team__jobs-title { color: var(--eve-icon); }
}

.eve-team__jobs-col ul {
	margin: 0 0 10px;
	padding-left: 15px;
}

.eve-team__jobs-col--vacancies ul {
	padding-left: 0;
	list-style: none;
}

@media (max-width: 767px) {
	.eve-team__jobs-col--vacancies ul {
		margin-bottom: 35px;
	}
}

.eve-team__jobs-col--vacancies a {
	text-decoration: underline;
}