/**
 * Homepage Instagram Feed Component
 *
 * Instagram feed section for the homepage.
 */

/* ==========================================================================
   Instagram Feed - Base Styles
   ========================================================================== */

.homepage-instagram {
	padding: var(--spacing-section) 0;
	background: var(--color-neutral-50);
}

.homepage-instagram__header {
	text-align: center;
	margin-bottom: var(--spacing-8);
}

.homepage-instagram__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-4xl);
	font-weight: var(--weight-light);
	color: var(--color-neutral-900);
	margin-bottom: var(--spacing-2);
}

.homepage-instagram__username {
	font-size: var(--font-size-base);
	color: var(--color-neutral-500);
	margin-bottom: 0;
}

/* ==========================================================================
   Instagram Feed - Feed Container
   ========================================================================== */

.homepage-instagram__feed {
	margin-bottom: var(--spacing-8);
}

/* Override common Instagram plugin styles for consistency */
.homepage-instagram__feed .sbi_item {
	padding: var(--spacing-1) !important;
}

/* ==========================================================================
   Instagram Feed - Footer / CTA
   ========================================================================== */

.homepage-instagram__footer {
	text-align: center;
}

.homepage-instagram__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
}

/* ==========================================================================
   Instagram Feed - Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.homepage-instagram {
		padding: var(--spacing-12) 0;
	}

	.homepage-instagram__title {
		font-size: var(--font-size-3xl);
	}

	.homepage-instagram__header {
		margin-bottom: var(--spacing-6);
	}

	.homepage-instagram__feed {
		margin-bottom: var(--spacing-6);
	}
}