/**
 * makeiteasy/flip-card — geometry, shared by the editor and the front end
 *
 * Everything here is about the box: how big the card is and where the two faces
 * sit. Both faces are absolutely positioned over the same area, which is what
 * guarantees they are always identical in size and aspect ratio no matter how
 * much content each one holds.
 *
 * The flip itself (perspective, rotation, transition) is front-end only and
 * lives in view.css, so the editor shows flat, editable faces.
 *
 * Sizing, timing and alignment come in as custom properties from the block's
 * inline style — see cardStyle() in index.js.
 *
 * Plain CSS by design: this theme has no build step.
 */

.wp-block-makeiteasy-flip-card {
	position: relative;
	aspect-ratio: var(--mie-flip-aspect, 1 / 1);
	min-height: var(--mie-flip-min-height, 0);

	/*
	 * aspect-ratio transfers a minimum height across the ratio into a minimum
	 * WIDTH — a 500px height floor at 3:4 asks for 375px of width — so the card
	 * would size itself from its own height, ignore its column, and overflow as
	 * soon as an ancestor gained padding.
	 *
	 * The container always wins. max-width caps it (needed even in plain block
	 * flow) and min-width cancels the transferred minimum (needed when the card
	 * is a flex item). If a minimum height then forces the card taller than the
	 * ratio wants, it grows taller than its nominal ratio rather than wider than
	 * the space it has.
	 */
	min-width: 0;
	max-width: 100%;

	/*
	 * Known limitation: as a direct child of a flex-ROW container with a fixed
	 * aspect ratio, the card collapses to zero width — both faces are absolutely
	 * positioned, so it has no in-flow content for flex-basis:auto to measure.
	 * Kadence's column inner wrapper is a flex COLUMN, which is unaffected.
	 * Setting a minimum height, or "Auto" aspect, gives it size again. Not
	 * papered over with width:100% here, because that would make the Margin
	 * control overflow its container.
	 */
}

/* "Auto" hands sizing back to the front side's own content. */
.wp-block-makeiteasy-flip-card.is-aspect-auto {
	aspect-ratio: auto;
}

/*
 * When the whole card is a link the <a> has to become the box, otherwise its
 * children are all absolute and it collapses to a zero-height, unclickable
 * strip.
 */
.wp-block-makeiteasy-flip-card .mie-flip-card__link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;

	/* Keeps the card's corner radius flowing through to the faces below. */
	border-radius: inherit;
}

.wp-block-makeiteasy-flip-card.is-aspect-auto .mie-flip-card__link {
	position: relative;
	inset: auto;
}

/* --- the two faces ------------------------------------------------------- */

.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-front,
.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: var(--mie-flip-align, center);

	/*
	 * The faces are the visible surfaces, so the card's Radius control has to
	 * reach them: border-radius:inherit picks up whatever the card is set to,
	 * and overflow:hidden rounds off backgrounds and content inside each face.
	 * A radius set on an individual side is an inline style, so it still wins
	 * over this and can differ per side.
	 */
	border-radius: inherit;
	overflow: hidden;

	/* Starting point only — the Padding control on each side overrides this. */
	padding: clamp(0.75rem, 4%, 1.5rem);
	background-clip: padding-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * In "Auto" the front side is the one element left in flow, so it sets the
 * card's height and the back side stretches to match it.
 */
.wp-block-makeiteasy-flip-card.is-aspect-auto .wp-block-makeiteasy-flip-card-front {
	position: relative;
	inset: auto;

	/*
	 * The back side is pinned to the card by its insets, so a minimum height
	 * stretches it automatically. The front is in flow here and would stay at
	 * its content height, leaving the two sides different sizes — give it the
	 * same floor.
	 */
	min-height: var(--mie-flip-min-height, 0);
}

/* Inner content should not spill past the padding box. */
.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-front > *,
.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-back > * {
	max-width: 100%;
}