/**
 * Layout: Team Profiles / Stories (carousel cards and featured quote).
 *
 * @package GagaMuller
 */

.gm-story {
	position: relative;
	margin: 0;
}

/* ---- Carousel card ------------------------------------------------------ */

.gm-stories--carousel .gm-story {
	display: block;
	aspect-ratio: 3 / 4.4;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--gm-radius-card);
	background: var(--gm-color-dark-purple);
	color: var(--gm-color-white);
	transition: box-shadow 350ms var(--gm-ease), transform 350ms var(--gm-ease);
}

.gm-stories--carousel .gm-story__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.gm-story__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--gm-ease);
}

.gm-stories--carousel .gm-story::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(80 15 171 / 0.1) 0%, rgb(80 15 171 / 0.55) 50%, rgb(16 16 16 / 0.92) 100%);
	content: "";
}

.gm-story__overlay {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: var(--gm-space-10);
	padding: var(--gm-space-20);
}

.gm-story__tag {
	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-story__quote {
	margin: 0;
	font-family: var(--gm-font-heading);
	font-size: var(--gm-text-body);
	font-weight: var(--gm-weight-bold);
	line-height: 1.25;
}

.gm-story__quote p {
	margin: 0;
}

.gm-story__who {
	display: grid;
	margin: 0;
	font-size: var(--gm-text-legal);
	line-height: 1.3;
}

.gm-story__who span {
	color: var(--gm-color-on-dark-strong);
	font-size: var(--gm-text-caption);
}

.gm-story__flag {
	margin: 0;
	padding: 2px 8px;
	border-radius: var(--gm-radius-pill);
	background: var(--gm-color-status-misc);
	color: var(--gm-color-black);
	font-size: 0.6875rem;
	font-weight: var(--gm-weight-bold);
}

@media (hover: hover) {
	.gm-stories--carousel .gm-story:hover {
		box-shadow: 0 0 0 2px var(--gm-color-light-purple), 0 20px 40px -20px rgb(114 21 244 / 0.7);
		transform: translateY(-4px);
	}

	.gm-stories--carousel .gm-story:hover .gm-story__image {
		transform: scale(1.04);
	}
}

/* ---- Play button ---------------------------------------------------------- */

.gm-story__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--gm-radius-round);
	background: var(--gm-color-purple);
	box-shadow: var(--gm-glow-cta);
	color: var(--gm-color-white);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: background-color 250ms var(--gm-ease), box-shadow 250ms var(--gm-ease);
}

.gm-story__play .gm-icon {
	width: 22px;
	height: 22px;
}

.gm-story__play:hover {
	box-shadow: var(--gm-glow-cta-hover);
}

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

.gm-story__frame {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* ---- Featured quote ------------------------------------------------------- */

.gm-stories--featured .gm-story--featured {
	display: grid;
	justify-items: center;
	gap: var(--gm-space-20);
	text-align: center;
}

.gm-story__quote--lg {
	max-width: 40rem;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.2;
}

.gm-stories--featured .gm-story__media {
	position: relative;
	width: 100%;
	max-width: 36rem;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--gm-radius-card);
	background: var(--gm-color-nav-pill);
}

.gm-story__who--center {
	justify-items: center;
}

.gm-stories--featured .gm-story__who strong {
	font-family: var(--gm-font-heading);
	font-size: var(--gm-text-body-lg);
}

@media (prefers-reduced-motion: reduce) {
	.gm-stories--carousel .gm-story,
	.gm-story__image,
	.gm-story__play {
		transition: none;
	}

	.gm-stories--carousel .gm-story:hover,
	.gm-stories--carousel .gm-story:hover .gm-story__image {
		transform: none;
	}
}