/* Styles for blocks produced by the Fast Land post conversion. Kept in the plugin so they survive a theme change. */

/* Note boxes (old [box] / [color_box] shortcodes) */
.fl-note {
	background: var(--fl-note-bg, #eef4f3);
	border-left: 3px solid var(--fl-teal, #00758f);
	padding: 1em 1.5em;
	margin: 2em 0;
	font-size: .94em;
}
.fl-note > :first-child { margin-top: 0; }
.fl-note > :last-child { margin-bottom: 0; }

/* Before/after comparison. Without JavaScript the two images sit side by side. */
.fl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2em 0; }
.fl-compare img { width: 100%; height: auto; display: block; margin: 0; }
.fl-compare figcaption { grid-column: 1 / -1; }

/* Slider version, set up by compare.js */
.fl-compare.is-slider { display: block; }
.fl-compare__stage { position: relative; overflow: hidden; margin: 0 auto; touch-action: pan-y; user-select: none; }
.fl-compare__stage img { pointer-events: none; }
.fl-compare__stage .fl-compare__before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.fl-compare__line {
	position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px;
	background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .4); pointer-events: none;
}
.fl-compare__line::after {
	content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1a1a1a;
	display: grid; place-items: center; font: 700 20px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.fl-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.fl-compare__label {
	position: absolute; top: 12px; padding: 4px 8px; background: rgba(0, 0, 0, .55); color: #fff;
	font: 700 10px/1 system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; pointer-events: none;
}
.fl-compare__label--before { left: 12px; }
.fl-compare__label--after { right: 12px; }
.fl-compare.is-slider figcaption { text-align: center; }