/**
 * Board page — Figma frame `Board` (270:2), 1880px artboard.
 * Hero uses shared our-club.css (.wpcc-ourclub-hero).
 *
 * @package WPCC
 */

.wpcc-board {
	--board-bg: #ffffff;
	--board-text: #000000;
	--board-role-opacity: 0.6;
	--board-icon-opacity: 0.7;
	--board-card-w: 340px;
	--board-gap-x: 46px;
	--board-gap-y: 80px;
	--board-section-pt: 78px;
	--board-section-pb: 80px;
}

/* Grid section — Figma Group 499 at y=605, 78px below hero */
.wpcc-board-grid-section {
	background-color: var(--board-bg);
}

.wpcc-board-grid-section__container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wpcc-container, 1500px);
	margin: 0 auto;
	padding: var(--board-section-pt) 20px var(--board-section-pb);
}

.wpcc-board-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, var(--board-card-w)));
	gap: var(--board-gap-y) var(--board-gap-x);
	justify-content: center;
	width: 100%;
}

.wpcc-board-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	text-align: center;
}

.wpcc-board-card__photo {
	width: 100%;
	max-width: var(--board-card-w);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #000000;
}

.wpcc-board-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-board-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

/* Name — Figma 18px Inter Bold, uppercase, line-height 27px */
.wpcc-board-card__name {
	margin: 20px 0 0;
	font-family: var(--wpcc-font);
	font-size: 18px;
	font-weight: 700;
	font-style: normal;
	line-height: 27px;
	color: var(--board-text);
	text-transform: uppercase;
	letter-spacing: 0;
}

/* Role — Figma 12px Inter Regular, uppercase, 60% opacity */
.wpcc-board-card__role {
	margin: 2px 0 0;
	font-family: var(--wpcc-font);
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	line-height: 27px;
	color: var(--board-text);
	opacity: var(--board-role-opacity);
	text-transform: uppercase;
	letter-spacing: 0;
}

/* Social icons — Figma 33×33px, 70% opacity, ~14px gap */
.wpcc-board-card__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 9px 0 0;
}

.wpcc-board-card__social-link {
	display: block;
	flex-shrink: 0;
	width: 33px;
	height: 33px;
	opacity: var(--board-icon-opacity);
	transition: opacity 0.2s ease;
}

.wpcc-board-card__social-link:hover,
.wpcc-board-card__social-link:focus-visible {
	opacity: 1;
}

.wpcc-board-card__social-link img {
	display: block;
	width: 33px;
	height: 33px;
}

/* LinkedIn — Vector.png is logo only; keep 33px circle like phone/email icons */
.wpcc-board-card__social-link--linkedin {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid #000000;
	border-radius: 50%;
}

.wpcc-board-card__social-link--linkedin img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

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

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

@media (max-width: 900px) {
	.wpcc-board-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 30px;
	}
}

@media (max-width: 767px) {
	.wpcc-board {
		--board-section-pt: 48px;
		--board-section-pb: 48px;
	}

	.wpcc-board-grid-section__container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wpcc-board-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}