/* KBH Instagram — homepage feed embed, click-to-load (assets/js/instagram.js).
   A branded placeholder card (.kbh-ig) with a koningsblauw button; on click the
   LightWidget feed <iframe> is injected (or the profile opens if no widget is
   configured). Mirrors the Facebook section's look. */

:root {
	--kbh-ig-blue: var(--wp--preset--color--koningsblauw, #23388e);
	--kbh-ig-red: var(--wp--preset--color--venetiaans-rood, #a42a04);
	--kbh-ig-border: var(--wp--preset--color--zilvergrijs, #c0c0c0);
	--kbh-ig-ink: var(--wp--preset--color--zwart, #000);
}

/* ---- Placeholder card ----------------------------------------------- */
.kbh-ig {
	max-width: 540px;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
	padding: var(--wp--preset--spacing--50, 3rem) var(--wp--preset--spacing--40, 1.5rem);
	text-align: center;
	background: var(--wp--preset--color--wit, #fff);
	border: 1px solid var(--kbh-ig-border);
	border-radius: 8px;
}

/* ---- Load button ---------------------------------------------------- */
.kbh-ig-load {
	display: inline-block;
	cursor: pointer;
	padding: 0.75em 1.5em;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--wit, #fff);
	background: var(--kbh-ig-blue);
	border: 0;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}
.kbh-ig-load:hover,
.kbh-ig-load:focus-visible {
	background: var(--kbh-ig-red);
}

/* ---- Privacy note + fallback ---------------------------------------- */
.kbh-ig-note {
	margin: var(--wp--preset--spacing--20, 0.75rem) 0 0;
	font-size: 0.8125rem;
	color: var(--kbh-ig-ink);
	opacity: 0.7;
}
.kbh-ig-fallback {
	margin: var(--wp--preset--spacing--20, 0.75rem) 0 0;
	font-size: 0.875rem;
}
.kbh-ig-fallback a {
	color: var(--kbh-ig-blue);
}

/* ---- Loaded iframe -------------------------------------------------- */
/* Once loaded the card sheds its chrome; the widget carries its own frame. */
.kbh-ig.is-loaded {
	padding: 0;
	background: none;
	border: 0;
}
.kbh-ig iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	border: none;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.kbh-ig-load { transition: none; }
}