/* bw/card-gallery (Brentwood Images) — editor-only chrome.
 * The card visuals come from the shared front-end style (style.css); this adds
 * the inline number/label/caption editing affordances and the modal-content
 * editing overlay (mirrors bw/interlinking). */

/* ── card editor preview ────────────────────────────────────────────────────── */
.bw-cg-card-editor .bw-cg-card__box {
	cursor: default;
}

/* Fill modes in the editor. The wrapper now carries the real front-end
 * .bw-cg-card--fill / --fill-col classes (see editor.js), so the shared style.css
 * fill rules size the card to an equal-height Row / Columns neighbour exactly like
 * the front end. A min-height keeps the preview visible when the card stands alone
 * (no taller neighbour to match — the front end's "needs an equal-height Row"
 * caveat), and stops the out-of-flow fill-col box (position:absolute; inset:0)
 * from collapsing to zero height on the canvas. */
.bw-cg-card-editor.bw-cg-card--fill,
.bw-cg-card-editor.bw-cg-card--fill-col {
	min-height: 260px;
}
.bw-cg-card-editor.bw-cg-card--fill .bw-cg-card__box {
	min-height: 260px;
}

/* inline number badge input */
.bw-cg-card__num--edit {
	width: auto;
	max-width: 4.5em;
	min-width: 2.4em;
	border: 0;
	font-weight: 700;
	font-size: 1.25rem;
	text-align: center;
}
.bw-cg-card__num--edit::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.bw-cg-card__num--edit:focus {
	outline: 2px solid #fff;
	background: rgba(0, 0, 0, 0.78);
}

/* inline stat-number input — the big first line in the "stat" label style.
 * The base .bw-cg-card__statnum (style.css) already supplies the Oswald size /
 * weight / shadow; here we strip the <input> chrome so it reads as plain text on
 * the photo (transparent, like the label). Scoped under .bw-cg-card-editor and
 * forced so it beats the editor's default white input background / box-shadow. */
.bw-cg-card-editor .bw-cg-card__statnum--edit {
	width: auto;
	max-width: 100%;
	min-width: 1.5em;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	text-align: inherit;
}
.bw-cg-card-editor .bw-cg-card__statnum--edit::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.bw-cg-card-editor .bw-cg-card__statnum--edit:focus {
	outline: 1px dashed rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

/* the overlay/label must accept clicks for inline RichText editing */
.bw-cg-card-editor .bw-cg-card__overlay {
	pointer-events: auto;
}
.bw-cg-card-editor .bw-cg-card__label:focus {
	outline: 1px dashed rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}
/* caption is now a bottom-left overlay on the image — keep it clickable for
 * inline editing and always show its box in the editor (even when empty) so the
 * slot is visible. */
.bw-cg-card-editor .bw-cg-card__caption {
	pointer-events: auto;
	min-width: 3em;
}
.bw-cg-card-editor .bw-cg-card__caption::placeholder,
.bw-cg-card-editor .bw-cg-card__caption [data-rich-text-placeholder]::after {
	color: rgba(255, 255, 255, 0.75);
}
.bw-cg-card-editor .bw-cg-card__caption:focus {
	outline: 1px dashed rgba(255, 255, 255, 0.85);
	outline-offset: 1px;
}

/* ── modal-content editing (overlay + canvas placeholder + sidebar toggle) ──── */
.bw-cg-modal-ov {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 56px 24px 24px;
	background: rgba(0, 0, 0, 0.6);
}
.bw-cg-modal-ov__label {
	position: absolute;
	top: 18px;
	left: 24px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.bw-cg-modal-ov__card {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: calc(100% - 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
}
.bw-cg-modal-ov--small  .bw-cg-modal-ov__card { max-width: 480px; }
.bw-cg-modal-ov--medium .bw-cg-modal-ov__card { max-width: 720px; }
.bw-cg-modal-ov--large  .bw-cg-modal-ov__card { max-width: 1000px; }
.bw-cg-modal-ov--full   .bw-cg-modal-ov__card { max-width: calc(100% - 48px); }

.bw-cg-modal-ov__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #444;
	cursor: pointer;
	transition: background 0.15s ease;
}
.bw-cg-modal-ov__close:hover {
	background: rgba(0, 0, 0, 0.08);
	color: #1e1e1e;
}
.bw-cg-modal-ov__close svg {
	display: block;
}
.bw-cg-modal-ov__body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 2rem 1.75rem 1.75rem;
}

.bw-cg-modal-edit-hidden {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
	padding: 1rem;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	background: #f6f7f7;
	text-align: center;
}
.bw-cg-modal-edit-hidden__hint {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #757575;
}
.bw-cg-modal-edit-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 1rem;
	border: 1px solid #2271b1;
	border-radius: 4px;
	background: #2271b1;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}
.bw-cg-modal-edit-trigger:hover {
	background: #135e96;
	border-color: #135e96;
}
.bw-cg-modal-toggle {
	padding: 16px 16px 0;
}