/**
 * Player sections: [hcfp_homepage_section] and [hcfp_team_section].
 *
 * Both shortcodes share this layout. .hcfp-homepage-section and
 * .hcfp-team-section are only hooks for section specific styling.
 *
 * The layout classes the theme provides (mobile-flex-col, font-btn, color-white,
 * color-yellow, font-eyebrow, eyebrow-sort) are intentionally not styled here.
 *
 * @package HC_Futsal_Players
 * @since 0.4.0
 */

.hcfp-player-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: center
}

.hcfp-player-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex: 1 1 300px;
	box-sizing: border-box;
	max-width: 350px;
	height: 600px;
	padding: 20px;
	overflow: hidden;
}

/* Photo fills the card, the info box sits on top of it. */
.hcfp-player-card__image {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px !important;
}

.hcfp-player-card__image--empty {
	background-color: #312311;
	border-radius: 8px !important;
}

.hcfp-player-card__info {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background-color: #312311A6;
	border: 2px solid #FFFFFF3B;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-radius: 8px;
}

/* The theme's eyebrow class reorders these two, so no margins may collapse in. */
.hcfp-player-card__info>* {
	margin: 0;
}