/* =========================================================================
   11 · PROGRAMS GRID — 4 cards with Ajrak fallback art
   Reference: V4-BUILD-SPEC §4 #7
   ========================================================================= */

.jj-programs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}
@media (min-width: 36em) {
	.jj-programs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
	.jj-programs__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-5);
	}
}

.jj-program {
	background: var(--jj-bg);
	border: 1px solid var(--jj-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
	display: flex;
}
.jj-program:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--jj-primary-soft);
}

.jj-program__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.jj-program__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--jj-bg-warm);
}
.jj-program__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
.jj-program:hover .jj-program__img { transform: scale(1.05); }

.jj-program__pattern {
	width: 100%;
	height: 100%;
	display: block;
}

.jj-program__index {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	background: rgba(255, 255, 255, 0.92);
	color: var(--jj-primary);
	font-family: var(--jj-font-serif);
	font-weight: 600;
	font-size: var(--fs-sm);
	padding: 2px var(--sp-2);
	border-radius: var(--radius-sm);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.jj-program__body {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1;
}

.jj-program__title {
	font-size: var(--fs-lg);
	margin: 0;
	color: var(--jj-text);
}

.jj-program__excerpt {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--jj-muted);
	margin: 0;
	flex: 1;
}

.jj-program__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--jj-primary);
	font-weight: 600;
	font-size: var(--fs-sm);
	margin-top: auto;
	transition: gap var(--dur-fast) var(--ease);
}
.jj-program:hover .jj-program__more { gap: var(--sp-3); }