/**
 * BBP Team Cards widget styles.
 *
 * Deliberately has NO hardcoded padding or width of its own: Elementor's
 * native Advanced > Padding/Margin controls (which target
 * .elementor-widget-container) and the widget's own Width control are the
 * only source of spacing and sizing.
 */

.elementor-widget-bbp-team-cards {
	width: 100%;
}

.bbp-team-section {
	width: 100%;
}

.bbp-team-heading {
	font-family: var(--bbp-heading-font);
	font-weight: 400;
	font-size: 44px;
	line-height: 1.1;
	color: var(--bbp-text-white);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 40px;
}

.bbp-team-heading .bbp-text-gold {
	color: var(--bbp-gold);
}

.bbp-team-details {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
}

.bbp-team-details p {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--bbp-font-family);
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 16px;
}

.bbp-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--bbp-team-cols, 4), 1fr);
	gap: 15px;
}

.bbp-team-card {
	text-align: center;
}

.bbp-team-photo {
	position: relative;
	aspect-ratio: 375 / 477;
	border-radius: 11px;
	overflow: hidden;
	background-color: #000;
	background-image: var(--bbp-team-pattern);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* A second copy of the same pattern, layered with a gold gradient ON TOP
   of it using background-blend-mode: color — that mode takes hue/
   saturation from the TOP layer and luminosity from the BOTTOM one, so the
   gold gradient must be listed first for the tint to actually show (the
   pattern itself is grayscale and contributes no hue on its own). Faded in
   via opacity so it transitions smoothly — background-image itself can't
   be animated directly. */
.bbp-team-photo-tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(var(--bbp-team-hover-tint, var(--bbp-gold)), var(--bbp-team-hover-tint, var(--bbp-gold))), var(--bbp-team-pattern);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: color;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.bbp-team-watermark {
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	width: 78%;
	height: auto;
	z-index: 3;
	pointer-events: none;
}

.bbp-team-cutout {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom center;
	z-index: 2;
}

.bbp-team-footer {
	background-color: #000;
	border: 1px solid #373737;
	border-top: none;
	border-radius: 0 0 11px 11px;
	padding: 20px 12px;
	margin-top: -1px;
}

.bbp-team-name {
	font-family: var(--bbp-heading-font);
	font-weight: 700;
	font-size: 24px;
	color: var(--bbp-text-white);
}

.bbp-team-role {
	font-family: var(--bbp-font-family);
	font-size: 14px;
	color: var(--bbp-gold);
	margin-top: 4px;
}

/* Gold hover tint on the pattern panel — only on devices with a genuine
   hover input. On touch devices there is no hover state, so the panel
   simply stays as-is (the tint overlay stays at opacity 0). */
@media (hover: hover) {
	.bbp-team-card:hover .bbp-team-photo-tint,
	.bbp-team-card:focus-within .bbp-team-photo-tint {
		opacity: 1;
	}
}

@media (max-width: 1100px) {
	.bbp-team-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 760px) {
	.bbp-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bbp-team-heading {
		font-size: 32px;
	}
}

@media (max-width: 480px) {
	.bbp-team-grid {
		grid-template-columns: 1fr;
	}
}