/**
 * Wave 3 — Homepage mobile section parity (React SoT @390/430).
 * Scoped overrides only. Does not touch shell / bottom-nav / Concierge.
 */

/* ── Consultation: React pads inner shell, not <section> ─────────────── */
.consultation-section.consultation-section--react {
	padding-block: 0;
}

.consultation-section--react .consultation-section__inner.section-shell {
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

@media (max-width: 767px) {
	.consultation-section--react .consultation-section__inner.section-shell {
		padding-block: clamp(3.75rem, 16vw, 5rem);
	}

	/* React: no large header mb — gallery uses mt-14 */
	.consultation-section--react .consultation-section__header {
		margin-bottom: 0;
	}

	.consultation-section--react .consultation-gallery--react {
		margin-top: 3.5rem;
	}

	.consultation-section--react .consultation-panel--react {
		margin-top: 2.5rem;
		padding: 0;
		gap: 0;
	}

	.consultation-section--react .consultation-form-card--react {
		padding: 1.75rem;
	}

	.consultation-section--react .consultation-form-card--react > h3 {
		margin-top: 0.75rem;
		font-size: clamp(1.5rem, 2.4vw, 2rem);
		line-height: 1.1;
	}

	.consultation-section--react .consultation-lead-form--react {
		gap: 1rem;
		margin-top: 1.75rem;
	}

	/* React Textarea min-h-[100px]; WP rows=5 was taller */
	.consultation-section--react .consultation-lead-form--react textarea {
		min-height: 100px;
		height: 100px;
	}

	.consultation-section--react .consultation-lead-form--react input,
	.consultation-section--react .consultation-lead-form--react select {
		min-height: 50px;
		padding: 0.65rem 1rem;
	}

	.consultation-section--react .consultation-lead-form__stats {
		padding-top: 1.25rem;
		gap: 0.75rem;
	}

	.consultation-section--react .consultation-lead-form__submit {
		padding-top: 1.25rem;
		gap: 0.75rem;
	}

	/* React default form has no footer contact strip (only success state) */
	.consultation-section--react .consultation-form-card__contact {
		display: none;
	}

	.consultation-section--react .consultation-next {
		margin-top: 2.5rem;
	}

	/* Gallery slides — React h-64 (16rem) × 280px; track pad → ~328 strip */
	.consultation-section--react .consultation-gallery--react .consultation-gallery__track {
		padding: 1rem 0.5rem 0.5rem;
	}

	.consultation-section--react .consultation-gallery__slide {
		width: 280px;
		height: 16rem;
	}
}

/* ── Showcase: React accent strip collapses to ~0 on mobile (<sm) ─────── */
@media (max-width: 639px) {
	.premium-showcase--react .premium-showcase__stack {
		min-height: 0;
		height: 0;
		overflow: hidden;
		margin: 0;
		padding: 0;
		gap: 0;
		border: 0;
	}

	.premium-showcase--react .premium-showcase__thumb {
		min-height: 0;
		height: 0;
		border: 0;
		opacity: 0;
		pointer-events: none;
	}

	.premium-showcase--react .premium-showcase__gallery-frame {
		gap: 0;
	}

	.premium-showcase--react .premium-showcase__stats {
		margin-top: 1.25rem;
		gap: 0.625rem;
	}

	.premium-showcase--react .premium-showcase__stat {
		padding: 0.875rem 0.75rem;
	}

	.premium-showcase--react .premium-showcase__copy {
		font-size: 0.95rem;
		line-height: 1.7;
	}

	.premium-showcase--react .premium-showcase__copy--secondary {
		margin-top: 0.85rem;
	}

	.premium-showcase--react .premium-showcase__actions {
		margin-top: 1.75rem;
	}
}

/* ── Experience: React minHeights 440 / 210, gap-5 ─────────────────────── */
@media (max-width: 767px) {
	.experience-section--react .experience-header {
		gap: 2rem;
	}

	.experience-section--react .experience-grid {
		gap: 1.25rem;
	}

	.experience-section--react .experience-card {
		min-height: 210px;
	}

	.experience-section--react .experience-card--featured {
		min-height: 440px;
	}
}

/* ── Collections: React CARD 300×450 + heading-2 mobile metrics ────────── */
@media (max-width: 767px) {
	.collections-section--react .collections-section__intro {
		margin-bottom: 0;
	}

	/* React .heading-2 @≤767: clamp(2rem, 8vw, 2.65rem) — one line @390 */
	.collections-section--react .collections-section__intro .section-title {
		margin-top: 1rem;
		font-size: clamp(2rem, 8vw, 2.65rem);
		line-height: 1.05;
		letter-spacing: -0.03em;
		white-space: nowrap;
	}

	.collections-section--react .collections-section__intro .section-title em {
		display: inline;
		font-style: italic;
	}

	.collections-section--react .collections-section__intro .section-label-row {
		margin-bottom: 0;
	}

	.collections-section--react .collections-gallery {
		margin-top: 3.5rem;
	}

	.collections-section--react .collections-gallery__viewport {
		padding: 0.5rem 0 2rem;
	}

	.collections-section--react .collections-gallery__track {
		padding: 0 2rem;
		gap: 1.5rem;
	}

	.collections-section--react .collections-gallery__slide {
		width: 300px;
		height: 450px;
		padding: 0.5rem 0 2rem;
		box-sizing: border-box;
	}

	.collections-section--react .collections-section__lede {
		margin: 1.25rem 0 1.5rem;
		font-size: 1.05rem;
		line-height: 1.7;
	}
}

/* ── Process: match React heading metrics + CTA mt-20 ──────────────────── */
@media (max-width: 767px) {
	.process-timeline-heading--react {
		margin-bottom: 5rem;
	}

	.process-timeline-heading--react .section-label-row--center {
		margin-bottom: 0;
		gap: 1.25rem;
	}

	.process-timeline-heading--react h2 {
		margin-top: 0;
		font-size: clamp(2.1rem, 7.2vw, 2.35rem);
		line-height: 1.12;
	}

	.process-timeline-heading--react .process-timeline-heading__lede {
		margin-top: 1.5rem;
		font-size: 0.8125rem;
		line-height: 1.9;
		max-width: 20rem;
	}

	.process-timeline-scene--react .process-timeline-cta {
		margin-top: 5rem;
		gap: 2rem;
	}

	.process-timeline-scene--react .process-timeline-step--react {
		flex-basis: min(82vw, 20rem);
		max-width: 320px;
	}

	.process-timeline-scene--react .process-timeline-step__card {
		min-height: 10.5rem;
		padding: 1.25rem;
	}
}

/* ── Footer: kill legacy trust margin; React hero pb-20/pt-24 rhythm ───── */
@media (max-width: 767px) {
	.site-footer--react .site-footer__trust-row,
	.site-footer--react .site-footer__trust-row--react {
		margin-bottom: 0;
		padding: 2.75rem 0;
	}

	.site-footer--react .site-footer__trust-row--react div {
		padding: 1rem;
	}

	.site-footer--react .site-footer__hero {
		/* React Footer: pt-24 pb-20 on mobile */
		padding: 6rem 0 5rem;
	}

	/* Override footer-cms.css mobile hero shrink */
	body.kc-has-mobile-bottom-nav .site-footer--react .site-footer__hero,
	.site-footer.site-footer--react .site-footer__hero {
		padding: 6rem 0 5rem;
	}

	.site-footer--react .site-footer__mobile {
		padding-top: 2.5rem;
		padding-bottom: 1rem;
	}

	.site-footer--react .site-footer__bottom--react {
		margin-top: 0;
		padding: 1.4rem 0 2rem;
	}
}