/**
 * MIKA SERVICES HERO — Mobile / tablet responsive layout
 * Scoped to the services hero widget only. No JS; no transform overrides on animated text.
 *
 * @package MikaServicesWidgets
 */

/* ── Full width layout (services hero widget only) ──────── */
.elementor-widget-mika-services-hero:has(.mika-services-hero--full-width) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.elementor-widget-mika-services-hero .mika-services-hero--full-width {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-widget-mika-services-hero .mika-services-hero--full-width .mika-container {
	max-width: min(1440px, 100%);
	width: 100%;
}

.elementor-editor-active .elementor-widget-mika-services-hero:has(.mika-services-hero--full-width),
.elementor-editor-preview .elementor-widget-mika-services-hero:has(.mika-services-hero--full-width) {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.elementor-editor-active .elementor-widget-mika-services-hero .mika-services-hero--full-width,
.elementor-editor-preview .elementor-widget-mika-services-hero .mika-services-hero--full-width {
	width: 100% !important;
	max-width: 100% !important;
}

/* ── Hero CTA: same button as grid sidebar (svc-sidebar__cta) ── */
.mika-services-hero #hero-discuss-btn.svc-sidebar__cta {
	display: inline-flex;
}

/* ── Tablet landscape ───────────────────────────────────── */
@media (max-width: 1200px) {
	.mika-services-hero .mika-hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp(1.5rem, 3vw, 2.5rem);
		padding-block: clamp(2.5rem, 4vw, 4rem);
	}

	.mika-services-hero .mika-hero__script-accent {
		margin-right: clamp(-3rem, -10vw, -6rem);
		padding-right: clamp(3rem, 10vw, 6rem);
	}
}

/* ── Tablet / stack layout ─────────────────────────────── */
@media (max-width: 991px) {
	.mika-services-hero .mika-hero__grid {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 5vw, 2.75rem);
		padding-block: clamp(2rem, 4vw, 3.5rem);
	}

	.mika-services-hero .mika-hero__left {
		max-width: 100%;
		text-align: left;
	}

	.mika-services-hero .mika-hero__body-text {
		max-width: 100%;
	}

	.mika-services-hero .mika-hero__right {
		order: 2;
		width: 100%;
		min-height: 0;
		max-width: min(480px, 92vw);
		margin: 0 auto;
		height: auto;
		transform: none;
	}

	.mika-services-hero .mika-hero__visual {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
	.mika-services-hero .mika-container {
		padding-inline: clamp(1rem, 4vw, 1.5rem);
	}

	.mika-services-hero .mika-hero__grid {
		gap: 1.75rem;
		padding-block: clamp(1.75rem, 5vw, 2.5rem);
	}

	.mika-services-hero .hero-anim-eyebrow {
		margin-bottom: 1.1rem !important;
		max-width: 100%;
		flex-wrap: wrap;
		row-gap: 0.35rem;
	}

	.mika-services-hero .mika-hero__h1 {
		margin-bottom: 1rem;
	}

	.mika-services-hero .mika-hero__heading-line {
		font-size: clamp(2.25rem, 9vw, 3.25rem);
		line-height: 1.08;
	}

	.mika-services-hero .mika-hero__script-accent {
		font-size: clamp(2.6rem, 11vw, 3.8rem) !important;
		margin-top: -0.1em;
		margin-right: 0;
		padding-right: 0;
		margin-left: 0;
		padding-bottom: 0.35em;
	}

	.mika-services-hero .mika-hero__script-scribble {
		width: 42px;
		height: 42px;
		right: -28px;
		bottom: -14px;
	}

	.mika-services-hero .mika-hero__script-underline {
		width: calc(100% + 40px);
		height: 14px;
		bottom: -10px;
	}

	.mika-services-hero .mika-hero__script-pink-cross {
		width: 18px;
		height: 18px;
		bottom: -0.3em;
		left: 0;
	}

	.mika-services-hero .mika-hero__body-text {
		font-size: clamp(0.92rem, 3.8vw, 1.05rem);
		line-height: 1.62;
		margin-bottom: 1.5rem;
	}

	.mika-services-hero .mika-hero__actions {
		width: 100%;
	}

	.mika-services-hero #hero-discuss-btn.svc-sidebar__cta {
		width: 100%;
		justify-content: center;
	}

	.mika-services-hero .mika-hero__right {
		max-width: min(400px, 100%);
	}
}

/* ── Small mobile ─────────────────────────────────────── */
@media (max-width: 576px) {
	.mika-services-hero .mika-hero__heading-line {
		font-size: clamp(2rem, 10vw, 2.75rem);
	}

	.mika-services-hero .mika-hero__script-accent {
		font-size: clamp(2.35rem, 12vw, 3.2rem) !important;
	}

	.mika-services-hero .mika-hero__script-scribble {
		width: 36px;
		height: 36px;
		right: -20px;
		bottom: -10px;
	}

	.mika-services-hero .mika-hero__script-underline {
		width: calc(100% + 24px);
		height: 12px;
	}

	.mika-services-hero .mika-hero__right {
		max-width: min(340px, 100%);
	}
}

/* ── Extra small ──────────────────────────────────────── */
@media (max-width: 420px) {
	.mika-services-hero .mika-hero__grid {
		padding-block: 1.5rem 2rem;
	}

	.mika-services-hero .hero-anim-eyebrow svg {
		width: 16px !important;
		height: 16px !important;
	}

	.mika-services-hero .mika-hero__heading-line {
		font-size: clamp(1.85rem, 11vw, 2.35rem);
	}

	.mika-services-hero .mika-hero__script-accent {
		font-size: clamp(2.1rem, 13vw, 2.85rem) !important;
	}

	.mika-services-hero .mika-hero__right {
		max-width: min(300px, 100%);
	}
}

/* Override legacy scale-based rules in main stylesheet (causes blurry image) */
@media (max-width: 576px) {
	.mika-services-hero .mika-hero__right {
		height: auto !important;
		transform: none !important;
		transform-origin: unset !important;
	}
}

@media (max-width: 420px) {
	.mika-services-hero .mika-hero__right {
		height: auto !important;
		transform: none !important;
	}
}