/*
 * Blog & article type scale (body.yfx-blog-type: blog posts, Article-template pages, /blog/).
 * Everything else keeps the original design from app.css.
 *
 * Mobile (< 768px): fixed sizes, nothing larger than 24px.
 * 768px → 1280px: fluid, up to an 18px body with headings on a 1.25 scale.
 * Meta text (bylines, dates, labels, captions of small UI) stays between 12px and 16px.
 *
 *   token        mobile   768px → 1280px
 *   --fs-body    16px     17 → 18px
 *   --fs-h1      24px     32 → 44px   (post / page title)
 *   --fs-h2      22px     26 → 34px
 *   --fs-h3      20px     22 → 26px
 *   --fs-h4      18px     19 → 21px
 *   --fs-lead    18px     19 → 22px   (callout titles, quotes, card titles on mobile)
 *   --fs-caption 14px     14 → 15px
 *   --fs-meta    14px     14 → 16px   (byline, TOC links, table cells, small UI text)
 *   --fs-label   12px     12 → 13px   (uppercase labels, dates, badges)
 */

.yfx-blog-type {
	--fs-body: 16px;
	--fs-h1: 24px;
	--fs-h2: 22px;
	--fs-h3: 20px;
	--fs-h4: 18px;
	--fs-lead: 18px;
	--fs-caption: 14px;
	--fs-meta: 14px;
	--fs-label: 12px;
}
@media (min-width: 768px) {
	.yfx-blog-type {
		--fs-body: clamp(17px, 15.5px + 0.1953vw, 18px);
		--fs-h1: clamp(32px, 14px + 2.3438vw, 44px);
		--fs-h2: clamp(26px, 14px + 1.5625vw, 34px);
		--fs-h3: clamp(22px, 16px + 0.7813vw, 26px);
		--fs-h4: clamp(19px, 16px + 0.3906vw, 21px);
		--fs-lead: clamp(19px, 14.5px + 0.5859vw, 22px);
		--fs-caption: clamp(14px, 12.5px + 0.1953vw, 15px);
		--fs-meta: clamp(14px, 11px + 0.3906vw, 16px);
		--fs-label: clamp(12px, 10.5px + 0.1953vw, 13px);
	}
}

/* ---------------------------------------------------------------- article body */

.yfx-blog-type .article-content h1 { font-size: var(--fs-h1); line-height: 1.1; }
.yfx-blog-type .article-content h2 { font-size: var(--fs-h2); line-height: 1.2; }
.yfx-blog-type .article-content h3 { font-size: var(--fs-h3); line-height: 1.3; }
.yfx-blog-type .article-content h4 { font-size: var(--fs-h4); line-height: 1.35; }
.yfx-blog-type .article-content p,
.yfx-blog-type .article-content li,
.yfx-blog-type .article-content blockquote { font-size: var(--fs-body); line-height: 1.75; }
.yfx-blog-type .article-content figcaption { font-size: var(--fs-caption); line-height: 1.5; }

/* Byline + updated date under the title. */
.yfx-blog-type .article-content article > header p,
.yfx-blog-type .article-content article > header time { font-size: var(--fs-meta); line-height: 1.5; }

/* Table of contents. */
.yfx-blog-type .article-content .table-of-contents h2 { font-size: var(--fs-lead); margin-top: 0; }
.yfx-blog-type .article-content .table-of-contents li { font-size: var(--fs-meta); line-height: 1.6; }

/* FAQ accordion. */
.yfx-blog-type .article-content details summary { font-size: var(--fs-h4); line-height: 1.4; }
.yfx-blog-type .article-content details p { font-size: var(--fs-body); }

/* Tables. */
.yfx-blog-type .article-content th,
.yfx-blog-type .article-content td { font-size: var(--fs-meta); line-height: 1.6; }

/* Asides inside articles: quiz CTA, share, callout, review quote, related reading, video. */
.yfx-blog-type .article-content aside p.font-display,
.yfx-blog-type .article-content figure blockquote p,
.yfx-blog-type .article-content nav[aria-label="Related reading"] h2 { font-size: var(--fs-lead); line-height: 1.35; }
.yfx-blog-type .article-content aside p.text-sm,
.yfx-blog-type .article-content aside a.inline-flex,
.yfx-blog-type .article-content figure figcaption.text-sm,
.yfx-blog-type .article-content nav[aria-label="Related reading"] li { font-size: var(--fs-meta); }
.yfx-blog-type .article-content figure .uppercase { font-size: var(--fs-label); }
.yfx-blog-type .article-content .article-video h3 { font-size: var(--fs-h3); }

/* ---------------------------------------------------------------- author box */

.yfx-author-box {
	/* Mobile: photo + label/name on one row, bio and link full width below. */
	display: grid;
	grid-template-columns: 64px 1fr;
	column-gap: 1rem;
	align-items: center;
	margin: 2.5rem 0 0;
	padding: 1.5rem;
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-yogafx-red);
	border-radius: 1rem;
	background: var(--color-yogafx-warmgray);
}
.yfx-author-box__photo {
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	object-fit: cover;
	object-position: top;
	border: 3px solid #fff;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
}
.yfx-author-box__body { display: contents; }
.yfx-author-box__label, .yfx-author-box__name { grid-column: 2; }
.yfx-author-box__label { align-self: end; }
.yfx-author-box__name { align-self: start; }
.yfx-author-box__bio, .yfx-author-box__link { grid-column: 1 / -1; }
.article-content .yfx-author-box p { margin: 0; }
.article-content .yfx-author-box .yfx-author-box__label {
	font-size: var(--fs-label, 12px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-yogafx-red);
}
.article-content .yfx-author-box .yfx-author-box__name {
	margin-top: 0.25rem;
	font-family: Oswald, sans-serif;
	font-size: var(--fs-lead, 20px);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--color-foreground);
}
.yfx-author-box__name span {
	font-family: Lato, sans-serif;
	font-size: var(--fs-meta, 14px);
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	color: var(--color-muted-foreground);
}
.article-content .yfx-author-box .yfx-author-box__bio {
	margin-top: 0.5rem;
	font-size: var(--fs-meta, 15px);
	line-height: 1.65;
}
.article-content .yfx-author-box .yfx-author-box__link {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--fs-meta, 14px);
	font-weight: 700;
}
@media (min-width: 640px) {
	/* Photo column on the left, everything else stacked on the right. */
	.yfx-author-box { grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 1.5rem; align-items: start; padding: 1.75rem; }
	.yfx-author-box__photo { width: 96px; height: 96px; grid-row: 1 / span 4; }
	.yfx-author-box__label, .yfx-author-box__name, .yfx-author-box__bio, .yfx-author-box__link { grid-column: 2; }
	.yfx-author-box__label { align-self: start; }
}

/* ---------------------------------------------------------------- blog index (/blog/) */

.yfx-blog-type header h1 { font-size: var(--fs-h1); line-height: 1.1; }
.yfx-blog-type #yfx-blog h2.font-display.leading-tight { font-size: var(--fs-h2); line-height: 1.15; }
.yfx-blog-type #yfx-blog .max-w-3xl > p:first-child { font-size: var(--fs-label); }
.yfx-blog-type #yfx-blog .max-w-3xl > p.mt-5 { font-size: var(--fs-body); line-height: 1.7; }
.yfx-blog-type #yfx-blog nav p,
.yfx-blog-type #yfx-blog nav label,
.yfx-blog-type #yfx-blog nav a,
.yfx-blog-type #yfx-blog nav input,
.yfx-blog-type #yfx-blog nav button { font-size: var(--fs-meta); }
.yfx-blog-type #yfx-blog nav > p.font-display { font-size: var(--fs-label); }
.yfx-blog-type #yfx-blog article .text-xs { font-size: var(--fs-label); }
.yfx-blog-type #yfx-blog article h2 { font-size: var(--fs-h3); line-height: 1.25; }
.yfx-blog-type #yfx-blog article p { font-size: var(--fs-body); line-height: 1.7; }
.yfx-blog-type #yfx-blog article a.text-sm,
.yfx-blog-type #yfx-blog #blog-more { font-size: var(--fs-meta); }