/**
 * Case Studies listing page (/case-studies).
 *
 * Styles the ct_case_studies view, display case_studies_page
 * (.case-studies--page). The per-card colors come from the data-only
 * .case-studies__light-color / .case-studies__primary-color divs; JS
 * (case-studies-page.js) copies them into the --cs-light / --cs-primary
 * custom properties on each .views-row and drives the hover interaction.
 */

.case-studies--page {
	margin-bottom: 5rem;
}

.case-studies--page .view-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 32px;
	row-gap: 64px;
}

.case-studies--page .views-row {
	/* Filled by case-studies-page.js from the hidden color divs. --cs-light
	   paints the card; --cs-primary tints the title underline + hover shadow. */
	--cs-light: #f5f5f5;
	--cs-primary: #0f2646;
	position: relative;
}

/* The color divs carry data only — never render them. */
.case-studies--page .case-studies__light-color,
.case-studies--page .case-studies__primary-color {
	display: none;
}

/* The card itself never moves — only the screenshot inside reacts. */
.case-studies--page .case-studies__thumb {
	background-color: var(--cs-light);
	border-radius: 12px;
	overflow: hidden;
	padding: clamp(24px, 9%, 72px) clamp(24px, 10%, 88px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.case-studies--page .case-studies__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	/* GSAP drives tilt + drift + zoom (transform); CSS only transitions the
	   hover shadow below — the two never touch the same property. */
	box-shadow: 0 20px 45px -12px transparent;
	transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* On hover the screenshot "lifts" off the card: a soft shadow tinted with
   the case study's primary color (neutral fallback where color-mix is
   unsupported) anchors the tilt + zoom driven by the JS. */
.case-studies--page .views-row:hover .case-studies__thumb img {
	box-shadow: 0 20px 45px -12px rgba(16, 24, 40, 0.35);
	box-shadow: 0 20px 45px -12px color-mix(in srgb, color-mix(in srgb, var(--cs-primary) 30%, rgb(16 24 40)) 35%, transparent);
}

.case-studies--page .case-studies__title {
	display: inline-block;
	position: relative;
	margin-top: 16px;
	font-size: 1rem;
	font-weight: 600;
	margin-left: 0.5rem;
}

/* Underline in the case study's primary color, drawn left-to-right when the
   card is hovered and retracted to the right when the cursor leaves. */
.case-studies--page .case-studies__title::after {
	background-color: var(--cs-primary);
	border-radius: 2rem;
	bottom: -6px;
	content: '';
	height: 3px;
	left: 0;
	position: absolute;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	width: 100%;
}

.case-studies--page .views-row:hover .case-studies__title::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* The existing "View Case Study" link becomes an invisible overlay that
   makes the whole card clickable; the visible affordance is the native
   pointer cursor plus the trailing "View Case" pill below. */
.case-studies--page .views-row > div:last-child {
	position: static;
}

.case-studies--page .views-row a[href] {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
}

/* Cursor-following "View Case" pill, injected by case-studies-page.js.
   GSAP owns position (x/y), scale and opacity — no CSS transitions here. */
.case-studies__cursor-btn {
	background-color: #101828;
	border-radius: 999px;
	color: #fff;
	font-size: 10px !important;
	font-weight: 800;
	left: 0;
	letter-spacing: 0.1875rem;
	line-height: 1;
	padding: 11px 16px 12px 16px;
	pointer-events: none;
	position: fixed;
	text-transform: uppercase;
	top: 0;
	visibility: hidden;
	white-space: nowrap;
	z-index: 1000;
}

@media (max-width: 720px) {
	.case-studies--page {
		margin-bottom: 3rem;
	}
	.case-studies--page .view-content {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
	.case-studies--page .case-studies__thumb {
		padding: 24px;
	}
	.case-studies--page .case-studies__title {
		margin-top: 12px;
	}
}

/* Touch devices: no hover, so the cursor-following pill never applies. */
@media (hover: none), (pointer: coarse) {
	.case-studies__cursor-btn {
		display: none;
	}
}