/**
 * BBP Media + Content 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/Content Width
 * layout controls are the only source of spacing and sizing.
 *
 * Assumes .bbp-btn / .bbp-btn-primary / .bbp-btn-secondary / .bbp-text-gold
 * are already defined in hero.css (loaded before this file) — not redefined
 * here, just reused.
 */

.elementor-widget-bbp-media-content {
	width: 100%;
}

/* Elementor's Padding control targets exactly this element, so the
   background/texture live here too — the padding the user sets IS the
   visible background area, instead of fighting a hardcoded value. */
.elementor-widget-bbp-media-content > .elementor-widget-container {
	position: relative;
	overflow: hidden;
}

.elementor-widget-bbp-media-content > .elementor-widget-container:has(.bbp-media-content--dark) {
	background-color: var(--bbp-bg-section);
}

.elementor-widget-bbp-media-content > .elementor-widget-container:has(.bbp-media-content--gold) {
	background-color: var(--bbp-gold);
}

.bbp-media-content-texture {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.15;
	mix-blend-mode: luminosity;
	pointer-events: none;
}

.bbp-media-content-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 80px;
}

.bbp-media-content--media-none .bbp-media-content-inner {
	display: block;
}

.bbp-media-content-media {
	flex: 0 0 45%;
	order: 2;
}

.bbp-media-content-media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: cover;
}

.bbp-media-content--media-left .bbp-media-content-media {
	order: 0;
}

.bbp-media-content-text {
	flex: 1;
	min-width: 0;
}

.bbp-media-content--align-center .bbp-media-content-text {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.bbp-media-content-eyebrow {
	color: var(--bbp-gold);
	font-family: var(--bbp-font-family);
	font-weight: 600;
	font-size: 16px;
	margin: 0 0 12px;
}

.bbp-media-content-heading {
	font-family: var(--bbp-heading-font);
	font-weight: 800;
	font-size: 42px;
	line-height: 1.1;
	color: var(--bbp-text-white);
	text-transform: uppercase;
	margin: 0 0 20px;
}

.bbp-media-content--gold .bbp-media-content-heading,
.bbp-media-content--gold .bbp-media-content-paragraph p,
.bbp-media-content--gold .bbp-media-content-eyebrow {
	color: #fff;
}

.bbp-media-content--gold .bbp-media-content-heading .bbp-text-gold {
	color: #000;
}

.bbp-media-content--gold .bbp-btn-primary {
	background: #000;
	color: var(--bbp-gold);
}

.bbp-media-content-paragraph 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-media-content-buttons {
	display: flex;
	gap: 10px;
	margin-top: 28px;
	flex-wrap: wrap;
}

.bbp-media-content--align-center .bbp-media-content-buttons {
	justify-content: center;
}

@media (max-width: 900px) {
	.bbp-media-content-inner {
		flex-direction: column;
		gap: 32px;
	}

	.bbp-media-content-media {
		order: 0 !important;
		flex-basis: auto;
		width: 100%;
	}

	.bbp-media-content-heading {
		font-size: 30px;
	}
}