/* Systical — Featured Posts (one lead, two beside it) */

.sys-pf {
	--pf-accent: #9afd0d;
	--pf-max: 1400px;
	--pf-gap: 26px;
	--pf-radius: 16px;
	--pf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	padding: 190px 40px 60px;
	background-color: #070707;
}

.sys-pf__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pf-gap);
	max-width: var(--pf-max);
	margin: 0 auto;
}

.sys-pf__side {
	display: grid;
	/* Equal rows, so the two stacked cards always match each other's height
	   whatever their titles do. */
	grid-template-rows: 1fr 1fr;
	gap: var(--pf-gap);
	min-width: 0;
}

/* ---------- cards ---------- */

.sys-pf__card {
	position: relative;
	min-width: 0;
}

/* The whole card opens the post — the title link is stretched over it so a
   click on the excerpt, or between two title lines, lands somewhere. */
.sys-pf__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The lead stacks image over text; the side cards put the image beside it. */
.sys-pf__card--side {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 20px;
}

.sys-pf__media {
	display: block;
	overflow: hidden;
	border-radius: var(--pf-radius);
	background-color: #111;
}

.sys-pf__card--lead .sys-pf__media {
	aspect-ratio: 16 / 10;
	margin-bottom: 18px;
}

.sys-pf__card--side .sys-pf__media {
	aspect-ratio: 1 / 1;
	height: 100%;
}

/* Two classes deep: Elementor ships `.elementor img { height: auto }` at
   (0,1,1), which would beat a single-class rule and collapse the fill. */
.sys-pf .sys-pf__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 640ms var(--pf-ease);
}

.sys-pf__img--empty {
	background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

.sys-pf__card:hover .sys-pf__img {
	transform: scale(1.04);
}

.sys-pf__body {
	min-width: 0;
}

.sys-pf__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.sys-pf__term {
	padding: 6px 14px;
	border: 1px solid #2e2e2e;
	border-radius: 999px;
	color: #fff;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}

.sys-pf__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.018em;
	color: #fff;
}

.sys-pf__card--lead .sys-pf__title {
	font-size: clamp(22px, 2vw, 30px);
}

.sys-pf__card--side .sys-pf__title {
	font-size: clamp(18px, 1.5vw, 23px);
}

.sys-pf__link {
	color: inherit;
	text-decoration: none;
}

.sys-pf__link:hover,
.sys-pf__link:focus-visible {
	color: var(--pf-accent);
}

.sys-pf__excerpt {
	margin: 10px 0 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #9a9a9a;
	/* Clamped so an uneven set of excerpts cannot pull the two side cards out
	   of alignment with each other. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sys-pf__card--side .sys-pf__excerpt {
	-webkit-line-clamp: 3;
	font-size: 14.5px;
}

/* ---------- editor empty state ---------- */

.sys-pf--empty {
	padding: 40px;
	color: #929292;
	font-family: Inter, system-ui, sans-serif;
	text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-pf__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sys-pf__side {
		grid-template-rows: auto auto;
	}
}

@media (max-width: 767px) {
	.sys-pf {
		padding: 118px 18px 34px;
	}

	/* Below this the side cards' two columns leave the text about 40% of a
	   phone, which is not enough for a title. */
	.sys-pf__card--side {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.sys-pf__card--side .sys-pf__media {
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.sys-pf__card--lead .sys-pf__title {
		font-size: 21px;
	}

	.sys-pf__card--side .sys-pf__title {
		font-size: 18px;
	}

	.sys-pf__excerpt,
	.sys-pf__card--side .sys-pf__excerpt {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sys-pf .sys-pf__img {
		transition: none;
	}
}