/* =============================================================================
   VW Rotating Cards — Vertical Ticker Styles
   Version: 1.0.0
   ============================================================================= */

/* ── Google Font ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CSS custom properties ───────────────────────────────────────────────── */
.vw-ticker-section {
	--vw-font:          'Inter', sans-serif;
	--vw-navy:          #0a1628;
	--vw-navy-mid:      #0f2045;
	--vw-card-bg:       rgba(255, 255, 255, 0.055);
	--vw-card-border:   rgba(255, 255, 255, 0.10);
	--vw-card-hover:    rgba(255, 255, 255, 0.09);
	--vw-text:          #e2e8f0;
	--vw-text-muted:    #8898aa;
	--vw-star-filled:   #FFCA3A;
	--vw-star-empty:    rgba(255, 202, 58, 0.25);
	--vw-accent:        #4f7eff;
	--vw-badge-bg:      rgba(79, 126, 255, 0.15);
	--vw-badge-border:  rgba(79, 126, 255, 0.4);
	--vw-radius:        14px;
	--ticker-speed:     25s;          /* overridden per-column via inline style */
}

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.vw-ticker-section {
	font-family:    var(--vw-font);
	background:     var(--vw-navy);
	padding:        80px 0 100px;
	overflow:       hidden;
	position:       relative;
	width:          100%;
	box-sizing:     border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.vw-ticker-header {
	text-align:     center;
	margin-bottom:  56px;
	padding:        0 24px;
}

/* Badge / pill */
.vw-ticker-badge {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   18px;
}

.vw-ticker-badge span {
	display:          inline-block;
	background:       var(--vw-badge-bg);
	border:           1px solid var(--vw-badge-border);
	color:            var(--vw-accent);
	font-size:        12px;
	font-weight:      600;
	letter-spacing:   0.12em;
	text-transform:   uppercase;
	padding:          6px 18px;
	border-radius:    100px;
}

/* Heading */
.vw-ticker-title {
	font-family:     var(--vw-font);
	font-size:       clamp(28px, 4vw, 52px);
	font-weight:     800;
	line-height:     1.15;
	color:           #ffffff;
	margin:          0 auto;
	max-width:       680px;
	letter-spacing:  -0.02em;
}

/* ── Ticker grid ─────────────────────────────────────────────────────────── */
.vw-ticker-grid {
	display:          grid;
	gap:              18px;
	padding:          0 20px;
	max-width:        1400px;
	margin:           0 auto;
	align-items:      start;
}

.vw-ticker-cols-2 { grid-template-columns: repeat(2, 1fr); }
.vw-ticker-cols-3 { grid-template-columns: repeat(3, 1fr); }
.vw-ticker-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Column + gradient masks ─────────────────────────────────────────────── */
.vw-ticker-column {
	height:           600px;
	overflow:         hidden;
	position:         relative;
}

/* Top & bottom fade masks — hides seam of infinite loop */
.vw-ticker-column::before,
.vw-ticker-column::after {
	content:          '';
	position:         absolute;
	left:             0;
	right:            0;
	z-index:          2;
	pointer-events:   none;
}

.vw-ticker-column::before {
	top:    0;
	height: 80px;
	background: linear-gradient(to bottom,
		var(--vw-navy) 0%,
		transparent 100%);
}

.vw-ticker-column::after {
	bottom: 0;
	height: 80px;
	background: linear-gradient(to top,
		var(--vw-navy) 0%,
		transparent 100%);
}

/* ── Ticker track (animated) ─────────────────────────────────────────────── */
.vw-ticker-track {
	display:          flex;
	flex-direction:   column;
	gap:              18px;
	animation:        vw-ticker-up var(--ticker-speed, 25s) linear infinite;
	will-change:      transform;
}

/* Pause on hover */
.vw-ticker-column:hover .vw-ticker-track {
	animation-play-state: paused;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes vw-ticker-up {
	0%   { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}

/* ── Individual card ─────────────────────────────────────────────────────── */
.vw-ticker-card {
	background:       var(--vw-card-bg);
	border:           1px solid var(--vw-card-border);
	border-radius:    var(--vw-radius);
	padding:          22px 22px 20px;
	position:         relative;
	transition:       background 0.25s ease,
	                  border-color 0.25s ease,
	                  transform 0.25s ease,
	                  box-shadow 0.25s ease;
	backdrop-filter:  blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor:           default;
	box-sizing:       border-box;
}

.vw-ticker-card:hover {
	background:       var(--vw-card-hover);
	border-color:     rgba(79, 126, 255, 0.25);
	transform:        translateY(-2px);
	box-shadow:       0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Decorative quote icon */
.vw-card-quote-icon {
	color:            var(--vw-accent);
	margin-bottom:    10px;
	display:          block;
	line-height:      1;
}

/* ── Star rating ─────────────────────────────────────────────────────────── */
.vw-card-stars {
	display:          flex;
	gap:              3px;
	margin-bottom:    12px;
}

.vw-star {
	font-size:        16px;
	color:            var(--vw-star-empty);
	line-height:      1;
}

.vw-star--filled {
	color:            var(--vw-star-filled);
	text-shadow:      0 0 8px rgba(255, 202, 58, 0.45);
}

/* ── Testimonial text ────────────────────────────────────────────────────── */
.vw-card-testimonial {
	font-size:        14px;
	line-height:      1.7;
	color:            var(--vw-text);
	margin:           0 0 20px;
	font-weight:      400;
}

/* ── Author row ──────────────────────────────────────────────────────────── */
.vw-card-author {
	display:          flex;
	align-items:      center;
	gap:              12px;
	padding-top:      16px;
	border-top:       1px solid rgba(255, 255, 255, 0.08);
}

/* Avatar */
.vw-card-avatar-wrap {
	flex-shrink:      0;
}

.vw-card-avatar {
	width:            44px;
	height:           44px;
	border-radius:    50%;
	object-fit:       cover;
	border:           2px solid rgba(79, 126, 255, 0.5);
	display:          block;
}

.vw-card-avatar-placeholder {
	width:            44px;
	height:           44px;
	border-radius:    50%;
	background:       linear-gradient(135deg, var(--vw-accent), #8b5cf6);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	border:           2px solid rgba(79, 126, 255, 0.5);
}

.vw-card-avatar-placeholder span {
	font-size:        18px;
	font-weight:      700;
	color:            #ffffff;
	line-height:      1;
}

/* Name & role */
.vw-card-meta {
	display:          flex;
	flex-direction:   column;
	gap:              2px;
	min-width:        0;
}

.vw-card-name {
	font-size:        14px;
	font-weight:      600;
	color:            #ffffff;
	display:          block;
	white-space:      nowrap;
	overflow:         hidden;
	text-overflow:    ellipsis;
}

.vw-card-role {
	font-size:        12px;
	color:            var(--vw-text-muted);
	display:          block;
	white-space:      nowrap;
	overflow:         hidden;
	text-overflow:    ellipsis;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.vw-rc-empty {
	color:            var(--vw-text-muted);
	text-align:       center;
	padding:          40px;
	font-family:      var(--vw-font);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.vw-ticker-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.vw-ticker-section {
		padding: 56px 0 72px;
	}

	.vw-ticker-grid {
		grid-template-columns: 1fr !important; /* single column on mobile */
		gap: 14px;
	}

	.vw-ticker-column {
		height: 340px;
	}

	.vw-ticker-title {
		font-size: 26px;
	}

	.vw-ticker-header {
		margin-bottom: 36px;
	}
}