/*
 * Fixed size, not a shrinking/growing flex item: this card belongs in a
 * permanent horizontal slider (testimonials-section__slider), so it keeps a
 * constant width and simply lets the slider's overflow-x handle anything
 * that doesn't fit, rather than flexing to share space like Square Card or
 * Step do in their own (non-scrolling) layouts.
 *
 * "Dark" tone uses #002547 — the design's ink/navy brand color, not yet part
 * of theme.json's palette (see square-card/style.css, which hardcodes the
 * same value for the same reason).
 */
.wp-block-andrei-saguna-testimonial-card {
	position: relative;
	box-sizing: border-box;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--8);
	flex: 0 0 424px;
	width: 424px;
	height: 565px;
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: lightgray;
	background-position: 50% center;
	background-size: cover;
	background-repeat: no-repeat;
	/* Selecting the quote/name text is what was hijacking the drag gesture
	 * on touch devices (the OS's own text-selection UI wins that race unless
	 * the element is marked unselectable before the touch even starts, not
	 * just while slider.js's own drag is in progress). -webkit-touch-callout
	 * also stops iOS's press-and-hold callout menu for the same reason. */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Video/image fill the card behind the content; the content itself needs an
 * explicit stacking order to paint above them (positioned elements would
 * otherwise paint after static content regardless of DOM order). */
.wp-block-andrei-saguna-testimonial-card__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: lightgray;
}

.wp-block-andrei-saguna-testimonial-card__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wp-block-andrei-saguna-testimonial-card__play {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.wp-block-andrei-saguna-testimonial-card__play-icon {
	display: flex;
	width: 48px;
	height: 48px;
}

.wp-block-andrei-saguna-testimonial-card__play-icon svg {
	width: 100%;
	height: 100%;
}

.wp-block-andrei-saguna-testimonial-card__play-icon--pause {
	display: none;
}

.wp-block-andrei-saguna-testimonial-card.is-playing .wp-block-andrei-saguna-testimonial-card__play-icon--play {
	display: none;
}

.wp-block-andrei-saguna-testimonial-card.is-playing .wp-block-andrei-saguna-testimonial-card__play-icon--pause {
	display: flex;
}

.wp-block-andrei-saguna-testimonial-card__play-label {
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.56px;
	text-transform: uppercase;
}

.wp-block-andrei-saguna-testimonial-card__heading {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.2;
	letter-spacing: 0.64px;
}

.wp-block-andrei-saguna-testimonial-card__attribution {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	width: 100%;
}

.wp-block-andrei-saguna-testimonial-card__avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--md);
	object-fit: cover;
}

.wp-block-andrei-saguna-testimonial-card__avatar--placeholder {
	background-color: var(--wp--preset--color--neutral-200);
}

.wp-block-andrei-saguna-testimonial-card__person {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
}

.wp-block-andrei-saguna-testimonial-card.has-tone-light .wp-block-andrei-saguna-testimonial-card__heading,
.wp-block-andrei-saguna-testimonial-card.has-tone-light .wp-block-andrei-saguna-testimonial-card__play-label,
.wp-block-andrei-saguna-testimonial-card.has-tone-light .wp-block-andrei-saguna-testimonial-card__name {
	color: var(--wp--preset--color--base-white);
}

.wp-block-andrei-saguna-testimonial-card.has-tone-light .wp-block-andrei-saguna-testimonial-card__role {
	color: var(--wp--preset--color--border-default);
}

.wp-block-andrei-saguna-testimonial-card.has-tone-dark .wp-block-andrei-saguna-testimonial-card__heading,
.wp-block-andrei-saguna-testimonial-card.has-tone-dark .wp-block-andrei-saguna-testimonial-card__play-label,
.wp-block-andrei-saguna-testimonial-card.has-tone-dark .wp-block-andrei-saguna-testimonial-card__name {
	color: #002547;
}

.wp-block-andrei-saguna-testimonial-card.has-tone-dark .wp-block-andrei-saguna-testimonial-card__role {
	color: var(--wp--preset--color--neutral-700);
}

/*
 * Under 768px, matches the same "1 card + ~20% of the next" technique as
 * Step (see steps-section/style.css and step/style.css): a percentage
 * flex-basis of the slider's actual width, not a fixed pixel size. A fixed
 * 424px card is wider than most phone screens outright, and the previous
 * fixed 300px mobile override only looked like "1 card + a portion" on
 * whatever phone width it happened to have been tuned against — a
 * percentage gives the same proportion at any width.
 */
@media (max-width: 767px) {
	.wp-block-andrei-saguna-testimonial-card {
		flex: 0 0 80%;
		width: auto;
		height: 460px;
		scroll-snap-align: start;
	}
}