/**
 * Pending placeholders (editors only; this file is never loaded for
 * visitors). Same box as the element they replace, but a dashed outline,
 * muted italic text and no fill, so they never read as real content.
 * Colors follow currentColor, so they work on light and dark sections.
 */

.firm-pending {
	box-sizing: border-box;
	border: var(--wp--custom--border-width--medium) dashed currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	opacity: 0.75;
	cursor: not-allowed;
	user-select: none;
}

/* Button-sized: the same button tokens as .wp-element-button (min-height,
   padding, type size, radius), so it follows any change to the buttons.
   Full width below tablet, like the section buttons it stands in for. */
.firm-pending--button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--button--min-height);
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--custom--button--font-size);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--button);
	text-align: center;
}

/* Paragraph-sized: body text in a full-width box. */
.firm-pending--text {
	display: block;
	padding: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

/* Missing images (components/pending-image). One look for every slot: a
   dashed, hatched light box (solid tokens, so the label reads the same on
   photos, light and dark sections). Optional slots use a dotted outline. */
.firm-pending-image {
	box-sizing: border-box;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-xs);
	font-style: italic;
	font-weight: 400;
	letter-spacing: normal;
	line-height: var(--wp--custom--line-height--body);
	text-align: center;
	text-transform: none;
	cursor: not-allowed;
	user-select: none;
}

.firm-pending-image--fill,
.firm-pending-image--block {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border-width--medium) dashed var(--wp--preset--color--muted);
	background:
		repeating-linear-gradient(135deg, var(--wp--preset--color--divider) 0 var(--wp--custom--border-width--medium), transparent 0 var(--wp--preset--spacing--30)),
		var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
}

/* Covers the slot's own frame (the frame is positioned). The label sits at
   the top, clear of anything the frame overlays (a card's title box). */
.firm-pending-image--fill {
	position: absolute;
	z-index: 1;
	inset: 0;
	align-items: flex-start;
}

/* Stands in for a slot visitors don't get a box for. */
.firm-pending-image--block {
	inline-size: 100%;
	aspect-ratio: var(--firm-pending-ratio, 4 / 3);
}

.firm-pending-image--fill.is-optional,
.firm-pending-image--block.is-optional {
	border-style: dotted;
}

/* Labels for images without a box (backgrounds, textures, logos), pinned
   to the corner of the nearest positioned ancestor. Solid tokens, so they
   stay readable over photos and dark sections; clicks pass through. The
   top offset clears the header logo's tag, which hangs below the header
   over the first section. */
.firm-pending-image--tags {
	position: absolute;
	z-index: 3;
	inset-block-start: var(--wp--preset--spacing--60);
	inset-inline-start: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	max-inline-size: calc(100% - 2 * var(--wp--preset--spacing--20));
	pointer-events: none;
}

.firm-pending-image--tags.is-below {
	inset-block-start: 100%;
	inline-size: max-content;
	max-inline-size: calc(100vw - 3 * var(--wp--preset--spacing--40)); /* gutter + a scrollbar */
}

.firm-pending-image--tags.is-inline {
	position: static;
	max-inline-size: none;
}

.firm-pending-image--tags .firm-pending-image__label {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: var(--wp--custom--border-width--thin) dashed var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--foreground);
	text-align: start;
}

.firm-pending-image--tags .firm-pending-image__label.is-optional {
	border-style: dotted;
	color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
}

:where(:has(> .firm-pending-image--tags:not(.is-inline), > .firm-pending-image--fill)) {
	position: relative;
}

/* tablet */
@media (min-width: 48em) {
	.firm-pending--button {
		display: inline-flex;
	}
}

/* Admin bar "Pending: N" node: hidden until the page has pending items. */
#wpadminbar .firm-pending-node.is-empty {
	display: none;
}