/**
 * MT Testimonials Carousel — Frontend Styles
 * Estética premium inspirada en Stripe / Linear / Apple
 */

/* ------------------------------------------------------------------
   Variables & base
   ------------------------------------------------------------------ */
.mttc-section {
	--mttc-section-bg: transparent;
	--mttc-nav-size: 48px;
	--mttc-shadow: 0 18px 50px rgba(11, 37, 69, 0.08);
	--mttc-shadow-hover: 0 24px 60px rgba(11, 37, 69, 0.12);
	--mttc-avatar-overhang: calc(var(--mttc-avatar-size, 120px) / 2);
	--mttc-track-pad-top: calc(var(--mttc-avatar-overhang) + 12px);
	--mttc-track-pad-bottom: 28px;

	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
	font-family: var(--mttc-font-family, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	color: var(--mttc-text, #14213d);
	overflow: visible;
	box-sizing: border-box;
}

/* Evita recorte del tema (GeneratePress / Elementor) */
.entry-content .mttc-section,
.inside-article .mttc-section {
	overflow: visible;
}

.entry-content .mttc-section .mttc-card__quote,
.inside-article .mttc-section .mttc-card__quote,
.entry-content .mttc-section .mttc-card__quote p,
.inside-article .mttc-section .mttc-card__quote p {
	font-style: normal;
}

.mttc-section *,
.mttc-section *::before,
.mttc-section *::after {
	box-sizing: border-box;
}

/* Onda decorativa inferior (mockup) */
.mttc-section::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,64 C360,120 720,0 1440,48 L1440,120 L0,120 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 0;
}

/* ------------------------------------------------------------------
   Título de sección
   ------------------------------------------------------------------ */
.mttc-section__title {
	position: relative;
	z-index: 1;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	text-align: center;
	font-size: var(--mttc-font-size-title, clamp(1.5rem, 3vw, 2.25rem));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mttc-name, #0b2545);
}

/* ------------------------------------------------------------------
   Wrapper + navegación
   ------------------------------------------------------------------ */
.mttc-carousel-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.25rem);
	overflow-x: clip;
	overflow-y: visible;
}

.mttc-nav {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mttc-nav-size);
	height: var(--mttc-nav-size);
	padding: 0;
	border: 1px solid rgba(11, 37, 69, 0.08);
	border-radius: 50%;
	background: #ffffff;
	color: var(--mttc-name, #0b2545);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(11, 37, 69, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.mttc-nav:hover,
.mttc-nav:focus-visible {
	transform: scale(1.05);
	box-shadow: 0 12px 32px rgba(11, 37, 69, 0.12);
	outline: none;
	background: #ffffff;
}

.mttc-nav:focus-visible {
	box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.2), 0 12px 32px rgba(11, 37, 69, 0.12);
}

.mttc-nav span {
	display: block;
	margin-top: -2px;
}

/* ------------------------------------------------------------------
   Carrusel marquee
   ------------------------------------------------------------------ */
.mttc-carousel {
	flex: 1;
	min-width: 0;
	width: 100%;
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	/* Ancho de card = viewport del carrusel / N visible (ajustado también vía JS) */
	--mttc-card-width: var(
		--mttc-card-width-px,
		calc((100% - (var(--mttc-cards, 3) - 1) * var(--mttc-gap, 30px)) / var(--mttc-cards, 3))
	);
}

.mttc-carousel:focus-visible {
	outline: 2px solid var(--mttc-name, #0b2545);
	outline-offset: 4px;
	border-radius: 8px;
}

.mttc-carousel--hover-left {
	cursor: w-resize;
}

.mttc-carousel--hover-right {
	cursor: e-resize;
}

.mttc-carousel--hover-left:not(.mttc-carousel--card-hovered) .mttc-carousel__track,
.mttc-carousel--hover-right:not(.mttc-carousel--card-hovered) .mttc-carousel__track {
	cursor: inherit;
}

.mttc-carousel--card-hovered .mttc-card {
	cursor: inherit;
}

.mttc-carousel__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	min-width: 100%;
	gap: var(--mttc-gap, 30px);
	will-change: transform;
	cursor: grab;
	user-select: none;
	touch-action: pan-y;
	padding-top: var(--mttc-track-pad-top);
	padding-bottom: var(--mttc-track-pad-bottom);
}

.mttc-carousel__track.is-dragging {
	cursor: grabbing;
}

/* Modo estático: 1–2 testimonios, sin animación marquee */
.mttc-section--static .mttc-carousel-wrapper--static {
	justify-content: center;
	overflow: visible;
}

.mttc-section--static .mttc-carousel--static {
	flex: 0 1 auto;
	max-width: 100%;
}

.mttc-carousel__track--static {
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
	cursor: default;
	mask-image: none;
	-webkit-mask-image: none;
	padding-top: var(--mttc-track-pad-top);
	padding-bottom: var(--mttc-track-pad-bottom);
	transform: none !important;
}

.mttc-section--static .mttc-card {
	flex: 0 1 var(--mttc-card-width);
	max-width: 100%;
}

@media (max-width: 640px) {
	.mttc-section--static .mttc-card {
		flex: 0 1 100%;
		width: 100%;
		max-width: 420px;
	}
}

/* ------------------------------------------------------------------
   Card de testimonio
   ------------------------------------------------------------------ */
.mttc-card {
	position: relative;
	flex: 0 0 var(--mttc-card-width);
	width: var(--mttc-card-width);
	max-width: var(--mttc-card-width);
	min-width: 0;
	min-height: 280px;
	height: auto;
	overflow: visible;
	padding: calc(var(--mttc-avatar-size, 120px) / 2 + var(--mttc-padding, 32px))
		var(--mttc-padding, 32px)
		var(--mttc-padding, 32px);
	border-radius: var(--mttc-radius, 30px);
	background: var(--mttc-bg, #f3f5f7);
	text-align: center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.mttc-carousel--shadow .mttc-card {
	box-shadow: var(--mttc-shadow);
}

.mttc-carousel--shadow .mttc-card:hover {
	box-shadow: var(--mttc-shadow-hover);
	transform: translateY(-4px);
}

a.mttc-card,
a.mttc-card:hover,
a.mttc-card:focus,
a.mttc-card:active {
	text-decoration: none;
	color: inherit;
}

a.mttc-card--link {
	cursor: pointer;
}

a.mttc-card--link:focus-visible {
	outline: 2px solid var(--mttc-name, #0b2545);
	outline-offset: 4px;
}

/* Avatar flotante */
.mttc-card__avatar {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	width: var(--mttc-avatar-size, 120px);
	height: var(--mttc-avatar-size, 120px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 0 0 6px #ffffff, 0 12px 30px rgba(11, 37, 69, 0.12);
}

.mttc-card__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.mttc-card__avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0b2545 0%, #1a4a7a 100%);
	color: #ffffff;
	font-size: calc(var(--mttc-avatar-size, 120px) * 0.38);
	font-weight: 600;
}

.mttc-card__avatar--placeholder span {
	line-height: 1;
}

/* Contenido */
.mttc-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	height: 100%;
}

.mttc-card__name {
	margin: 0;
	font-size: var(--mttc-font-size-name, clamp(1rem, 1.6vw, 1.125rem));
	font-weight: 700;
	line-height: 1.3;
	color: var(--mttc-name, #0b2545);
}

.mttc-card__position {
	margin: -0.25rem 0 0;
	font-size: var(--mttc-font-size-position, 0.875rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--mttc-text, #14213d);
	opacity: 0.75;
}

.mttc-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.mttc-card__quote p {
	margin: 0;
	font-size: var(--mttc-font-size-quote, clamp(0.9375rem, 1.4vw, 1rem));
	font-weight: 400;
	font-style: normal;
	line-height: 1.65;
	color: var(--mttc-text, #14213d);
}

.mttc-card__quote p::before {
	content: '\201C';
}

.mttc-card__quote p::after {
	content: '\201D';
}

/* ------------------------------------------------------------------
   Estados vacíos / accesibilidad
   ------------------------------------------------------------------ */
.mttc-empty {
	padding: 2rem;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	color: #666;
}

@media (prefers-reduced-motion: reduce) {
	.mttc-carousel__track {
		cursor: default;
	}

	.mttc-card {
		transition: none;
	}

	.mttc-nav {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.mttc-section {
		--mttc-cards: 2;
	}

	.mttc-nav {
		--mttc-nav-size: 42px;
		font-size: 1.5rem;
	}
}

@media (max-width: 640px) {
	.mttc-section {
		--mttc-cards: 1;
		padding-inline: 0.75rem;
	}

	.mttc-carousel-wrapper {
		gap: 0.35rem;
	}

	.mttc-nav {
		--mttc-nav-size: 38px;
		font-size: 1.35rem;
	}

	.mttc-card {
		min-height: 260px;
	}
}

/* Override desktop cards from shortcode attribute */
@media (min-width: 1025px) {
	.mttc-section[style*='--mttc-cards'] .mttc-carousel {
		--mttc-card-width: var(
			--mttc-card-width-px,
			calc((100% - (var(--mttc-cards) - 1) * var(--mttc-gap)) / var(--mttc-cards))
		);
	}
}