/* wpagent/flip-box (P13 widgets). Sides: blocks/flip-side (front = first child). */
.wpab-flip-box {
	display: grid;
	min-height: 260px;
	perspective: 1200px;
	border-radius: var(--wp--preset--border-radius--md, 12px);
	outline: none;
}
.wpab-flip-box:focus-visible {
	box-shadow: 0 0 0 3px var(--wp--preset--color--surface, #fff), 0 0 0 5px var(--wp--preset--color--accent, #2563eb);
}
.wpab-flip-box__inner {
	position: relative;
	display: grid;
	transform-style: preserve-3d;
	transition: transform var(--wpab-flip-duration, 0.6s) cubic-bezier(0.4, 0.2, 0.2, 1);
}
.wpab-flip-box__inner > .wpab-flip-side {
	grid-area: 1 / 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.wpab-flip-box.is-effect-flip-x .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
	transform: rotateY(180deg);
}
.wpab-flip-box.is-effect-flip-y .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
	transform: rotateX(180deg);
}

/* Flipped: hover (mouse), keyboard focus on or in the box (hover trigger),
 * keyboard focus on the back side (any trigger) or .is-flipped (view.js: tap,
 * click, Enter/Space). :focus-visible, so a tap that focuses the box does not
 * keep it turned. */
@media (hover: hover) {
	.wpab-flip-box.is-trigger-hover.is-effect-flip-x:hover > .wpab-flip-box__inner {
		transform: rotateY(180deg);
	}
	.wpab-flip-box.is-trigger-hover.is-effect-flip-y:hover > .wpab-flip-box__inner {
		transform: rotateX(180deg);
	}
}
.wpab-flip-box.is-effect-flip-x:is(.is-flipped, .is-trigger-hover:focus-visible, .is-trigger-hover:has(:focus-visible), :has(> .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) :focus-visible)) > .wpab-flip-box__inner {
	transform: rotateY(180deg);
}
.wpab-flip-box.is-effect-flip-y:is(.is-flipped, .is-trigger-hover:focus-visible, .is-trigger-hover:has(:focus-visible), :has(> .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) :focus-visible)) > .wpab-flip-box__inner {
	transform: rotateX(180deg);
}

/* Fade (also every effect under reduced motion): the back fades in over the
 * front. Opacity only, so the back stays readable by screen readers and Tab
 * into it shows it. */
.wpab-flip-box.is-effect-fade .wpab-flip-box__inner > .wpab-flip-side {
	transition: opacity var(--wpab-flip-duration, 0.6s) ease;
}
.wpab-flip-box.is-effect-fade .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
	opacity: 0;
	pointer-events: none;
}
@media (hover: hover) {
	.wpab-flip-box.is-effect-fade.is-trigger-hover:hover .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
		opacity: 1;
		pointer-events: auto;
	}
}
.wpab-flip-box.is-effect-fade:is(.is-flipped, .is-trigger-hover:focus-visible, .is-trigger-hover:has(:focus-visible), :has(> .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) :focus-visible)) .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.wpab-flip-box .wpab-flip-box__inner {
		transform: none !important;
		transition: none;
	}
	.wpab-flip-box .wpab-flip-box__inner > .wpab-flip-side {
		transform: none !important;
		transition: opacity 0.2s linear;
	}
	.wpab-flip-box .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
		opacity: 0;
		pointer-events: none;
	}
	.wpab-flip-box:is(.is-flipped, .is-trigger-hover:focus-visible, .is-trigger-hover:has(:focus-visible), :has(> .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) :focus-visible)) .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
		opacity: 1;
		pointer-events: auto;
	}
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.wpab-flip-box.is-trigger-hover:hover .wpab-flip-box__inner > .wpab-flip-side:nth-child(2) {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Editor previews (builder canvas): both sides side by side, flat, so each can be edited. */
.wpab-flip-box.is-preview > .wpab-flip-box__inner {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px;
	transform: none !important;
	transition: none;
}
.wpab-flip-box.is-preview .wpab-flip-box__inner > .wpab-flip-side {
	grid-area: auto;
	transform: none !important;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	opacity: 1 !important;
	pointer-events: auto !important;
	outline: 1px dashed rgba(16, 24, 40, 0.35);
	outline-offset: 2px;
}