/*
 * Rao Dermatology: page-body components. Everything is scoped under .rd-prose (the full-width,
 * 1200px wrapper the page templates put around post_content). Authoring guide:
 * raoderm-migration/build/content-components.md.
 */

/* Base ------------------------------------------------------------------ */
.rd-prose {
	color: var(--raoderm-soft, #4a5f5c);
	font-family: var(--raoderm-font-body, "Jost", sans-serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.7;
	overflow-wrap: break-word;
}
.rd-prose > * {
	max-width: 720px;
	margin: 24px auto 0;
}
.rd-prose > .rd-wide,
.rd-prose > .rd-cards,
.rd-prose > .rd-split,
.rd-prose > .rd-gallery { max-width: 1080px; margin-top: 40px; }
.rd-prose > .rd-full { max-width: none; }

.rd-prose p { margin-block: 0; }
/* wpautop leaves an empty <p> after a card image and a <br> between .rd-actions buttons */
.rd-prose p:empty,
.rd-prose .rd-actions > br { display: none; }
.rd-prose * + :is(p, ul, ol) { margin-top: 18px; }
.rd-prose h2,
.rd-prose h3 { color: var(--raoderm-ink, #13302e); }
.rd-prose h2 {
	font-family: var(--raoderm-font-heading, "Gloock", serif);
	font-weight: 400;
	font-size: clamp(30px, 3.2vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.rd-prose > h2 { margin-top: 72px; }
.rd-prose h3 {
	font-family: var(--raoderm-font-body, "Jost", sans-serif);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.35;
	letter-spacing: 0;
}
.rd-prose > h3 { margin-top: 40px; }
.rd-prose > h2 + *,
.rd-prose > h3 + * { margin-top: 14px; }
.rd-prose > :first-child { margin-top: 0; }

.rd-prose ul,
.rd-prose ol { padding-left: 1.3em; }
.rd-prose ul { list-style: disc; }
.rd-prose ol { list-style: decimal; }
.rd-prose li + li { margin-top: 8px; }
.rd-prose li::marker { color: var(--raoderm-accent, #00756f); }

.rd-prose a {
	color: var(--raoderm-accent, #00756f);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.rd-prose a:hover { color: var(--raoderm-deep, #0f2e2c); }
.rd-prose a:focus-visible,
.rd-prose summary:focus-visible { outline: 2px solid var(--raoderm-accent, #00756f); outline-offset: 3px; }
.rd-prose strong { color: var(--raoderm-ink, #13302e); font-weight: 500; }
.rd-prose img { display: block; max-width: 100%; height: auto; border-radius: 14px; }

.rd-prose figure { margin-inline: auto; }
.rd-prose > figure { margin-block: 40px; }
.rd-prose figcaption { margin-top: 10px; color: var(--raoderm-soft, #4a5f5c); font-size: 14px; line-height: 1.5; }

.rd-prose blockquote {
	margin-block: 48px;
	color: var(--raoderm-ink, #13302e);
	font-family: var(--raoderm-font-heading, "Gloock", serif);
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.rd-prose blockquote::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin-bottom: 20px;
	background: var(--raoderm-accent, #00756f);
}
.rd-prose blockquote p + p { margin-top: 12px; }
.rd-prose blockquote cite { display: block; margin-top: 16px; font: 400 15px/1.5 var(--raoderm-font-body, "Jost", sans-serif); font-style: normal; color: var(--raoderm-soft, #4a5f5c); }

.rd-prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.rd-prose th,
.rd-prose td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--raoderm-line, #c9d9d6); }
.rd-prose th { color: var(--raoderm-ink, #13302e); font-weight: 500; border-bottom-color: var(--raoderm-ink, #13302e); }
.rd-prose hr { margin-block: 56px; border: 0; border-top: 1px solid var(--raoderm-line, #c9d9d6); }

/* Lead, actions ----------------------------------------------------------- */
.rd-prose .rd-lead {
	color: var(--raoderm-ink, #13302e);
	font-size: clamp(20px, 2vw, 23px);
	line-height: 1.55;
}
.rd-prose .rd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.rd-prose .rd-btn {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	border: 1px solid var(--raoderm-deep, #0f2e2c);
	border-radius: 999px;
	background: var(--raoderm-deep, #0f2e2c);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}
.rd-prose .rd-btn:hover { background: var(--raoderm-accent, #00756f); border-color: var(--raoderm-accent, #00756f); color: #fff; }
.rd-prose .rd-btn--ghost { background: transparent; color: var(--raoderm-deep, #0f2e2c); }
.rd-prose .rd-btn--ghost:hover { background: var(--raoderm-deep, #0f2e2c); border-color: var(--raoderm-deep, #0f2e2c); }

/* Cards ------------------------------------------------------------------ */
.rd-prose .rd-cards { display: grid; gap: 16px; }
.rd-prose .rd-card {
	padding: 30px 32px 34px;
	border-radius: 14px;
	background: var(--raoderm-mist, #e2ecea);
}
.rd-prose .rd-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 22px; border-radius: 10px; }
.rd-prose .rd-card h3 {
	margin: 0;
	font-family: var(--raoderm-font-heading, "Gloock", serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.rd-prose .rd-card h3 + p { margin-top: 12px; }
.rd-prose .rd-card p { font-size: 16px; line-height: 1.65; }

.rd-prose .rd-card h3 .rd-sub {
	display: block;
	margin-top: 6px;
	color: var(--raoderm-soft, #4a5f5c);
	font-family: var(--raoderm-font-body, "Jost", sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

/* Form card: wraps a Gravity Forms shortcode (matches the homepage form card) -------- */
.rd-prose > .rd-form-card { margin-top: 72px; }
.rd-prose .rd-form-card {
	padding: 44px;
	border-radius: 22px;
	background: #f7faf9;
	box-shadow: 0 30px 60px rgba(15, 46, 44, 0.12);
}
.rd-prose .rd-form-card h2 { margin-top: 0; }
.rd-prose .rd-form-card h2 + p { margin-top: 14px; }
.rd-prose .rd-form-card .gform_wrapper { margin-top: 28px; }
.rd-prose .rd-form-card .gform_wrapper ul { padding-left: 0; list-style: none; }

/* Link list (related pages) ---------------------------------------------- */
.rd-prose .rd-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding: 0; list-style: none; border-top: 1px solid var(--raoderm-line, #c9d9d6); }
.rd-prose .rd-links li { margin: 0; border-bottom: 1px solid var(--raoderm-line, #c9d9d6); }
.rd-prose .rd-links a { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; color: var(--raoderm-ink, #13302e); text-decoration: none; }
.rd-prose .rd-links a::after { content: "\2192"; color: var(--raoderm-accent, #00756f); }
.rd-prose .rd-links a:hover { color: var(--raoderm-accent, #00756f); }

/* Split ------------------------------------------------------------------ */
.rd-prose .rd-split { display: grid; gap: 28px; align-items: center; }
.rd-prose .rd-split > figure { margin: 0; }
.rd-prose .rd-split h2 { margin-top: 0; }
.rd-prose .rd-split h3 {
	font-family: var(--raoderm-font-heading, "Gloock", serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.rd-prose .rd-split * + h3 { margin-top: 28px; }
.rd-prose .rd-split h2 + p,
.rd-prose .rd-split h3 + p { margin-top: 14px; }

/* Facts ------------------------------------------------------------------ */
.rd-prose .rd-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	border-block: 1px solid var(--raoderm-line, #c9d9d6);
	margin-block: 40px;
}
.rd-prose .rd-fact { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px 0; }
.rd-prose .rd-fact__label {
	color: var(--raoderm-accent, #00756f);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.rd-prose .rd-fact__value {
	color: var(--raoderm-ink, #13302e);
	font-family: var(--raoderm-font-heading, "Gloock", serif);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Steps ------------------------------------------------------------------ */
.rd-prose .rd-steps { list-style: none; padding: 0; counter-reset: rd-step; }
.rd-prose .rd-steps > li {
	position: relative;
	min-height: 52px;
	margin: 0;
	padding: 22px 0 22px 72px;
	border-top: 1px solid var(--raoderm-line, #c9d9d6);
	counter-increment: rd-step;
}
.rd-prose .rd-steps > li:last-child { border-bottom: 1px solid var(--raoderm-line, #c9d9d6); }
.rd-prose .rd-steps > li::before {
	content: counter(rd-step, decimal-leading-zero);
	position: absolute;
	top: 16px;
	left: 0;
	color: var(--raoderm-accent, #00756f);
	font-family: var(--raoderm-font-heading, "Gloock", serif);
	font-size: 40px;
	line-height: 1;
}
.rd-prose .rd-steps strong { display: block; margin-bottom: 4px; }

/* FAQ -------------------------------------------------------------------- */
.rd-prose .rd-faq { border-top: 1px solid var(--raoderm-line, #c9d9d6); }
.rd-prose .rd-faq details { border-bottom: 1px solid var(--raoderm-line, #c9d9d6); }
.rd-prose .rd-faq summary {
	position: relative;
	display: block;
	padding: 22px 52px 22px 0;
	color: var(--raoderm-ink, #13302e);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
}
.rd-prose .rd-faq summary::-webkit-details-marker { display: none; }
.rd-prose .rd-faq summary::after {
	content: "+";
	content: "+" / "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border: 1px solid var(--raoderm-line, #c9d9d6);
	border-radius: 50%;
	color: var(--raoderm-accent, #00756f);
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
	text-align: center;
}
.rd-prose .rd-faq details[open] > summary::after { content: "\2013"; content: "\2013" / ""; }
.rd-prose .rd-faq summary:hover { color: var(--raoderm-accent, #00756f); }
.rd-prose .rd-faq details > :not(summary) { margin: 0 52px 0 0; }
.rd-prose .rd-faq details > :last-child:not(summary) { padding-bottom: 26px; }
.rd-prose .rd-faq details > summary + * { margin-top: -6px; }
.rd-prose .rd-faq details > :not(summary) + :not(summary) { margin-top: 14px; }

/* Callout ---------------------------------------------------------------- */
.rd-prose .rd-callout {
	padding: 26px 30px;
	border-radius: 14px;
	background: rgba(166, 236, 231, 0.35);
	color: var(--raoderm-ink, #13302e);
	font-size: 17px;
}
.rd-prose .rd-callout--referral { border-left: 3px solid var(--raoderm-accent, #00756f); border-radius: 4px 14px 14px 4px; }
.rd-prose .rd-callout h3 { margin: 0 0 6px; }
.rd-prose .rd-callout > :first-child { margin-top: 0; }

/* Gallery ---------------------------------------------------------------- */
/* Doubled tracks (each photo spans 2) so a short last row can sit centred, as in the post-loop grids. */
.rd-prose .rd-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rd-prose .rd-gallery figure { margin: 0; grid-column: span 2; }
.rd-prose .rd-gallery > figure:nth-child(odd):last-child { grid-column: 2 / span 2; }
.rd-prose .rd-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* Breakpoints ------------------------------------------------------------ */
@media (min-width: 700px) {
	.rd-prose .rd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.rd-prose .rd-fact + .rd-fact { padding-left: 24px; border-left: 1px solid var(--raoderm-line, #c9d9d6); }
	.rd-prose .rd-fact__value { font-size: 24px; }
	.rd-prose .rd-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	.rd-prose .rd-gallery > figure:nth-child(odd):last-child { grid-column: span 2; }
	.rd-prose .rd-gallery > figure:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
	.rd-prose .rd-gallery > figure:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
}
@media (min-width: 960px) {
	.rd-prose .rd-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rd-prose .rd-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
	.rd-prose .rd-split--reverse > figure { order: 2; }
}
@media (max-width: 599px) {
	.rd-prose { font-size: 17px; }
	.rd-prose > h2 { margin-top: 56px; }
	.rd-prose .rd-steps > li { padding-left: 56px; }
	.rd-prose .rd-steps > li::before { font-size: 32px; }
	.rd-prose .rd-callout,
	.rd-prose .rd-card { padding: 24px; }
	.rd-prose .rd-form-card { padding: 28px 20px; border-radius: 18px; }
	.rd-prose .rd-faq summary { font-size: 17px; }
	.rd-prose .rd-faq details > :not(summary) { margin-right: 0; }
	.rd-prose table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.rd-prose * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* QA pass ---------------------------------------------------------------- */
/* "+" in Gloock is a hairline; set it in Jost so "50+" reads as fifty-plus. */
.rd-prose .rd-plus { font-family: var(--raoderm-font-body, "Jost", sans-serif); font-weight: 500; }

/* Legacy inline images narrower than the column sit centred, not shoved left. */
.rd-prose figure > img { margin-inline: auto; }

/* Pull-quotes: a calmer size and measure. */
.rd-prose blockquote {
	font-size: clamp(21px, 2vw, 24px);
	line-height: 1.35;
}

/* Text-only card grids stay in the 720px text column (two up, a lone last card spans the row), so a
   section's heading, intro and cards share one left edge. Only image card grids break out to 1080px. */
.rd-prose > .rd-cards:not(:has(img)) { max-width: 720px; margin-top: 32px; }
@media (min-width: 700px) {
	.rd-prose > .rd-cards:not(:has(img)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.rd-prose > .rd-cards:not(:has(img)) > .rd-card { padding: 24px 24px 26px; }
	.rd-prose > .rd-cards:not(:has(img)) > .rd-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.rd-prose > .rd-cards:not(:has(img)) .rd-card h3 { font-size: 22px; }
}