/**
 * Conductor.ng responsive layer.
 *
 * The app renders its layout as inline styles (highest specificity), which the
 * browser serialises in a normalised form (a space after every ":" and ","),
 * e.g. "grid-template-columns: repeat(3, 1fr)". The attribute-substring
 * selectors below match that normalised form and use !important to adapt the
 * fixed multi-column grids to tablet and phone widths without touching the
 * original markup. Desktop keeps the design exactly as authored.
 */

.cn-calc-results { flex-wrap: wrap; }
.cn-calc-results > div { min-width: 110px; }

/* ===================== TABLET (<= 1024px) ===================== */
@media (max-width: 1024px) {
	[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr"] { grid-template-columns: 1fr 1fr 1fr !important; }
	section[style*="padding: 88px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* ===================== MOBILE (<= 768px) ===================== */
@media (max-width: 768px) {
	[style*="grid-template-columns: 1fr 1fr"],
	[style*="grid-template-columns: repeat(3, 1fr)"],
	[style*="grid-template-columns: 0.92fr 1.08fr"],
	[style*="grid-template-columns: 1.05fr 0.95fr"],
	[style*="grid-template-columns: 0.95fr 1.05fr"],
	[style*="grid-template-columns: 1.15fr 0.85fr"],
	[style*="grid-template-columns: 0.9fr 1.1fr"],
	[style*="grid-template-columns: 1.1fr 0.9fr"],
	[style*="grid-template-columns: 240px 1fr"],
	[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr"] {
		grid-template-columns: 1fr !important;
	}
	[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }

	.cn-calc-fields { grid-template-columns: 1fr !important; }

	section[style*="padding: 88px"],
	section[style*="padding: 80px"],
	section[style*="padding: 72px"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	[style*="padding: 56px"] { padding: 34px 24px !important; }
	[style*="border-radius: 32px"] { border-radius: 24px !important; }

	.cn-navlinks {
		overflow-x: auto;
		flex-wrap: nowrap;
		max-width: 100%;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
	}
	.cn-navlinks::-webkit-scrollbar { display: none; }
	nav[style*="max-width: 1280px"] { gap: 10px !important; padding-left: 16px !important; padding-right: 16px !important; }


	[style*="max-width: 560px"] { max-width: 100% !important; }
	[style*="padding: 28px 40px"],
	[style*="padding: 40px 40px"],
	[style*="padding: 26px 40px"],
	[style*="padding: 30px 40px"] { padding-left: 22px !important; padding-right: 22px !important; }

	[style*="padding: 72px 28px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ===================== SMALL PHONES (<= 460px) ===================== */
@media (max-width: 460px) {
	[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
	.cn-calc-results { flex-direction: column; }
	.cn-calc-results > div { width: 100%; }
	.cn-hero-media { margin: 0 4px; }
}

@media (hover: none) {
	.cn-hero-hint { display: none !important; }
}

/* ===================== TESTIMONIALS CAROUSEL ===================== */
.cn-testi-wrap { position: relative; }
.cn-testi-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 8px;
}
.cn-testi-track::-webkit-scrollbar { display: none; }
.cn-testi-card {
	scroll-snap-align: start;
	flex: 0 0 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(20,18,16,0.08);
	border-radius: 22px;
	padding: 30px 28px;
	box-shadow: 0 18px 40px rgba(20,18,16,0.06);
}
.cn-testi-quote {
	font-size: 15.5px; line-height: 1.65; color: #3a352f; margin: 0 0 20px;
	overflow-wrap: break-word; word-break: break-word;
	display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.cn-testi-person { display: flex; align-items: center; gap: 14px; }
.cn-testi-avatar {
	width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px;
	color: #9a5c07; background: linear-gradient(160deg, #FBEFD9, #F3DDAF);
	border: 1px solid rgba(154,92,7,0.18);
}
.cn-testi-avatar-img {
	width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
	object-fit: cover; border: 1px solid rgba(154,92,7,0.18);
}
.cn-testi-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px; color: #141210; }
.cn-testi-role { font-size: 13px; color: #8a847a; margin-top: 1px; }
.cn-testi-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.cn-testi-arrow {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(20,18,16,0.12);
	background: #fff; color: #141210; display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0;
}
.cn-testi-arrow:hover { background: #E88D0E; border-color: #E88D0E; color: #141210; }
.cn-testi-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
.cn-testi-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(20,18,16,0.18); transition: width 0.2s, border-radius 0.2s; }
.cn-testi-dot.is-active { background: #E88D0E; width: 22px; border-radius: 5px; }

@media (min-width: 769px) {
	.cn-testi-card { flex: 0 0 calc(50% - 10px); }
}