/**
 * BWD Careers – front-end styles for the [bwd_careers] and [bwd_engagements] shortcodes.
 *
 * Fonts, colours and heading sizes come from your theme. The look can be adjusted by
 * overriding the custom properties below, for example in Appearance → Customize → Additional CSS:
 *
 *   .bwd-careers { --bwd-careers-radius: 0; --bwd-careers-image-ratio: 16 / 9; }
 *
 * To style everything yourself, switch this file off:
 *   add_filter( 'bwd_careers_load_css', '__return_false' );
 */

.bwd-careers {
	--bwd-careers-gap: 24px;
	--bwd-careers-padding: 24px;
	--bwd-careers-radius: 8px;
	--bwd-careers-border: 1px solid rgba(127, 127, 127, 0.25);
	--bwd-careers-background: transparent;
	--bwd-careers-image-ratio: 3 / 2;
	--bwd-careers-image-width: 36%; /* List layout: share of the card taken by the image. */
	--bwd-careers-image-fit: cover; /* Use "contain" to never crop images (e.g. logos). */
	container-type: inline-size;
	margin-bottom: 1.5em;
}

.bwd-careers__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bwd-careers-gap);
}

.bwd-careers--cols-2 .bwd-careers__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bwd-careers--cols-3 .bwd-careers__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bwd-careers--cols-4 .bwd-careers__list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bwd-careers__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var(--bwd-careers-background);
	border: var(--bwd-careers-border);
	border-radius: var(--bwd-careers-radius);
}

.bwd-careers__media {
	flex: 0 0 auto;
	margin: 0;
}

.bwd-careers__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--bwd-careers-image-ratio);
	object-fit: var(--bwd-careers-image-fit);
	border-radius: 0;
}

.bwd-careers__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--bwd-careers-padding);
}

.bwd-careers__title {
	margin: 0 0 0.5em;
}

.bwd-careers__description > :first-child {
	margin-top: 0;
}

.bwd-careers__description > :last-child {
	margin-bottom: 0;
}

.bwd-careers__description img {
	max-width: 100%;
	height: auto;
}

/*
 * List layout: image inset beside the text, keeping its shape however long the description is
 * (job ads are often long, and stretching the image to the card height would crop it to a sliver).
 */
.bwd-careers--list .bwd-careers__item.has-image {
	flex-direction: row;
	align-items: flex-start;
}

.bwd-careers--list .bwd-careers__media {
	box-sizing: border-box;
	width: var(--bwd-careers-image-width);
	padding: var(--bwd-careers-padding) 0 var(--bwd-careers-padding) var(--bwd-careers-padding);
}

.bwd-careers--list .bwd-careers__media img {
	border-radius: calc(var(--bwd-careers-radius) * 0.75);
}

/* Shown when there are no published jobs. */
.bwd-careers__empty {
	margin: 0;
	padding: var(--bwd-careers-padding);
	border: 1px dashed rgba(127, 127, 127, 0.4);
	border-radius: var(--bwd-careers-radius);
	text-align: center;
}

/*
 * Responsive: based on the width of the area the shortcode sits in (not the whole screen),
 * so cards never get squeezed below roughly 210px, whether the page is full width or has a sidebar.
 */
@container (max-width: 960px) {
	.bwd-careers--cols-4 .bwd-careers__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (max-width: 720px) {
	.bwd-careers--cols-3 .bwd-careers__list,
	.bwd-careers--cols-4 .bwd-careers__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Narrow: list cards stack like grid cards, with the image full width on top. */
@container (max-width: 520px) {
	.bwd-careers--grid .bwd-careers__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bwd-careers--list .bwd-careers__item.has-image {
		flex-direction: column;
		align-items: stretch;
	}

	.bwd-careers--list .bwd-careers__media {
		width: auto;
		padding: 0;
	}

	.bwd-careers--list .bwd-careers__media img {
		border-radius: 0;
	}
}

/* Older browsers without container queries: fall back to the screen width. */
@supports not (container-type: inline-size) {
	@media (max-width: 960px) {
		.bwd-careers--cols-4 .bwd-careers__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (max-width: 720px) {
		.bwd-careers--cols-3 .bwd-careers__list,
		.bwd-careers--cols-4 .bwd-careers__list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 520px) {
		.bwd-careers--grid .bwd-careers__list {
			grid-template-columns: minmax(0, 1fr);
		}

		.bwd-careers--list .bwd-careers__item.has-image {
			flex-direction: column;
			align-items: stretch;
		}

		.bwd-careers--list .bwd-careers__media {
			width: auto;
			padding: 0;
		}

		.bwd-careers--list .bwd-careers__media img {
			border-radius: 0;
		}
	}
}

/* ==========================================================================
 * Engagements – [bwd_engagements]
 *
 * Centred cards, up to three per row: image, event name, then the details.
 * Adjust the look with the custom properties below, for example:
 *
 *   .bwd-engagements { --bwd-engagements-background: #0a1821; --bwd-engagements-image-width: 200px; }
 * ========================================================================== */

.bwd-engagements {
	--bwd-engagements-gap: 24px;
	--bwd-engagements-padding: 28px;
	--bwd-engagements-radius: 10px;
	--bwd-engagements-background: rgba(32, 74, 152, 0.9);
	--bwd-engagements-title-color: #fff;
	--bwd-engagements-text-color: rgba(255, 255, 255, 0.75);
	--bwd-engagements-image-width: 150px;
	--bwd-engagements-max-width: 420px; /* Widest a card gets when fewer cards fit per row. */
	container-type: inline-size;
}

.bwd-engagements__list {
	--bwd-engagements-columns: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bwd-engagements-gap);
}

.bwd-engagements--cols-1 .bwd-engagements__list {
	--bwd-engagements-columns: 1;
}

.bwd-engagements--cols-2 .bwd-engagements__list {
	--bwd-engagements-columns: 2;
}

.bwd-engagements--cols-4 .bwd-engagements__list {
	--bwd-engagements-columns: 4;
}

.bwd-engagements__item {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 calc((100% - (var(--bwd-engagements-columns) - 1) * var(--bwd-engagements-gap)) / var(--bwd-engagements-columns));
	flex-direction: column;
	align-items: center;
	gap: 20px;
	min-width: 0;
	max-width: var(--bwd-engagements-max-width);
	margin: 0;
	padding: var(--bwd-engagements-padding);
	overflow: hidden;
	background: var(--bwd-engagements-background);
	border-radius: var(--bwd-engagements-radius);
	color: var(--bwd-engagements-text-color);
	text-align: center;
}

/* Hidden by the browser once the event has started (see the footer script). */
.bwd-engagements__item[hidden],
.bwd-engagements__empty[hidden] {
	display: none !important;
}

.bwd-engagements__media {
	width: var(--bwd-engagements-image-width);
	max-width: 100%;
	margin: 0;
}

.bwd-engagements__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}

.bwd-engagements__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.bwd-engagements .bwd-engagements__title {
	margin: 0;
	color: var(--bwd-engagements-title-color);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.34;
	text-align: center;
}

.bwd-engagements .bwd-engagements__details {
	font-size: 1rem;
	line-height: 1.65;
}

.bwd-engagements .bwd-engagements__detail {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.bwd-engagements .bwd-engagements__label {
	color: inherit;
	font-weight: 700;
}

/* Shown when there are no upcoming engagements. */
.bwd-engagements .bwd-engagements__empty {
	margin: 0;
	padding: var(--bwd-engagements-padding);
	border: 1px dashed rgba(127, 127, 127, 0.4);
	border-radius: var(--bwd-engagements-radius);
	text-align: center;
}

/* Fewer cards per row when the area the shortcode sits in gets narrow. */
@container (max-width: 1111px) {
	.bwd-engagements--cols-4 .bwd-engagements__list {
		--bwd-engagements-columns: 3;
	}
}

@container (max-width: 827px) {
	.bwd-engagements--cols-3 .bwd-engagements__list,
	.bwd-engagements--cols-4 .bwd-engagements__list {
		--bwd-engagements-columns: 2;
	}
}

@container (max-width: 543px) {
	.bwd-engagements .bwd-engagements__list {
		--bwd-engagements-columns: 1;
	}

	.bwd-engagements .bwd-engagements__title {
		font-size: 1.3125rem;
		line-height: 1.25;
	}
}

/* Older browsers without container queries: fall back to the screen width. */
@supports not (container-type: inline-size) {
	@media (max-width: 1151px) {
		.bwd-engagements--cols-4 .bwd-engagements__list {
			--bwd-engagements-columns: 3;
		}
	}

	@media (max-width: 867px) {
		.bwd-engagements--cols-3 .bwd-engagements__list,
		.bwd-engagements--cols-4 .bwd-engagements__list {
			--bwd-engagements-columns: 2;
		}
	}

	@media (max-width: 583px) {
		.bwd-engagements .bwd-engagements__list {
			--bwd-engagements-columns: 1;
		}

		.bwd-engagements .bwd-engagements__title {
			font-size: 1.3125rem;
			line-height: 1.25;
		}
	}
}