/*
 * TherapyBuilt unified public content widths — rc100
 *
 * One predictable width rhythm across open and framed site canvases:
 * - wide: structured cards, directories, FAQs, service guidance
 * - reading: narrative/long-form copy
 * - narrow: forms, notices, and deliberately focused tasks
 *
 * Individual components keep their own internal typography and card layouts.
 * This layer only normalizes the outer presentation width and mobile gutters.
 */

:root {
	--tb-content-wide: 1100px;
	--tb-content-reading: 780px;
	--tb-content-narrow: 680px;
	--tb-content-mobile-gutter: 18px;
}

/* Major structured panels should share one visual width. */
:is(
	.tb-answer-ready,
	.tb-term-faq,
	.tb-term-sources,
	.tb-clinicians__page-intro,
	.tb-programs-page__intro,
	.tb-locations-page__intro
) {
	width: min(100%, var(--tb-content-wide));
	max-width: var(--tb-content-wide);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Service and directory detail pages previously mixed 940px and 1100px panels.
   Their intro, guidance, clinicians, FAQ, and source panels now use one width. */
.tb-specialty-archive,
.tb-attr-archive {
	--tb-service-content-width: var(--tb-content-wide);
}

.tb-specialty-archive__inner,
.tb-attr-archive__inner,
.tb-clinicians__inner,
.tb-clinicians__browse-inner {
	max-width: var(--tb-content-wide);
}

.tb-specialty-archive__inner > :is(
	.tb-specialty-archive__intro,
	.tb-answer-ready,
	.tb-specialty-archive__providers,
	.tb-term-faq,
	.tb-term-sources
),
.tb-attr-archive__inner > :is(
	.tb-attr-archive__intro,
	.tb-answer-ready,
	.tb-attr-archive__providers,
	.tb-term-faq,
	.tb-term-sources
) {
	width: min(100%, var(--tb-content-wide));
	max-width: var(--tb-content-wide);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Directory introduction panels should align with the directories they lead to. */
.tb-clinicians--page .tb-clinicians__page-intro {
	max-width: var(--tb-content-wide);
}

/* Two-item structured grids can use the full shared panel width.  Smart Layout
   still controls the card width itself, so cards do not become oversized. */
.tb-practice-highlights__grid--2,
.tb-featured-programs__grid--2 {
	max-width: var(--tb-content-wide);
}

/* Intentional reading-width exceptions.
   These are prose-first or task-first experiences, not arbitrary narrow cards. */
:is(
	.tb-about-page__quote-wrap,
	.tb-wte-page__inner,
	.tb-article-content,
	.tb-entry-content
) {
	--tb-reading-width: var(--tb-content-reading);
}

/* Forms/referrals/legal flows remain intentionally focused and are not forced
   to the wide structured-content width. */
.tb-referral-layout,
.tb-client-start__inner,
.tb-forms-page__inner,
.tb-legal-hub__inner {
	box-sizing: border-box;
}

/* Tablet: let panels consume the available parent width. Existing component
   breakpoints decide grid columns; this layer prevents artificial narrowness. */
@media (max-width: 1180px) {
	:is(
		.tb-answer-ready,
		.tb-term-faq,
		.tb-term-sources,
		.tb-clinicians__page-intro,
		.tb-programs-page__intro,
		.tb-locations-page__intro
	),
	.tb-specialty-archive__inner > :is(
		.tb-specialty-archive__intro,
		.tb-answer-ready,
		.tb-specialty-archive__providers,
		.tb-term-faq,
		.tb-term-sources
	),
	.tb-attr-archive__inner > :is(
		.tb-attr-archive__intro,
		.tb-answer-ready,
		.tb-attr-archive__providers,
		.tb-term-faq,
		.tb-term-sources
	) {
		width: 100%;
		max-width: 100%;
	}
}

/* Mobile: one consistent edge rhythm. Components keep their own internal
   padding, but no major panel may introduce a second arbitrary horizontal
   width or overflow the viewport. */
@media (max-width: 760px) {
	:root {
		--tb-content-mobile-gutter: 16px;
	}

	:is(
		.tb-answer-ready,
		.tb-term-faq,
		.tb-term-sources,
		.tb-clinicians__page-intro,
		.tb-programs-page__intro,
		.tb-locations-page__intro,
		.tb-specialty-archive__intro,
		.tb-specialty-archive__providers,
		.tb-attr-archive__intro,
		.tb-attr-archive__providers
	) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Prevent inner grids/flex items from creating horizontal overflow when
	   custom copy, credentials, long URLs, or translated labels are present. */
	:is(
		.tb-answer-ready,
		.tb-term-faq,
		.tb-term-sources,
		.tb-specialty-archive__providers,
		.tb-attr-archive__providers,
		.tb-clinicians__directory-panel,
		.tb-program-single__main,
		.tb-location-single__main
	) > * {
		min-width: 0;
	}

	:is(
		.tb-answer-ready,
		.tb-term-faq,
		.tb-term-sources,
		.tb-specialty-archive__intro,
		.tb-specialty-archive__providers,
		.tb-attr-archive__intro,
		.tb-attr-archive__providers,
		.tb-clinicians__page-intro,
		.tb-programs-page__intro,
		.tb-locations-page__intro
	) :is(a, p, li, h2, h3, span) {
		overflow-wrap: anywhere;
	}
}

/* Very small phones: preserve breathing room without wasting horizontal space. */
@media (max-width: 420px) {
	:is(
		.tb-answer-ready,
		.tb-term-faq,
		.tb-specialty-archive__providers,
		.tb-attr-archive__providers,
		.tb-clinicians__directory-panel
	) {
		border-radius: min(var(--tb-radius-panel, 18px), 16px);
	}
}