/* =====================================================================
 * RF SERVICES SHOWCASE — Rose Fit dark cinematic services widget
 * ---------------------------------------------------------------------
 * Fully isolated under the `.rf-services-widget` namespace.
 * Every tunable value is a CSS custom property defined on the section
 * root; Elementor controls in class-rf-services-widget.php override the
 * same variables, so the design can be re-tuned without touching markup
 * or this stylesheet's structure.
 *
 * The cards sit DIRECTLY on the black page background — no decorative
 * wrapper or dotted/halftone layer around the grid.
 *
 * Interaction model:
 *   DEFAULT : title + CTA visible near the bottom edge; the description
 *             (where present) is collapsed to zero height.
 *   HOVER   : the description expands into view between title and CTA at
 *             exactly its natural height (grid-template-rows 0fr → 1fr —
 *             no magic max-height, no dead space). The content group is
 *             pinned to the card bottom, so the title rises to make room
 *             while the CTA link stays put. Mouse-leave reverses it.
 *   The card, the CTA link, the card's neighbours: none of them move.
 *
 * Typography is 1:1 with Figma node 105:184 — Anton titles (#F4EA8A),
 * Manrope descriptions, Michroma CTA links (#FFB300).
 *
 * Layer order (bottom → top):
 *   0  page/section black background (--rf-background)
 *   1  card image        (.rf-service-card__image)
 *   2  gradient overlay  (.rf-service-card__overlay)
 *   3  content group     (.rf-service-card__content)
 * ===================================================================== */

.rf-services-widget,
.rf-services-widget * {
	box-sizing: border-box;
}

.rf-services-widget {
	/* ---------- palette ---------- */
	--rf-background: transparent;
	--rf-title-color: #f4ea8a;
	--rf-cta-color: #ffb300;
	--rf-cta-hover-color: #ffd83d;
	--rf-desc-color: #ffffff;
	--rf-overlay-color: #000000;
	--rf-overlay-strength: 0.90;
	--rf-overlay-hover-opacity: 0.92;

	/* ---------- layout ---------- */
	--rf-card-gap: 18px;
	--rf-card-height: 422px;
	--rf-card-radius: 2px;
	--rf-card-cut: 55px;

	/* ---------- section outer padding (all sides default to zero:
	 * the grid sits flush against the black page background) ---------- */
	--rf-section-padding-top: 0px;
	--rf-section-padding-right: 0px;
	--rf-section-padding-bottom: 0px;
	--rf-section-padding-left: 0px;

	/* ---------- content positioning ---------- */
	--rf-content-left: 25px;
	--rf-content-right: 22px;
	--rf-card-content-bottom: 28px;
	--rf-title-gap: 14px;
	--rf-desc-gap: 27px;          /* description 366 → link 393 in Figma */
	--rf-desc-reveal-gap: 9px;    /* title 217 + 14 + 9 = description 240 */
	--rf-desc-width: 242px;

	/* ---------- motion (description reveal only) ----------
	 * The content group is anchored to the CARD BOTTOM, so an expanding
	 * description pushes the title upward on its own and the CTA link never
	 * moves. There is deliberately no hover lift: shifting the whole group
	 * dragged the "Apply Now" links up with it. */
	--rf-card-animation-duration: 950ms; /* transform duration             */
	--rf-card-animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
	--rf-card-image-hover-scale: 1.05;   /* subtle image zoom only         */
	--rf-arrow-hover-x: 5px;

	/* ---------- image treatment ---------- */
	--rf-img-brightness: 0.75;
	--rf-img-contrast: 1.08;
	--rf-img-saturation: 0.85;

	position: relative;
	width: 100%;
	margin: 0;
	background: transparent !important;
	background-color: transparent !important;
	/* ponytail: !important beats Elementor's cached post CSS, which still
	 * carries a saved padding value from before the control was removed. */
	padding: 0 !important;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =====================================================================
 * 1. INNER WRAPPER & SERVICES GRID
 * No decorative container, no extra padding/margins — the grid floats
 * directly on the page black and fills its parent width.
 * ===================================================================== */
.rf-services-widget__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0;
}

.rf-services-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rf-card-gap);
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* =====================================================================
 * 2. SERVICE CARD
 * Fixed cinematic panel — never moves, never resizes on hover.
 * overflow:hidden keeps the expanding description clipped inside.
 * Top-left corner chamfer cut matching Figma node 105-199.
 * ===================================================================== */
.rf-service-card,
.rf-service-card:hover,
.rf-service-card:focus,
.rf-service-card:focus-within,
.rf-service-card:active,
.rf-service-card.is-active {
	position: relative;
	height: var(--rf-card-height);
	border-radius: var(--rf-card-radius);
	overflow: hidden;
	isolation: auto;
	background: transparent !important;
	background-color: transparent !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-clip-path: polygon(var(--rf-card-cut, 55px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--rf-card-cut, 55px));
	clip-path: polygon(var(--rf-card-cut, 55px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--rf-card-cut, 55px));
}

.rf-service-card--has-link {
	cursor: pointer;
}

.rf-service-card__full-link {
	position: absolute !important;
	inset: 0 !important;
	z-index: 10 !important;
	display: block !important;
	text-decoration: none !important;
	cursor: pointer !important;
	pointer-events: auto !important;
	-webkit-tap-highlight-color: transparent !important;
}

.rf-service-card__full-link:focus-visible {
	outline: 2px solid var(--rf-cta-color, #ffb300);
	outline-offset: -2px;
}

/* ---------- 2-cut. soft light fade gradient on the cut area ---------- */
.rf-service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(
		ellipse 110% 70% at 0% 0%,
		rgba(255, 255, 255, 0.10) 0%,
		rgba(255, 255, 255, 0.04) 35px,
		rgba(255, 255, 255, 0.01) 80px,
		transparent 130px
	);
}

/* ---------- 2a. image layer (the only thing that zooms) ---------- */
.rf-service-card__image {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--rf-image-position, center center);
	background-color: transparent !important;
	transform: translate3d(0, 0, 0) scale(1);
	-webkit-transform: translate3d(0, 0, 0) scale(1);
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2b. dark gradient overlay ----------
   Initial state: black shadow gradient at the bottom of each box.
   Mouseover state: becomes transparent so the background shows through. */
.rf-service-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.15) 25%,
		rgba(0, 0, 0, 0.55) 45%,
		rgba(0, 0, 0, 0.85) 65%,
		rgba(0, 0, 0, 0.97) 100%
	);
	opacity: 1;
	transition: opacity 0.85s ease;
	pointer-events: none;
}

/* ---------- 2c. content group (title + description + CTA).
   DEFAULT : anchored at the card bottom — title and CTA visible.
   HOVER   : the description expands between them. Because the group is
             pinned to the card bottom, that growth pushes the TITLE up
             and leaves the CTA link exactly where it started. Flex column
             layout prevents margin collapsing so every gap is exact. ---------- */
.rf-service-card__content {
	position: absolute;
	left: var(--rf-content-left);
	right: var(--rf-content-right);
	bottom: var(--rf-card-content-bottom);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events: none !important;
}

.rf-service-card__content * {
	pointer-events: none !important;
}

/* =====================================================================
 * 3. TYPOGRAPHY
 * ===================================================================== */

/* ---------- title: condensed yellow display type (always visible) ---- */
.rf-service-card__title {
	margin: 0 0 0;
	font-family: "Anton", sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 34px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #F4EA8A !important;
	-webkit-text-fill-color: #F4EA8A !important;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.55);
	filter: none;
	position: relative;
	z-index: 6;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	flex-shrink: 0 !important;
}

/* ---------- description: collapsed by default, expands to natural
   height on hover via grid-template-rows (gradual, organic unfold). ---------- */
.rf-service-card__description {
	display: grid;
	grid-template-rows: 0fr;
	max-width: var(--rf-desc-width);
	margin: 0;
	opacity: 0;
	transition:
		grid-template-rows 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 450ms ease,
		margin-top 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
		margin-bottom 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rf-service-card__description-text,
.rf-service-card__description-text * {
	min-height: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.16px;
	text-transform: none !important;
	font-variant: normal !important;
	-webkit-font-feature-settings: normal !important;
	font-feature-settings: normal !important;
	color: var(--rf-desc-color, #ffffff) !important;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.55);
	text-wrap: pretty;
}

/* Animation disabled from the Elementor control → description stays open */
.rf-services-widget.rf--hover-off .rf-service-card__description {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: var(--rf-desc-reveal-gap);
	margin-bottom: var(--rf-desc-gap);
}

/* =====================================================================
 * 4. CTA LINK — small gold text link, always visible, no button chrome
 * ===================================================================== */
.rf-service-card__link,
.rf-service-card__link:visited {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: "Michroma", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--rf-cta-color, #ffb300) !important;
	-webkit-text-fill-color: var(--rf-cta-color, #ffb300) !important;
	filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.55));
	transition: color 0.25s ease;
	outline-offset: 4px;
}

.rf-service-card__arrow {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rf-service-card__arrow svg {
	display: block;
	width: 11px;
	height: auto;
}

/* =====================================================================
 * 5. DESKTOP HOVER (MOUSE / TRACKPAD ONLY)
 * Strictly isolated to mouse pointers so mobile touch/click gestures
 * do not interfere with desktop behavior.
 * ===================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
	.rf-service-card:hover .rf-service-card__image {
		transform: scale(var(--rf-card-image-hover-scale));
	}

	.rf-service-card:hover .rf-service-card__overlay {
		opacity: 0;
	}

	.rf-service-card:hover .rf-service-card__description {
		grid-template-rows: 1fr;
		opacity: 1;
		margin-top: var(--rf-desc-reveal-gap);
		margin-bottom: var(--rf-desc-gap);
		transition:
			grid-template-rows 950ms cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 750ms ease 120ms,
			margin-top 950ms cubic-bezier(0.22, 0.61, 0.36, 1),
			margin-bottom 950ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.rf-service-card:hover .rf-service-card__link,
	.rf-service-card__link:hover {
		color: var(--rf-cta-hover-color, #ffd83d) !important;
		-webkit-text-fill-color: var(--rf-cta-hover-color, #ffd83d) !important;
	}

	.rf-service-card:hover .rf-service-card__arrow {
		transform: translateX(var(--rf-arrow-hover-x));
	}
}

/* =====================================================================
 * 6. RESPONSIVE (TABLET & MOBILE)
 * Replicates the exact desktop hover animation for touch/in-viewport:
 * - When a card receives .is-active (or :focus-within), the description
 *   expands, smoothly sliding the title up and revealing CTA / image / overlay.
 * - Initial state: opacity 1 always, perfectly stable, zero flicker or jumps.
 * - GPU-accelerated transforms, opacity, and max-height for 100% Safari stability.
 * ===================================================================== */
@media (max-width: 1024px) {
	.rf-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rf-service-card {
		isolation: isolate;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}

	/* Full-surface link active on mobile/tablet — clean touch routing */
	.rf-service-card__full-link {
		pointer-events: auto;
		position: absolute;
		inset: 0;
		z-index: 10;
		display: block;
		-webkit-tap-highlight-color: transparent;
	}

	.rf-service-card__content {
		position: absolute;
		left: var(--rf-content-left, 25px);
		right: var(--rf-content-right, 22px);
		bottom: var(--rf-card-content-bottom, 28px);
		z-index: 6;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		pointer-events: none;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.rf-service-card__link,
	.rf-service-card__content a {
		pointer-events: none;
	}

	/* Title is always visible, crisp and guaranteed on Safari */
	.rf-service-card__title {
		font-family: "Anton", -apple-system, BlinkMacSystemFont, sans-serif !important;
		font-size: 28px !important;
		line-height: 34px !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		color: #F4EA8A !important;
		-webkit-text-fill-color: #F4EA8A !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		z-index: 8 !important;
		flex-shrink: 0 !important;
		margin: 0 0 8px 0 !important;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	/* Description collapsed at rest — 0 height so title sits cleanly near CTA */
	.rf-service-card__description {
		display: block !important;
		max-height: 0 !important;
		max-width: 100% !important;
		opacity: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		pointer-events: none !important;
		-webkit-transform: translateY(14px) translateZ(0);
		transform: translateY(14px) translateZ(0);
		-webkit-transition:
			max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
			opacity 0.45s ease,
			margin 0.65s cubic-bezier(0.16, 1, 0.3, 1),
			-webkit-transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
		transition:
			max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
			opacity 0.45s ease,
			margin 0.65s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: max-height, opacity, transform;
	}

	.rf-service-card__description-text,
	.rf-service-card__description-text * {
		font-size: 15px !important;
		line-height: 24px !important;
		color: #e5e5e5 !important;
		text-transform: none !important;
		font-variant: normal !important;
		-webkit-font-feature-settings: normal !important;
		font-feature-settings: normal !important;
		font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Active state replicates desktop hover: text slides up smoothly */
	.rf-service-card.is-active .rf-service-card__image,
	.rf-service-card:focus-within .rf-service-card__image {
		transform: scale(var(--rf-card-image-hover-scale, 1.05));
	}

	.rf-service-card.is-active .rf-service-card__description,
	.rf-service-card:focus-within .rf-service-card__description {
		max-height: 180px !important;
		opacity: 1 !important;
		margin-top: 8px !important;
		margin-bottom: 18px !important;
		-webkit-transform: translateY(0) translateZ(0);
		transform: translateY(0) translateZ(0);
		pointer-events: auto !important;
		-webkit-transition:
			max-height 850ms cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 750ms ease 80ms,
			margin 850ms cubic-bezier(0.22, 0.61, 0.36, 1),
			-webkit-transform 850ms cubic-bezier(0.22, 0.61, 0.36, 1);
		transition:
			max-height 850ms cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 750ms ease 80ms,
			margin 850ms cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 850ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.rf-service-card.is-active .rf-service-card__link,
	.rf-service-card:focus-within .rf-service-card__link {
		color: var(--rf-cta-hover-color, #ffd83d) !important;
		-webkit-text-fill-color: var(--rf-cta-hover-color, #ffd83d) !important;
	}

	.rf-service-card.is-active .rf-service-card__arrow,
	.rf-service-card:focus-within .rf-service-card__arrow {
		transform: translateX(var(--rf-arrow-hover-x, 5px));
	}
}

@media (max-width: 767px) {
	.rf-services-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.rf-service-card {
		height: 440px;
		min-height: 440px;
		position: relative;
		display: block;
		padding: 0;
		overflow: hidden;
		isolation: isolate;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		-webkit-clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
		clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}

	.rf-service-card__full-link {
		pointer-events: auto;
		position: absolute;
		inset: 0;
		z-index: 10;
		display: block;
		-webkit-tap-highlight-color: transparent;
	}

	.rf-service-card__content {
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 24px;
		width: calc(100% - 40px);
		max-width: calc(100% - 40px);
		z-index: 6;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		pointer-events: none;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.rf-service-card__content * {
		pointer-events: none;
	}

	.rf-service-card__title {
		font-size: 26px !important;
		line-height: 32px !important;
		color: #F4EA8A !important;
		-webkit-text-fill-color: #F4EA8A !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		filter: none;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
		position: relative !important;
		z-index: 8 !important;
		flex-shrink: 0 !important;
		margin: 0 0 8px 0 !important;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.rf-service-card__description {
		max-width: 100% !important;
	}

	.rf-service-card__link {
		position: relative;
		z-index: 7;
		display: inline-flex;
		flex-shrink: 0;
		pointer-events: none;
		padding: 4px 0;
	}
}

/* Never let long words force horizontal overflow */
.rf-service-card__title,
.rf-service-card__description-text,
.rf-service-card__link-text {
	overflow-wrap: break-word;
	min-width: 0;
}

/* Hover disabled via Elementor settings (Desktop only) */
@media (min-width: 1025px) {
	.rf-services-widget.rf--hover-off .rf-service-card__description {
		grid-template-rows: 1fr;
		opacity: 1;
		margin-top: var(--rf-desc-reveal-gap);
		margin-bottom: var(--rf-desc-gap);
	}
}

/* =====================================================================
 * 7. ACCESSIBILITY
 * Reduced-motion users get instantaneous transitions without layout breaks.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {

	.rf-service-card,
	.rf-service-card__image,
	.rf-service-card__overlay,
	.rf-service-card__content,
	.rf-service-card__title,
	.rf-service-card__description,
	.rf-service-card__arrow,
	.rf-service-card__link {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.rf-service-card:hover .rf-service-card__image,
	.rf-service-card.is-active .rf-service-card__image,
	.rf-service-card:focus-within .rf-service-card__image {
		transform: none !important;
	}
}