/*
 * responsive-fixes.css — the mobile safety net.
 *
 * Enqueued last, after every section stylesheet, so these rules win the cascade
 * without any section needing !important. Keep this file small: a rule that
 * belongs to one section belongs in that section's stylesheet. What lives here
 * is only what has to apply across sections that have not been written yet.
 */

/*
 * Note: there is deliberately no `overflow-x: hidden` on html or body. It
 * silently breaks position: sticky for every descendant. If something overflows
 * horizontally, fix the element that overflows.
 */

@media (max-width: 767px) {
	.pageInner,
	.footerInner {
		--gutter: 20px;
	}

	.footerInner {
		flex-direction: column;
		align-items: flex-start;
	}

	/*
	 * The five display headings (.heroTitle, .heroBookingTitle, .introTitle,
	 * .approachTitle, .addictionsTitle) were switched from a fluid clamp() to
	 * a flat px size on request (48px h1, 42px h2). That flat size no longer
	 * shrinks on its own below 768px, and at 375px it wraps some of these
	 * headings to 7-8 lines — no horizontal overflow, but a real readability
	 * hit. These sizes are what each heading's old clamp() bottomed out at,
	 * so mobile reads the way it did before the fixed sizes were requested,
	 * while every wider breakpoint keeps the exact px value that was asked for.
	 */
	.heroTitle {
		font-size: 28px;
	}

	.heroBookingTitle,
	.approachTitle,
	.addictionsTitle {
		font-size: 28px;
	}

	.introTitle {
		font-size: 30px;
	}

	/*
	 * The decorative rule-and-dot before every section eyebrow
	 * (tfr_icon_eyebrow_rule()) — one shared class from one shared helper, so
	 * hiding it here covers every section's eyebrow in one rule instead of
	 * each stylesheet repeating it. Already aria-hidden, so this has no
	 * accessibility effect, only a visual one.
	 */
	.eyebrowRule {
		display: none;
	}
}

/* Below 360px the long unbroken words in headings and CTAs are what push the
   layout wider than the viewport. */
@media (max-width: 359px) {
	.heroTitle,
	.pillBtnLabel,
	.noticeBarText {
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.heroCta {
		align-self: stretch;
	}
}