/* ==========================================================================
   Showcase Grid Section
   A content area (title, description, CTA) alongside a 2x2 linked image grid.
   Title/subtitle/description styles match the hero component conventions.
   ========================================================================== */

/* Container */
.showcase-grid {
	max-width: 100%;
	margin: 0 auto;
	padding: var(--space-3xl) 0;
	background: var(--color-bg-white, #fff);
}

.showcase-grid-container {
	width: 100%;
	max-width: var(--container-max-width, 76.5rem);
	margin: 0 auto;
	padding: 0 clamp(1rem, 2.5vw, 1.5rem);
}

.showcase-grid-inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
	align-items: center;
}

/* Content side
   Title area matches hero component conventions exactly:
   absolute-positioned accent bar, same font sizes/weights, same link styles. */
.showcase-grid-content {
	max-width: 540px;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Title area — matches hero component conventions
   (orange accent bar, subtitle, title, description text)
   -------------------------------------------------------------------------- */

.showcase-grid-title-container {
	margin-bottom: 1.5rem !important;
	position: relative;
}

.showcase-grid-title-accent {
	position: absolute;
	left: -24px;
	top: 0;
	width: 4px;
	height: 100%;
	background-color: var(--color-accent);
	border-radius: 0;
}

.showcase-grid-subtitle {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--color-link);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-caps);
}

.showcase-grid-subtitle a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.showcase-grid-subtitle a:hover {
	color: var(--color-link-hover-accent);
}

.showcase-grid-title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	margin-top: 0;
	margin-bottom: 0;
}

/* Description — matches hero .content-text conventions */
.showcase-grid-description {
	font-size: var(--font-size-base);
	line-height: var(--line-height-loose);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-text-primary);
	margin-top: 0;
	margin-bottom: 0;
}

.showcase-grid-description p {
	font-size: var(--font-size-base);
	line-height: var(--line-height-loose);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-text-primary);
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}

.showcase-grid-description p:first-child {
	margin-block-start: 0;
}

/* Inline-prose links standardized via .csrc-rich-text (content-links.css) */

/* CTA Button */
.showcase-grid-cta {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	margin-top: 40px;
}

.showcase-grid-btn {
	position: relative;
	font-size: 16px;
	font-weight: var(--font-weight-semibold, 600);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	text-decoration: none;
	border-radius: 3px;
	overflow: hidden;
	z-index: 0;
	transition: all var(--transition-fast, 0.2s ease);
	cursor: pointer;
	min-height: 42px;
	color: white;
	background-color: var(--color-ucla-blue, #2774AE);
	border: 2px solid var(--color-ucla-blue, #2774AE);
	font-family: var(--font-family-primary);
}

.showcase-grid-btn:hover {
	background-color: var(--color-ucla-blue-dark, #1e5a8a);
	border-color: var(--color-ucla-blue-dark, #1e5a8a);
	color: white;
}

.showcase-grid-btn:focus {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.showcase-grid-icon {
	width: 16px;
	height: 16px;
	margin-bottom: 0;
}

/* ==========================================================================
   Image Grid — 2x2 cards with blue label bar
   ========================================================================== */

.showcase-grid-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Card */
.showcase-grid-item {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius-sm, 4px);
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--color-border, #e5e5e5);
	position: relative;
	opacity: 0;
	animation: showcaseGridFadeUp 0.4s ease forwards;
	transition:
		transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.showcase-grid-item:nth-child(1) { animation-delay: 0.08s; }
.showcase-grid-item:nth-child(2) { animation-delay: 0.14s; }
.showcase-grid-item:nth-child(3) { animation-delay: 0.20s; }
.showcase-grid-item:nth-child(4) { animation-delay: 0.26s; }

/* Shine pseudo-element */
.showcase-grid-item::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	background: linear-gradient(
		-135deg,
		rgba(255, 255, 255, 0.01) 0%,
		rgba(255, 255, 255, 0.06) 30%,
		rgba(255, 255, 255, 0.07) 32%,
		rgba(255, 255, 255, 0.05) 36%,
		transparent 52%
	);
	pointer-events: none;
	z-index: 3;
	filter: blur(2px);
	mix-blend-mode: screen;
	transition:
		width 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		height 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.showcase-grid-item:hover::before {
	width: 140px;
	height: 140px;
}

.showcase-grid-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
	border-color: #d8d8d8;
}

.showcase-grid-item:focus-visible {
	outline: 3px solid var(--color-ucla-blue, #2774AE);
	outline-offset: 2px;
}

/* Image container */
.showcase-grid-item-image-container {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-card-bg, #f8f8f8);
	position: relative;
}

.showcase-grid-item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	filter: saturate(0.88) brightness(0.99);
	transform: scale(1) translateZ(0);
	transition:
		transform var(--transition-slow, 0.55s cubic-bezier(0.4, 0, 0.2, 1)),
		filter var(--transition-slow, 0.55s cubic-bezier(0.4, 0, 0.2, 1));
	will-change: transform;
}

.showcase-grid-item:hover .showcase-grid-item-image {
	transform: scale(1.03) translateZ(0);
	filter: saturate(1.03) brightness(1.02);
}

/* Image overlay gradient */
.showcase-grid-item-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.06) 50%,
		rgba(0, 0, 0, 0.18) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Label bar — UCLA blue background, white text */
.showcase-grid-item-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs, 0.5rem);
	padding: 13px var(--space-sm, 1rem);
	background: #2774AE;
	border-top: none;
	transition: background 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.showcase-grid-item:hover .showcase-grid-item-label {
	background: #2774AE;
}

.showcase-grid-item-title {
	font-size: var(--font-size-sm, 13px);
	font-weight: var(--font-weight-semibold, 600);
	line-height: var(--line-height-base, 1.5);
	color: #ffffff;
	letter-spacing: var(--letter-spacing-body, 0.1px);
}

/* Arrow indicator — white */
.showcase-grid-item-arrow {
	flex-shrink: 0;
	font-size: 15px;
	line-height: 1;
	color: #ffffff;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.showcase-grid-item:hover .showcase-grid-item-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Entrance animation */
@keyframes showcaseGridFadeUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1024px) {
	.showcase-grid-inner {
		flex-direction: row;
		align-items: flex-start;
	}

	.showcase-grid-content,
	.showcase-grid-items {
		width: 48%;
	}
}

@media (max-width: 1023px) {
	.showcase-grid-items {
		max-width: 640px;
	}
}

@media (max-width: 768px) {
	.showcase-grid-title {
		font-size: 1.75rem;
	}
}

@media (max-width: 580px) {
	.showcase-grid {
		padding: 40px 0;
	}

	.showcase-grid-subtitle {
		font-size: var(--font-size-base);
	}

	.showcase-grid-cta {
		flex-direction: column;
	}

	.showcase-grid-btn {
		text-align: center;
		width: 100%;
	}
}

@media (max-width: 480px) {
	.showcase-grid {
		padding: 24px 0;
	}

	.showcase-grid-items {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Light variant — white label bar, dark text, gray arrow
   Applied via .showcase-grid--light modifier class on <section>.
   ========================================================================== */

.showcase-grid--light .showcase-grid-item-label {
	background: #ffffff;
	border-top: 1px solid var(--color-border, #e5e5e5);
}

.showcase-grid--light .showcase-grid-item:hover .showcase-grid-item-label {
	background: linear-gradient(135deg, #ffffff 0%, #fdfdfe 60%, #f8fafc 100%);
}

.showcase-grid--light .showcase-grid-item-title {
	color: var(--color-text-primary, #000);
}

.showcase-grid--light .showcase-grid-item-arrow {
	color: #c7c7cc;
}