/* Testimonial Grid (mauve-testimonial-grid) */
.ms-tgrid {
	--mtg-cols: 3;
	--mtg-col-gap: 32px;
	--mtg-row-gap: 32px;
	--mtg-stagger: 0px;
	position: relative;
}

/* Before the script builds the columns: a plain grid with the same column count. */
.ms-tgrid__items {
	display: grid;
	grid-template-columns: repeat(var(--mtg-cols), minmax(0, 1fr));
	gap: var(--mtg-row-gap) var(--mtg-col-gap);
	align-items: start;
}

.ms-tgrid.is-columned .ms-tgrid__items {
	display: flex;
	align-items: flex-start;
	gap: var(--mtg-col-gap);
}

.ms-tgrid__col {
	flex: 1 1 0;
	min-width: 0;
}

.ms-tgrid__col:nth-child(even) {
	padding-top: var(--mtg-stagger);
}

.ms-tgrid__col-inner {
	display: flex;
	flex-direction: column;
	gap: var(--mtg-row-gap);
	transform: translate3d(0, var(--mtg-float-y, 0px), 0);
}

.ms-tgrid--floating .ms-tgrid__col-inner {
	will-change: transform;
}

/* Cards */
.ms-tgrid__item {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-sizing: border-box;
}

.ms-tgrid .ms-tgrid__card {
	margin: 0;
	padding: 36px 32px;
	background-color: #F6F3EE;
	text-align: center;
}

/* Rating: a row of empty stars with the filled row clipped on top (half stars work). */
.ms-tgrid__stars {
	--mtg-star-gap: 4px;
	position: relative;
	display: inline-flex;
	vertical-align: top;
	font-size: 17px;
	line-height: 1;
	margin-bottom: 18px;
}

.ms-tgrid__stars-base,
.ms-tgrid__stars-fill {
	display: flex;
	gap: var(--mtg-star-gap);
}

.ms-tgrid__stars-base {
	color: #DDD6CB;
}

.ms-tgrid__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #7A5A46;
}

.ms-tgrid__stars svg {
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Quote: the theme styles <blockquote> (borders, big type, quote marks) — reset it here. */
.ms-tgrid .ms-tgrid__quote {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: none;
	font-size: inherit;
	font-style: normal;
	text-align: inherit; /* the theme centres every blockquote; follow the Alignment control */
	quotes: none;
	color: inherit;
}

.ms-tgrid .ms-tgrid__quote::before,
.ms-tgrid .ms-tgrid__quote::after,
.ms-tgrid .ms-tgrid__quote p::before,
.ms-tgrid .ms-tgrid__quote p::after {
	content: none;
	display: none;
}

.ms-tgrid .ms-tgrid__quote p {
	margin: 0 0 .8em;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.ms-tgrid .ms-tgrid__quote p:last-child {
	margin-bottom: 0;
}

/* Author */
.ms-tgrid__author {
	display: flex;
	flex-direction: column;
	align-items: var(--mtg-justify, center);
	gap: 10px;
	margin: 0;
}

.ms-tgrid-author-inline .ms-tgrid__author {
	flex-direction: row;
	align-items: center;
	justify-content: var(--mtg-justify, center);
}

.ms-tgrid-author-inline .ms-tgrid__who {
	text-align: left;
}

.ms-tgrid__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ms-tgrid .ms-tgrid__avatar {
	flex: none;
	width: 48px;
	height: 48px;
	max-width: none;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

.ms-tgrid .ms-tgrid__name {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.3;
}

.ms-tgrid__meta {
	font-size: 13px;
	line-height: 1.4;
	opacity: .75;
}

/* Photo / video cards */
.ms-tgrid__media {
	height: var(--mtg-media-h, 420px);
	background-color: #E8E3DA;
}

/* A testimonial written over the photo: the tile keeps the photo height as its minimum
   and grows with the text, which sits in the normal flow above the cover image. */
.ms-tgrid .ms-tgrid__media--quote {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: auto;
	min-height: var(--mtg-media-h, 420px);
}

/* Specificity: Elementor writes control CSS as ".elementor-{page} .elementor-element.elementor-element-{id} …"
   — three classes before the target, four in all. The photo rules below carry five classes, so the
   Card / Quote / Author / Rating colours of the plain cards can never repaint the text or overlay on a
   photo; the photo controls only set the --mtg-photo-* variables, which have no specificity to fight. */

/* Overlay: --mtg-ov-grad comes from Text Position, so the darkest part sits behind the text. */
.ms-tgrid .ms-tgrid__items .ms-tgrid__item.ms-tgrid__media.ms-tgrid__media--quote::after {
	background-color: transparent;
	background-image: var(--mtg-ov-grad, linear-gradient(180deg, var(--mtg-photo-ov-b, rgba(0, 0, 0, .16)) 0%, var(--mtg-photo-ov-a, rgba(0, 0, 0, .62)) 100%));
}

.ms-tgrid-ov-solid .ms-tgrid .ms-tgrid__items .ms-tgrid__item.ms-tgrid__media.ms-tgrid__media--quote::after {
	background-color: var(--mtg-photo-ov-a, rgba(0, 0, 0, .45));
	background-image: none;
}

.ms-tgrid .ms-tgrid__overlay {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 34px 30px;
	color: var(--mtg-photo-text, #fff);
	text-align: center;
}

/* Photo colours (five classes — see the note above the overlay). */
.ms-tgrid .ms-tgrid__items .ms-tgrid__media--quote .ms-tgrid__overlay .ms-tgrid__quote {
	color: var(--mtg-photo-text, #fff);
}

.ms-tgrid .ms-tgrid__items .ms-tgrid__media--quote .ms-tgrid__overlay .ms-tgrid__name {
	color: var(--mtg-photo-name, #fff);
}

.ms-tgrid .ms-tgrid__items .ms-tgrid__media--quote .ms-tgrid__overlay .ms-tgrid__meta {
	color: var(--mtg-photo-meta, var(--mtg-photo-name, #fff));
}

.ms-tgrid .ms-tgrid__items .ms-tgrid__media--quote .ms-tgrid__overlay .ms-tgrid__stars-fill {
	color: var(--mtg-photo-star, #fff);
}

.ms-tgrid .ms-tgrid__items .ms-tgrid__media--quote .ms-tgrid__overlay .ms-tgrid__stars-base {
	color: var(--mtg-photo-star-empty, rgba(255, 255, 255, .35));
}

/* The text covers the middle, so the play button moves to the top of the photo. */
.ms-tgrid .ms-tgrid__media--quote .ms-tgrid__play {
	top: 28px;
	z-index: 3;
	transform: translate(-50%, 0);
}

.ms-tgrid .ms-tgrid__media--quote .ms-tgrid__play:hover,
.ms-tgrid .ms-tgrid__media--quote .ms-tgrid__play:focus-visible {
	transform: translate(-50%, 0) scale(1.06);
}

.ms-tgrid .ms-tgrid__media--quote:has(.ms-tgrid__play) .ms-tgrid__overlay {
	padding-top: calc(var(--mtg-play, 72px) + 48px);
}

.ms-tgrid__media .ms-tgrid__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ms-tgrid__media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, .12);
	pointer-events: none;
}

.ms-tgrid .ms-tgrid__play {
	--mtg-play: 72px;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mtg-play);
	height: var(--mtg-play);
	border-radius: 50%;
	background-color: rgba(255, 253, 249, .92);
	color: #313330;
	transform: translate(-50%, -50%);
	transition: transform .35s ease, background-color .35s ease;
}

.ms-tgrid .ms-tgrid__play:hover,
.ms-tgrid .ms-tgrid__play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
}

.ms-tgrid__play svg {
	width: 34%;
	height: 34%;
	margin-left: 6%;
	fill: currentColor;
}

.ms-tgrid__caption {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 20px;
	z-index: 2;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	pointer-events: none;
}

/* Fade in on scroll — armed by the script, so cards never stay hidden without it. */
.ms-tgrid--reveal.is-armed .ms-tgrid__item {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

.ms-tgrid--reveal.is-armed .ms-tgrid__item.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ms-tgrid__col-inner { transform: none; }
	.ms-tgrid--reveal.is-armed .ms-tgrid__item { opacity: 1; transform: none; transition: none; }
	.ms-tgrid .ms-tgrid__play { transition: none; }
}