/**
 * FB Custom Feed — responsive grid styles.
 * Wrapper classes you can target/override from your theme:
 *   .fbcf-wrapper  — outer container
 *   .fbcf-grid     — the post grid
 *   .fbcf-item     — a single post cell
 *   .fbcf-timeline — Page Plugin (timeline) container
 *   .fbcf-note     — caption under the timeline
 */

.fbcf-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Desktop: 3 columns. */
.fbcf-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}

.fbcf-item {
	display: flex;
	justify-content: center;
	width: 100%;
	min-width: 0; /* Prevents iframe overflow inside the grid track. */
}

/* Force native FB embeds to shrink to their grid cell. */
.fbcf-item .fb-post,
.fbcf-item .fb-post span,
.fbcf-item .fb-post iframe {
	max-width: 100% !important;
}

.fbcf-timeline {
	display: flex;
	justify-content: center;
	width: 100%;
}

.fbcf-timeline .fb-page,
.fbcf-timeline .fb-page span,
.fbcf-timeline .fb-page iframe {
	max-width: 100% !important;
}

.fbcf-note {
	font-size: 13px;
	color: #65676b;
	text-align: center;
	margin-top: 12px;
}

/* Tablet: 2 columns. */
@media (max-width: 992px) {
	.fbcf-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* Mobile: 1 column. */
@media (max-width: 600px) {
	.fbcf-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}