/*
 * patterns/news-single.css — "News Single"
 * Markup: wp-content/themes/fcs/patterns/news-single.php
 * Root:   .fcs-news-single
 *
 * The body of a News article (Figma 8052:11583): the article on the left, a
 * "Return to News" link and Recent Posts on the right. Used by
 * templates/single-post.html, never inserted into a page.
 *
 * Everything inside is generated by core's post-* and query blocks, so the
 * selectors target the classes core emits (.wp-block-post, …) under our root.
 *
 * Only the article BODY sits inside .wp-block-post-content, so only its links
 * get the prose underline from components/links.css — which is what we want
 * for links in running text. The title, back link and Recent Posts are outside
 * it and need no opt-out.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Small is pinned in
 * layout/spacing.css, on the root (vertical) and on __inner (the 20px gutter).
 * See CLAUDE.md § "Section padding".
 */

/* Columns ------------------------------------------------------------- */

/*
 * DERIVED — there is no mobile or tablet design for the article.
 *
 *   Small   one column: article, then the sidebar under it
 *   Medium  the same. A 448px sidebar beside a readable article needs more
 *           than 768px, and squeezing the body copy to ~300px to keep the
 *           sidebar up would put the article second to its own navigation.
 *   Large   Figma: 712px + 448px with an 80px gap in the 1240px container
 *
 * Stacked, the sidebar reads as "what next" after the article, which is also
 * its order in the markup, so screen-reader and visual order agree. A rule
 * above it separates it from the end of the article; the design has no
 * stacked state, so the rule and its 40px are ours.
 *
 * At Large the two tracks are 712fr / 448fr rather than fixed widths, so below
 * the 1240px cap they narrow in the Figma proportion instead of the article
 * alone absorbing the difference.
 */
.fcs-news-single .fcs-news-single__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	row-gap: 40px;
}

/* The inner is a flow layout, so core adds a block-gap margin to the aside. */
.fcs-news-single .fcs-news-single__inner > * {
	margin-block: 0;
}

@media ( min-width: 1024px ) {
	.fcs-news-single .fcs-news-single__inner {
		grid-template-columns: minmax( 0, 712fr ) minmax( 0, 448fr );
		column-gap: 80px;
		align-items: start;
	}
}

/* Article ------------------------------------------------------------- */

/* Title → 40px → image → 40px → body (Figma "Content", gap 40). */
.fcs-news-single .fcs-news-single__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.fcs-news-single .fcs-news-single__main > * {
	margin-block: 0;
}

/*
 * The title is theme.json's h1 element (48/48 Outfit, fluid to 36/40), so
 * nothing about its type is restated here.
 */

/*
 * The 4:3 ratio is a block attribute on the featured image (editable from its
 * sidebar). This only makes it fill the column. A post without a featured
 * image renders nothing here, and the flex gap closes up behind it.
 */
.fcs-news-single .fcs-news-single__media {
	width: 100%;
}

.fcs-news-single .fcs-news-single__media img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/*
 * The body needs no rules. Paragraphs, headings and lists are spaced by the
 * block gap (24px, as Figma), headings come from theme.json, and lists get
 * their 24px indent from base/typography.css.
 */

/* Sidebar ------------------------------------------------------------- */

/* Back link → 20px → "Recent Posts" → 20px → list (Figma 8052:11736). */
.fcs-news-single .fcs-news-single__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block-start: 40px;
	border-block-start: 1px solid var( --wp--preset--color--stroke );
}

.fcs-news-single .fcs-news-single__aside > * {
	margin-block: 0;
}

/*
 * Beside the article the rule goes, and the 20px inset is Figma's — it drops
 * "Return to News" to the first line of the title rather than its cap height.
 */
@media ( min-width: 1024px ) {
	.fcs-news-single .fcs-news-single__aside {
		padding-block: 20px;
		border-block-start: 0;
	}
}

/* Recent Posts -------------------------------------------------------- */

/*
 * post-template ships with the default layout, so core makes the <ul> a flow
 * container and puts a block-gap margin on each <li>. It carries a wp-block-
 * class, so base/typography.css's list indent already skips it.
 */
.fcs-news-single .fcs-news-single__recent-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fcs-news-single .fcs-news-single__recent-list > li {
	margin: 0;
}

/*
 * Size and line height are block attributes on the post-title (16/24). Figma
 * draws the titles in the link colour with no underline at rest.
 *
 * THE HOVER IS THE SITE'S SWEEP, DRAWN WRAP-SAFE
 * ----------------------------------------------
 * Everywhere else a standalone link sweeps a bar in from the left and out to
 * the right (.fcs-link--animated in components/links.css, and the header and
 * footer nav). That version is an ::after on an inline-block, which is fine
 * for a one-line label, but these titles wrap to two lines in a 448px column,
 * and the ::after would then draw ONE bar under the whole two-line box.
 *
 * So the same sweep is drawn with links.css's other mechanism, a background
 * gradient, which follows each line of text. The origin flip is the same trick
 * as the ::after version: at rest the bar is anchored right with zero width;
 * on hover it is anchored left and grows to full width. Only background-size
 * is transitioned, so the anchor jumps instantly and the bar enters from the
 * left and leaves to the right. Same bar thickness, gap and timing tokens as
 * links.css.
 *
 * The colour stays the link blue on hover rather than theme.json's primary,
 * like the other swept links, so it is the bar that marks the hover.
 */
.fcs-news-single .fcs-news-single__recent-link a {
	color: var( --wp--preset--color--link );
	text-decoration: none;
	background-image: linear-gradient( currentcolor, currentcolor );
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 var( --fcs-underline-size );
	padding-bottom: var( --fcs-underline-gap );
	transition: background-size var( --fcs-sweep-link );
}

.fcs-news-single .fcs-news-single__recent-link a:hover,
.fcs-news-single .fcs-news-single__recent-link a:focus-visible {
	color: var( --wp--preset--color--link );
	background-position: 0 100%;
	background-size: 100% var( --fcs-underline-size );
}