/**
 * RF Plan Cards — custom Rose Fit Elementor widget.
 *
 * Figma node 262:69 (card) laid out on the 1232 x 1535 grid, 1:1:
 *   [ 350px image, top corners rounded 15px ]
 *   42px gap
 *   [ eyebrow (Michroma 13/24) → title (Anton 58/62) → body (Manrope 16/26)
 *     → outlined "Book a Consultation" button ], 20px apart, 25px side inset
 *   40px of breathing room under the button.
 *
 * Two 607px columns, 18px apart (1232 - 2 x 607). Everything is namespaced
 * under .rf-plan-cards and driven by CSS custom properties so each Elementor
 * control writes one variable rather than fighting selector specificity.
 */

.rf-plan-cards,
.rf-plan-cards * {
	box-sizing: border-box;
}

.rf-plan-cards {
	/* ---------- design tokens (Figma node 262:69) ---------- */
	--rf-plan-bg: transparent;
	--rf-plan-inner-width: 1232px;
	--rf-plan-padding-y: 0px;
	--rf-plan-padding-x: 20px;

	--rf-plan-columns: 2;
	--rf-plan-gap: 18px;              /* 1232 - (2 x 607) */

	--rf-plan-card-bg: #1e1e1e;
	--rf-plan-card-radius: 10px;
	--rf-plan-card-gap: 42px;         /* image → body */
	--rf-plan-card-padding-bottom: 40px;
	--rf-plan-card-padding-x: 25px;

	/* ponytail: !important beats the value saved in Elementor's post CSS. */
	--rf-plan-image-height: 350px !important;
	--rf-plan-image-radius: 15px;

	--rf-plan-body-gap: 20px;
	--rf-plan-eyebrow-color: #ffb300;
	--rf-plan-title-color: #ffffff;
	--rf-plan-title-width: 530px;
	--rf-plan-text-color: #ffffff;
	--rf-plan-text-width: 549px;

	--rf-plan-btn-color: #f4ea8a;
	--rf-plan-btn-border-color: #f4ea8a;
	--rf-plan-btn-border-width: 1px;
	--rf-plan-btn-radius: 5px;
	--rf-plan-btn-bg: transparent;
	--rf-plan-btn-hover-color: #1e1e1e;
	--rf-plan-btn-hover-bg: #f4ea8a;
	--rf-plan-btn-height: 51px;       /* stated outright, as in Figma */
	--rf-plan-btn-padding-x: 20px;

	--rf-plan-image-hover-scale: 1;   /* 1 = still; raise for a slow zoom */

	position: relative;
	width: 100%;
	background: var(--rf-plan-bg);
	/* ponytail: !important beats Elementor's cached post CSS, which still
	 * carries a saved padding value from before the control was removed. */
	padding: 0 !important;
}

.rf-plan-cards__inner {
	width: 100%;
	max-width: var(--rf-plan-inner-width);
	margin-left: auto;
	margin-right: auto;
}

.rf-plan-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--rf-plan-columns), minmax(0, 1fr));
	gap: var(--rf-plan-gap);
	align-items: stretch;
	/* align-items only equalises cards WITHIN a row; grid rows size
	 * independently, so a 3-line title in row 2 made that row taller than
	 * row 1. 1fr forces every row to the tallest card in the whole grid. */
	grid-auto-rows: 1fr;
}

/* =========================================================
 * CARD
 * ========================================================= */
.rf-plan-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rf-plan-card-gap);
	/* No side padding on the card itself — the image runs edge to edge and
	 * the body block carries its own 25px inset, exactly as in Figma. */
	padding: 0 0 var(--rf-plan-card-padding-bottom);
	background: var(--rf-plan-card-bg);
	border-radius: var(--rf-plan-card-radius);
	overflow: hidden;
}

/* ---------- image ---------- */
.rf-plan-card__media {
	position: relative;
	width: 100%;
	height: var(--rf-plan-image-height);
	flex: 0 0 auto;
	border-radius: var(--rf-plan-image-radius) var(--rf-plan-image-radius) 0 0;
	overflow: hidden;
}

/* Two classes deep on purpose: Elementor ships `.elementor img { height: auto }`
 * (0,1,1), which outranks a lone `.rf-plan-card__image` (0,1,0) and let the
 * image size to its own aspect ratio — leaving a strip of bare card background
 * under it that grew as the card narrowed. */
.rf-plan-card__media .rf-plan-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.65s ease;
}

.rf-plan-card:hover .rf-plan-card__image {
	transform: scale(var(--rf-plan-image-hover-scale));
}

/* ---------- body ---------- */
.rf-plan-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rf-plan-body-gap);
	/* Grows into whatever height the tallest card in the row sets, which is
	 * what lets the button's `margin-top: auto` reach the bottom edge. */
	flex: 1 1 auto;
	width: 100%;
	padding: 0 var(--rf-plan-card-padding-x);
}

.rf-plan-card__eyebrow {
	margin: 0;
	color: var(--rf-plan-eyebrow-color);
	font-family: "Michroma", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.52px;
	text-transform: uppercase;
}

.rf-plan-card__title {
	margin: 0;
	max-width: min(var(--rf-plan-title-width), 100%);
	color: var(--rf-plan-title-color);
	font-family: "Anton", sans-serif;
	font-size: 58px;
	font-weight: 400;
	line-height: 62px;
	letter-spacing: 2.32px;
	text-transform: uppercase;
}

.rf-plan-card__text {
	margin: 0;
	max-width: min(var(--rf-plan-text-width), 100%);
	color: var(--rf-plan-text-color);
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.16px;
	text-wrap: pretty;
}

/* ---------- outlined button ---------- */
.rf-plan-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--rf-plan-btn-height);
	padding: 0 var(--rf-plan-btn-padding-x);
	border: var(--rf-plan-btn-border-width) solid var(--rf-plan-btn-border-color);
	border-radius: var(--rf-plan-btn-radius);
	background: var(--rf-plan-btn-bg);
	color: var(--rf-plan-btn-color);
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0.18px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.rf-plan-card__btn:hover,
.rf-plan-card__btn:focus-visible {
	background: var(--rf-plan-btn-hover-bg);
	color: var(--rf-plan-btn-hover-color);
	text-decoration: none;
}

/* Push the button to the card's bottom edge so buttons stay level across a
 * row whose titles wrap to different heights. */
.rf-plan-card__btn-wrap {
	margin-top: auto;
}

/* =========================================================
 * RESPONSIVE
 * ========================================================= */
@media (max-width: 1199.98px) {
	.rf-plan-cards {
		--rf-plan-image-height: 320px !important;
	}

	.rf-plan-card__title {
		font-size: 44px;
		line-height: 48px;
	}
}

@media (max-width: 767.98px) {
	.rf-plan-cards {
		--rf-plan-columns: 1;
		--rf-plan-card-gap: 28px;
		--rf-plan-image-height: 260px !important;
		--rf-plan-card-padding-bottom: 32px;
		--rf-plan-card-padding-x: 20px;
	}

	.rf-plan-card__title {
		font-size: 32px;
		line-height: 38px;
		letter-spacing: 1.2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rf-plan-card__image,
	.rf-plan-card__btn {
		transition: none;
	}
}