/* Instagram carousel on the home page (inc/instagram-carousel.php).
   The free Smash Balloon grid, laid out as one swipeable row. */

/* Sits where the photo wall was: the media half of the social row. */
.e-con-inner > .elementor-widget-shortcode.pond-instagram,
.e-con > .elementor-widget-shortcode.pond-instagram {
	--container-widget-width: auto;
	width: auto;
	max-width: none;
	flex: 1 1 340px;
	min-width: 0;
}

.pond-instagram #sb_instagram {
	padding: 0 !important;
	width: 100% !important;
}

/* Account header (avatar + @handle), light on the blue section. */
.pond-instagram .sb_instagram_header {
	padding: 0 22px 14px !important;
	margin: 0 !important;
	float: none !important;
}

.pond-instagram .sb_instagram_header a,
.pond-instagram .sb_instagram_header h3,
.pond-instagram .sb_instagram_header p,
.pond-instagram .sb_instagram_header .sbi_bio,
.pond-instagram .sb_instagram_header .sbi_bio_info {
	color: var(--pond-white, #fff) !important;
	text-decoration: none;
}

.pond-instagram .sb_instagram_header h3 { font-weight: 700; }
.pond-instagram .sb_instagram_header a:hover h3 { color: var(--pond-amber, #FFC23C) !important; }

.pond-instagram .sb_instagram_header .sbi_header_img {
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
}

@media (max-width: 767px) {
	.pond-instagram .sb_instagram_header { padding-inline: 0 !important; }
}

/* The section already has its own Instagram button. */
.pond-instagram #sbi_load,
.pond-instagram .sbi_load_btn,
.pond-instagram .sbi_follow_btn { display: none !important; }

.pond-ig__frame {
	position: relative;
	padding-inline: 22px;
}

.pond-instagram #sb_instagram #sbi_images {
	display: flex !important;
	gap: 14px !important;
	grid-template-columns: none !important;
	padding: 4px 0 !important;
	overflow-x: auto;
	/* Vertical gestures belong to the page, not the track. */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pond-instagram #sb_instagram #sbi_images::-webkit-scrollbar { display: none; }

/* Two posts a view beside the copy; more once the row goes full width. */
.pond-instagram #sb_instagram #sbi_images > .sbi_item {
	flex: 0 0 calc((100% - 14px) / 2) !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	scroll-snap-align: start;
	border-radius: 6px;
	border: 2px solid rgba(255, 255, 255, .22);
	overflow: hidden;
}

.pond-instagram .sbi_photo_wrap,
.pond-instagram .sbi_photo {
	display: block;
	aspect-ratio: 1 / 1;
	height: auto !important;
}

.pond-instagram .sbi_photo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.pond-ig__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px !important;
	height: 38px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pond-white, #fff);
	color: var(--pond-blue, #0060AE);
	border: 1px solid var(--pond-line, #E3ECF5) !important;
	border-radius: 50% !important;
	padding: 0 !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(1, 58, 107, .25);
	transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}

.pond-ig__arrow:hover:not(:disabled),
.pond-ig__arrow:focus-visible {
	background: var(--pond-amber, #FFC23C);
	color: var(--pond-blue-dark, #004E8C);
}

.pond-ig__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.pond-ig__arrow--prev { left: 0; }
.pond-ig__arrow--next { right: 0; }

@media (max-width: 1024px) {
	.pond-instagram #sb_instagram #sbi_images > .sbi_item { flex-basis: calc((100% - 28px) / 3) !important; }
}

@media (max-width: 767px) {
	.pond-ig__frame { padding-inline: 0; }
	.pond-instagram #sb_instagram #sbi_images { gap: 10px !important; }
	/* A peek of the next post says "swipe". */
	.pond-instagram #sb_instagram #sbi_images > .sbi_item { flex-basis: 72% !important; }
	.pond-ig__arrow { width: 34px !important; height: 34px !important; font-size: 22px; }
	.pond-ig__arrow--prev { left: 6px; }
	.pond-ig__arrow--next { right: 6px; }
}

/* ---- light version: white band under a store product ---- */

.pond-store-extras__block--instagram { background: var(--pond-white, #fff); }

.pond-instagram--light .sb_instagram_header {
	display: flex !important;
	justify-content: center;
	padding: 0 0 22px !important;
}

.pond-instagram--light .sb_instagram_header a,
.pond-instagram--light .sb_instagram_header h3,
.pond-instagram--light .sb_instagram_header p,
.pond-instagram--light .sb_instagram_header .sbi_bio,
.pond-instagram--light .sb_instagram_header .sbi_bio_info {
	color: var(--pond-blue, #0060AE) !important;
	text-align: left;
}

.pond-instagram--light .sb_instagram_header a:hover h3 { color: var(--pond-blue-dark, #004E8C) !important; text-decoration: underline; }

.pond-instagram--light .sb_instagram_header .sbi_header_img { border-color: var(--pond-line, #E3ECF5); }

.pond-instagram--light .pond-ig__frame { padding-inline: 44px; }

.pond-instagram--light #sb_instagram #sbi_images > .sbi_item {
	flex-basis: calc((100% - 42px) / 4) !important;
	border: 1px solid var(--pond-line, #E3ECF5);
}

.pond-instagram--light .pond-ig__arrow:hover:not(:disabled),
.pond-instagram--light .pond-ig__arrow:focus-visible {
	background: var(--pond-blue, #0060AE);
	color: var(--pond-white, #fff);
}

@media (max-width: 1024px) {
	.pond-instagram--light #sb_instagram #sbi_images > .sbi_item { flex-basis: calc((100% - 28px) / 3) !important; }
}

@media (max-width: 767px) {
	.pond-instagram--light .pond-ig__frame { padding-inline: 0; }
	.pond-instagram--light #sb_instagram #sbi_images > .sbi_item { flex-basis: 72% !important; }
}

@media (prefers-reduced-motion: reduce) {
	.pond-instagram #sb_instagram #sbi_images { scroll-behavior: auto; }
}