/* bw/image-gallery — editor-only chrome for the box-per-image UX.
 * The masonry layout itself comes from the shared front-end style (style.css);
 * this only adds the per-box controls and the "+" add box. */

.bw-ig-editor .bw-ig-box {
	position: relative;
	cursor: default;
}

/* Inline caption editor, pinned bottom-left over the image (matches the front
 * end's caption position so editing happens where the caption appears). */
.bw-ig-editor .bw-ig-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	max-width: 90%;
	margin: 0;
	padding: 0.25rem 0.5rem;
	border: 0;
	border-top-right-radius: 0.25rem;
	background: rgba( 0, 0, 0, 0.5 );
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.4;
}
.bw-ig-editor .bw-ig-caption::placeholder {
	color: rgba( 255, 255, 255, 0.75 );
}
.bw-ig-editor .bw-ig-caption:focus {
	outline: 2px solid #fff;
	background: rgba( 0, 0, 0, 0.75 );
}

.bw-ig-editor .bw-ig-box__controls {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.bw-ig-editor .bw-ig-box:hover .bw-ig-box__controls,
.bw-ig-editor .bw-ig-box:focus-within .bw-ig-box__controls {
	opacity: 1;
}

/* Small dark icon buttons (override the editor's default button styling). */
.bw-ig-editor .bw-ig-btn.components-button {
	width: 28px;
	min-width: 28px;
	height: 28px;
	padding: 0;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	border-radius: 3px;
}
.bw-ig-editor .bw-ig-btn.components-button:hover:not( :disabled ) {
	background: rgba( 0, 0, 0, 0.85 );
	color: #fff;
}
.bw-ig-editor .bw-ig-btn.components-button:disabled {
	opacity: 0.4;
}
.bw-ig-editor .bw-ig-btn--danger.components-button:hover:not( :disabled ) {
	background: #cc1818;
}

/* Empty box: a dashed "+" upload target that fills the whole grid cell. */
.bw-ig-editor .bw-ig-box--empty { line-height: 0; }
.bw-ig-editor .bw-ig-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	min-height: 110px;
	border: 2px dashed #c3c4c7;
	border-radius: 4px;
	background: #f6f7f7;
	color: #50575e;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.bw-ig-editor .bw-ig-add:hover {
	border-color: #3858e9;
	color: #3858e9;
	background: #fff;
}
.bw-ig-add__plus {
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
}
.bw-ig-add__label {
	font-size: 13px;
}