/* ========================================================================
 * HOME — blog listing
 * Depende: components.css
 * ===================================================================== */

.gl-home { padding: var(--space-16) 0 var(--space-12); }

.gl-home__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--space-16);
}
.gl-home__title {
	font-size: clamp(var(--fs-3xl), 6vw, var(--fs-4xl));
	margin-bottom: var(--space-4);
}
.gl-home__subtitle {
	font-size: var(--fs-lg);
	color: var(--fg-muted);
	margin-bottom: var(--space-8);
}

.gl-search {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
}
.gl-search input[type="search"] {
	flex: 1;
	max-width: 420px;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: var(--fg-page);
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
}

.gl-home__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-8);
}