/**
 * RF Blog Posts — custom Rose Fit Elementor widget.
 *
 * Dark card, gold accents, one motion idea per interaction:
 *   - scroll:  card fades + rises, staggered by --rf-blog-index (JS adds .rf--play)
 *   - hover:   card lifts, border warms to gold, image zooms, a gold shine
 *              sweeps once across the card, the read-more arrow slides
 * Every value an editor can change is a custom property written by an
 * Elementor control, so no control ever has to out-specify a selector.
 */

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

.rf-blog {
	/* ---------- design tokens ---------- */
	--rf-blog-bg: transparent;
	--rf-blog-inner-width: 1232px;
	--rf-blog-columns: 3;
	--rf-blog-gap: 24px;

	--rf-blog-card-bg: #1e1e1e;
	--rf-blog-card-border: rgba(244, 234, 138, 0.18);
	--rf-blog-card-border-hover: #f4ea8a;
	--rf-blog-card-radius: 12px;
	--rf-blog-card-lift: -8px;

	--rf-blog-body-pt: 24px;
	--rf-blog-body-pr: 24px;
	--rf-blog-body-pb: 28px;
	--rf-blog-body-pl: 24px;

	--rf-blog-image-height: 240px;
	--rf-blog-image-scale: 1.08;

	--rf-blog-chip-color: #1e1e1e;
	--rf-blog-chip-bg: #f4ea8a;
	--rf-blog-meta-color: #ffb300;
	--rf-blog-title-color: #ffffff;
	--rf-blog-title-hover-color: #f4ea8a;
	--rf-blog-title-lines: 2;
	--rf-blog-text-color: rgba(255, 255, 255, 0.75);
	--rf-blog-text-lines: 3;
	--rf-blog-btn-color: #f4ea8a;
	--rf-blog-btn-hover-color: #ffb300;
	--rf-blog-btn-underline: 0px;

	--rf-blog-reveal-distance: 34px;
	--rf-blog-reveal-duration: 700ms;
	--rf-blog-reveal-stagger: 120ms;
	--rf-blog-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	width: 100%;
	background: var(--rf-blog-bg);
	/* ponytail: !important beats Elementor's cached post CSS, same as the
	 * other rf-* widgets in this theme. */
	padding: 0 !important;
}

.rf-blog__inner {
	width: 100%;
	max-width: var(--rf-blog-inner-width);
	margin-inline: auto;
}

.rf-blog__grid {
	display: grid;
	grid-template-columns: repeat(var(--rf-blog-columns), minmax(0, 1fr));
	gap: var(--rf-blog-gap);
	align-items: stretch;
}

.rf-blog__empty {
	margin: 0;
	color: var(--rf-blog-text-color);
	font-family: 'Manrope', sans-serif;
	text-align: center;
}

/* ============================================================
 * CARD
 * ========================================================== */
.rf-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--rf-blog-card-bg);
	border: 1px solid var(--rf-blog-card-border);
	border-radius: var(--rf-blog-card-radius);
	/* Only transform/border/shadow animate — all compositor-friendly. */
	transition:
		transform 450ms var(--rf-blog-ease),
		border-color 450ms var(--rf-blog-ease),
		box-shadow 450ms var(--rf-blog-ease);
}

.rf-blog-card:hover,
.rf-blog-card:focus-within {
	transform: translateY(var(--rf-blog-card-lift));
	border-color: var(--rf-blog-card-border-hover);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- gold shine sweep (opt-in via .rf-blog--sweep) ---------- */
.rf-blog--sweep .rf-blog-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(
		115deg,
		transparent 35%,
		rgba(244, 234, 138, 0.16) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	opacity: 0;
	transition: transform 900ms var(--rf-blog-ease), opacity 200ms linear;
}

.rf-blog--sweep .rf-blog-card:hover::after,
.rf-blog--sweep .rf-blog-card:focus-within::after {
	transform: translateX(120%);
	opacity: 1;
}

/* ============================================================
 * MEDIA
 * ========================================================== */
.rf-blog-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	height: var(--rf-blog-image-height);
	flex: 0 0 auto;
	background: #111;
	text-decoration: none;
}

.rf-blog-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transform: scale(1);
	transition: transform 700ms var(--rf-blog-ease);
}

.rf-blog-card__image--empty {
	background: linear-gradient(135deg, #262626 0%, #1a1a1a 100%);
}

.rf-blog-card:hover .rf-blog-card__image,
.rf-blog-card:focus-within .rf-blog-card__image {
	transform: scale(var(--rf-blog-image-scale));
}

/* Keeps the chip readable over a bright photo. */
.rf-blog-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
	opacity: 0.85;
	transition: opacity 450ms var(--rf-blog-ease);
}

.rf-blog-card:hover .rf-blog-card__shade {
	opacity: 0.55;
}

.rf-blog-card__chip {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--rf-blog-chip-bg);
	color: var(--rf-blog-chip-color);
	font-family: 'Michroma', sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	transform: translateY(0);
	transition: transform 450ms var(--rf-blog-ease);
}

.rf-blog-card:hover .rf-blog-card__chip {
	transform: translateY(-3px);
}

/* ============================================================
 * BODY
 * ========================================================== */
.rf-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	padding: var(--rf-blog-body-pt) var(--rf-blog-body-pr) var(--rf-blog-body-pb) var(--rf-blog-body-pl);
}

.rf-blog-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	color: var(--rf-blog-meta-color);
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

.rf-blog-card__dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.rf-blog-card__title {
	margin: 0;
	font-family: 'Anton', sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0.3px;
	color: var(--rf-blog-title-color);
	/* Clamp so a long headline cannot make one card taller than its row. */
	display: -webkit-box;
	-webkit-line-clamp: var(--rf-blog-title-lines);
	line-clamp: var(--rf-blog-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rf-blog-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 350ms var(--rf-blog-ease);
}

.rf-blog-card:hover .rf-blog-card__title a,
.rf-blog-card__title a:focus-visible {
	color: var(--rf-blog-title-hover-color);
}

.rf-blog-card__text {
	margin: 0;
	color: var(--rf-blog-text-color);
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	line-height: 26px;
}

/* ---------- read more ---------- */
.rf-blog-card__more {
	/* margin-top:auto keeps every link level along the bottom of its row. */
	margin-top: auto;
	padding-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	color: var(--rf-blog-btn-color);
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-decoration: none;
	transition: color 350ms var(--rf-blog-ease);
}

.rf-blog-card__more:hover,
.rf-blog-card__more:focus-visible {
	color: var(--rf-blog-btn-hover-color);
}

.rf-blog-card__more-label {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
}

/* Underline grows left→right; height is 0 until the control turns it on. */
.rf-blog-card__more-label::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--rf-blog-btn-underline);
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 450ms var(--rf-blog-ease);
}

.rf-blog-card:hover .rf-blog-card__more-label::after,
.rf-blog-card__more:focus-visible .rf-blog-card__more-label::after {
	transform: scaleX(1);
}

.rf-blog-card__arrow {
	width: 20px;
	height: 12px;
	flex: 0 0 auto;
	transform: translateX(0);
	transition: transform 450ms var(--rf-blog-ease);
}

.rf-blog-card:hover .rf-blog-card__arrow,
.rf-blog-card__more:focus-visible .rf-blog-card__arrow {
	transform: translateX(6px);
}

.rf-blog .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================================
 * SCROLL REVEAL
 * ------------------------------------------------------------
 * .rf--ready is added by rf-blog.js only. With JS off or blocked the
 * cards render finished — the animation can never hide content.
 * ========================================================== */
.rf-blog--reveal.rf--ready .rf-blog-card {
	opacity: 0;
	transform: translateY(var(--rf-blog-reveal-distance));
}

.rf-blog--reveal.rf--ready.rf--play .rf-blog-card {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity var(--rf-blog-reveal-duration) var(--rf-blog-ease),
		transform var(--rf-blog-reveal-duration) var(--rf-blog-ease),
		border-color 450ms var(--rf-blog-ease),
		box-shadow 450ms var(--rf-blog-ease);
	transition-delay: calc(var(--rf-blog-index, 1) * var(--rf-blog-reveal-stagger));
}

/* Hover must still work after the reveal: once played, drop the delay so
 * the lift responds immediately. */
.rf-blog--reveal.rf--ready.rf--play .rf-blog-card:hover,
.rf-blog--reveal.rf--ready.rf--play .rf-blog-card:focus-within {
	transform: translateY(var(--rf-blog-card-lift));
	transition-delay: 0s;
}

/* ============================================================
 * LONE CARD CENTERING (< 2 items in row)
 * ========================================================== */
.rf-blog-card--lone {
	grid-column: 1 / -1 !important;
	justify-self: center !important;
	width: 100% !important;
	max-width: calc((100% - (var(--rf-blog-columns, 3) - 1) * var(--rf-blog-gap, 24px)) / var(--rf-blog-columns, 3)) !important;
}

@media (min-width: 1025px) {
	.rf-blog-card:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: calc((100% - (var(--rf-blog-columns, 3) - 1) * var(--rf-blog-gap, 24px)) / var(--rf-blog-columns, 3));
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.rf-blog-card:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: calc((100% - (var(--rf-blog-columns, 2) - 1) * var(--rf-blog-gap, 24px)) / var(--rf-blog-columns, 2));
	}
}

/* ============================================================
 * LOAD MORE BUTTON
 * ========================================================== */
.rf-blog__load-more-wrap {
	margin-top: 48px;
	text-align: center;
	width: 100%;
}

.rf-blog__load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 180px;
	padding: 14px 36px;
	background-color: #1e1e1e;
	color: #f4ea8a;
	border: 1px solid rgba(244, 234, 138, 0.4);
	border-radius: 999px;
	font-family: 'Michroma', sans-serif;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: all 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
	position: relative;
	overflow: hidden;
}

.rf-blog__load-more-btn:hover,
.rf-blog__load-more-btn:focus-visible {
	background-color: #f4ea8a;
	color: #1e1e1e;
	border-color: #f4ea8a;
	box-shadow: 0 10px 25px rgba(244, 234, 138, 0.2);
	transform: translateY(-2px);
}

.rf-blog__load-more-btn:active {
	transform: translateY(0);
}

.rf-blog__load-more-btn.is-loading {
	opacity: 0.75;
	cursor: wait;
	pointer-events: none;
}

.rf-blog__load-more-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: rf-blog-spin 0.6s linear infinite;
}

.rf-blog__load-more-btn.is-loading .rf-blog__load-more-spinner {
	display: inline-block;
}

@keyframes rf-blog-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================
 * RESPONSIVE
 * ========================================================== */
@media (max-width: 1024px) {
	.rf-blog {
		--rf-blog-columns: 2;
	}
}

@media (max-width: 767px) {
	.rf-blog {
		--rf-blog-columns: 1;
		--rf-blog-image-height: 220px;
	}

	.rf-blog-card__title {
		font-size: 22px;
		line-height: 28px;
	}

	.rf-blog-card--lone,
	.rf-blog-card:last-child:nth-child(3n + 1),
	.rf-blog-card:last-child:nth-child(2n + 1) {
		grid-column: auto !important;
		justify-self: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ============================================================
 * REDUCED MOTION — everything static, nothing hidden.
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
	.rf-blog *,
	.rf-blog *::after {
		transition: none !important;
		animation: none !important;
	}

	.rf-blog--reveal.rf--ready .rf-blog-card {
		opacity: 1;
		transform: none;
	}
}