/*
 * Module anatomy v2.
 *
 * Module and its Media, Content and Actions sections own real Gutenberg Block
 * Supports values. CSS is deliberately limited to layout contracts, optional
 * section visibility and image clipping; the Inspector remains the source of
 * truth for padding, gap, margin and minimum height.
 */

.wp-block-sggw-module {
	align-items: stretch;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--small);
}

/* Cards use the compact text preset by default; local Block Supports values
 * on their children continue to override this inherited value. */
.wp-block-sggw-module-content {
	line-height: var(--wp--custom--typography--line-height--supporting);
}

.wp-block-sggw-module.has-sggw-module-link {
	position: relative;
}

.wp-block-sggw-module__surface-link {
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
	outline: var(--wp--custom--line--width) solid transparent;
	outline-offset: calc(0px - var(--wp--custom--line--width));
}

.wp-block-sggw-module__surface-link:focus:not(:focus-visible) {
	outline-color: transparent;
}

.wp-block-sggw-module__surface-link:focus-visible {
	outline-color: var(--sggw-line-focus);
	outline-offset: var(--wp--custom--line--focus-ring-offset);
	outline-width: var(--wp--custom--line--focus-ring-width);
}

.wp-block-sggw-module.has-sggw-module-link
	:where(a, button, input, select, textarea, [tabindex]):not(
		.wp-block-sggw-module__surface-link
	) {
	position: relative;
	z-index: 2;
}

span.wp-block-sggw-module__surface-link {
	pointer-events: none;
}

@media (hover: hover) {
	.wp-block-sggw-module:not(.is-style-sggw-unframed):hover {
		box-shadow: var(--wp--custom--shadow--small);
	}

	.wp-block-sggw-module.has-sggw-module-link:hover
		> .wp-block-sggw-module__surface-link:not(:focus-visible) {
		outline-color: var(--sggw-link-foreground);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-sggw-module:not(.is-style-sggw-unframed) {
		transition: box-shadow 150ms ease;
	}

	.wp-block-sggw-module.has-sggw-module-link
		> .wp-block-sggw-module__surface-link {
		transition: outline-color 150ms ease;
	}
}

.wp-block-sggw-module:not(.is-style-sggw-unframed):not(.has-background) {
	/*
	 * A block-level value stored in Global Styles must not replace the card's
	 * alternating default. The Module also becomes that surface's local
	 * context, so nested components advance to the following alternating role.
	 * Local backgrounds keep using `.has-background` and remain outside this
	 * fallback.
	 */
	background-color: var(--sggw-module-default-surface) !important;
	--sggw-surface-current: var(--sggw-module-default-surface);
	--sggw-surface-alternating: var(--sggw-module-default-alternating);
	--sggw-link-foreground: var(--sggw-module-default-link-foreground);
	--sggw-inline-link-decoration-rest: var(--sggw-module-default-inline-link-decoration-rest);
}

/*
 * The unframed variant is an explicit geometry contract, not only a surface
 * class. These declarations also repair Modules saved before the Inspector
 * operation started persisting zero values in Block Supports.
 */
.wp-block-sggw-module.is-style-sggw-unframed {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.wp-block-sggw-module.is-style-sggw-unframed
	> .wp-block-sggw-module__media {
	margin: 0 !important;
}

.wp-block-sggw-module__media,
.wp-block-sggw-module__content,
.wp-block-sggw-module__body,
.wp-block-sggw-module__actions,
.wp-block-sggw-module__image,
.wp-block-sggw-module__title,
.wp-block-sggw-module__description {
	margin-block: 0;
}

.wp-block-sggw-module__media,
.wp-block-sggw-module__content,
.wp-block-sggw-module__actions {
	box-sizing: border-box;
	min-inline-size: 0;
	inline-size: 100%;
}

.wp-block-sggw-module.has-sggw-module-graphic-image
	> .wp-block-sggw-module__media
	> :where(.wp-block-icon, [data-type="core/icon"]),
.wp-block-sggw-module.has-sggw-module-graphic-icon
	> .wp-block-sggw-module__media
	> :where(.wp-block-image, [data-type="core/image"]) {
	display: none;
}

.wp-block-sggw-module.has-sggw-module-graphic-image
	> .wp-block-sggw-module__media
	.block-editor-block-list__layout
	> [data-type="core/icon"],
.wp-block-sggw-module.has-sggw-module-graphic-icon
	> .wp-block-sggw-module__media
	.block-editor-block-list__layout
	> [data-type="core/image"] {
	display: none;
}

.wp-block-sggw-module.has-sggw-module-graphic-icon
	> .wp-block-sggw-module__media {
	block-size: max-content;
	inline-size: max-content;
}

/*
 * An auto inline size lets the native negative inline margins consume the
 * Module padding on both sides. With 100% here only the start edge would
 * bleed, because the fixed content-box width would remain unchanged.
 */
.wp-block-sggw-module:not(.is-horizontal).has-sggw-module-graphic-image
	> .wp-block-sggw-module__media {
	align-self: stretch;
	inline-size: auto;
}

.wp-block-sggw-module:not(.has-sggw-module-graphic)
	> .wp-block-sggw-module__media,
.wp-block-sggw-module:not(.has-sggw-module-actions)
	> .wp-block-sggw-module__actions,
.wp-block-sggw-module__media[hidden],
.wp-block-sggw-module__actions[hidden] {
	display: none;
}

/*
 * A zero-height Media section would still consume the Module's blockGap.
 * Inspect the active branch only: the inactive Image or Icon may retain saved
 * content while remaining hidden for later reuse.
 */
.wp-block-sggw-module.has-sggw-module-graphic-image
	> .wp-block-sggw-module__media:not(
		:has(
			.wp-block-sggw-module__image
				> :is(img, .wp-block-sggw-module__image-placeholder)
		)
	),
.wp-block-sggw-module.has-sggw-module-graphic-icon
	> .wp-block-sggw-module__media:not(
		:has(
			.wp-block-sggw-module__icon
				> :is(
					.wp-block-icon__sggw-glyph,
					.sggw-phosphor-icon-glyph,
					.wp-block-icon__placeholder,
					svg
				)
		)
	) {
	display: none;
}

.wp-block-sggw-module__body {
	inline-size: 100%;
	min-inline-size: 0;
}

.wp-block-sggw-module__body:empty {
	display: none;
}

.wp-block-sggw-module:not(.is-horizontal)
	> .wp-block-sggw-module__actions {
	margin-block-start: auto;
}

.wp-block-sggw-module__actions > .wp-block-buttons,
.wp-block-sggw-module__actions > .wp-block-sggw-links {
	margin-block: 0;
}

.wp-block-sggw-module__image,
.wp-block-sggw-module__image img {
	display: block;
	inline-size: 100%;
}

.wp-block-sggw-module__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.wp-block-sggw-module:not(.is-horizontal):not(.is-style-sggw-unframed) {
	overflow: clip;
}

.wp-block-sggw-module:not(.is-horizontal):not(.is-style-sggw-unframed)
	> .wp-block-sggw-module__media {
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
}

.wp-block-sggw-module:not(.is-horizontal):not(.is-style-sggw-unframed)
	> .wp-block-sggw-module__media
	> .wp-block-sggw-module__image {
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.wp-block-sggw-module__image .components-placeholder {
	block-size: 100%;
	box-sizing: border-box;
	inline-size: 100%;
	margin: 0;
	min-block-size: 0;
}

.wp-block-sggw-module__image-placeholder {
	background-color: var(--sggw-surface-alternating);
	display: grid;
	inset: 0;
	place-items: center;
	pointer-events: none;
	position: absolute;
}

.wp-block-sggw-module__image-placeholder::before {
	aspect-ratio: 1;
	background-color: var(--sggw-line-decorative);
	content: "";
	display: block;
	inline-size: clamp(48px, 20%, 96px);
	-webkit-mask-image: url("../../assets/brand/sggw-particle-flower.svg");
	mask-image: url("../../assets/brand/sggw-particle-flower.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-sggw-module__image img {
	block-size: 100%;
	object-fit: cover;
}

.wp-block-sggw-module .wp-block-sggw-module__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--semibold);
	line-height: var(--wp--custom--typography--line-height--large);
	margin-block: 0;
}

.wp-block-sggw-module > .wp-block-sggw-module__content {
	align-items: stretch;
}

.wp-block-sggw-module.is-horizontal > .wp-block-sggw-module__media {
	block-size: calc(var(--wp--preset--spacing--50) * 2);
	flex: 0 0 calc(var(--wp--preset--spacing--50) * 2);
	inline-size: calc(var(--wp--preset--spacing--50) * 2);
}

.wp-block-sggw-module.is-horizontal.has-sggw-module-graphic-icon
	> .wp-block-sggw-module__media {
	block-size: max-content;
	flex: 0 0 auto;
	inline-size: max-content;
}

.wp-block-sggw-module.is-horizontal > .wp-block-sggw-module__content {
	flex: 1 1 auto;
	inline-size: auto;
}

.wp-block-sggw-module.is-horizontal > .wp-block-sggw-module__actions {
	flex: 0 1 auto;
	inline-size: auto;
	margin-inline-start: auto;
}

.wp-block-sggw-module.is-horizontal .wp-block-sggw-module__image {
	aspect-ratio: 1;
}

@media (forced-colors: active) {
	.wp-block-sggw-module__image-placeholder {
		background-color: Canvas;
		border: 1px solid CanvasText;
		forced-color-adjust: none;
	}

	.wp-block-sggw-module__image-placeholder::before {
		background-color: CanvasText;
	}
}