/*
 * Instagram Batch Embed — front-end styles.
 *
 * Default layout: one large image per row, with a subtle
 * Instagram citation underneath. Not a heavy "embed box".
 */

/* ---------- Grid wrapper ---------- */
.igbe-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	margin: 2em 0;
}

/* Optional multi-column grid (e.g. columns="3"). */
.igbe-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 1.25em; }
.igbe-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 1.25em; }
.igbe-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.25em; }

/* Single-column = large image per row. Constrain to a comfortable reading width. */
.igbe-grid--single {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 600px) {
	.igbe-grid--2,
	.igbe-grid--3,
	.igbe-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* ---------- Item card ---------- */
.igbe-item {
	margin: 0;
	padding: 0;
}

/* The media area: no border, no shadow — looks like a clean inline image. */
.igbe-item__media {
	margin: 0;
	line-height: 0;
	background: #f4f4f5;
	border-radius: 4px;
	overflow: hidden;
}

.igbe-item__link {
	display: block;
}

.igbe-item__link img {
	width: 100%;
	height: auto;
	display: block;
	line-height: 1;
	border-radius: 4px;
	transition: opacity 0.2s ease;
}

.igbe-item__link:hover img {
	opacity: 0.92;
}

/* Text-only fallback link (shown when caption is hidden and no image). */
.igbe-item__link--text {
	display: block;
	padding: 2em 1.5em;
	background: #f4f4f5;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	color: #0095f6;
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.5;
}

/* Raw oEmbed HTML / iframe (video or fallback). */
.igbe-item__raw {
	width: 100%;
	overflow: hidden;
}

.igbe-item__raw iframe,
.igbe-item__raw blockquote {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

.igbe-item__raw iframe {
	min-height: 520px;
}

/* ---------- Citation footer ---------- */
.igbe-item__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0.75em;
	margin-top: 0.6em;
	font-size: 0.85em;
	color: #6b7280; /* muted gray */
	line-height: 1.4;
}

.igbe-item__caption {
	flex: 1 1 100%;
	color: #374151;
}

/* ---------- Collapsible caption (caption_mode="collapse") ---------- */
/* Native <details>/<summary> — no JS, accessible, works everywhere. */
.igbe-item__caption-toggle {
	flex: 1 1 100%;
	margin-top: 0.2em;
}

.igbe-item__caption-toggle > summary {
	display: inline-block;
	list-style: none; /* hide default triangle */
	cursor: pointer;
	font-size: 0.85em;
	color: #6b7280;
	user-select: none;
	padding: 0.15em 0;
	border-bottom: 1px dashed transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

/* Custom +/- marker instead of the default disclosure triangle. */
.igbe-item__caption-toggle > summary::-webkit-details-marker {
	display: none;
}

.igbe-item__caption-toggle > summary::before {
	content: "+ ";
	font-weight: 700;
	color: #9ca3af;
}

.igbe-item__caption-toggle[open] > summary::before {
	content: "− ";
}

.igbe-item__caption-toggle > summary:hover {
	color: #374151;
	border-bottom-color: #d1d5db;
}

/* The revealed caption text. */
.igbe-item__caption-toggle .igbe-item__caption {
	display: block;
	margin-top: 0.5em;
	padding: 0.6em 0.8em;
	background: #f9fafb;
	border-left: 3px solid #e5e7eb;
	border-radius: 0 4px 4px 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 0.9em;
	color: #4b5563;
	line-height: 1.5;
}

.igbe-item__via {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.igbe-item__via a {
	color: #6b7280;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.igbe-item__via a:hover {
	color: #374151;
	border-bottom-color: #d1d5db;
}

/* Small Instagram glyph before the citation — a subtle brand cue. */
.igbe-item__via::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: #6b7280;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.1-1.1.1-1.7.2-2.1.4-.5.2-.9.4-1.3.8-.4.4-.6.8-.8 1.3-.2.4-.3 1-.4 2.1-.1 1.2-.1 1.6-.1 4.7s0 3.5.1 4.7c.1 1.1.2 1.7.4 2.1.2.5.4.9.8 1.3.4.4.8.6 1.3.8.4.2 1 .3 2.1.4 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.4 1.3-.8.4-.4.6-.8.8-1.3.2-.4.3-1 .4-2.1.1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.4-.9-.8-1.3-.4-.4-.8-.6-1.3-.8-.4-.2-1-.3-2.1-.4-1.2-.1-1.6-.1-4.7-.1zm0 3.1a4.9 4.9 0 110 9.8 4.9 4.9 0 010-9.8zm0 8.1a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4zm6.3-8.3a1.1 1.1 0 11-2.3 0 1.1 1.1 0 012.3 0z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.1-1.1.1-1.7.2-2.1.4-.5.2-.9.4-1.3.8-.4.4-.6.8-.8 1.3-.2.4-.3 1-.4 2.1-.1 1.2-.1 1.6-.1 4.7s0 3.5.1 4.7c.1 1.1.2 1.7.4 2.1.2.5.4.9.8 1.3.4.4.8.6 1.3.8.4.2 1 .3 2.1.4 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.4 1.3-.8.4-.4.6-.8.8-1.3.2-.4.3-1 .4-2.1.1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.4-.9-.8-1.3-.4-.4-.8-.6-1.3-.8-.4-.2-1-.3-2.1-.4-1.2-.1-1.6-.1-4.7-.1zm0 3.1a4.9 4.9 0 110 9.8 4.9 4.9 0 010-9.8zm0 8.1a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4zm6.3-8.3a1.1 1.1 0 11-2.3 0 1.1 1.1 0 012.3 0z'/></svg>") center / contain no-repeat;
}

/* ---------- Video / fallback tweak ---------- */
.igbe-item--video .igbe-item__media {
	background: #000;
}