/* Native Box + Photo arrangements. Semantic settings project these classes.
 * Accents are empty paint layers; photos, links and captions remain native. */
.fl-builder-content .fl-module-box.bbs-media-composition {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto;
	gap: var(--bbs-scope-space-tight, var(--bbs-spacing-3));
	padding: var(--bbs-spacing-4);
	min-width: 0;
	overflow: visible;
}
.bbs-media-composition {
	--bbs-media-accent-width: calc(var(--bbs-media-accent-size-medium, var(--bbs-spacing-24)) * 2);
	--bbs-media-accent-z: 0;
}

.fl-builder-content .bbs-media-composition > .fl-module-photo {
	position: relative;
	z-index: auto;
	min-width: 0;
	max-width: 100%;
	align-self: start;
}
.fl-builder-content .bbs-media-composition > .fl-module-photo .fl-photo-content {
	position: relative;
	z-index: 3;
	max-width: 100%;
}
.fl-builder-content .bbs-media-composition > .bbs-media-photo-primary .fl-photo-content { z-index: 1; }
.fl-builder-content .bbs-media-composition > .fl-module-photo .fl-photo-caption-below {
	position: relative;
	z-index: 6;
	background-color: var(--bbs-scope-bg-color, var(--bbs-color-bg));
	color: var(--bbs-scope-text-color, var(--bbs-color-text));
	white-space: normal;
	overflow-wrap: anywhere;
}
.fl-builder-content .bbs-media-composition > .fl-module-photo .fl-photo-content:focus-within,
.fl-builder-content .bbs-media-composition > .fl-module-photo .fl-photo-content:hover:has(> .fl-photo-caption-hover) { z-index: 8; }
.fl-builder-content .bbs-media-composition > .fl-module-photo .fl-photo-content:focus-within .fl-photo-caption-hover { opacity: 1; }

.fl-builder-content .bbs-media-composition-overlap-pair > .bbs-media-photo-primary {
	grid-column: 1 / span 9;
	grid-row: 1;
	margin-block-end: var(--bbs-spacing-12);
}
.fl-builder-content .bbs-media-composition-overlap-pair > .bbs-media-photo-secondary {
	grid-column: 7 / span 6;
	grid-row: 1;
	align-self: end;
	margin-block-start: var(--bbs-spacing-12);
}
/* The main caption uses the clear portion below its photo, away from the inset. */
.fl-builder-content .bbs-media-composition-overlap-pair > .bbs-media-photo-primary .fl-photo-caption-below {
	max-inline-size: calc(66.666% - var(--bbs-scope-space-tight, var(--bbs-spacing-3)));
	margin-inline: 0 auto;
}
.fl-builder-content .bbs-media-composition-three-collage > .bbs-media-photo-primary {
	grid-column: 1 / span 8;
	grid-row: 1 / span 2;
	align-self: center;
}
.fl-builder-content .bbs-media-composition-three-collage > .bbs-media-photo-secondary {
	grid-column: 9 / span 4;
	grid-row: 1;
}
.fl-builder-content .bbs-media-composition-three-collage > .bbs-media-photo-tertiary {
	grid-column: 9 / span 4;
	grid-row: 2;
	align-self: end;
}

/* Use ::after so a native/scheme ::before background can keep its own job. */
.fl-builder-content .fl-module-box.bbs-media-composition::after {
	content: none;
	position: absolute;
	pointer-events: none;
	z-index: var(--bbs-media-accent-z);
	width: min(45%, var(--bbs-media-accent-width));
	aspect-ratio: 1;
	/* Rules family: kit accent paint; the fallback follows the section accent. */
	background-color: var(--bbs-media-accent-paint, var(--bbs-scope-accent, var(--bbs-color-accent)));
	-webkit-mask-image: var(--bbs-media-accent-mask);
	mask-image: var(--bbs-media-accent-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.fl-builder-content .fl-module-box.bbs-media-composition:is(.bbs-media-accent-blob, .bbs-media-accent-ring, .bbs-media-accent-dots, .bbs-media-accent-starburst)::after { content: ""; }
.fl-builder-content .bbs-media-composition.bbs-media-accent-none::after { content: none; }
.bbs-media-accent-blob { --bbs-media-accent-mask: url("media-accents/blob.svg"); }
.bbs-media-accent-ring { --bbs-media-accent-mask: url("media-accents/ring.svg"); }
.bbs-media-accent-dots { --bbs-media-accent-mask: url("media-accents/dots.svg"); }
.bbs-media-accent-starburst { --bbs-media-accent-mask: url("media-accents/starburst.svg"); }
.bbs-media-accent-size-small { --bbs-media-accent-width: calc(var(--bbs-media-accent-size-small, var(--bbs-spacing-16)) * 2); }
.bbs-media-accent-size-medium { --bbs-media-accent-width: calc(var(--bbs-media-accent-size-medium, var(--bbs-spacing-24)) * 2); }
.bbs-media-accent-size-large { --bbs-media-accent-width: calc(var(--bbs-media-accent-size-large, var(--bbs-spacing-30)) * 2); }
.bbs-media-accent-layer-behind { --bbs-media-accent-z: 0; }
.bbs-media-accent-layer-between { --bbs-media-accent-z: 2; }
.bbs-media-accent-layer-front { --bbs-media-accent-z: 4; }
.fl-builder-content .bbs-media-accent-position-top-left::after { top: 0; left: 0; }
.fl-builder-content .bbs-media-accent-position-top-right::after { top: 0; right: 0; }
.fl-builder-content .bbs-media-accent-position-bottom-left::after { bottom: 0; left: 0; }
.fl-builder-content .bbs-media-accent-position-bottom-right::after { bottom: 0; right: 0; }

@media (max-width: 768px) {
	.fl-builder-content .fl-module-box.bbs-media-composition {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bbs-scope-space-stack, var(--bbs-spacing-4));
	}
	.fl-builder-content .bbs-media-composition > .fl-module-photo {
		grid-column: 1;
		grid-row: auto;
		align-self: start;
		margin-block-start: 0;
		margin-block-end: 0;
	}
	.fl-builder-content .bbs-media-composition-overlap-pair > .bbs-media-photo-primary .fl-photo-caption-below {
		max-inline-size: 100%;
		margin-inline: 0;
	}
}

/* Decoration is optional in forced colors; the photographs and links remain. */
@media (forced-colors: active) {
	.fl-builder-content .fl-module-box.bbs-media-composition::after { display: none; }
}