/* ================================================
   RED POINT — BLOG FEATURE  (Figma 109:1272 / 109:1719)
   ================================================
   Wide single blog card — the category/product-page counterpart to the home page's three-up
   Blog Teaser.
   section  1440 wide · 60px pad
   card     1320x400 · 24px radius · grid 720 photo | 600 copy
   photo    720 · FIRST in DOM so RTL puts it in the RIGHT column
   panel    600 · #252525 · 16px pad · centred, right-aligned
   ================================================ */

.rp-blogf {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 60px;
	box-sizing: border-box;
}

/* grid 720 | 600. Under the RTL container the first column (720, the photo) is on the RIGHT,
   the second (600, the copy) on the left — matching 109:1284/109:1274. grid-template-rows
   pins the row to 400 so both cells fill it and the photo can't grow to its natural aspect
   past Hello's `img{height:auto}`. */
.rp-blogf__card {
	display: grid;
	grid-template-columns: 720px 600px;
	grid-template-rows: 400px;
	overflow: hidden;
	border-radius: 24px;
}

/* Ancestor in the selector (0,2,0) so height wins over `.elementor img{height:auto}`. */
.rp-blogf .rp-blogf__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------
   COPY PANEL  (109:1274) — #252525, centred, right-aligned
   ------------------------------------------------ */
.rp-blogf__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL cross-axis start = RIGHT */
	justify-content: center;
	gap: 16px;
	height: 100%;
	padding: 16px;
	background-color: #252525;
	text-align: right;
	box-sizing: border-box;
}

.rp-blogf__date {
	font-family: 'Google Sans', sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: #818181;
}

.rp-blogf__title {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 52px;
	color: #FFFFFF;
}

.rp-blogf__excerpt {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #C5C5C5;
}

/* "קרא עוד" + left arrow (RTL read-on). mt:8 over the 16px gap = the design's 24px. Ancestor
   in the selector so it beats Hello's `.elementor a` colour reset. */
.rp-blogf .rp-blogf__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #FF3B3B;
	text-decoration: none;
}

.rp-blogf__arrow {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ------------------------------------------------
   RESPONSIVE — no mobile frame in the Figma, a sensible stack.
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.rp-blogf {
		padding: 32px 24px;
	}
	.rp-blogf__card {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.rp-blogf .rp-blogf__media {
		height: 280px;
	}
	.rp-blogf__title {
		font-size: 30px;
		line-height: 40px;
	}
}