/**
 * Layout: Full Width CTA (overlay / split / roles).
 *
 * @package GagaMuller
 */

.gm-cta__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--gm-radius-feature);
	background: var(--gm-color-black);
	color: var(--gm-color-white);
}

.gm-cta__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gm-space-16);
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

.gm-cta__kicker {
	margin: 0;
	color: var(--gm-color-light-purple);
	font-size: 0.6875rem;
	font-weight: var(--gm-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gm-cta__title {
	margin: 0;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
	font-weight: var(--gm-weight-bold);
	line-height: 1.08;
}

.gm-cta .gm-highlight {
	color: var(--gm-color-light-purple);
}

.gm-cta__text {
	max-width: 28rem;
	margin: 0;
	color: var(--gm-color-on-dark-strong);
	font-size: var(--gm-text-body);
	line-height: var(--gm-leading-body);
}

.gm-cta__actions {
	margin: var(--gm-space-8) 0 0;
}

.gm-cta__media {
	position: relative;
	min-height: 14rem;
	overflow: hidden; /* the photo never slides past its overlay */
}

/* Purple glow that fades in on hover (replaces the old zoom, which showed
 * a strip at the edge of the dark overlay). */
.gm-cta__media::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: radial-gradient(ellipse 70% 80% at 70% 55%, rgb(114 21 244 / 0.38) 0%, rgb(114 21 244 / 0) 70%);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms var(--gm-ease);
}

.gm-cta__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--gm-ease), filter 900ms var(--gm-ease);
}

.gm-cta__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(16 16 16 / 0.85) 0%, rgb(16 16 16 / 0) 55%, rgb(114 21 244 / 0.28) 100%);
	content: "";
	pointer-events: none;
}

@media (hover: hover) {
	.gm-cta__card:hover .gm-cta__image {
		filter: saturate(1.15) brightness(1.08);
	}

	.gm-cta__card:hover .gm-cta__media::before {
		opacity: 1;
	}
}

/* Split: text left, photo right (stacked on small screens). */
@media (min-width: 768px) {
	.gm-cta--split .gm-cta__card {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		min-height: 22rem;
	}

	.gm-cta--split .gm-cta__content {
		justify-content: center;
	}
}

/* Overlay: photo is the background. */
.gm-cta--overlay .gm-cta__card {
	min-height: clamp(20rem, 32vw, 28rem);
	align-content: end;
}

.gm-cta--overlay .gm-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.gm-cta--overlay .gm-cta__media::after {
	background: linear-gradient(90deg, rgb(16 16 16 / 0.82) 0%, rgb(16 16 16 / 0.2) 70%, rgb(114 21 244 / 0.3) 100%);
}

.gm-cta--overlay .gm-cta__content {
	align-self: end;
	max-width: 34rem;
}

/* Roles: black section, list left, round photo right. */
.gm-cta--roles .gm-eyebrow {
	margin-bottom: var(--gm-space-32);
	color: var(--gm-color-white);
	font-size: var(--gm-text-body-lg);
}

.gm-cta--roles .gm-cta__card {
	background: transparent;
	overflow: visible;
}

.gm-cta--roles .gm-cta__content {
	padding: 0;
}

.gm-cta--roles .gm-cta__title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.gm-cta__roles {
	display: grid;
	gap: var(--gm-space-10);
	width: 100%;
	max-width: 30rem;
	margin: var(--gm-space-8) 0 0;
	padding: 0;
	list-style: none;
}

.gm-cta__role,
.gm-cta__role:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gm-space-16);
	min-height: 3rem;
	padding: 0 var(--gm-space-20);
	border-radius: var(--gm-radius-pill);
	background: var(--gm-color-nav-pill);
	box-shadow: inset 0 0 0 1px var(--gm-color-nav-pill-border);
	color: var(--gm-color-white);
	font-size: var(--gm-text-sm);
	text-decoration: none;
	transition: background-color 300ms var(--gm-ease), box-shadow 300ms var(--gm-ease);
}

.gm-cta__role:hover,
.gm-cta__role:focus-visible {
	background: color-mix(in srgb, var(--gm-color-purple) 45%, var(--gm-color-nav-pill));
	box-shadow: inset 0 0 0 1px var(--gm-color-light-purple);
	color: var(--gm-color-white);
	text-decoration: none;
}

.gm-cta__role:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color-on-dark);
	outline-offset: 2px;
}

.gm-cta__role .gm-icon {
	width: 18px;
	height: 18px;
	transition: transform 300ms var(--gm-ease);
}

.gm-cta__role:hover .gm-icon {
	transform: translateX(4px);
}

.gm-cta__notice {
	margin: 0;
	color: var(--gm-color-on-dark-muted);
	font-size: var(--gm-text-legal);
}

@media (min-width: 768px) {
	.gm-cta--roles .gm-cta__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gm-space-48, 3rem);
		align-items: center;
	}

	.gm-cta--roles .gm-cta__media {
		min-height: 18rem;
		overflow: hidden;
		border-radius: 999px 0 0 999px;
		margin-inline-end: calc(-1 * max(var(--gm-gutter), (100vw - var(--gm-container)) / 2));
	}
}

@media (max-width: 767px) {
	.gm-cta--roles .gm-cta__media {
		overflow: hidden;
		border-radius: var(--gm-radius-feature);
	}
}

.gm-cta--roles {
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	.gm-cta__image,
	.gm-cta__role,
	.gm-cta__role .gm-icon {
		transition: none;
	}

	.gm-cta__card:hover .gm-cta__image {
		transform: none;
	}
}