/* ================================================
   RED POINT — FEATURE ROWS  (Figma 109:1576)
   ================================================
   section  max 1440 · px 60 · py 90 · 80px between rows
   card     1320x350 · #252525 · 16px radius · 60px gap · items-center
   photo    652x350 · outer 16, inner squared (6px nick bottom-inner on a LEFT photo)
   copy     550 · Futurism 40 + 16/1.4 white/80 · right · inset 58
   ================================================ */

.rp-frow {
	display: flex;
	flex-direction: column;
	gap: 80px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 90px 60px;
	box-sizing: border-box;
}

.rp-frow__card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 60px;
	min-height: 350px;
	overflow: hidden;
	border-radius: 16px;
	background-color: #252525;
}

/* Photo — 652x350. Ancestor selector so the height beats `.elementor img{height:auto}`.
   Corner radii are PHYSICAL: a left photo rounds its left (outer) corners 16 with the inner
   top square and a 6px nick bottom-inner; a right photo rounds its right corners 16 with both
   inner corners square. */
.rp-frow .rp-frow__photo {
	width: 652px;
	max-width: 100%;
	height: 350px;
	flex-shrink: 0;
	object-fit: cover;
}

.rp-frow .rp-frow__photo--left {
	border-radius: 16px 0 6px 16px; /* TL TR BR BL */
}

.rp-frow .rp-frow__photo--right {
	border-radius: 0 16px 16px 0;
}

.rp-frow__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 550px;
	max-width: 100%;
	text-align: right;
	box-sizing: border-box;
}

/*
 * 652 photo + 60 gap + 550 copy = 1262 of 1320; the copy is inset 58px from the OUTER edge —
 * the card edge it sits against, not the edge facing the photo (the card's 60px gap already
 * handles that side).
 *
 * PHYSICAL margins, deliberately. The modifier is named for the PHOTO's side, and the card is
 * a flex row inside a hardcoded dir="rtl" section, so the copy always lands opposite the
 * photo: photo left ⇒ copy right, photo right ⇒ copy left. Logical properties were used here
 * before and had both rows inset on the wrong side — under RTL `inline-end` resolves to LEFT,
 * which put the 58px on the inner edge and let the text run flush into the card's outer edge.
 * Naming the physical side removes the double negative.
 */
.rp-frow__copy--left {
	margin-right: 58px; /* photo left  ⇒ copy sits right ⇒ inset from the RIGHT card edge */
}

.rp-frow__copy--right {
	margin-left: 58px; /* photo right ⇒ copy sits left  ⇒ inset from the LEFT card edge */
}

/* Category label — post source only. Sized off the subline, not the title, so it reads as
   metadata rather than a second heading. */
.rp-frow__cat {
	align-self: flex-start; /* the copy is a column with text-align:right; without this the
	                           chip would stretch the full 550px */
	padding: 4px 12px;
	/* --rp-chip is set inline from the category's own rp_colour, the same custom property the
	   category pills use — so an article's label matches its category across the storefront.
	   Falls back to the accent when the term has no colour set. */
	border: 1px solid var(--rp-chip, rgba(255, 255, 255, 0.2));
	border-radius: var(--rp-pill, 100px);
	font-family: 'Google Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--rp-chip, var(--rp-accent, #FF3B3B));
}

.rp-frow__title {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 40px;
	line-height: 1;
	color: #FFFFFF;
}

.rp-frow__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.rp-frow__link:hover {
	color: var(--rp-accent, #FF3B3B);
}

.rp-frow__line {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.rp-frow {
		gap: 40px;
		padding: 48px 24px;
	}
	.rp-frow__card {
		flex-direction: column;
		gap: 0;
	}
	.rp-frow .rp-frow__photo {
		width: 100%;
		border-radius: 16px 16px 0 0;
		order: -1;
	}
	.rp-frow__copy {
		width: 100%;
		padding: 24px;
	}
	.rp-frow__copy--left,
	.rp-frow__copy--right {
		margin: 0;
	}
}