/**
 * First Grade Squad page — banner matches Life Members; player grid is page-specific.
 * Hero uses shared our-club.css (.wpcc-ourclub-hero).
 *
 * @package WPCC
 */

@font-face {
	font-family: "Zona Pro";
	src:
		url("https://static.wixstatic.com/ufonts/468312_09317abd36a14125b7f31e0c00c00c26/woff2/file.woff2") format("woff2"),
		url("https://static.wixstatic.com/ufonts/468312_09317abd36a14125b7f31e0c00c00c26/woff/file.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Zona Pro";
	src:
		url("https://static.wixstatic.com/ufonts/009665_09cfb294fa0c45f2b08f9ae77d869784/woff2/file.woff2") format("woff2"),
		url("https://static.wixstatic.com/ufonts/009665_09cfb294fa0c45f2b08f9ae77d869784/woff/file.woff") format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

.wpcc-first-grade-squad {
	--color_11: 255, 255, 255;
	--fgs-light: #f6f6f6;
	--fgs-text: #000000;
	--fgs-font-sans: Arial, Helvetica, sans-serif;
	--fgs-grid-gap-x: 30px;
	--fgs-grid-gap-y: 50px;
	--minViewportSize: 320;
	--maxViewportSize: 1920;
	--customScaleViewportLimit: min(100vw, calc(var(--maxViewportSize) * 1px));
}

/* Blue title bar — matches Life Members banner */
.wpcc-fgs-banner {
	--bg: var(--color_11);
	--alpha-bg: 0;
	--bg-overlay-color: rgb(42, 122, 183);
	padding: 44px 20px 48px;
	background-color: var(--section-corvid-background-color, var(--bg-overlay-color, rgba(var(--bg, var(--color_11)), var(--alpha-bg, 1))));
	text-align: center;
}

.wpcc-fgs-banner__title {
	margin: 0;
	font-family: var(--fgs-font-zona, "Zona Pro", sans-serif);
	font-size: 40px;
	font-weight: 800;
	font-style: normal;
	line-height: 1.4em;
	color: #ffffff;
}

/* Player grid — main content container matches Wix comp-ldvaxlf1 */
.wpcc-fgs-grid-section {
	background-color: var(--fgs-light);
}

.wpcc-fgs-grid-section__container {
	box-sizing: border-box;
	position: relative;
	padding: 5%;
	flex-grow: 1;
	display: grid;
	grid-template-rows: minmax(0px, max-content) minmax(250px, max-content);
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	max-width: 100%;
}

.wpcc-fgs-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--fgs-grid-gap-y) var(--fgs-grid-gap-x);
	width: 100%;
	max-width: 100%;
}

.wpcc-fgs-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wpcc-fgs-card__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #1a1a1a;
}

.wpcc-fgs-card__photo--placeholder {
	background: #d9d9d9;
}

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

.wpcc-fgs-card__name,
.wpcc-fgs-card__role {
	font-family: var(--fgs-font-sans);
	line-height: 1.4;
	min-height: 0vw;
	text-transform: uppercase;
	color: var(--fgs-text);
	letter-spacing: 0;
}

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

.wpcc-fgs-card__role {
	margin: 2px 0 0;
	font-size: calc(14px + 3 * (var(--customScaleViewportLimit) - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize)));
	font-weight: 700;
}

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

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

@media (max-width: 767px) {
	.wpcc-fgs-banner {
		padding: 32px 16px 36px;
	}

	.wpcc-fgs-banner__title {
		font-size: 22px;
	}

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