/* Inspa — mobile & small-tablet layout (loaded after page CSS via bundle glob order) */

/* Prevent horizontal panning from overflowing children */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#dcf-root.dcf-root,
.inspa-main {
	min-width: 0;
}

/* Gutenberg: alignwide/alignfull often use negative side margins; neutralize on narrow viewports */
@media (max-width: 900px) {
	.dcf-block-canvas .entry-content .alignwide,
	.dcf-block-canvas .entry-content .alignfull {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

.inspa-container {
	min-width: 0;
}

/* Notched devices: keep content off the “chin” and sides */
@supports (padding: max(0px)) {
	@media (max-width: 900px) {
		.inspa-container {
			padding-left: max(var(--inspa-gutter), env(safe-area-inset-left, 0px));
			padding-right: max(var(--inspa-gutter), env(safe-area-inset-right, 0px));
		}

		/* Slightly more side padding on the sticky bar (same element is `.inspa-header__inner`) */
		.inspa-header .inspa-container {
			padding-left: max(calc(var(--inspa-gutter) + 0.4rem), env(safe-area-inset-left, 0px));
			padding-right: max(calc(var(--inspa-gutter) + 0.4rem), env(safe-area-inset-right, 0px));
		}

		/* Header: only top safe-area here — left/right come from `.inspa-container` (gutter + safe).
		   Do not set padding-inline on `.inspa-header__inner` or it overrides the container gutter to 0. */
		.inspa-header__inner {
			padding-top: max(0.9rem, calc(0.55rem + env(safe-area-inset-top, 0px)));
			padding-bottom: 0.95rem;
		}

		.inspa-footer__bar-inner {
			padding-top: max(0px, env(safe-area-inset-top, 0px));
			padding-left: max(0px, env(safe-area-inset-left, 0px));
			padding-right: max(0px, env(safe-area-inset-right, 0px));
		}
	}

	/* Drawer only: match mobile nav breakpoint, avoid padding desktop .inspa-nav (861–900px) */
	@media (max-width: 860px) {
		.inspa-nav {
			/* Slightly more than the sticky bar (extra vertical padding on `.inspa-header__inner`) */
			padding-top: calc(5.1rem + env(safe-area-inset-top, 0px));
			padding-bottom: max(var(--inspa-gutter), env(safe-area-inset-bottom, 0px));
		}
	}
}

/* ——— Inner pages (services, booking, thank-you) ——— */
@media (max-width: 900px) {
	.inspa-page-hero .inspa-container,
	.inspa-page-hero__inner {
		min-width: 0;
	}

	.inspa-page-hero .inspa-display,
	.inspa-page-hero .inspa-display--sm {
		overflow-wrap: anywhere;
		word-break: break-word;
		hyphens: auto;
	}

	.inspa-main--page .inspa-page-hero__rule {
		margin-top: var(--inspa-space-lg);
	}

	.inspa-service-list__stack {
		gap: clamp(2.25rem, 6vw, 3.5rem);
	}

	.inspa-service-block {
		gap: var(--inspa-space-xl);
		padding-bottom: clamp(2rem, 5vw, 2.75rem);
	}

	.inspa-faq__intro {
		max-width: none;
	}

	.inspa-wp-booking {
		min-width: 0;
	}

	.inspa-booking__aside {
		max-width: 100%;
	}
}

/* Tighter vertical rhythm on phones */
@media (max-width: 640px) {
	.inspa-section {
		padding-block: clamp(2.25rem, 10vw, 3.25rem);
	}

	.inspa-section--compact {
		padding-block: clamp(1.75rem, 7vw, 2.5rem);
	}

	.inspa-lede,
	.inspa-page-hero__lede {
		font-size: 1.02rem;
		max-width: none;
	}

	/* Do not zero `.inspa-page-hero__inner` horizontal padding: it shares a node with
	   `.inspa-container` and would flush Services/Booking hero copy to the screen edge. */

	/* Inner page heroes: long titles stay readable (services / booking / thank-you) */
	.inspa-main--page .inspa-display--sm {
		font-size: clamp(1.65rem, 6.5vw, 2.15rem);
		line-height: 1.12;
	}

	/* Services: cap hero image & BP strip height on small phones */
	.inspa-service-block__media img {
		max-height: min(70vw, 22rem);
		object-fit: cover;
	}

	.inspa-service-block__media--bp {
		min-height: min(48vw, 16rem);
	}

	.inspa-service-block__media--with-image {
		min-height: min(48vw, 14rem);
	}

	.inspa-service-block__highlights {
		padding-left: 0.9rem;
		font-size: 0.92rem;
	}

	.inspa-service-block__foot .inspa-service-block__price {
		text-align: center;
		width: 100%;
	}

	.inspa-booking__reassure {
		padding: var(--inspa-space-md);
	}

	.inspa-booking__fineprint {
		font-size: 0.86rem;
		line-height: 1.5;
	}

	.inspa-services-cta__inner {
		padding-block: var(--inspa-space-lg);
	}

	.inspa-benefit {
		padding: var(--inspa-space-md);
		gap: var(--inspa-space-md);
	}

	.inspa-couples__img {
		max-height: min(72vw, 24rem);
		object-fit: cover;
	}

	.inspa-couples__benefits li {
		font-size: 0.9rem;
	}
}

/* Prevent embedded media from causing horizontal scroll */
.inspa-main img,
.inspa-main video {
	max-width: 100%;
	height: auto;
}

.inspa-main iframe,
.dcf-block-canvas .entry-content iframe {
	max-width: 100%;
}

/* Long unbroken strings (URLs, etc.) */
@media (max-width: 900px) {
	.inspa-main,
	.dcf-block-canvas .entry-content {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/* Pills can read as one long flex row; let items shrink within the content box */
@media (max-width: 640px) {
	.inspa-pills {
		max-width: 100%;
	}

	.inspa-pills li {
		min-width: 0;
		max-width: 100%;
	}

	/* `left: 12%` + `max-width: 16rem` can exceed 100% of the image column on narrow screens */
	.inspa-intro__stat {
		left: 0.75rem;
		right: 0.75rem;
		width: auto;
		max-width: none;
	}
}

/* ——— Header: touch targets + logo breathing room ——— */
@media (max-width: 860px) {
	.inspa-logo {
		/* Tappable row without stretching the bar; pairs with 10-header-footer widths */
		align-self: center;
		min-width: 0;
	}

	.inspa-nav-toggle {
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0.55rem 0.65rem;
	}

	.inspa-nav__list a {
		min-height: 2.75rem;
		padding-block: 0.5rem;
		align-items: center;
	}
}

@media (max-width: 380px) {
	.inspa-logo__name {
		font-size: 1.1rem;
	}

	.inspa-logo__mark svg,
	.inspa-logo__img {
		width: 28px;
		height: 28px;
	}
}

/* ——— Home hero: shorter media, compact single CTA, meta breathing room ——— */
@media (max-width: 640px) {
	.inspa-hero--studio .inspa-hero__grid {
		gap: var(--inspa-space-lg);
	}

	.inspa-hero__img {
		min-height: min(48vh, 22rem);
		border-radius: var(--inspa-radius-lg);
	}

	/* Single “How it works” — not full-bleed; avoids overlap with next section’s edge */
	.inspa-hero__actions--single {
		flex-direction: row;
		align-items: flex-start;
		margin-top: 1.1rem;
	}

	.inspa-hero__actions--single .inspa-btn {
		justify-content: center;
		width: auto;
		min-height: 2.55rem;
		padding: 0.6rem 1.15rem;
	}

	.inspa-hero__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.8rem;
		margin-top: 1.35rem;
	}

	.inspa-hero__meta-item {
		width: 100%;
	}
}

/* Section title row: stack link under heading */
@media (max-width: 720px) {
	.inspa-section-head__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.inspa-section-head .inspa-h2,
	.inspa-section-head--featured .inspa-h2 {
		max-width: none;
	}

	.inspa-text-link {
		align-self: flex-start;
	}
}

/* Intro stat card: no overlap on narrow screens */
@media (max-width: 600px) {
	.inspa-intro__panel {
		margin-bottom: 1.5rem;
	}

	.inspa-intro__stat {
		position: static;
		margin: 1rem 0 0;
		max-width: none;
		width: 100%;
	}
}

/* CTA band: column + easy-tap buttons */
@media (max-width: 700px) {
	.inspa-cta-banner__inner {
		flex-direction: column;
		align-items: stretch;
		padding: clamp(1.25rem, 4vw, 1.75rem);
	}

	.inspa-cta-banner__inner > div:first-child .inspa-h2,
	.inspa-cta-banner__copy {
		max-width: none;
	}

	.inspa-cta-banner__actions {
		flex-direction: column;
		width: 100%;
	}

	.inspa-cta-banner__actions .inspa-btn {
		justify-content: center;
		width: 100%;
	}
}

/* Policy callouts */
@media (max-width: 600px) {
	.inspa-policy__box,
	.inspa-clarity__inner .inspa-policy__box {
		padding: var(--inspa-space-md) var(--inspa-space-lg);
	}

	.inspa-policy__title.inspa-title-ico {
		flex-wrap: wrap;
		font-size: 1.15rem;
	}
}

/* Testimonials: single column is default below 900px; ensure no side-scroll */
@media (max-width: 900px) {
	.inspa-quote-grid--duo {
		max-width: none;
	}
}

/* ——— Buttons: comfort tap height (stacks can stay side-by-side where they wrap) ——— */
@media (max-width: 640px) {
	.inspa-btn {
		min-height: 2.75rem;
		padding: 0.9rem 1.25rem;
	}

	.inspa-service-block__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.inspa-service-block__foot .inspa-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ——— Service / BookingPress cards: one column; flex-basis min 16rem can force overflow in two-up ——— */
@media (max-width: 700px) {
	.inspa-bp-service-cards .inspa-card {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* ——— Services FAQ ——— */
@media (max-width: 640px) {
	.inspa-faq__inner {
		gap: var(--inspa-space-lg);
	}

	.inspa-details {
		padding: 0.75rem 0.9rem;
	}

	.inspa-details summary {
		min-height: 2.75rem;
		align-items: center;
		padding-right: 0.15rem;
	}

	.inspa-details p {
		hyphens: auto;
		overflow-wrap: anywhere;
	}
}

/* ——— Booking page: form first; comfortable inputs (iOS zoom) ——— */
@media (max-width: 640px) {
	.inspa-booking__aside--card {
		padding: clamp(1rem, 4vw, 1.25rem);
	}

	.inspa-booking__plugin-wrap {
		padding: clamp(0.85rem, 3vw, 1.1rem);
	}

	.inspa-booking__plugin--live input[type="text"],
	.inspa-booking__plugin--live input[type="email"],
	.inspa-booking__plugin--live input[type="tel"],
	.inspa-booking__plugin--live select,
	.inspa-booking__plugin--live textarea {
		font-size: 1rem !important;
	}
}

/* ——— Footer: bar + links ——— */
@media (max-width: 560px) {
	.inspa-footer__pitch {
		max-width: none;
	}

	.inspa-footer__bar-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.75rem;
	}

	.inspa-footer__bar-links {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ——— Thank-you: stack actions ——— */
@media (max-width: 560px) {
	.inspa-thankyou__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.inspa-thankyou__actions .inspa-btn {
		justify-content: center;
	}
}

/* ——— Services page bottom CTA ——— */
@media (max-width: 700px) {
	.inspa-services-cta__inner .inspa-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ——— Reduce “lift” hover on touch devices (no sticky hover) ——— */
@media (hover: none) {
	.inspa-card:hover,
	.inspa-quote:hover {
		transform: none;
	}
}