/*
 * Mashin Irani — homepage CTA for the octane calculator.
 * Separate from mirani-octane-calc.css because this one banner is injected into the frozen homepage
 * markup and therefore has to load site-wide, while the calculator page styles stay page-scoped.
 */

.moc-cta {
	display: flex; align-items: center; gap: var(--space-4, 16px);
	margin-bottom: var(--space-5, 20px); padding: var(--space-5, 20px);
	background: var(--navy-900, #102134);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-e2, 0 4px 12px rgba(16, 33, 52, .08));
	color: #fff; text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
.moc-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-e3, 0 8px 24px rgba(16, 33, 52, .18)); }

.moc-cta__ic {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 52px; height: 52px; border-radius: var(--radius-md, 8px);
	background: rgba(224, 197, 143, .15);
}
.moc-cta__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-300, #e0c58f); stroke-width: 1.6; }

.moc-cta__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.moc-cta__txt b { font-size: clamp(1rem, 2.6vw, 1.2rem); line-height: 1.5; color: #fff; }
.moc-cta__txt em { font-style: normal; font-size: .85rem; line-height: 1.7; color: rgba(255, 255, 255, .72); }

.moc-cta__go {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--gold-300, #e0c58f);
}
.moc-cta__go svg { width: 18px; height: 18px; fill: none; stroke: var(--navy-900, #102134); stroke-width: 2.2; transform: scaleX(-1); }

@media (max-width: 560px) {
	.moc-cta { flex-wrap: wrap; padding: var(--space-4, 16px); }
	.moc-cta__ic { width: 42px; height: 42px; }
	.moc-cta__ic svg { width: 22px; height: 22px; }
	.moc-cta__go { display: none; }
}