/*
 * Mamer Medical Article — visual + trust polish v1.0.2
 * Small override layer on top of the reusable Medical Article master.
 * Goals: calmer hierarchy, better long-form readability, denser ending,
 * neutral pending-review presentation, and strict mobile containment.
 */

/* The article should feel editorial, not poster-like. */
.medical-article {
	padding-bottom: 24px;
}

.medical-article__header h1 {
	max-width: 760px;
	font-size: clamp(40px, 3.35vw, 50px);
	line-height: 1.1;
	letter-spacing: -.014em;
}

.medical-article__lead {
	max-width: 740px;
	font-size: 17px;
	line-height: 28px;
}

.medical-article__section h2 {
	font-size: 31px;
	line-height: 39px;
	letter-spacing: -.008em;
}

.medical-article__takeaways h2 {
	font-size: 24px;
	line-height: 30px;
}

.medical-article__expert-note > h2,
.medical-article__faq > h2,
.medical-article__related > h2 {
	font-size: 27px;
	line-height: 34px;
}

/* Slightly stronger reading column without making the article visually heavy. */
.medical-article__section p {
	font-size: 16.5px;
	line-height: 27px;
}

.medical-article__section ul {
	font-size: 15.5px;
	line-height: 25px;
}

/* Tables are reference content: keep them compact, but not tiny. */
.medical-article table {
	font-size: 14px;
	line-height: 21px;
}

.medical-article th,
.medical-article td {
	padding: 13px 14px;
}

/* Sidebar remains secondary but should not look miniature beside the article. */
.medical-article__reviewer-card strong {
	font-size: 15px;
	line-height: 21px;
}

.medical-article__reviewer-card span {
	font-size: 12.5px;
	line-height: 19px;
}

.medical-article__reviewer-card p {
	font-size: 12px;
	line-height: 19px;
}

.medical-article__related-row strong {
	font-size: 13px;
	line-height: 19px;
}

.medical-article__related-row small {
	font-size: 11px;
	line-height: 16px;
}

/* Pending is intentionally neutral and must not read like a completed review. */
.medical-article__review-badge.is-pending {
	background: #F1F3F1;
	color: #54666C;
}

/* Keep the end of long articles connected to the footer. */
.medical-article__sources,
.medical-article__related--mobile {
	margin-bottom: 0;
}

/*
 * Intrinsic-width containment.
 * The article body is a one-column CSS grid. A wide reference table inside
 * that grid can otherwise establish a 600px+ min-content track and silently
 * widen every sibling section on mobile. Explicitly make the track shrinkable
 * so only the table viewport scrolls horizontally, never the article/page.
 */
.medical-article__body {
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.medical-article__body > *,
.medical-article__section,
.medical-article__table-section,
.medical-article__comparison,
.medical-article__callout,
.medical-article__faq,
.medical-article__sources {
	min-width: 0;
	max-width: 100%;
}

.medical-article__table-wrap {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
}

.medical-article__section h2,
.medical-article__section p,
.medical-article__section li,
.medical-article__callout,
.medical-article__comparison-card,
.medical-article__faq summary,
.medical-article__faq details > p,
.medical-article__sources,
.medical-article__related-row strong,
.medical-article__related-row small {
	overflow-wrap: break-word;
	word-break: normal;
}

@media (max-width: 1023px) and (min-width: 768px) {
	.medical-article__header h1 {
		font-size: 43px;
		line-height: 49px;
	}
}

@media (max-width: 767px) {
	.medical-article {
		padding-bottom: 18px;
	}

	.medical-article,
	.medical-article .mamer-container,
	.medical-article__layout,
	.medical-article__main,
	.medical-article__header,
	.medical-article__body,
	.medical-article__body > *,
	.medical-article__takeaways,
	.medical-article__toc,
	.medical-article__faq,
	.medical-article__sources,
	.medical-article__related--mobile {
		min-width: 0;
		max-width: 100%;
	}

	.medical-article__main {
		width: 100%;
	}

	.medical-article__header h1 {
		margin-bottom: 10px;
		font-size: 31px;
		line-height: 36px;
		letter-spacing: -.01em;
	}

	.medical-article__lead {
		font-size: 15px;
		line-height: 23px;
	}

	.medical-article__takeaways {
		padding: 16px;
	}

	.medical-article__takeaways h2 {
		font-size: 21px;
		line-height: 27px;
	}

	.medical-article__takeaways li {
		font-size: 13.5px;
		line-height: 21px;
	}

	.medical-article__body {
		gap: 24px;
	}

	.medical-article__section h2,
	.medical-article__table-section h2 {
		font-size: 24px;
		line-height: 30px;
		text-wrap: wrap;
	}

	.medical-article__section p {
		font-size: 15px;
		line-height: 24px;
	}

	.medical-article__section ul {
		font-size: 14px;
		line-height: 22px;
	}

	.medical-article__callout strong {
		font-size: 13.5px;
		line-height: 19px;
	}

	.medical-article__callout p {
		font-size: 13px;
		line-height: 20px;
	}

	.medical-article__table-wrap {
		margin-inline: 0;
	}

	.medical-article table {
		min-width: 620px;
		font-size: 12.5px;
		line-height: 18px;
	}

	.medical-article th,
	.medical-article td {
		padding: 9px 10px;
	}

	.medical-article__table-note {
		font-size: 11.5px !important;
		line-height: 17px !important;
	}

	.medical-article__comparison-card strong {
		font-size: 13.5px;
		line-height: 19px;
	}

	.medical-article__comparison-card ul {
		font-size: 13px;
		line-height: 20px;
	}

	.medical-article__expert-note > h2,
	.medical-article__faq > h2,
	.medical-article__related > h2 {
		font-size: 22px;
		line-height: 28px;
	}

	.medical-article__faq summary {
		font-size: 13px;
		line-height: 19px;
	}

	.medical-article__faq details > p {
		font-size: 13px;
		line-height: 20px;
	}

	.medical-article__sources summary {
		font-size: 13px;
	}

	.medical-article__sources ol {
		font-size: 11.5px;
		line-height: 17px;
	}

	.medical-article__sources a,
	.medical-article__related-row span {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}