/* Pieces every page shares: buttons, section introductions, body text and the cards of the post lists. */

/* Buttons */
.button {
	display: inline-block;
	padding: var(--button-padding-y) var(--space-30);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-white);
	font-family: inherit;
	font-size: var(--text-14);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-sm);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	background: var(--color-primary-hover);
}

.button--light,
.button--soft {
	padding: var(--space-12) var(--space-24);
	color: var(--color-primary);
}

.button--light {
	background: var(--color-white);
}

.button--light:hover {
	background: var(--color-blush);
}

.button--soft {
	background: var(--color-light-pink);
	font-size: var(--text-14);
}

.button--soft:hover {
	background: var(--color-blush);
}

/* The light pink buttons on Our resources: roomier, and only the text darkens on hover. */
.button--soft-large {
	padding: var(--space-16) var(--space-32);
	background: var(--color-light-pink);
	color: var(--color-primary);
	font-size: var(--text-14);
}

.button--soft-large:hover {
	background: var(--color-light-pink);
	color: var(--color-primary-hover);
}

/* "Load More" on Our resources: dark red, roomy, medium-weight text, and no change on hover. */
.button--load-more {
	padding: var(--space-16) var(--space-32);
	font-size: var(--text-15);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-none);
}

.button--load-more:hover {
	background: var(--color-primary);
}

/* The "More clients" button keeps Elementor's default size and text, with the pill shape of the other buttons. */
.button--legacy {
	padding: var(--space-12) var(--space-24);
	font-size: var(--text-15);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-none);
}

/* Section introductions */
.overtitle {
	margin: 0;
	color: var(--color-accent);
	font-size: var(--text-16);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-lg);
	text-transform: uppercase;
}

.section-heading {
	max-width: var(--heading-width);
	margin: 0;
	color: var(--color-primary);
	font-size: var(--text-28);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
}

.is-centred {
	text-align: center;
}

.body-text {
	font-size: var(--text-14);
	line-height: var(--leading-body);
}

.body-text > * {
	margin: 0;
}

.body-text > * + * {
	margin-top: var(--space-16);
}

.body-text--large {
	font-size: var(--text-16);
}

/* A page's opening overtitle and big heading (Our services, Approach and the other inner pages). */
.page-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	max-width: var(--content-width);
	margin: var(--space-64) auto;
}

/* Line heights in em, as live: Chrome rounds an em line height up to 1/64 px and a plain number
   down, and over many lines that difference grows into a whole pixel. */
.page-heading {
	margin: 0;
	color: var(--color-primary);
	font-size: var(--text-40);
	font-weight: var(--weight-semibold);
	line-height: calc(var(--leading-tight) * 1em);
}

/* The Clients section, on Home and Our services. */
.clients-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
}

/* The explore section: a heading over a photo, then boxes pointing to other pages. */
.explore {
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
	padding: var(--space-100) 0 var(--space-200);
	overflow: hidden;
}

/* A tint of the text colour over the photo keeps the white heading at 3:1 or more, even on the
   photo's brightest parts. */
.explore--photo {
	background:
		linear-gradient(color-mix(in srgb, var(--color-text) 60%, transparent), color-mix(in srgb, var(--color-text) 60%, transparent)),
		var(--explore-image) center / cover no-repeat;
}

.explore__heading {
	max-width: var(--content-width);
	margin: 0 auto;
	color: var(--color-white);
	font-size: var(--text-34);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	text-align: center;
}

.explore__boxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-100);
	width: 100%;
	max-width: var(--content-width);
	margin: 0 auto;
}

.explore__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	padding: var(--space-48) var(--space-48) var(--space-64);
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.explore__title {
	margin: 0;
	font-size: var(--text-24);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-none);
}

.explore__text {
	margin: 0;
	font-size: var(--text-20);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
}

/* Service card */
.service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.service-card__image {
	display: block;
	width: 100%;
	height: var(--photo-service);
	border-radius: var(--radius-card);
	object-fit: cover;
	object-position: left center;
}

.service-card__title {
	margin: 0;
	font-size: var(--text-20);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
}

/* Principle card */
.principle-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	padding: var(--space-24) var(--space-24) var(--space-40);
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.principle-card__icon {
	display: block;
	width: var(--icon-principle);
	height: auto;
}

.principle-card__title {
	margin: 0;
	font-size: var(--text-16);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	text-align: center;
}

/* Resource card */
.resource-card {
	display: flex;
	align-items: flex-start;
	padding: var(--space-16) var(--space-24) var(--space-32);
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

/* The cover and the text share the row the way the live site does: both shrink from 32% and 100%. */
.resource-card__image {
	display: block;
	flex: 0 1 32%;
	min-width: 0;
	height: auto;
	border-radius: var(--radius-small);
	/* The same as a 4% black layer over the cover, so white covers keep an edge on the white card. */
	filter: brightness(0.96);
}

.resource-card__body {
	display: flex;
	flex: 0 1 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
	min-width: 0;
	padding: 0 var(--space-24);
}

/* As live, the categories sit in a 24 px line of 16 px text, so the commas between them are 16 px
   and only the names are small. */
.resource-card__categories {
	margin: 0;
	color: var(--color-accent);
	font-size: var(--text-16);
	line-height: calc(var(--text-16) * var(--leading-normal));
}

.resource-card__category {
	display: inline-block;
	font-size: var(--text-13);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-md);
	text-transform: uppercase;
}

.resource-card__title {
	margin: 0;
	color: var(--color-primary);
	font-size: var(--text-16);
	font-weight: var(--weight-semibold);
	line-height: calc(var(--leading-snug) * 1em);
}

/* Team photos, picked at random */
.team-photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
}

.team-photos__image {
	display: block;
	width: 100%;
	height: var(--photo-team);
	object-fit: cover;
}

/* Client logos */
.client-logos-block {
	width: 100%;
	max-width: var(--content-width);
}

.client-logos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.client-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--space-200);
}

.client-logos__item[hidden] {
	display: none;
}

.client-logos__image {
	display: block;
	width: 100%;
	height: auto;
}

.client-logos__more {
	margin-top: var(--space-30);
	text-align: center;
}

@media (max-width: 1024px) {
	.section-heading {
		font-size: var(--text-24);
	}

	.page-intro {
		margin: var(--space-50) 0 0;
		padding: 0 var(--space-20) var(--space-70);
		text-align: center;
	}

	.page-heading {
		font-size: var(--text-32);
	}

	.clients-section {
		padding: 0 var(--space-20) var(--space-70);
	}

	.explore {
		gap: var(--space-50);
		padding: var(--space-50) var(--space-20) var(--space-70);
	}

	.explore__heading {
		font-size: var(--text-28);
	}

	.explore__boxes {
		gap: 4%;
	}

	.explore__box {
		padding: var(--space-32);
	}

	.explore__title {
		font-size: var(--text-20);
	}

	.explore__text {
		font-size: var(--text-18);
	}

	.team-photos__image {
		height: var(--photo-team-tablet);
	}

	.client-logos {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.page-heading {
		font-size: var(--text-24);
	}

	.explore {
		gap: var(--space-24);
	}

	.explore__heading {
		font-size: var(--text-24);
	}

	.explore__boxes {
		grid-template-columns: 1fr;
		gap: var(--space-24);
	}

	.resource-card {
		flex-direction: column;
		gap: var(--space-24);
	}

	.resource-card__image {
		flex: none;
		width: 100%;
		height: var(--cover-resource-phone);
		object-fit: cover;
		object-position: top center;
	}

	.resource-card__body {
		flex: none;
		width: 100%;
		padding: 0;
	}

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

	.team-photos__image {
		height: var(--photo-team-phone);
	}

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

/* Plain pages: a single post, a list of posts, search results and the missing-page message. */
.plain-page {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--space-50) 0 var(--space-100);
}

.plain-page__title {
	margin: 0 0 var(--space-32);
	color: var(--color-primary);
	font-size: var(--text-32);
	font-weight: var(--weight-semibold);
	line-height: calc(var(--leading-tight) * 1em);
}

.plain-page__list {
	display: grid;
	gap: var(--space-16);
	margin: 0 0 var(--space-32);
	padding: 0;
	list-style: none;
}

.plain-page__list a,
.plain-page .page-numbers {
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

.plain-page__list a:hover {
	color: var(--color-accent);
}

.plain-page .nav-links {
	display: flex;
	gap: var(--space-16);
}

.plain-page .page-numbers.current {
	color: var(--color-accent);
}

@media (max-width: 1024px) {
	.plain-page {
		padding-right: var(--space-20);
		padding-left: var(--space-20);
	}
}