/**
 * MIKA HOME HERO — Mobile / tablet responsive layout
 * Scoped to homepage hero only (#hero without .mika-services-hero).
 *
 * @package MikaHomeWidgets
 */

/* Shared scope: home hero widget wrapper + homepage #hero id */
.elementor-widget-mika-home-hero #hero:not(.mika-services-hero),
#hero.mika-hero:not(.mika-services-hero) {
	--mika-home-hero-px: clamp(1rem, 4vw, 2rem);
}

/* ── Tablet landscape ───────────────────────────────────── */
@media (max-width: 1200px) {
	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__grid,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		gap: clamp(1.5rem, 3vw, 2.5rem) !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__left,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__left {
		max-width: 100%;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__right,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__right {
		min-height: 360px;
	}
}

/* ── Tablet / stack layout ─────────────────────────────── */
@media (max-width: 991px) {
	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__grid,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__grid {
		grid-template-columns: 1fr !important;
		gap: clamp(2rem, 5vw, 2.75rem) !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__left,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__left {
		max-width: 100%;
		width: 100%;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__body-text,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__body-text {
		max-width: 100%;
	}

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

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__visual,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__visual {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero),
	#hero.mika-hero:not(.mika-services-hero) {
		overflow-x: clip;
		padding-block: clamp(1.75rem, 5vw, 2.5rem);
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__container,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__container {
		padding-inline: var(--mika-home-hero-px);
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__grid,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__grid {
		gap: 1.75rem !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__eyebrow-wrap,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__eyebrow-wrap {
		margin-bottom: 1.1rem;
		max-width: 100%;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__eyebrow-text,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__eyebrow-text {
		white-space: normal;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__h1,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__h1 {
		font-size: clamp(2.25rem, 9vw, 3.25rem) !important;
		line-height: 1.08;
		margin-bottom: 0.5rem;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__heading-line,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__heading-line {
		font-size: inherit;
		line-height: 1.08;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .hero-anim-script-wrap,
	#hero.mika-hero:not(.mika-services-hero) .hero-anim-script-wrap {
		transform: rotate(-2deg);
		transform-origin: left top;
		margin: 0 0 1.25rem;
		width: 100%;
		max-width: 100%;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__script-line,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__script-line {
		font-size: clamp(2.35rem, 11vw, 3.6rem) !important;
		white-space: normal !important;
		overflow-wrap: break-word;
		word-break: normal;
		margin-left: 0;
		line-height: 1.05;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__script-line--row1,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__script-line--row1 {
		transform: rotate(-1deg);
		margin-bottom: 0;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__script-line--row2,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__script-line--row2 {
		display: block !important;
		transform: rotate(-1.5deg);
		margin-left: 0;
		margin-top: 0;
		padding-right: 2.75rem;
		padding-bottom: 0.5em;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__script-scribble,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__script-scribble {
		width: 42px;
		height: 42px;
		right: 0;
		bottom: -8px;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__body-text,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__body-text {
		font-size: clamp(0.92rem, 3.8vw, 1.05rem) !important;
		line-height: 1.62 !important;
		max-width: 100% !important;
		margin-bottom: 1.5rem !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__actions,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__actions {
		width: 100%;
		gap: 1rem !important;
		flex-direction: column;
		align-items: stretch !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__btn-primary,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__btn-primary {
		width: 100%;
		max-width: 100%;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__btn-secondary,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__btn-secondary {
		justify-content: flex-start;
	}

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

/* ── Small mobile ─────────────────────────────────────── */
@media (max-width: 576px) {
	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__h1,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__h1 {
		font-size: clamp(2rem, 10vw, 2.75rem) !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__script-line,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__script-line {
		font-size: clamp(2.1rem, 12vw, 3.1rem) !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__script-scribble,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__script-scribble {
		width: 36px;
		height: 36px;
		bottom: -6px;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__right,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__right {
		max-width: min(340px, 100%);
		height: auto !important;
		transform: none !important;
		transform-origin: unset !important;
	}
}

/* ── Extra small ──────────────────────────────────────── */
@media (max-width: 420px) {
	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero),
	#hero.mika-hero:not(.mika-services-hero) {
		padding-block: 1.5rem 2rem;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__container,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__container {
		padding-inline: 1rem;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__h1,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__h1 {
		font-size: clamp(1.85rem, 11vw, 2.35rem) !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__script-line,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__script-line {
		font-size: clamp(1.95rem, 13vw, 2.75rem) !important;
	}

	.elementor-widget-mika-home-hero #hero:not(.mika-services-hero) .mika-hero__eyebrow-badge,
	#hero.mika-hero:not(.mika-services-hero) .mika-hero__eyebrow-badge {
		padding: 0.4rem 1rem 0.35rem;
	}

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

/* ── Option B: fluid full-width (homepage hero only) ─────
   Section + content scale with viewport on laptop and large
   monitors. Scoped to .mika-hero--full-width only.
   ─────────────────────────────────────────────────────── */

/* Clear Elementor ancestor constraints around full-width hero */
.elementor-section:has(.elementor-widget-mika-home-hero .mika-hero--full-width),
.e-con:has(.elementor-widget-mika-home-hero .mika-hero--full-width),
.elementor-container:has(.elementor-widget-mika-home-hero .mika-hero--full-width),
.elementor-column:has(.elementor-widget-mika-home-hero .mika-hero--full-width),
.elementor-widget-wrap:has(> .elementor-widget-mika-home-hero .mika-hero--full-width) {
	max-width: 100% !important;
	width: 100% !important;
	overflow: visible !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.elementor-widget-mika-home-hero:has(.mika-hero--full-width) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

.elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Inner content: no fixed max-width — fluid with light padding */
.elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__container {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: clamp(1.25rem, 3.2vw, 4rem) !important;
	box-sizing: border-box !important;
}

.elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__grid {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
	gap: clamp(2rem, 4vw, 4.5rem);
}

/* Text column fills its grid track (no 580/640px lock) */
.elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__left {
	max-width: none !important;
	width: 100% !important;
}

.elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__body-text {
	max-width: min(36rem, 100%) !important;
}

/* Collage scales with viewport instead of hard 560px cap */
.elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__right {
	max-width: none !important;
	width: 100% !important;
	min-height: clamp(380px, 42vw, 560px);
}

.elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__visual {
	width: 100% !important;
	max-width: min(100%, clamp(520px, 42vw, 780px)) !important;
	height: auto !important;
}

/* Editor / preview: same fluid band without double breakout */
.elementor-editor-active .elementor-widget-mika-home-hero:has(.mika-hero--full-width),
.elementor-editor-preview .elementor-widget-mika-home-hero:has(.mika-hero--full-width) {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

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

.elementor-editor-active .elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__container,
.elementor-editor-preview .elementor-widget-mika-home-hero .mika-hero.mika-hero--full-width .mika-hero__container {
	max-width: none !important;
	width: 100% !important;
	padding-inline: clamp(1.25rem, 3.2vw, 4rem) !important;
}

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