/* ============================================================
   Home Status Badge — qmi-badge.css
   Loaded wherever a badge renders: the Quick Move-In template's
   cards and the [home_badge] shortcode in Elementor templates.
   ============================================================ */

.qmi-card__badge {
	/* In normal flow by default, so dropping this into an Elementor template
	   puts it where you placed it. Position the wrapping container instead —
	   or add .qmi-card__badge--absolute to overlay a relative ancestor. */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Ribbon geometry taken straight from the supplied SVG: the path spans
	   57.1289 wide and 0–81 tall, with a V notched UP into the bottom edge whose
	   apex sits at y=64.5078 — that's the 79.64% below. The path also runs up to
	   y=-22, but that overhang is above the card and is simply clipped away. */
	/* Every dimension is expressed against this multiplier so the --2x/--3x/--4x
	   modifiers only have to change one number. clip-path is in percentages and
	   letter-spacing is in em, so both scale on their own. */
	--badge-scale: 1;
	width: calc(57.129px * var(--badge-scale));
	height: calc(81px * var(--badge-scale));
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 79.64%, 0 100%);
	/* Fallbacks are load-bearing: --gold/--navy are declared in
	   quick-move-in.css, which does not load on the Elementor templates this
	   shortcode is built for. */
	background: var(--gold, #FEBF00);
	color: var(--navy, #1B365D);
	font-size: calc(0.8rem * var(--badge-scale));
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	text-align: center;
	/* Pulls the label up out of the notch so it reads as centred in the solid
	   part of the ribbon rather than in the box. */
	padding-bottom: calc(16.5px * var(--badge-scale));
}

/* Size modifiers, driven by [home_badge size="2x"]. The fractional step is
   spelled 1-5x rather than 1.5x — a dot would need escaping in the selector. */
.qmi-card__badge--1-5x { --badge-scale: 1.5; }
.qmi-card__badge--2x { --badge-scale: 2; }
.qmi-card__badge--3x { --badge-scale: 3; }
.qmi-card__badge--4x { --badge-scale: 4; }

/* Overlays the nearest positioned ancestor. Used by the Quick Move-In cards,
   whose .qmi-card__image-wrap is position:relative. */
.qmi-card__badge--absolute {
	position: absolute;
	top: 0;
	left: 0;
}
