/* 1.1.2: posts are stored without the wrapper/image classes (the editor
   output is cleaned on save) and only the two line spans keep theirs. Match
   that stored form directly so the divider is sized from first paint instead
   of showing the full-size image until the runtime script decorates it. */
.ppxDividerImageBlock,
[data-ppx-divider-image="1"],
div:has(> span.ppxDividerImageBlock__line) {
	--ppx-divider-gap: clamp(6px, 1.25vw, 14px);
	--ppx-divider-line-min: clamp(20px, 10vw, 48px);
	--ppx-divider-image-width: 132px;
	--ppx-divider-image-height: 72px;
	--ppx-divider-line-opacity: 0.32;
	--ppx-divider-line-thickness: 2px;
	display: grid;
	grid-template-columns: minmax(var(--ppx-divider-line-min), 1fr) minmax(0, var(--ppx-divider-image-width)) minmax(var(--ppx-divider-line-min), 1fr);
	align-items: center;
	gap: var(--ppx-divider-gap);
	width: min(100%, 720px);
	max-width: 100%;
	margin: clamp(1rem, 3vw, 1.5rem) auto;
	line-height: 1;
	box-sizing: border-box;
}

.ppxDividerImageBlock__line {
	min-width: 0;
	height: var(--ppx-divider-line-thickness);
	background: linear-gradient(90deg, transparent 0%, currentColor 14%, currentColor 86%, transparent 100%);
	opacity: var(--ppx-divider-line-opacity);
	border-radius: 999px;
}

html[data-ips-scheme='light'] .ppxDividerImageBlock,
html[data-ips-scheme='light'] [data-ppx-divider-image="1"],
html[data-ips-scheme='light'] div:has(> span.ppxDividerImageBlock__line) {
	--ppx-divider-line-opacity: 0.48;
}

.ppxDividerImageBlock__media,
.ppxDividerImageBlock__line ~ a {
	display: block;
	width: 100%;
	max-width: 100%;
	justify-self: center;
	line-height: 0;
}

.ppxDividerImageBlock__image,
[data-ppx-divider-image="1"] > img,
[data-ppx-divider-image="1"] .ppxDividerImageBlock__image,
.ppxDividerImageBlock__line ~ img,
.ppxDividerImageBlock__line ~ i-lightbox > img,
.ppxDividerImageBlock__line ~ a > img {
	display: block !important;
	width: auto !important;
	max-width: var(--ppx-divider-image-width, 132px) !important;
	height: auto !important;
	max-height: var(--ppx-divider-image-height, 72px) !important;
	object-fit: contain;
	margin: 0 auto;
}

.ppxDividerImageBlock__media > .ppxDividerImageBlock__image,
.ppxDividerImageBlock__media > img,
[data-ppx-divider-image="1"] .ppxDividerImageBlock__media > img {
	display: block !important;
	width: auto !important;
	max-width: var(--ppx-divider-image-width, 132px) !important;
	height: auto !important;
	max-height: var(--ppx-divider-image-height, 72px) !important;
	object-fit: contain;
	margin: 0 auto;
}

@media (max-width: 480px) {
	.ppxDividerImageBlock,
	[data-ppx-divider-image="1"],
	div:has(> span.ppxDividerImageBlock__line) {
		--ppx-divider-gap: 8px;
		--ppx-divider-line-min: 16px;
		--ppx-divider-image-width: 108px;
		--ppx-divider-image-height: 60px;
	}
}

.ppxDividerImageButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	flex: 0 0 1.25em;
}

.ppxDividerImageButton i {
	margin-right: 0;
}