/**
 * Instagram section – front page Reels embeds
 */

.instagram-section {
	padding-block: var(--space-4xl);
	background: var(--color-bg-lavender-light, #f7f3fb);
}

.instagram-section__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xl);
}

.instagram-section__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	text-align: center;
}

.instagram-section__icon {
	width: 40px;
	height: 40px;
}

.instagram-section__title {
	margin: 0;
	line-height: var(--line-height-tight);
}

.instagram-section__title .section-heading__en {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.instagram-section__title .section-heading__ja {
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
}

.instagram-section__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 1040px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xl);
	align-items: start;
	justify-items: center;
}

.instagram-section__item {
	min-width: 0;
	width: 100%;
	max-width: 326px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.instagram-section__embed {
	width: 100%;
	aspect-ratio: 9 / 16;
	max-height: 580px;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-bg-white);
	box-shadow: var(--shadow-sm);
}

.instagram-section__embed blockquote.instagram-media,
.instagram-section__embed iframe {
	margin: 0 auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

.instagram-section__fallback-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.instagram-section__empty {
	margin: 0;
	text-align: center;
	font-size: var(--font-size-base);
	color: var(--color-text-body);
	line-height: var(--line-height-loose);
}

.instagram-section__footer {
	display: flex;
	justify-content: center;
}

@media (max-width: 1024px) {
	.instagram-section__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-lg);
		max-width: 720px;
	}
}

@media (max-width: 768px) {
	.instagram-section {
		padding-block: var(--space-3xl);
	}

	.instagram-section__inner {
		gap: var(--space-2xl);
	}

	.instagram-section__grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		max-width: 360px;
	}

	.instagram-section__item:nth-child(n + 2) {
		display: none;
	}

	.instagram-section__embed {
		max-height: 640px;
	}
}