/* ==========================================================================
   Featured Program Card — .ac-featured-program-card
   Full-bleed image background + bottom linear gradient + overlay text.
   ========================================================================== */

.ac-featured-programs {
	position:         relative;
	background-color: var(--ac-color-blue);
}

/* Blue band (header strip) */
.ac-featured-programs__band {
	background-color: var(--ac-color-blue);
	padding:          var(--ac-space-4) 0;
}

.ac-featured-programs__band-inner {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             var(--ac-space-4);
	flex-wrap:       wrap;
}

.ac-featured-programs__title {
	margin:       0 0 var(--ac-space-2);
	font-size:    var(--ac-font-size-2xl);
	font-weight:  var(--ac-font-weight-bold);
	color:        var(--ac-color-white);
	line-height:  var(--ac-line-height-tight);
}

.ac-featured-programs__subtitle {
	margin:      0;
	font-size:   var(--ac-font-size-sm);
	color:       rgba(255, 255, 255, 0.8);
	line-height: var(--ac-line-height-normal);
}

/* Wrapper for the "View all programs" button, now below the card grid */
.ac-featured-programs__view-all-wrap {
	display:         flex;
	justify-content: center;
	margin-top:      var(--ac-space-8);
}

.ac-featured-programs__view-all {
	white-space: nowrap;
}

/* Cards grid */
.ac-featured-programs__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--ac-space-5);
	padding-bottom:        var(--ac-space-16);
}

@media (max-width: 72em) {
	.ac-featured-programs__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 40em) {
	.ac-featured-programs__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Card layout
 * ──────────────────────────────────────────────
 *   0% ┌─────────────────┐
 *      │  clean photo    │
 *      │                 │
 *  30% │  ░░ fade ░░░░░  │  gradient starts (transparent)
 *      │  ░░░░░░░░░░░░░  │
 *  50% ├─ ─ ─ ─ ─ ─ ─ ─ ┤  grid row boundary (text starts)
 *      │  ░░░░░░░░░░░░░  │  photo still present beneath gradient
 *  60% │  ■■■■■■■■■■■■■  │  gradient fully solid; photo ends here
 *      │  title/excerpt  │
 * 100% └─────────────────┘
 *
 *  Photo extends to 60% so the gradient has real photo to blend with.
 *  Gradient covers 30%→60% — a full 30% blend zone, no hard line possible.
 *  card background-color (secondary) is the solid floor the gradient melts into.
 *  No colour change on hover — only lift + photo scale.
 */

.ac-featured-program-card {
	position:         relative;
	display:          grid;
	grid-template-rows: 1fr 1fr;
	border-radius:    var(--ac-radius-card);
	overflow:         hidden;
	aspect-ratio:     2 / 3;
	background-color: var(--ac-color-secondary);
	box-shadow:       var(--ac-shadow-card);
	text-decoration:  none;
	color:            inherit;
	cursor:           pointer;
	transition:
		transform  var(--ac-duration-medium) var(--ac-ease-standard),
		box-shadow var(--ac-duration-medium) var(--ac-ease-standard);
}

.ac-featured-program-card:hover,
.ac-featured-program-card:focus-within {
	transform:  translateY(-4px);
	box-shadow: var(--ac-shadow-lg);
}

.ac-featured-program-card:focus-visible {
	outline: none;
	box-shadow:
		inset 0 0 0 3px var(--ac-color-focus-ring),
		inset 0 0 0 5px rgba(255, 255, 255, 0.55),
		var(--ac-shadow-lg);
}

/* Photo — extends to 60% so the gradient has real image to dissolve into */
.ac-featured-program-card__bg {
	position:            absolute;
	top:                 0;
	left:                0;
	right:               0;
	height:              60%;
	background-size:     cover;
	background-position: center top;
	background-repeat:   no-repeat;
	z-index:             1;
	transition:          transform var(--ac-duration-long) var(--ac-ease-standard);
}

.ac-featured-program-card:hover .ac-featured-program-card__bg,
.ac-featured-program-card:focus-within .ac-featured-program-card__bg {
	transform: scale(1.04);
}

/* Gradient — transparent→solid secondary, 30%→65%.
   Intentionally runs 5% past the photo's rest position (60%) so that
   the hover scale(1.04) — which pushes the photo bottom to ~62% — is
   always covered and never shows a bare-photo sliver. */
.ac-featured-program-card__overlay {
	position:       absolute;
	top:            30%;
	left:           0;
	right:          0;
	height:         35%;   /* 30% → 65% */
	z-index:        2;
	background:     linear-gradient(
		to bottom,
		transparent               0%,
		var(--ac-color-secondary) 100%
	);
	pointer-events: none;
}

/*
 * Hover overlay (navy) — single ::after covers BOTH the gradient zone
 * AND the solid text band so one opacity transition handles everything.
 * No background-color transition needed → no flicker.
 *
 *  top: 30%   = gradient starts (transparent)
 *  at 35% of its own height = card 30% + 35% = 65% → solid navy
 *  bottom: 0  = extends to card bottom, stays solid navy
 */
.ac-featured-program-card::after {
	content:        '';
	position:       absolute;
	top:            30%;
	left:           0;
	right:          0;
	bottom:         0;
	z-index:        3;
	background:     linear-gradient(
		to bottom,
		transparent             0%,
		var(--ac-color-primary) 35%,
		var(--ac-color-primary) 100%
	);
	opacity:        0;
	pointer-events: none;
	transition:     opacity var(--ac-duration-medium) var(--ac-ease-standard);
}

.ac-featured-program-card:hover::after,
.ac-featured-program-card:focus-within::after {
	opacity: 1;
}

/* Content — grid row 2 (50%→100%), above photo + gradient */
.ac-featured-program-card__content {
	grid-row:        2;
	position:        relative;
	z-index:         10;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	padding:         var(--ac-space-5) var(--ac-space-6);
}

.ac-featured-program-card__title {
	margin:      0 0 var(--ac-space-2);
	font-size:   var(--ac-font-size-lg);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-white);
	line-height: var(--ac-line-height-tight);
}

.ac-featured-program-card__excerpt {
	margin:      0 0 var(--ac-space-4);
	font-size:   var(--ac-font-size-sm);
	color:       rgba(255, 255, 255, 0.85);
	line-height: var(--ac-line-height-normal);
	/* Always occupy exactly 4 lines so titles stay vertically aligned */
	min-height:          calc( 4 * var(--ac-line-height-normal) * var(--ac-font-size-sm) );
	/* Clamp to 4 lines when there is more text */
	display:             -webkit-box;
	-webkit-line-clamp:  4;
	-webkit-box-orient:  vertical;
	overflow:            hidden;
}

/* Whole card is the link — no separate CTA arrow needed */