/**
 * Instagram block (blocks/content/instagram.php)
 *
 * Centered heading + subtitle + Follow button on a beige band, above the Smash
 * Balloon feed. The feed's columns/spacing come from its own shortcode/settings;
 * these rules only tune the wrapper + soften the photo corners.
 */

.dm-ig {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--dm-bg-default-secondary);
}

/* ---- Header --------------------------------------------------------- */
.dm-ig__head {
	text-align: center;
	max-width: 40rem;
	padding-inline: 16px;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.dm-ig__heading {
	margin: 0;
	color: var(--dm-fg-default-primary);                      /* Semantics/fg/default/primary */
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-style: normal;                  /* roman rest */
	font-size: clamp(2.25rem, 4.2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.dm-ig__heading em {
	font-style: italic;                  /* italic lead ("Follow us") */
}

/* Mobile: hold the heading to a tighter, centred wrap. */
@media (max-width: 767px) {
	.dm-ig__head {
		padding-top: 2rem;               /* more space above the heading */
	}

	.dm-ig__heading {
		max-width: 12ch;
		margin-inline: auto;
	}

	.dm-ig__subtitle {
		max-width: 18rem;
	}
}

.dm-ig__subtitle {
	margin: 1.25rem auto 0;
	max-width: 32rem;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 20px;
	line-height: 1.2;
}

.dm-ig__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding: 0 1.9rem;
	border-radius: 999px;
	background: var(--dm-bg-default-tertiary);
	color: var(--dm-fg-default-white);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

/* ---- Feed (full-width strip) ---------------------------------------- */
.dm-ig__feed {
	padding-inline: clamp(0.75rem, 1.4vw, 1.25rem);
}

/* Hide Smash Balloon's own header (avatar/username/bio) — we use dm-ig__head. */
.dm-ig__feed #sb_instagram .sb_instagram_header,
.dm-ig__feed .sb_instagram_header {
	display: none;
}

/* Soften the Smash Balloon photo corners to match the mockup. */
.dm-ig__feed #sb_instagram .sbi_photo,
.dm-ig__feed #sb_instagram .sbi_item img,
.dm-ig__feed #sb_instagram .sbi_item {
	border-radius: 8px;
}

.dm-ig__feed #sb_instagram .sbi_photo {
	overflow: hidden;
}

/* ---- Desktop: five posts, one row ------------------------------------ */
/* Fixed here rather than trusting the feed's own cols/num settings: always
   five equal 4:5 tiles in a single row, extra posts hidden. !important beats
   the plugin's grid classes and the inline px height its JS puts on .sbi_photo. */
@media (min-width: 1024px) {
	.dm-ig__feed #sb_instagram #sbi_images {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 16px !important;
		padding: 0 !important;
	}

	.dm-ig__feed #sb_instagram #sbi_images .sbi_item {
		width: auto !important;
		padding: 0 !important;
	}

	.dm-ig__feed #sb_instagram #sbi_images .sbi_item:nth-child(n + 6) {
		display: none !important;
	}

	.dm-ig__feed #sb_instagram .sbi_photo {
		height: auto !important;
	}

	.dm-ig__feed #sb_instagram .sbi_photo img {
		width: 100%;
		height: auto !important;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}
}

/* ---- Mobile + tablet: swipeable carousel ------------------------------ */
/* Below desktop the multi-column grid squashes the posts, so turn #sbi_images
   into a horizontal scroll-snap carousel. This overrides the plugin's grid
   columns AND the inline px height its JS sets on .sbi_photo — both need
   !important to win over the plugin rules / inline styles. */
@media (max-width: 1023.98px) {
	/* Drop the feed's own inline padding so the carousel isn't double-padded
	   left/right — #sbi_images supplies the single edge gutter below. */
	.dm-ig__feed {
		padding-inline: 0;
	}

	.dm-ig__feed #sb_instagram #sbi_images {
		display: grid !important;
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 80% !important;      /* slide width + peek of next */
		grid-template-rows: none !important;
		gap: 12px;
		padding: 12px;                          /* single, even left/right gutter */
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;                  /* Firefox: hide scrollbar */
	}

	.dm-ig__feed #sb_instagram #sbi_images::-webkit-scrollbar {
		display: none;                          /* WebKit: hide scrollbar */
	}

	.dm-ig__feed #sb_instagram #sbi_images .sbi_item {
		width: auto !important;                 /* let grid-auto-columns size it */
		scroll-snap-align: center;
	}

	/* Tablets: show more of the strip per swipe than a phone. */
	@media (min-width: 768px) {
		.dm-ig__feed #sb_instagram #sbi_images {
			grid-auto-columns: 40% !important;
		}
	}

	/* Cancel the JS-set inline height; hold a uniform portrait ratio instead. */
	.dm-ig__feed #sb_instagram .sbi_photo {
		height: auto !important;
	}

	.dm-ig__feed #sb_instagram .sbi_photo img {
		width: 100%;
		height: auto !important;
		aspect-ratio: 4 / 5;                    /* portrait posts; tweak to taste */
		object-fit: cover;
	}
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "Home Page - Small Desktop" > section container (1987:16300):
 * px-100 py-80 on the sand background; header gap 16 (heading 52/110%/-1.04px,
 * subtitle 20/120% full width); 40px to the Follow Us button, 40px to the
 * feed; five 4:5 tiles 16px apart with a 4px radius.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-ig {
		padding-block: 80px;
	}

	.dm-ig__head {
		/* The capped 1080 container already provides Figma's 100px gutter. */
		padding-inline: 0;
		max-width: none;
		margin-bottom: 40px;
	}

	.dm-ig__subtitle {
		margin-top: 16px;               /* Figma header gap */
		max-width: none;
	}

	.dm-ig__cta {
		margin-top: 40px;
		padding: 0 24px;
	}

	.dm-ig__feed {
		padding-inline: 0;
	}
}