/* ==========================================================================
   AFP Events  (salient-child)
   Listing: [afp_events]   Single: single-events.php
   Matches https://www.theafp.co.uk/afp-events/ and the single event pages.
   ========================================================================== */

.afp-events,
.afp-event-banner,
.afp-event-single {
	--afp-ev-teal: #57b197;
	--afp-ev-dark: #221f20;
	--afp-ev-purple: #8e68a6;
	--afp-ev-text: #3c4547;
	--afp-ev-muted: #7c8181;
	--afp-ev-grey: #f2f2f2;
	--afp-ev-icon: #4a4a4a;
}

.afp-events *,
.afp-event-single * {
	box-sizing: border-box;
}

/* ============================================================== listing */
.afp-events {
	padding: 50px 0 60px;
	background-color: var(--afp-ev-grey);
}

/* Let the grey band run edge to edge when the element sits in a normal
   (boxed) WPBakery row. */
.afp-events {
	box-shadow: 0 0 0 100vmax var(--afp-ev-grey);
	clip-path: inset(0 -100vmax);
}

/* ---------------------------------------------------------- filters */
.afp-events__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0 0 55px;
}

.afp-events input.afp-events__search,
.afp-events select.afp-events__category {
	height: 62px;
	margin: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 18px;
	color: var(--afp-ev-text);
	background-color: #fff;
	box-shadow: none;
}

.afp-events input.afp-events__search {
	flex: 0 1 38%;
	min-width: 260px;
	padding: 8px 25px;
	border: 0;
}

.afp-events select.afp-events__category {
	width: 300px;
	padding: 0 12px;
	border: 1px solid #7c7979;
	cursor: pointer;
}

.afp-events input.afp-events__search:focus,
.afp-events select.afp-events__category:focus {
	outline: 2px solid var(--afp-ev-teal);
	outline-offset: 1px;
}

.afp-events .afp-events__calendar-btn {
	display: inline-flex;
	align-items: center;
	min-height: 62px;
	padding: 0 50px;
	background-color: var(--afp-ev-teal);
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.5s ease;
}

.afp-events .afp-events__calendar-btn:hover,
.afp-events .afp-events__calendar-btn:focus-visible {
	background-color: var(--afp-ev-dark);
	color: #fff;
}

/* ------------------------------------------------------------- list */
.afp-events__list {
	display: grid;
	row-gap: 50px;
	transition: opacity 0.2s ease;
}

.afp-events.is-loading .afp-events__list {
	opacity: 0.45;
	pointer-events: none;
}

.afp-events__empty {
	margin: 20px 0;
	text-align: center;
	font-size: 18px;
	color: var(--afp-ev-text);
}

/* ------------------------------------------------------------- item */
.afp-events__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background-color: #fff;
}

.afp-events__item--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.afp-events__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 90px 90px 70px;
	color: var(--afp-ev-text);
}

/* Slanted category ribbon along the top edge, next to the image. */
.afp-events__tags {
	position: absolute;
	top: 0;
	right: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 4px;
	z-index: 2;
}

.afp-events__item--no-image .afp-events__tags {
	right: 0;
}

.afp-events__tag {
	display: inline-block;
	padding: 10px 70px 10px 30px;
	background-color: #4c5555;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.afp-events__tag--afp-event {
	background-color: var(--afp-ev-teal);
}

.afp-events__tag--afp-attending {
	background-color: #808080;
}

.afp-events__tag--training-and-education-course {
	background-color: var(--afp-ev-purple);
}

.afp-events__tag--afp-not-attending {
	background-color: #000;
}

.afp-events .afp-events__title {
	margin: 0 0 30px;
	padding: 0;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.25;
}

.afp-events .afp-events__title a {
	color: var(--afp-ev-teal);
	text-decoration: none;
	transition: color 0.3s ease;
}

.afp-events .afp-events__title a:hover {
	color: var(--afp-ev-dark);
}

.afp-events__date {
	font-size: 18px;
	font-weight: 500;
}

.afp-events .afp-events__excerpt {
	margin: 0;
	padding: 30px 0;
	color: var(--afp-ev-muted);
	font-size: 17px;
	line-height: 1.75;
}

.afp-events__calendar {
	padding-bottom: 30px;
}

.afp-events .afp-events__calendar-link {
	color: var(--afp-ev-teal);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid rgba(87, 177, 151, 0.42);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.afp-events .afp-events__calendar-link:hover {
	color: var(--afp-ev-dark);
	border-color: var(--afp-ev-dark);
}

.afp-events .afp-events__btn,
.afp-events .afp-events__more-btn {
	display: inline-block;
	padding: 10px 50px 9px;
	border: 0;
	border-radius: 50px;
	background-color: var(--afp-ev-purple);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.5s ease;
}

.afp-events .afp-events__btn:hover,
.afp-events .afp-events__btn:focus-visible,
.afp-events .afp-events__more-btn:hover,
.afp-events .afp-events__more-btn:focus-visible {
	background-color: var(--afp-ev-dark);
	color: #fff;
}

/* Image with the slanted left edge and grey foot, as on the live site. */
.afp-events__media {
	position: relative;
	display: block;
	align-self: stretch;
	min-height: 100%;
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
	background-color: var(--afp-ev-grey);
}

.afp-events__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.afp-events__item:hover .afp-events__media img {
	transform: scale(1.04);
}

/* ------------------------------------------------------- load more */
.afp-events__more {
	margin-top: 50px;
	text-align: center;
}

.afp-events__more[hidden] {
	display: none;
}

.afp-events .afp-events__more-btn[disabled] {
	opacity: 0.7;
	cursor: wait;
}

/* =========================================================== single */
.afp-event-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 300px;
	padding: 60px 0;
	background-color: #1f2324;
	background-size: cover;
	background-position: center;
}

.afp-event-banner .afp-event-banner__title {
	max-width: 75%;
	margin: 0;
	color: var(--afp-ev-teal);
	font-size: 56px;
	font-weight: 700;
	line-height: 1.15;
}

body .container-wrap.afp-event-single-wrap {
	background-color: #f9f9f9;
}

.afp-event-single {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: 60px;
	align-items: start;
	padding: 80px 0 100px;
}

.afp-event-single--no-side {
	grid-template-columns: minmax(0, 1fr);
}

.afp-event-single .afp-event-single__title {
	margin: 0 0 35px;
	padding: 0;
	color: #000;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
}

.afp-event-single__image {
	margin-bottom: 35px;
}

.afp-event-single__image img {
	display: block;
	width: 100%;
	height: auto;
}

.afp-event-single__content {
	color: #000;
	font-size: 16px;
	line-height: 1.9;
}

.afp-event-single__content p {
	margin: 0 0 1.1em;
	padding: 0;
}

.afp-event-single__content img {
	max-width: 100%;
	height: auto;
}

.afp-event-single__side {
	display: grid;
	row-gap: 30px;
}

.afp-event-card {
	padding: 30px;
	border: 2px solid #eee;
	background-color: #fff;
}

.afp-event-single .afp-event-card__title {
	margin: 0 0 25px;
	padding: 0 0 25px;
	border-bottom: 2px solid #eee;
	color: #000;
	font-size: 28px;
	font-weight: 600;
}

.afp-event-single ul.afp-event-info {
	display: grid;
	row-gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afp-event-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.afp-event-info__row {
	display: flex;
	align-items: center;
	column-gap: 16px;
	color: var(--afp-ev-icon);
	text-decoration: none;
}

.afp-event-info__icon {
	flex: 0 0 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--afp-ev-icon);
	color: #fff;
	transition: background-color 0.4s ease;
}

.afp-event-info__text {
	font-size: 16px;
	font-weight: 500;
}

a.afp-event-info__row:hover .afp-event-info__icon {
	background-color: var(--afp-ev-teal);
}

a.afp-event-info__row:hover .afp-event-info__text {
	color: var(--afp-ev-teal);
}

/* Contact Form 7 inside the registration card. */
.afp-event-card--form .wpcf7 input[type="text"],
.afp-event-card--form .wpcf7 input[type="email"],
.afp-event-card--form .wpcf7 input[type="tel"],
.afp-event-card--form .wpcf7 textarea,
.afp-event-card--form .wpcf7 select {
	width: 100%;
}

.afp-event-card--form .wpcf7 input[type="submit"] {
	padding: 12px 40px;
	border: 0;
	border-radius: 50px;
	background-color: var(--afp-ev-purple);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.5s ease;
}

.afp-event-card--form .wpcf7 input[type="submit"]:hover {
	background-color: var(--afp-ev-dark);
}

/* ======================================================= responsive */
@media (max-width: 1299px) {
	.afp-events__content {
		padding: 80px 55px 55px;
	}
}

@media (max-width: 999px) {
	.afp-events__filters {
		margin-bottom: 40px;
	}
	.afp-events .afp-events__calendar-btn {
		padding: 0 30px;
	}
	.afp-events__item {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Image first on smaller screens, ribbon on top of it. */
	.afp-events__media {
		order: -1;
		clip-path: none;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
	.afp-events__media img {
		min-height: 0;
	}
	.afp-events__tags {
		right: auto;
		left: 0;
		justify-content: flex-start;
	}
	.afp-events__content {
		padding: 40px 40px 45px;
	}
	/* No image above to sit the ribbon on — make room for it instead. */
	.afp-events__item--no-image .afp-events__content {
		padding-top: 80px;
	}
	.afp-events .afp-events__title {
		font-size: 26px;
		margin-bottom: 20px;
	}
	.afp-event-single {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding: 50px 0 70px;
	}
	.afp-event-banner .afp-event-banner__title {
		max-width: 100%;
		font-size: 42px;
	}
}

@media (max-width: 767px) {
	.afp-events__filters {
		flex-direction: column;
		align-items: stretch;
	}
	.afp-events input.afp-events__search,
	.afp-events select.afp-events__category {
		flex: none;
		width: 100%;
		min-width: 0;
		height: 54px;
		font-size: 16px;
	}
	.afp-events .afp-events__calendar-btn {
		justify-content: center;
		min-height: 54px;
		font-size: 16px;
	}
	.afp-events__list {
		row-gap: 30px;
	}
	.afp-events__tag {
		padding: 8px 50px 8px 20px;
		font-size: 15px;
	}
	.afp-events__content {
		padding: 30px 24px 34px;
	}
	.afp-events__item--no-image .afp-events__content {
		padding-top: 65px;
	}
	.afp-events .afp-events__excerpt {
		padding: 20px 0;
		font-size: 16px;
	}
	.afp-event-banner {
		min-height: 200px;
	}
	.afp-event-banner .afp-event-banner__title {
		font-size: 32px;
	}
	.afp-event-single .afp-event-single__title {
		font-size: 30px;
	}
	.afp-event-card {
		padding: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.afp-events__media img,
	.afp-events__list {
		transition: none;
	}
	.afp-events__item:hover .afp-events__media img {
		transform: none;
	}
}