/**
 * MFV Site-Engine — Sample-image watermark overlay.
 *
 * Applied to any <img> whose `data-mfv-source` indicates the photo is
 * default/sample data (Unsplash auto-fill, archetype fallback, etc.) —
 * the JS shim (sample-watermark.js) wraps each such image in
 * <span class="mfv-sample-frame">…</span> so this CSS can target it.
 *
 * Design language:
 *   • Real photo stays visually intact (no dimming, no blur) — just a
 *     glassmorphism overlay sitting above it.
 *   • Repeating "SAMPLE" diagonal pattern at ~14% opacity provides the
 *     unmistakable watermark coverage.
 *   • Single frosted-glass CTA band centered along the bottom reads
 *     "ADD PHOTOS TO YOUR LISTING GALLERY" — actionable, not just
 *     descriptive.
 */

.mfv-sample-frame {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
}

/* Keep the wrapped <img> filling its parent the way it did before the wrap. */
.mfv-sample-frame > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Layer 1 — repeating diagonal SAMPLE pattern.
 * Inline SVG used as a tiled background, rendered via repeating-linear-gradient
 * isn't expressive enough for letterspaced text, so we use a data: SVG bg. */
.mfv-sample-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22190%22%3E%3Cg%20transform%3D%22rotate(-22%20160%2095)%22%3E%3Ctext%20x%3D%220%22%20y%3D%22105%22%20font-family%3D%22-apple-system%2CBlinkMacSystemFont%2CHelvetica%2Csans-serif%22%20font-size%3D%2244%22%20font-weight%3D%22800%22%20letter-spacing%3D%226%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.55%22%3ESAMPLE%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: repeat;
	background-size: 320px 190px;
	opacity: 0.42;
	mix-blend-mode: overlay;
}

/* Layer 2 — frosted-glass CTA pill, tucked into the lower-right corner
 * so it doesn't dominate the photo. Smaller, less prominent — the
 * repeating SAMPLE pattern (layer 1) already carries the watermark
 * weight; the corner pill is a small actionable nudge. */
.mfv-sample-frame__cta {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 6px 11px;
	max-width: calc(100% - 20px);
	font: 700 9px/1.1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	letter-spacing: 1.4px;
	color: rgba(255, 255, 255, 0.92);
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: rgba(45, 41, 38, 0.50);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	backdrop-filter: blur(8px) saturate(140%);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

/* For very small thumbnails (gallery strip), shrink the CTA band so it
 * fits without overlapping the photo too aggressively. */
.mfv-sample-frame[data-mfv-frame-size="sm"] .mfv-sample-frame__cta {
	font-size: 8px;
	letter-spacing: 1.2px;
	padding: 4px 9px;
	right: 6px;
	bottom: 6px;
}
.mfv-sample-frame[data-mfv-frame-size="sm"]::before {
	background-size: 240px 140px;
	opacity: 0.36;
}

/* When the wrapping element is a flex/grid child, preserve the original layout
 * by inheriting the wrapped img's display semantics. */
figure.mfv-sample-frame,
picture.mfv-sample-frame {
	margin: 0;
}