/*
 * Eon Detail — Flip Card
 *
 * Turns any Kadence "Row Layout" block into a hover/click flip card, using
 * only the "Additional CSS Class(es)" field already built into the block
 * editor — no custom block required:
 *
 *   1. Add "eon-flip-card"  to the Row Layout itself.
 *   2. Add "eon-flip-front" to its first Column.
 *   3. Add "eon-flip-back"  to its second Column.
 *
 * Both columns are edited exactly like any other Kadence content. These
 * styles are front-end only — the block editor loads flip-card-editor.css
 * instead (see inc/flip-card.php), since editing needs both faces visible
 * and stacked, not overlapped with one of them hidden.
 *
 * Kadence renders a Row Layout as:
 *   .eon-flip-card                (row wrapper — perspective host)
 *     > .kt-row-column-wrap       (Kadence's own inner row — this rotates)
 *         > .eon-flip-front       (1st column — stays in normal flow and
 *                                  defines the card's height)
 *         > .eon-flip-back        (2nd column — absolutely positioned on
 *                                  top of the front face)
 *
 * The back face is positioned with plain `position: absolute` rather than
 * overlapped via a shared CSS Grid cell. Some browsers don't reliably
 * compose nested 3D transforms (preserve-3d + backface-visibility) for
 * elements that are also grid/flex items, which showed up as the back
 * face's content rendering mirrored instead of readable once flipped.
 * Absolute positioning is the standard, well-supported technique and
 * avoids that interaction entirely.
 *
 * @package eon-detail
 */

.eon-flip-card {
	position: relative;
	perspective: 1600px;
}

/* Kadence's own inner row wrapper is what actually rotates; the two faces
   are layered on top of each other inside it via grid stacking. */
.eon-flip-card > .kt-row-column-wrap {
	grid-template-columns: minmax(0, 1fr) !important;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
	cursor: pointer;
}

/* Only devices with a real mouse get the hover-flip; touch browsers tend to
   keep `:hover` "stuck" after a tap until the user taps elsewhere, which
   would stop a second tap from flipping the card back. Touch/keyboard rely
   solely on the "is-flipped" class toggled by flip-card-view.js instead. */
@media (hover: hover) and (pointer: fine) {
	.eon-flip-card:hover > .kt-row-column-wrap {
		transform: rotateY(180deg);
	}
}

.eon-flip-card.is-flipped > .kt-row-column-wrap {
	transform: rotateY(180deg);
}

.eon-flip-front,
.eon-flip-back {
	width: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* The back face is pulled out of normal flow and pinned exactly over the
   front face (which alone determines the card's height), then pre-rotated
   so it reads correctly once the card flips. */
.eon-flip-back {
	position: absolute;
	inset: 0;
	height: 100%;
	transform: rotateY(180deg);
}

.eon-flip-back > .kt-inside-inner-col {
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.eon-flip-card > .kt-row-column-wrap {
		transition: none;
	}
}