/* Enqueued directly by infinitus_enqueue_article_assets() (functions/article.php),
 * gated on infinitus_is_article_view(). It cannot ride
 * infinitus_enqueue_section_styles(): that gate wants `infinitus-section--` in
 * the post content, which a prose post by definition does not have. The file is
 * listed in infinitus_section_styles_excluded() (functions/native-blocks.php)
 * so auto-discovery neither enqueues it on unrelated section pages nor mirrors
 * it into the editor canvas. */

.infinitus-article {
	/* The header is position: fixed, so its height is clearance the article has
	   to add itself. --navbar-height is 80px mobile / 99px desktop
	   (assets/scss/global/_header.scss). */
	padding-block-start: var(--navbar-height);
}

.infinitus-article__measure {
	/* Below 1025 the measure is the .container width: content is 864 at 1024 and
	   narrows from there, so a 816px cap would only ever be a no-op or a second,
	   contradictory gutter. */
	--article-measure: 816px;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 1025px) {
	.infinitus-article__measure {
		max-width: var(--article-measure);
	}
}

.infinitus-article__hero {
	padding-block-start: var(--wp--preset--spacing--section-lg);

	--article-hero-gap: 28px;

	display: flex;
	flex-direction: column;
	gap: var(--article-hero-gap);

	/* Rendered as the hero's own bottom border rather than an empty element, so
	   there is no decorative node in the document for a screen reader to meet. */
	border-block-end: 2px solid var(--color-gray-200);
	padding-block-end: var(--article-hero-gap);
}

.infinitus-article__hero-intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sp-3);
}

.infinitus-article__back {
	/* Size and leading belong to the PARAGRAPH, not to the link inside it: the
	   block box is what the 12px gap above the headline is measured from, so a
	   line-height left on the inherited body value stacks 24px here and pushes
	   the whole hero 5px down the page (measured before this rule existed). */
	font-size: var(--fs-body);
	line-height: 1.2;
	margin: 0;
}

.infinitus-article__back-link {
	color: var(--color-link-light-default);
	font-weight: 600;
	text-decoration: underline;
}

.infinitus-article__back-link:hover,
.infinitus-article__back-link:focus-visible {
	color: var(--color-link-light-hover);
}

.infinitus-article__title {
	color: var(--color-gray-900);
	font-size: var(--fs-h1);
	font-weight: 300;
	line-height: var(--lh-h1);
	margin: 0;
}

.infinitus-article__media {
	margin: 0;
}

.infinitus-article__image {
	aspect-ratio: 816 / 460;
	display: block;
	object-fit: cover;
	width: 100%;

	/* Chamfered-image idiom, same mechanism as media-copy-row.css and
	   solutions-direct-to-patient.css: border-radius rounds all four corners
	   and clip-path removes the top-right one, so the shape survives whatever
	   rectangular photograph an editor uploads. Kept as percentages of this box
	   so the chamfer stays proportional when the measure narrows below 1025. */
	--article-hero-chamfer-x: 20.04%;
	--article-hero-chamfer-y: 33.23%;

	border-radius: var(--wp--custom--radius--md);
	clip-path: polygon(
		0 0,
		calc(100% - var(--article-hero-chamfer-x)) 0,
		100% var(--article-hero-chamfer-y),
		100% 100%,
		0 100%
	);
}

.infinitus-article__byline {
	/* Wraps because the row can carry more than one author (PublishPress puts no
	   cap on it), and two names plus their roles already overflow the 390px
	   measure. */
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sp-3);
}

.infinitus-article__byline-label {
	color: var(--color-gray-600);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-body);
}

.infinitus-article__author {
	/* Avatar and name are one unit: they keep their own 12px gap and wrap
	   together rather than the portrait stranding on the line above. */
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--sp-3);
}

.infinitus-article__author-photo {
	block-size: 30px;
	border-radius: var(--wp--custom--radius--pill);
	flex: 0 0 auto;
	inline-size: 30px;
	object-fit: cover;
}

.infinitus-article__author-text,
.infinitus-article__byline-join {
	color: var(--color-gray-900);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

.infinitus-article__author-name {
	font-weight: 700;
}

/* Everything below restyles PUBLISHED CONTENT across all existing posts, so
   every selector is scoped to .infinitus-article__body and every rule is
   deliberately conservative. Nothing about the stored blocks changes. */

.infinitus-article__body {
	--article-body-gap: 30px;

	/* --fs-body-xl steps to 18px below 1025. That step is a decided-once theme
	   behaviour (see the --fs-body-xl comment in assets/scss/tailwind.css); do
	   not "fix" it here.

	   Set on the wrapper rather than on `p`, so lists, quotes, tables and
	   anything else an editor has published inherit one measure's type instead
	   of stranding at the 16px root while the paragraphs around them are 20. */
	color: var(--color-gray-900);
	font-size: var(--fs-body-xl);
	line-height: var(--lh-body-xl);

	margin-block-start: var(--wp--preset--spacing--section-md);

	/* Editor-pasted copy: a bare URL or a long product name is the one thing
	   that can push past the 816px measure. Breaks only when the word cannot
	   fit, so ordinary copy is unaffected. */
	overflow-wrap: break-word;
}

/* An owl on the wrapper rather than a margin per block type: whatever an editor
   publishes — a columns block, a gallery, a wpdatatables table — inherits the
   same 30px without needing a rule of its own. `margin-block-start` only, so
   the first child still sits flush against the gap the wrapper sets above. */
.infinitus-article__body > * + * {
	margin-block-start: var(--article-body-gap);
}

/* Lead paragraph. `> p:first-child` is the whole implementation. Deliberately
   NOT post_excerpt — few posts have one, and it is already spoken for as the
   resource card's copy. If a plugin ever prepends something to the_content()
   on this view, the lead silently degrades to body copy rather than landing on
   the wrong paragraph. */
.infinitus-article__body > p:first-child {
	font-size: var(--fs-body-2xl);
	line-height: var(--lh-body-2xl);
}

/* Colour is restated because Tailwind's preflight leaves headings inheriting. */
.infinitus-article__body :is(h1, h2, h3, h4, h5, h6) {
	color: var(--color-gray-900);
	font-weight: 300;
	letter-spacing: 0.012em;
}

/* Authored headings each map one rung DOWN the theme ladder, because the
   article's own h1 is the hero title. Tokens only — a hardcoded 32px here is a
   heading that stops following the scale. h5 and h6 both take --fs-h6 so a
   future author cannot end up with a subheading larger than the h4 above it;
   h1 joins h2 so one published tomorrow must not shout over the hero's title. */
.infinitus-article__body :is(h1, h2) {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.infinitus-article__body h3 {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.infinitus-article__body h4 {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}

.infinitus-article__body h5,
.infinitus-article__body h6 {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
}

/* Below 1025 the ladder inverts: --fs-h5 is 16px at every step under desktop
   while --fs-body-xl is 18px, so authored h4s would render SMALLER than the
   paragraphs around them. Floored at the body rung rather than given a mobile
   heading step the DS does not publish. */
@media (max-width: 1024.98px) {
	.infinitus-article__body h4,
	.infinitus-article__body h5,
	.infinitus-article__body h6 {
		font-size: var(--fs-body-xl);
		line-height: var(--lh-body-xl);
	}
}

.infinitus-article__body a {
	color: var(--color-link-light-default);
	text-decoration: underline;
}

.infinitus-article__body a:hover,
.infinitus-article__body a:focus-visible {
	color: var(--color-link-light-hover);
}

/* The overflow guard is every image, not just core/image blocks: some posts
   still carry bare classic-editor <img> tags with hard width attributes, and
   none of them may push the measure. */
.infinitus-article__body img {
	height: auto;
	max-width: 100%;
}

.infinitus-article__body .wp-block-image img {
	/* The corner cut is the FEATURED image's alone (client call): a cut that
	   scales has to be percentages of each box, which makes its angle vary with
	   the aspect ratio, and repeated down a page at varying angles the idiom
	   reads as damage rather than as a motif. */
	border-radius: var(--wp--custom--radius--md);

	/* Drops the inline descender gap under the image. */
	display: block;
}

/* core/embed videos get their ratio from core's own block stylesheet, so there
   is deliberately no aspect-ratio rule here to fight with it. This is the guard
   for everything else an iframe can be — a provider that ships fixed width and
   height attributes, or a raw <iframe> pasted into a custom-HTML block. */
.infinitus-article__body iframe {
	max-width: 100%;
}

/* wpdatatables already wraps its tables in its own `.wdtscroll` scroll box, so
   there is deliberately no rule for it here. core/table ships no scroll box of
   its own — a five-column table would push the whole page sideways. This is
   that guard. */
.infinitus-article__body .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

/* Follow row — partials/article/follow.php. The icons themselves are
   partials/social.php, which the global footer also renders; everything below
   is scoped to .infinitus-article__follow so the footer's own copy
   (`.global-footer #menu-footer-social` in _footer.scss) keeps its rules and
   neither row can reach the other. */

.infinitus-article__follow {
	--article-follow-gap: 50px;

	/* Declared here rather than reused from .infinitus-article__body, whose
	   custom property is scoped to the editor's content. */
	--article-follow-rhythm: 30px;

	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sp-4) var(--article-follow-gap);

	/* Drawn as this row's own top border rather than an empty element, so there
	   is no decorative node for a screen reader to meet. */
	border-block-start: 2px solid var(--color-gray-200);
	margin-block-start: var(--article-follow-rhythm);
	padding-block-start: var(--article-follow-rhythm);
}

.infinitus-article__follow-label {
	color: var(--color-gray-900);
	font-size: var(--fs-h5);
	font-weight: 500;
	letter-spacing: 0.012em;
	line-height: 1.3;
	margin: 0;
}

.infinitus-article__follow .social-links ul {
	/* The list reset is restated because it is Tailwind's preflight, not this
	   file, that supplies it today. */
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.infinitus-article__follow .social-links li {
	/* The links are inline-flex, so each <li> would otherwise wrap them in an
	   inline line box and add its strut's descender — measured as 3px of extra
	   row height under a 30px icon. */
	display: flex;
}

.infinitus-article__follow .social-links a {
	align-items: center;
	display: inline-flex;
	justify-content: center;

	/* The icons are Font Awesome glyphs, sized by font-size either way the kit
	   can render them — the webfont it serves today, or an em-sized <svg> if it
	   ever switches to SVG replacement. Set on the link rather than on the <i>
	   so it survives that switch. WIDTH is deliberately left to the glyph,
	   exactly as the footer's copy of this row leaves it. */
	font-size: 30px;
	line-height: 1;
	min-block-size: 30px;
	transition: color var(--duration-fast) ease-out;
}

.infinitus-article__follow .social--twitter a {
	/* X is drawn smaller than the other three, as it is in the footer. */
	font-size: 22.5px;
}

/* Below the desktop breakpoint the links become touch targets. */
@media (max-width: 1024.98px) {
	.infinitus-article__follow .social-links ul {
		/* The 44px boxes supply the gutter themselves; keeping the 10px on top
		   would space the glyphs 24px apart instead of 10. */
		gap: 0;
	}

	.infinitus-article__follow .social-links a {
		min-block-size: 44px;
		min-inline-size: 44px;
	}
}

/* Latest-resources band — partials/article/latest.php. The cards are
   `infinitus/resource-grid`, so the grid, the reflow and the card itself are
   all styled elsewhere (src/blocks/resource-grid/style.scss and the shared
   assets/scss/blocks/_resource-card.scss). This block owns only what is around
   them. */

.infinitus-article__latest {
	padding-block: var(--wp--preset--spacing--section-xl);

	/* NO ground of its own, deliberately: the prose above and this band are the
	   same Neutral 25, which `body` already carries (assets/scss/_core.scss) —
	   a `background-color` here would be a no-op that only reads as intent.
	   It still sits outside the shell's .container and brings its own, because
	   the band is full-width where the article's 816px measure is not. */
}

.infinitus-article__latest-heading {
	color: var(--color-gray-900);
	font-size: var(--fs-h2);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--lh-h2);
	margin-block-start: 0;

	margin-block-end: var(--wp--preset--spacing--section-sm);
}

/* The cyan rule under the heading is the shared growing underline
   (assets/css/underline-grow.css, which lists this heading's <mark> in its own
   selector lists) — nothing to declare here. */

/* Plain-list repair: Tailwind's preflight zeroes `list-style` and `padding` on
   every ul/ol site-wide, and nothing in the article shell put them back, so
   published lists render as unmarked, unindented paragraphs without this.
   The check style's own rules live in assets/css/blocks/check-list.css; this
   file only hands it the article's row rhythm below.

   The selector pair covers core/list plus bare <ul>/<ol> in classic content,
   and deliberately EXCLUDES lists some OTHER block renders internally
   (`ul.wp-block-social-links`, `ul.wp-block-latest-posts`, etc.). Those ship
   their own `list-style: none` and zeroed padding at (0,1,0) or (0,2,0); a bare
   `.infinitus-article__body ul` sits at (0,2,1) and would out-specify them,
   putting disc bullets and a 20px indent on a row of social icons. */

.infinitus-article__body ul.wp-block-list:not(.is-style-check-list),
.infinitus-article__body ul:not([class*="wp-block-"]):not(.is-style-check-list),
.infinitus-article__body ol.wp-block-list:not(.is-style-check-list),
.infinitus-article__body ol:not([class*="wp-block-"]):not(.is-style-check-list) {
	/* Nested lists match these same selectors, which is what makes a sublist
	   read as one: its own marker plus another 20px of indent. */
	padding-inline-start: var(--wp--preset--spacing--sp-5);
}

.infinitus-article__body ul.wp-block-list:not(.is-style-check-list),
.infinitus-article__body ul:not([class*="wp-block-"]):not(.is-style-check-list) {
	list-style-type: disc;
}

.infinitus-article__body ol.wp-block-list:not(.is-style-check-list),
.infinitus-article__body ol:not([class*="wp-block-"]):not(.is-style-check-list) {
	list-style-type: decimal;
}

.infinitus-article__body .is-style-check-list {
	--check-list-row-gap: var(--article-body-gap);
}