/**
 * Shared structural frontend styles for all AxcelersBlocks blocks.
 *
 * Rules here are NOT user-controllable. Visual styling (size, color, spacing,
 * typography) is always generated inline via render.php from block attributes.
 * Only structural/behavioural rules that can never be an attribute live here.
 *
 * Add selectors below as each block is migrated to the attribute-driven approach.
 */

// ── Container box-sizing ──────────────────────────────────────────────────────
// Structural: containers include padding/border within any declared width, so
// setting padding/border can never push the block past its width (or the
// viewport). Front end + editor (loaded via enqueue_block_assets).
.axcelersblocks-box,
.axcelersblocks-column,
.axcelersblocks-columns,
.axcelersblocks-list,
.axcelersblocks-list-item {
	box-sizing: border-box;
}

// ── Image empty/placeholder state ────────────────────────────────────────────
// Structural: shown in the editor (no image / loading) and, when the block's
// "Show placeholder when empty" option is on, on the front end too. Loaded in
// both contexts via enqueue_block_assets.
.axcelersblocks-image {
	&__placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 120px;
		width: 100%;
		background-color: #f6f6f6;
		border: 2px dashed #ddd;
		border-radius: 2px;
		box-sizing: border-box;
	}

	&__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 16px;
		color: #949494;
		font-size: 13px;
		text-align: center;

		svg {
			opacity: 0.4;
		}
	}
}

// ── Video empty/placeholder state ────────────────────────────────────────────
// Structural: shown in the editor (no video / loading) and, when the block's
// "Show placeholder when empty" option is on, on the front end too. Loaded in
// both contexts via enqueue_block_assets.
.axcelersblocks-video {
	&__placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 160px;
		width: 100%;
		background-color: #f6f6f6;
		border: 2px dashed #ddd;
		border-radius: 2px;
		box-sizing: border-box;
		color: #949494;
		font-size: 13px;
	}

	&__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 16px;
		color: #949494;
		font-size: 13px;
		text-align: center;

		svg {
			opacity: 0.4;
		}
	}
}

// ── Table header / footer visibility ─────────────────────────────────────────
// Structural: the header/footer toggles only show or hide their section (the
// thead/tfoot markup is always present so flipping a toggle never rebuilds the
// table or drops content). Targets the section's own modifier class so it works
// in both the editor and on the front end.
.axcelersblocks-table--hide-header .axcelersblocks-table-section--head,
.axcelersblocks-table--hide-footer .axcelersblocks-table-section--foot {
	display: none;
}

// ── Button ───────────────────────────────────────────────────────────────────
// Behavioral: cursor and focus reset. Visual styling comes from attribute defaults.
.axcelersblocks-button__text {
	cursor: pointer;

	&:focus,
	&:focus-visible {
		outline: none;
	}
}

// ── Bodycopy ─────────────────────────────────────────────────────────────────
// Links inside bodycopy inherit block text color instead of browser default blue.
.axcelersblocks-bodycopy__text a,
.axcelersblocks-bodycopy__text a:visited,
.axcelersblocks-bodycopy__text a:hover,
.axcelersblocks-bodycopy__text a:focus {
	color: inherit;
	text-decoration-color: currentColor;
}

// The block is a normal paragraph by default — the text (with its inline <strong>,
// <a>, <br>) flows naturally. Flex is ONLY for laying an icon beside the text, so
// it's applied solely when an icon is present (.has-icon). The text always sits in
// its own .__content element, so it stays a single flex item and is never split
// into per-word / per-tag flex items. `:where()` keeps zero specificity so the
// Layout control (display / align-items) can still override this default.
:where( .axcelersblocks-bodycopy__text.has-icon ) {
	display: flex;
	align-items: center;
}

// Let the text block shrink/wrap correctly beside the icon (prevents long words
// from forcing overflow in the flex row).
:where( .axcelersblocks-bodycopy__text.has-icon .axcelersblocks-bodycopy__content ) {
	min-width: 0;
}

// ── Heading ──────────────────────────────────────────────────────────────────
// Same model as bodycopy: a normal heading by default, flex only when an icon is
// present so the text (with its inline <strong>/<em>) is never split into flex
// items. Zero specificity so the Layout control can override.
:where( .axcelersblocks-heading__text.has-icon ) {
	display: flex;
	align-items: center;
}

:where( .axcelersblocks-heading__text.has-icon .axcelersblocks-heading__content ) {
	min-width: 0;
}