/**
 * Testimonial szekció V2 — „Kinek való" (2 oszlopos layout)
 *
 * Design: Figma TCNMkdsyeIuxzq7OwOlxC7 / node 1573-2515
 * Bal: kék kártya (idézet felül, attribution alul) + social proof
 * Jobb: eyebrow + H2 + subtitle + chipek + „+ 99"
 *
 * V1 (marquee) archív: testimonials-v1-marquee.css
 */

/* ==========================================================================
   Section wrapper
   ========================================================================== */

.testimonials {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: transparent;
}

@media (min-width: 768px) {
	.testimonials {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.testimonials {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop);
	}
}

/* 2 oszlopos grid — bal: flex-1 szöveg, jobb: sticky kártya (540px) */
.testimonials__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

@media (min-width: 768px) {
	.testimonials__container {
		/* Fluid 2-oszlop: a bal track 0-ig zsugorodhat (minmax(0,1fr) — NEM 1fr, mert
		   az `1fr` = minmax(auto,1fr), és az `auto` minimuma a tartalom min-content-je,
		   ami 768px-en a fix jobb oszlop + gap mellett túllógna). A jobb oszlop 540px-ig
		   rugalmas, szűk tableten arányosan keskenyebb. A gap is skálázódik. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
		gap: clamp(40px, 6vw, 80px);
		/* align-items: start — sticky csak így működik (mint hogyan-mukodik-on) */
		align-items: start;
	}
}

/* ==========================================================================
   Bal oszlop — kártya + social proof
   ========================================================================== */

.testimonials__left {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- Hero kép stat badge-ekkel --- */

.testimonials__hero-img {
	position: relative;
	border-radius: var(--radius-panel-lg);
	overflow: hidden;
	line-height: 0;
}

.testimonials__hero-img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

/* Stat badge-ek — egymás mellett, kép bal aljára horgonyozva */
.testimonials__stats {
	position: absolute;
	bottom: 16px;
	left: 16px;
	display: flex;
	gap: 10px;
}

/* Figma 1619-2769: 18px padding, 12px radius, 4px gap */
.testimonials__stat {
	background: #ffffff;
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: 0 4px 20px rgba(7, 20, 48, 0.10);
}

/* Figma: Satoshi Black, 24px / 24px, #071430 */
.testimonials__stat-value {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: var(--fw-black);
	line-height: 16px;
	color: var(--color-text);
}

/* Figma: Satoshi Medium, 16px / 20px, #64769e */
.testimonials__stat-label {
	font-size: 14px;
	line-height: 16px;
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

/* --- Featured kártya --- */

/* Kártya: nincs padding (az inneren van), overflow clip a mozgáshoz */
.testimonials__featured-card {
	position: relative;
	background-color: var(--color-primary);
	border-radius: var(--radius-panel);
	margin: 0;
	overflow: hidden;
}

/* Inner wrapper: ide kerül a padding és a flex-layout.
   Az animáció során JS klónozza, majd mindkét réteg egyszerre animál. */
.testimonials__card-inner {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
}

/* Figma: Medium 36px / 42px / 0.72px tracking / white */
.testimonials__featured-quote {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 20px;
	line-height: 28px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.72px;
	color: #ffffff;
	/* Fix magasság: 4 sor × 32px — kártya nem ugrik váltáskor */
	height: auto;
	overflow: hidden;
}

/* Attribution sor — avatar+név balra, rating jobbra */
.testimonials__featured-attrib {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.testimonials__featured-person {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Figma: 64px kör */
.testimonials__featured-avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonials__featured-meta {
	display: flex;
	flex-direction: column;
}

/* Figma: Bold 20px / 26px / white */
.testimonials__featured-name {
	font-weight: var(--fw-bold);
	font-size: 18px;
	line-height: 22px;
	color: #ffffff;
}

/* Figma: Medium 16px / 26px / white */
.testimonials__featured-company {
	font-size: 16px;
	line-height: 20px;
	font-weight: var(--fw-medium);
	color: #ffffff;
}

/* Figma: Bold 24px / white, csillag 30px, gap 4px */
.testimonials__featured-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #ffffff;
	font-weight: var(--fw-bold);
	font-size: 20px;
	line-height: 28px;
	white-space: nowrap;
	flex-shrink: 0;
}

.testimonials__featured-rating i {
	font-size: 20px;
}

/* Jobb oldali csoport: icon-bubble + rating egy sorban */
.testimonials__featured-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* 42px fehér kör — az iparág-ikon buboréka */
.testimonials__featured-icon {
	width: 42px;
	height: 42px;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.testimonials__featured-icon i {
	font-size: 18px;
	color: var(--color-primary);
}

/* --- Social proof (kártya alatt) --- */

.testimonials__social-proof {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Avatarok + szöveg szorosan egymás mellett (gap). A lapozó (ha van) a saját
	   margin-left:auto-jával kerül jobbra — így idézetek nélkül (nincs nav) sem
	   csúszik szét a sor. */
}

/* Nyíl-navigáció — avatarral egy sorban, jobbra zárva */
.testimonials__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.testimonials__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
	padding: 0;
	flex-shrink: 0;
}

.testimonials__nav-btn:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #ffffff;
}

.testimonials__nav-btn i {
	font-size: 14px;
	line-height: 1;
}

/* Figma: 64px avatarok, 36px-es lépés (28px overlap), 2px fehér keret */
.testimonials__avatars {
	display: flex;
	align-items: center;
}

.testimonials__avatars img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-background);
	flex-shrink: 0;
}

.testimonials__avatars img + img {
	margin-left: -28px;
}

.testimonials__social-text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Figma: Bold 20px / #071430 */
.testimonials__social-count {
	font-size: 18px;
	line-height: 20px;
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

/* Figma: Medium 18px / #64769E */
.testimonials__social-label {
	font-size: 16px;
	line-height: 20px;
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Jobb oszlop — szöveg + chipek
   ========================================================================== */

/* Sticky szöveg-oszlop — a jobb oldal (kép+kártya) taller, ez fent marad */
.testimonials__right {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

@media (min-width: 768px) {
	.testimonials__right {
		position: sticky;
		top: 120px;
	}
}

/* Eyebrow + H2 + subtitle blokk, 12px gap */
.testimonials__text-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Eyebrow — Figma: rgba(primary,0.1) bg, primary text, 12px Bold, 2.4px tracking */
.testimonials .eyebrow {
	background-color: rgba(13, 132, 252, 0.1);
	color: var(--color-primary);
	padding: 8px 12px;
}

/* H2 — Figma: 38px / 48px / Black (900) */
.testimonials__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-black);
	letter-spacing: -0.02em;
	color: var(--color-text);
	text-wrap: balance;
}

/* Subtitle — Figma: 18px / 26px / Medium / #64769E */
.testimonials__subtitle {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

/* --- Iparág-chipek --- */

/* Figma: rgba(primary,0.1) bg, primary text, 12px Bold, 2.4px tracking, 8px/16px padding */
.testimonials__industries {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.testimonials__industries .pill-chip {
	background-color: rgba(13, 132, 252, 0.1);
	color: var(--color-primary);
	padding: 8px 12px;
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	gap: 8px;
	border: none;
}

.testimonials__industries .pill-chip i {
	font-size: 16px;
	color: var(--color-primary);
}

/* CTA gomb — nem full-width, inline */
.testimonials__cta {
	align-self: flex-start;
	width: auto;
}

/* Figma: „+ 99" — Bold 18px primary */
.testimonials__industry-more {
	font-size: 18px;
	line-height: 26px;
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	white-space: nowrap;
}