/**
 * Responsive P0 corrections. Breakpoint behavior is kept out of component
 * files so phone/tablet changes can be audited in one place.
 */

@media (max-width: 1024px) {
	:root { --jh-header-clearance: 82px; }

	.jhilik-site-header { padding-block: 0.65rem; }
	.jhilik-site-header__bar {
		grid-template-columns: minmax(0, 1fr) auto auto;
		min-height: 56px;
		padding: 0.35rem 0.5rem 0.35rem 0.85rem;
	}
	.jhilik-site-header__actions { gap: 0.45rem; }
}

@media (max-width: 980px) {
	.jhilik-hero {
		padding-top: calc(var(--jh-header-clearance) + clamp(2rem, 6vw, 3.5rem));
		padding-bottom: clamp(3.5rem, 7vw, 5rem);
	}

	.jhilik-hero__cols { gap: clamp(1.5rem, 4vw, 2.5rem) !important; }

	.jhilik-stage {
		width: min(100%, 650px);
		max-width: 650px;
		min-height: 0;
		margin-top: 0.5rem;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"jhilik jhilik jhilik jhilik"
			"deany judy joyee arlo";
		gap: 0.75rem;
	}

	.jhilik-figure {
		position: relative;
		inset: auto;
		translate: none;
		width: 100%;
		max-width: 135px;
		justify-self: center;
	}

	.jhilik-figure--jhilik { max-width: 190px; }
	.jhilik-figure--deany,
	.jhilik-figure--judy,
	.jhilik-figure--joyee,
	.jhilik-figure--arlo { align-self: end; }

	.jhilik-figure::before,
	.jhilik-figure::after { display: none; }
	.jhilik-bubble { display: none; }
}

@media (max-width: 720px) {
	:root { --jh-header-clearance: 78px; }

	.jhilik-site-header { padding-block: 0.55rem; }
	.jhilik-site-header__brand .wp-block-site-title { font-size: 1rem; }
	.jhilik-site-header__cta .wp-block-button__link {
		min-height: 40px;
		padding: 0.55rem 0.85rem;
		font-size: 0.84rem;
	}
	.jhilik-mobile-trigger { width: 40px; height: 40px; min-width: 40px; }

	.jhilik-section { padding-block: clamp(2.75rem, 10vw, 4rem); }

	.jhilik-hero h1 { max-width: 11ch; }
	.jhilik-hero__lead { max-width: 38ch; }
	.jhilik-hero .wp-block-buttons { flex-direction: row; flex-wrap: wrap; }
	.jhilik-hero .wp-block-button { width: auto; }
	.jhilik-hero .wp-block-button__link { width: auto; }

	.jhilik-stage {
		width: min(100%, 430px);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.35rem;
	}
	.jhilik-figure { max-width: 96px; }
	.jhilik-figure--jhilik { max-width: 145px; }
	.jhilik-figure__name { font-size: 0.69rem; padding: 0.18rem 0.48rem; }

	/*
	 * Compact workflow canvas: the rail becomes a horizontal stepper of
	 * small avatars with connecting lines, and the work-surface panel sits
	 * below it. One active panel, small nodes, no giant cards or repeated
	 * hero-scale illustration — the whole workflow reads in about one
	 * screen instead of several.
	 */
	.jhilik-workflow-canvas {
		grid-template-columns: 1fr;
		gap: 1.1rem;
		margin-top: 1.5rem;
	}
	.jhilik-workflow-rail {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		padding: 0.85rem 0.5rem;
		gap: 0;
	}
	.jhilik-workflow-node {
		flex-direction: column;
		width: auto;
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
		gap: 0.35rem;
		padding: 0.25rem 0.15rem;
	}
	.jhilik-workflow-node.is-active { transform: translateY(-2px); }
	.jhilik-workflow-node__avatar { width: 40px; height: 40px; }
	.jhilik-workflow-node__text { align-items: center; }
	.jhilik-workflow-node__name { font-size: 0.72rem; }
	.jhilik-workflow-node__role { display: none; }
	.jhilik-workflow-connector {
		width: auto;
		flex: 1 1 auto;
		height: 2px;
		margin: 0;
		margin-top: 1.35rem;
	}
	.jhilik-workflow-connector__fill {
		transform: scaleX(0);
		transform-origin: left;
	}
	.jhilik-workflow-connector.is-filled .jhilik-workflow-connector__fill {
		transform: scaleX(1);
	}
	.jhilik-work-surface {
		padding: 1.15rem 1.25rem;
		min-height: 0;
	}
	.jhilik-work-surface__heading { font-size: 1.05rem; }
	.jhilik-work-surface__body { font-size: 0.92rem; }
}

/*
 * <=600px: a real composed team scene, not a row of icons under Jhilik.
 * Jhilik anchors the center column across both rows; two dragons flank her
 * upper half, two flank her lower half — the same "who's on which side"
 * pairing as the desktop corners (deany/judy left, joyee/arlo right), just
 * stacked instead of spread across a wide stage.
 */
@media (max-width: 600px) {
	.jhilik-stage {
		width: min(100%, 380px);
		max-width: 380px;
		aspect-ratio: auto;
		min-height: 0;
		margin-top: 1.5rem;
		display: grid;
		grid-template-columns: 1fr 1.55fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"deany jhilik joyee"
			"judy  jhilik arlo";
		column-gap: 0.35rem;
		row-gap: 1rem;
		align-items: center;
	}

	.jhilik-figure {
		position: relative;
		inset: auto;
		translate: none;
		width: 100%;
		justify-self: center;
	}

	.jhilik-figure--jhilik { grid-area: jhilik; max-width: 172px; align-self: center; z-index: 3; }
	.jhilik-figure--deany  { grid-area: deany;  max-width: 112px; align-self: end; }
	.jhilik-figure--joyee  { grid-area: joyee;  max-width: 112px; align-self: end; }
	.jhilik-figure--judy   { grid-area: judy;   max-width: 112px; align-self: start; }
	.jhilik-figure--arlo   { grid-area: arlo;   max-width: 112px; align-self: start; }

	.jhilik-figure::before,
	.jhilik-figure::after { display: none; }
	.jhilik-bubble { display: none; }
	.jhilik-figure__name { font-size: 0.72rem; padding: 0.18rem 0.55rem; }
}

@media (max-width: 430px) {
	:root { --jh-header-clearance: 74px; }

	.jhilik-site-header__bar { column-gap: 0.35rem; }
	.jhilik-site-header__brand .wp-block-site-title { font-size: 0.94rem; }
	.jhilik-site-header__cta .wp-block-button__link { padding-inline: 0.7rem; }

	.jhilik-hero {
		padding-top: calc(var(--jh-header-clearance) + 1.75rem);
		padding-bottom: 3.25rem;
	}
	.jhilik-hero h1 { font-size: clamp(2rem, 9.5vw, 2.5rem); }
	.jhilik-hero .wp-block-buttons { gap: 0.6rem; }
	.jhilik-hero .wp-block-button__link { min-height: 44px; padding-inline: 1rem; }
	.jhilik-hero__meta { margin-top: 1rem; }

	.jhilik-stage { width: min(100%, 320px); column-gap: 0.25rem; }
	.jhilik-figure--jhilik { max-width: 148px; }
	.jhilik-figure--deany,
	.jhilik-figure--joyee,
	.jhilik-figure--judy,
	.jhilik-figure--arlo { max-width: 96px; }
	.jhilik-figure__name { font-size: 0.68rem; padding: 0.16rem 0.48rem; }
}