/**
 * Sam4Tech — Blog index styles.
 *
 * Loaded on the Posts page. The post card itself is a shared primitive from
 * style.css; this file adds the featured card and the grid around it.
 *
 * CONTENTS
 *   1. Featured post
 *   2. Post grid
 *   3. Responsive
 */

/* ==========================================================================
   1. Featured post
   Full width, with the gradient hairline used on the CTA and stats panels.
   ========================================================================== */

.s4t-feature {
	position: relative;
	max-width: 1080px;
	margin-inline: auto;
	margin-block-end: var(--s4t-space-5);
	background: var(--s4t-white);
	border-radius: var(--s4t-radius-lg);
	padding: clamp(1.5rem, 3.5vw, var(--s4t-space-7));
	box-shadow: var(--s4t-shadow-md);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.s4t-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(100deg, var(--s4t-brand), var(--s4t-accent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.s4t-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-feature__title {
	font-size: var(--s4t-text-2xl);
	line-height: 1.25;
	margin-block-end: var(--s4t-space-3);
}

.s4t-feature__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.s4t-feature:hover .s4t-feature__title a {
	color: var(--s4t-brand);
}

.s4t-feature__excerpt {
	max-width: 66ch;
	font-size: var(--s4t-text-sm);
	line-height: 1.8;
	margin-block-end: var(--s4t-space-4);
}

/* ==========================================================================
   2. Post grid
   ========================================================================== */

.s4t-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4t-space-5);
	max-width: 1080px;
	margin-inline: auto;
}

/* An odd final card keeps its column rather than stretching across, so the
   grid reads as a list that simply has not filled the last row. */
.s4t-blog-grid .s4t-post {
	height: 100%;
}

/* ==========================================================================
   3. Responsive
   ========================================================================== */

@media (max-width: 760px) {
	.s4t-blog-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.s4t-feature__title {
		font-size: var(--s4t-text-xl);
	}
}