/**
 * Media Team page — hero uses shared our-club.css (.wpcc-ourclub-hero).
 * Grid layout matches https://www.wpcc.net.au/mediateam
 *
 * @package WPCC
 */

.wpcc-media-team {
	--mt-bg: #ffffff;
	--mt-text: #000000;
	--mt-role: #282828;
	--mt-font-sans: Arial, Helvetica, sans-serif;
	--mt-grid-gap: 30px;
	--minViewportSize: 320;
	--maxViewportSize: 1920;
	--customScaleViewportLimit: min(100vw, calc(var(--maxViewportSize) * 1px));
}

/* Member grid — white section with equal 5% padding on all sides */
.wpcc-media-team-grid-section {
	background-color: var(--mt-bg);
}

.wpcc-media-team-grid-section__container {
	box-sizing: border-box;
	position: relative;
	/* padding: 5%; */
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 7%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 7%;
}

/*
 * 8-column grid: each card spans 2 columns (4 per row).
 * Last row of 3 is centered by starting at column 2 (cols 1 + 8 stay empty).
 */
.wpcc-media-team-grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: var(--mt-grid-gap);
	width: 100%;
	max-width: 100%;
}

.wpcc-media-team-card {
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	min-width: 0;
	text-align: center;
}

.wpcc-media-team-card:nth-child(4n + 1):nth-last-child(3) {
	grid-column: 2 / span 2;
}

.wpcc-media-team-card__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #000000;
}

.wpcc-media-team-card__photo--placeholder {
	background: #d9d9d9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
}

.wpcc-media-team-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

.wpcc-media-team-card__name,
.wpcc-media-team-card__role {
	font-family: var(--mt-font-sans);
	line-height: 1.4;
	color: var(--mt-text);
	letter-spacing: 0;
}

.wpcc-media-team-card__name {
	margin: 12px 0 0;
	font-size: calc(20px + 5 * (var(--customScaleViewportLimit) - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize)));
	font-weight: 700;
	font-style: normal;
}

.wpcc-media-team-card__role {
	margin: 2px 0 0;
	font-size: calc(14px + 3 * (var(--customScaleViewportLimit) - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize)));
	font-weight: 400;
	font-style: italic;
	color: var(--mt-role);
}

@media (max-width: 1200px) {
	.wpcc-media-team-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.wpcc-media-team-card {
		grid-column: span 2;
	}

	.wpcc-media-team-card:nth-child(4n + 1):nth-last-child(3) {
		grid-column: span 2;
	}

	.wpcc-media-team-card:nth-child(3n + 1):nth-last-child(3) {
		grid-column: 2 / span 2;
	}
}

@media (max-width: 900px) {
	.wpcc-media-team-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wpcc-media-team-card {
		grid-column: span 2;
	}

	.wpcc-media-team-card:nth-child(3n + 1):nth-last-child(3),
	.wpcc-media-team-card:nth-child(4n + 1):nth-last-child(3) {
		grid-column: span 2;
	}

	.wpcc-media-team-card:nth-child(2n + 1):nth-last-child(1) {
		grid-column: 2 / span 2;
	}
}

@media (max-width: 767px) {
	.wpcc-media-team-grid-section__container {
		padding: 5% 16px;
		/* padding-top: 7%;
		padding-left: 0%;
		padding-right: 0%;
		padding-bottom: 7%; */
	}

	.wpcc-media-team-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wpcc-media-team-card,
	.wpcc-media-team-card:nth-child(4n + 1):nth-last-child(3),
	.wpcc-media-team-card:nth-child(3n + 1):nth-last-child(3),
	.wpcc-media-team-card:nth-child(2n + 1):nth-last-child(1) {
		grid-column: 1 / -1;
	}
}