/* ============================================================
 * VaaSBlock — Partner Quotes (logo-tab testimonial slider)
 * ============================================================
 * Light-section wrapper with logo tabs that drive a Keystone-
 * styled dark glass quote card below. Auto-rotates every 7 s.
 *
 * BEM root: .vaasblock-partner-quotes
 * ============================================================ */

/* ── Section ───────────────────────────────────────────────── */

.vaasblock-partner-quotes {
	background:      #f4f5f9;
	padding-block:   clamp(2.5rem, 5vw, 4rem);
	width:           100vw;
	margin-inline:   calc(50% - 50vw);
	margin-block-start: 0 !important;
}

.vaasblock-partner-quotes__inner {
	max-width:      var(--wp--style--global--wide-size, 1340px);
	margin-inline:  auto;
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));
	display:        flex;
	flex-direction: column;
	gap:            clamp(1.5rem, 3vw, 2rem);
}

/* ── Logo tab row ──────────────────────────────────────────── */

.vaasblock-partner-quotes__logos {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem 2rem;
}

.vaasblock-partner-quotes__logo-btn {
	background:    none;
	border:        none;
	padding:       10px 12px;
	cursor:        pointer;
	border-radius: 8px;
	filter:        grayscale(100%);
	opacity:       0.3;
	transition:    filter 0.3s ease, opacity 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
	line-height:   0;
}

.vaasblock-partner-quotes__logo-btn:hover {
	opacity:   0.65;
	filter:    grayscale(30%);
	transform: translateY(-3px);
}

.vaasblock-partner-quotes__logo-btn.is-active {
	filter:     grayscale(0%);
	opacity:    1;
	transform:  translateY(-3px);
	box-shadow: 0 4px 16px rgba(58, 107, 255, 0.18);
}

.vaasblock-partner-quotes__logo-img {
	height:  120px;
	width:   auto;
	display: block;
}

/* ── Progress bar ──────────────────────────────────────────── */

.vaasblock-partner-quotes__progress {
	height:        3px;
	background:    rgba(26, 26, 114, 0.12);
	border-radius: 2px;
	overflow:      hidden;
}

.vaasblock-partner-quotes__progress-bar {
	height:           100%;
	background:       linear-gradient(90deg, #6366f1, #a5b4fc);
	transform-origin: left center;
	transform:        scaleX(0);
}

/* ── Quote panels ──────────────────────────────────────────── */

/* Grid stacking: all panels occupy the same cell so the container
   always holds the tallest quote — no layout jump on switch. */
.vaasblock-partner-quotes__panels {
	display: grid;
}

.vaasblock-partner-quotes__panel {
	grid-area:      1 / 1;
	opacity:        0;
	visibility:     hidden;
	pointer-events: none;
	transition:     opacity 0.45s ease, visibility 0.45s ease;
}

.vaasblock-partner-quotes__panel.is-active {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
}

/* ── Quote card (Keystone dark glass) ──────────────────────── */

.vaasblock-partner-quotes__card {
	background:     linear-gradient(135deg, #0a1834 0%, #16307c 60%, #1a1a72 100%);
	border-radius:  20px;
	border:         1px solid rgba(58, 107, 255, 0.25);
	box-shadow:     0 0 48px rgba(58, 107, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.3);
	padding:        clamp(2rem, 4vw, 3rem);
	position:       relative;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	gap:            1.75rem;
}

/* Decorative quotation mark */
.vaasblock-partner-quotes__card::before {
	content:        '\201C';
	position:       absolute;
	top:            -0.5rem;
	left:           1.5rem;
	font-size:      10rem;
	font-weight:    900;
	font-style:     normal;
	line-height:    1;
	color:          rgba(255, 255, 255, 0.055);
	pointer-events: none;
	user-select:    none;
}

.vaasblock-partner-quotes__quote {
	margin:      0;
	font-size:   clamp(1.05rem, 1.6vw, 1.35rem);
	font-style:  italic;
	line-height: 1.7;
	color:       rgba(255, 255, 255, 0.9);
	position:    relative;
}

/* ── Author row ────────────────────────────────────────────── */

.vaasblock-partner-quotes__author {
	display:     flex;
	align-items: center;
	gap:         1rem;
}

.vaasblock-partner-quotes__avatar {
	width:         56px;
	height:        56px;
	border-radius: 50%;
	object-fit:    cover;
	flex-shrink:   0;
	border:        2px solid rgba(255, 255, 255, 0.18);
}

.vaasblock-partner-quotes__author-info {
	display:        flex;
	flex-direction: column;
	gap:            0.2rem;
}

.vaasblock-partner-quotes__name {
	color:       #fff;
	font-weight: 700;
	font-size:   clamp(0.9rem, 1.1vw, 1rem);
	line-height: 1.2;
}

.vaasblock-partner-quotes__role {
	color:       rgba(199, 209, 255, 0.8);
	font-size:   clamp(0.8rem, 1vw, 0.9rem);
	line-height: 1.3;
}

/* ── Panel logo wrap + logo (mobile only — hidden on desktop) ── */

.vaasblock-partner-quotes__panel-logo-wrap {
	display: none;
}

.vaasblock-partner-quotes__panel-logo {
	display: none;
}

/* ── Tablet ────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.vaasblock-partner-quotes__logos {
		justify-content: center;
		gap:             1.25rem;
	}
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 600px) {
	/* Hide tab nav and progress bar — single logo card per quote instead */
	.vaasblock-partner-quotes__logos,
	.vaasblock-partner-quotes__progress {
		display: none;
	}

	/* Each panel stacks: white logo card on top, dark quote card below */
	.vaasblock-partner-quotes__panel {
		display:        flex;
		flex-direction: column;
		gap:            0.75rem;
	}

	/* White logo card */
	.vaasblock-partner-quotes__panel-logo-wrap {
		display:        flex;
		align-items:    center;
		justify-content: center;
		background:     #ffffff;
		border-radius:  16px;
		padding:        1.5rem 2rem;
		box-shadow:     0 2px 12px rgba(0, 0, 0, 0.07);
	}

	.vaasblock-partner-quotes__panel-logo {
		display: block;
		height:  64px;
		width:   auto;
	}

	/* Fixed-height quote card prevents resize between quotes */
	.vaasblock-partner-quotes__card {
		padding:    1.5rem;
		min-height: 260px;
	}

	.vaasblock-partner-quotes__card::before {
		font-size: 7rem;
	}
}