/* ============================================================
   TESTIMONIALS
   Split out of style.css — see functions.php for the enqueue.
   ============================================================ */

/* ============================================================
   6. TESTIMONIALS
   ============================================================ */

.testimonials {
	background: var(--cream-dark);
	padding: 60px 20px;
}

.testimonials__inner {
	max-width: 1140px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.testimonials__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.testimonials__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
}

.testimonials__icon img {
	width: 100%;
	height: 100%;
}

.testimonials__title {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 0.9;
	letter-spacing: -1px;
	font-feature-settings: "dlig" 1;
	text-transform: uppercase;
	text-align: center;
	color: var(--chocolate);
	margin: 0;
}

.testimonials-slider-wrap {
	width: 100%;
}

/* ---------- reuse & recolour the plugin's .testimoanial-item card for the light section ---------- */
/* Card: image + text, stacked on mobile (Figma node 298:2647), row on desktop (node 181:3979/3994) */

.testimonials .testimoanial-item .content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 20px;
	background-color: var(--cream);
	border-right: 1px dashed var(--latte);
	border-left: 1px dashed var(--latte);
}

.testimonials .testimoanial-item .content::before,
.testimonials .testimoanial-item .content::after,
.testimonials .testimoanial-item .content-wrap::before,
.testimonials .testimoanial-item .content-wrap::after {
	border-right: 1px dashed rgba(74, 47, 34, 0.2);
}

.testimonials .testimoanial-img {
	float: none;
	width: 140px;
	height: 140px;
	margin: 0;
	overflow: hidden;
	flex: none;
}

.testimonials .testimoanial-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.testimonials__card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	min-width: 0;
}

.testimonials .testimoanial-title {
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--chocolate);
	opacity: 1;
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.testimonials .testimoanial-text {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.26px;
	color: var(--chocolate);
	opacity: 0.72;
	overflow-wrap: break-word;
	word-break: break-word;
}

.testimonials .testimoanial-text p {
	margin: 0;
}

.testimoanial-tag {
	display: inline-block;
	max-width: 100%;
	margin-top: 0;
	padding: 8px 12px;
	border-radius: 999px;
	background-color: var(--latte);
	background-image: url('../img/gradient-btn-bg.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: var(--chocolate);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
}

/* ---------- pagination: reuse .pagination.custom.center, recoloured for the light section ---------- */

.testimonials-slider-wrap .pagination.custom.center {
	margin-top: 40px;
}

.testimonials-slider-wrap .pagination.custom span {
	color: var(--chocolate);
}

.testimonials-slider-wrap .pagination.custom span.swiper-active-switch::after {
	background-color: var(--chocolate);
}

@media (min-width: 768px) {
	.testimonials {
		padding: 115px 30px;
	}

	.testimonials__head {
		gap: 24px;
	}

	.testimonials__icon {
		width: 67px;
		height: 67px;
	}

	.testimonials__title {
		font-size: 40px;
	}
}

/* Row layout (avatar left, text right) needs real width per card to avoid
   crushing the text column — only safe once slidesPerView gives each card
   ~450px+ (from the md/lg/add breakpoints at 992px+, see the shortcode's
   data-md-slides/data-lg-slides/data-add-slides="2"). Below that, the
   768-991px "sm" bucket also shows 2 cards (data-sm-slides="2") but they
   stay in the stacked mobile layout since there isn't room for a row. */
@media (min-width: 992px) {
	.testimonials .testimoanial-item .content {
		flex-direction: row;
		align-items: center;
		gap: 30px;
		padding: 30px;
	}

	.testimonials__card-body {
		width: auto;
	}
}