/* Blur decorativo — aplicar a classe blur-spot em qualquer seção/grupo no editor.
 * O blur aparece centralizado sobre a seção que receber a classe.
 * overflow: visible garante que o blur extrapola os limites da seção.
 * z-index: -1 no ::before mantém o blur abaixo do conteúdo da seção.
 */
.blur-spot {
	position: relative;
	overflow: visible !important;
}

.blur-spot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(800px, 100vw);
	height: min(700px, 87.5vw);
	background: rgba(55, 55, 55, 0.5);
	border-radius: 50%;
	filter: blur(min(500px, 62.5vw));
	pointer-events: none;
	z-index: -1;
	will-change: filter;
}

/*
 * Border radius 12px — utilitário global (desktop + mobile).
 * Avançado → Classe CSS adicional: radius-12
 * Só no mobile: mobile-radius-12 (ver bloco @media abaixo).
 */
.radius-12 {
	--wp--style--border--radius: 12px !important;
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.radius-12.wp-block-image {
	overflow: hidden;
}

.radius-12.wp-block-image :is(img, svg) {
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.radius-12.wp-block-cover .wp-block-cover__background,
.radius-12.wp-block-cover .wp-block-cover__image-background,
.radius-12.wp-block-cover .wp-block-cover__gradient-background,
.radius-12 .wp-block-cover__background,
.radius-12 .wp-block-cover__image-background,
.radius-12 .wp-block-cover__gradient-background {
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

/*
 * Query loop: radius-12 no post-template → cada post (<li> + card).
 * O editor pode pôr a classe no <ul> e/ou no Hyperlink Group (<a>) dentro do item.
 */
.radius-12.wp-block-post-template {
	border-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.radius-12.wp-block-post-template > li,
.wp-block-post-template > li > .radius-12.wp-block-tiptip-hyperlink-group-block {
	overflow: hidden;
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.radius-12.wp-block-post-template > li > .wp-block-tiptip-hyperlink-group-block,
.wp-block-post-template > li > .radius-12.wp-block-tiptip-hyperlink-group-block {
	display: block;
	overflow: hidden;
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.radius-12.wp-block-post-template > li .wp-block-cover,
.wp-block-post-template > li > .radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover,
.radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover {
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
	overflow: hidden;
}

.radius-12.wp-block-post-template > li .wp-block-cover :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__gradient-background),
.wp-block-post-template > li > .radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__gradient-background),
.radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__gradient-background) {
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.radius-12.wp-block-tiptip-hyperlink-group-block {
	display: block;
	overflow: hidden;
}

/*
 * Alinhamento no mobile — utilitários para pilhas/grupos.
 * Adicionar no bloco via Avançado → Classe CSS adicional (ex.: mobile-align-left, mobile-bg-surface, mobile-radius-12, radius-12).
 * Desktop mantém o alinhamento do editor; no mobile/tablet touch força o valor da classe.
 *
 * Breakpoints:
 * - max-width 781px — portrait e viewports estreitos (alinha ao editor WP)
 * - touch (hover: none) + pointer: coarse — smartphones em landscape (> 781px)
 */
@media (max-width: 781px), ((hover: none) and (pointer: coarse)) {

	/* --- mobile-align-left --- */

	:is(.wp-block-group, .wp-block-stack).mobile-align-left.is-layout-flex,
	.mobile-align-left.is-layout-flex {
		align-items: flex-start !important;
		--wp--style--align-items: flex-start !important;
		text-align: left !important;
	}

	.mobile-align-left.is-layout-flex.is-horizontal {
		justify-content: flex-start !important;
	}

	.mobile-align-left.is-content-justification-right,
	.mobile-align-left.is-content-justification-center,
	.mobile-align-left.items-justified-right,
	.mobile-align-left.items-justified-center {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		--wp--style--align-items: flex-start !important;
	}

	.mobile-align-left > .is-layout-flex.is-content-justification-right,
	.mobile-align-left > .is-layout-flex.is-content-justification-center,
	.mobile-align-left > .is-layout-flex.items-justified-right,
	.mobile-align-left > .is-layout-flex.items-justified-center,
	.mobile-align-left .wp-block-buttons.is-layout-flex {
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}

	.mobile-align-left > * {
		align-self: flex-start !important;
		text-align: left !important;
	}

	.mobile-align-left :is(.wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote, p, h1, h2, h3, h4, h5, h6) {
		text-align: left !important;
	}

	.mobile-align-left .has-text-align-right,
	.mobile-align-left .has-text-align-center {
		text-align: left !important;
	}

	/* --- mobile-align-center --- */

	:is(.wp-block-group, .wp-block-stack).mobile-align-center.is-layout-flex,
	.mobile-align-center.is-layout-flex {
		align-items: center !important;
		--wp--style--align-items: center !important;
		text-align: center !important;
	}

	.mobile-align-center.is-layout-flex.is-horizontal {
		justify-content: center !important;
	}

	.mobile-align-center.is-content-justification-left,
	.mobile-align-center.is-content-justification-right,
	.mobile-align-center.items-justified-left,
	.mobile-align-center.items-justified-right {
		align-items: center !important;
		justify-content: center !important;
		--wp--style--align-items: center !important;
	}

	.mobile-align-center > .is-layout-flex.is-content-justification-left,
	.mobile-align-center > .is-layout-flex.is-content-justification-right,
	.mobile-align-center > .is-layout-flex.items-justified-left,
	.mobile-align-center > .is-layout-flex.items-justified-right,
	.mobile-align-center .wp-block-buttons.is-layout-flex {
		align-items: center !important;
		justify-content: center !important;
	}

	.mobile-align-center > * {
		align-self: center !important;
		text-align: center !important;
	}

	.mobile-align-center :is(.wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote, p, h1, h2, h3, h4, h5, h6) {
		text-align: center !important;
	}

	.mobile-align-center .has-text-align-left,
	.mobile-align-center .has-text-align-right {
		text-align: center !important;
	}

	/* --- mobile-align-right --- */

	:is(.wp-block-group, .wp-block-stack).mobile-align-right.is-layout-flex,
	.mobile-align-right.is-layout-flex {
		align-items: flex-end !important;
		--wp--style--align-items: flex-end !important;
		text-align: right !important;
	}

	.mobile-align-right.is-layout-flex.is-horizontal {
		justify-content: flex-end !important;
	}

	.mobile-align-right.is-content-justification-left,
	.mobile-align-right.is-content-justification-center,
	.mobile-align-right.items-justified-left,
	.mobile-align-right.items-justified-center {
		align-items: flex-end !important;
		justify-content: flex-end !important;
		--wp--style--align-items: flex-end !important;
	}

	.mobile-align-right > .is-layout-flex.is-content-justification-left,
	.mobile-align-right > .is-layout-flex.is-content-justification-center,
	.mobile-align-right > .is-layout-flex.items-justified-left,
	.mobile-align-right > .is-layout-flex.items-justified-center,
	.mobile-align-right .wp-block-buttons.is-layout-flex {
		align-items: flex-end !important;
		justify-content: flex-end !important;
	}

	.mobile-align-right > * {
		align-self: flex-end !important;
		text-align: right !important;
	}

	.mobile-align-right :is(.wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote, p, h1, h2, h3, h4, h5, h6) {
		text-align: right !important;
	}

	.mobile-align-right .has-text-align-left,
	.mobile-align-right .has-text-align-center {
		text-align: right !important;
	}

	/* --- mobile-bg-surface --- */

	:is(.wp-block-group, .wp-block-cover, .wp-block-columns).mobile-bg-surface,
	.mobile-bg-surface:is(.wp-block-group, .wp-block-cover, .wp-block-columns) {
		--wp--style--color--background: var(--wp--preset--color--surface) !important;
		background: var(--wp--preset--color--surface) !important;
		background-color: var(--wp--preset--color--surface) !important;
		background-image: none !important;
	}

	/* --- mobile-radius-12 --- */

	.mobile-radius-12 {
		--wp--style--border--radius: 12px !important;
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	/*
	 * core/image: a classe fica no <figure>; o radius do editor vai inline no <img>.
	 */
	.mobile-radius-12.wp-block-image {
		overflow: hidden;
	}

	.mobile-radius-12.wp-block-image :is(img, svg) {
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.mobile-radius-12.wp-block-cover .wp-block-cover__background,
	.mobile-radius-12.wp-block-cover .wp-block-cover__image-background,
	.mobile-radius-12.wp-block-cover .wp-block-cover__gradient-background {
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.mobile-radius-12 .wp-block-cover__background,
	.mobile-radius-12 .wp-block-cover__image-background,
	.mobile-radius-12 .wp-block-cover__gradient-background {
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	/* Query loop — mesmo comportamento que radius-12 (só mobile) */
	.mobile-radius-12.wp-block-post-template {
		border-radius: 0 !important;
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.mobile-radius-12.wp-block-post-template > li,
	.wp-block-post-template > li > .mobile-radius-12.wp-block-tiptip-hyperlink-group-block {
		overflow: hidden;
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.mobile-radius-12.wp-block-post-template > li > .wp-block-tiptip-hyperlink-group-block,
	.wp-block-post-template > li > .mobile-radius-12.wp-block-tiptip-hyperlink-group-block {
		display: block;
		overflow: hidden;
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.mobile-radius-12.wp-block-post-template > li .wp-block-cover,
	.wp-block-post-template > li > .mobile-radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover,
	.mobile-radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover {
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
		overflow: hidden;
	}

	.mobile-radius-12.wp-block-post-template > li .wp-block-cover :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__gradient-background),
	.wp-block-post-template > li > .mobile-radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__gradient-background),
	.mobile-radius-12.wp-block-tiptip-hyperlink-group-block .wp-block-cover :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__gradient-background) {
		border-radius: 12px !important;
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.mobile-radius-12.wp-block-tiptip-hyperlink-group-block {
		display: block;
		overflow: hidden;
	}
}

/*
 * Destaques tipográficos (mark + accent) — texto ciano, sem caixa de highlight.
 * O editor grava background transparente inline; wp_kses no REST de produção remove
 * rgba(0,0,0,0) e o <mark> herda highlight amarelo/verde do UA ou do block library.
 */
:root :where(.wp-block-heading mark.has-inline-color) {
	background-color: transparent !important;
	background: none !important;
}

:root :where(.wp-block-heading mark.has-inline-color.has-accent-color) {
	color: var(--wp--preset--color--accent) !important;
}

/*
 * Galeria equipa (pattern team-gallery-scroll): margens negativas full-bleed.
 * O overflow:hidden do bloco (style.css no JSON) nem sempre gera wp-custom-css em produção.
 */
.wp-block-group.alignfull.has-custom-css:has(> .wp-block-gallery.alignfull) {
	overflow: hidden;
	max-width: 100%;
}