/**
 * BBP About Grid widget styles.
 *
 * Deliberately has NO hardcoded outer padding of its own: Elementor's
 * native Advanced > Padding control (which targets
 * .elementor-widget-container) is the only source of outer spacing.
 *
 * .bbp-btn / .bbp-btn-primary / .bbp-btn-secondary / .bbp-text-gold are
 * defined in hero.css and reused here, not redefined.
 */

.elementor-widget-bbp-about-grid {
	width: 100%;
}

.bbp-about-grid-section {
	width: 100%;
	max-width: var(--bbp-content-width);
	margin: 0 auto;
	text-align: center;
}

.bbp-about-grid-heading {
	font-family: var(--bbp-heading-font);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: var(--bbp-text-white);
	text-transform: uppercase;
	margin: 0 0 24px;
}

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

.bbp-about-grid-text {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.bbp-about-grid-text p {
	font-family: var(--bbp-font-family);
	font-size: 16px;
	line-height: 1.7;
	color: var(--bbp-text-muted);
	margin: 0 0 12px;
}

.bbp-about-grid-text p:last-child {
	margin-bottom: 0;
}

.bbp-about-grid-text--top {
	margin-bottom: 40px;
}

.bbp-about-grid-text--bottom {
	margin-top: 40px;
}

/**
 * Photos + their paired paragraphs all live as flat sibling grid items
 * inside .bbp-about-grid-images (see the widget's render() method) —
 * grid-template-areas alone decides where each one visually sits, so it
 * can put a paragraph right next to a specific photo on mobile without
 * any DOM reordering, negative margins, or absolute positioning.
 */
.bbp-about-grid-images {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-areas:
		"text-top    text-top    text-top"
		"img-left    img-center  img-right"
		"text-bottom text-bottom text-bottom";
	column-gap: 24px;
}

.bbp-about-grid-text--top {
	grid-area: text-top;
}

.bbp-about-grid-image--left {
	grid-area: img-left;
}

.bbp-about-grid-image--center {
	grid-area: img-center;
}

.bbp-about-grid-image--right {
	grid-area: img-right;
}

.bbp-about-grid-text--bottom {
	grid-area: text-bottom;
}

.bbp-about-grid-image {
	height: 460px;
	border-radius: 20px;
	overflow: hidden;
}

.bbp-about-grid-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bbp-about-grid-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 40px;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.bbp-about-grid-images {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"text-top    text-top"
			"img-left    img-right"
			"img-center  img-center"
			"text-bottom text-bottom";
	}

	/* !important: this widget's "Row Height" Style control also sets this
	   (default 460px), compiled by Elementor into a more specific
	   `.elementor-element-{id} .bbp-about-grid-image` rule that isn't
	   itself scoped to any breakpoint — it would otherwise silently win
	   over this plain class selector at every viewport width. */
	.bbp-about-grid-image {
		height: 220px !important;
	}
}

@media (max-width: 600px) {
	.bbp-about-grid-heading {
		font-size: 28px;
	}

	.bbp-about-grid-images {
		grid-template-columns: 1fr;
		grid-template-areas:
			"img-left"
			"img-center"
			"img-right";
	}

	.bbp-about-grid-image {
		height: 220px !important; /* see !important note above */
	}

	/* True overlap: alias each paragraph's grid-area to its target
	   photo's own area name, so both occupy — and stretch to fill — the
	   exact same grid cell, stacked on top of each other. */
	.bbp-about-grid-text--top {
		grid-area: img-left;
	}

	.bbp-about-grid-text--bottom {
		grid-area: img-right;
	}

	.bbp-about-grid-image--left,
	.bbp-about-grid-image--right {
		position: relative;
		z-index: 1;
	}

	.bbp-about-grid-text--top,
	.bbp-about-grid-text--bottom {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.55);
		border-radius: 20px;
		padding: 24px 20px;
		/* !important: this widget's "Spacing Around Photos" Style control
		   also sets margin here (compiled by Elementor into a more
		   specific per-instance rule); without resetting it, the text
		   would be pushed off-center in the shared cell instead of
		   properly filling/overlapping it. */
		margin: 0 !important;
	}

	.bbp-about-grid-text--top p,
	.bbp-about-grid-text--bottom p {
		color: var(--bbp-text-white);
	}
}