/*
* patterns/news-archive.css — "News Archive"
* Markup: wp-content/themes/fcs/patterns/news-archive.php
* Root: .fcs-news-archive
*
* A core Query Loop laid out as a card grid (Figma 8051:10614) with numbered
* pagination under it (Figma 10016:12431). Everything inside is generated by
* core's post-* and query-pagination blocks, so the selectors below target the
* classes core emits (.wp-block-post, .page-numbers, …) under our own root.
*
* THE PROSE UNDERLINE IS UNSET FOR EVERY LINK HERE
* ------------------------------------------------
* The pattern lands inside .wp-block-post-content, so components/links.css
* gives each link the prose treatment: an underline drawn as a
* background-image gradient plus 2px of padding-bottom. `text-decoration: none`
* cannot remove it. Left alone it draws a bar under the featured image, under
* the title, under the read-more link (on top of its own sweep) and under every
* page number. It is unset once, for all links in the section, below.
*
* The prose :hover rule also recolours links to `primary` at (0,2,1), so every
* hover colour here is written at (0,3,1) or more.
*/
/* 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".
*/
.fcs-news-archive a {
background-image: none;
padding-bottom: 0;
}
/* Grid ---------------------------------------------------------------- */
/*
* DERIVED — there is no mobile or tablet design for News.
*
* Small 1 column a 386px card is most of a phone's width already
* Medium 2 columns two cards fit 728–984px without the copy going narrow
* Large 3 columns Figma: 3 x 386.67px in the 1240px container
*
* The 40px gap is Figma's (column and row alike) and is kept at every size.
*
* The grid is written here rather than with post-template's own Grid layout,
* because core's grid collapses to one column at its own 600px breakpoint and
* cannot express the 768/1024 pair. The post-template block therefore ships
* with the default layout, which also means core adds is-layout-flow and a
* block-gap margin to each — reset below, or it would offset every row.
*/
.fcs-news-archive .fcs-news-archive__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
margin: 0;
padding: 0;
list-style: none;
}
@media ( min-width: 768px ) {
.fcs-news-archive .fcs-news-archive__grid {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( min-width: 1024px ) {
.fcs-news-archive .fcs-news-archive__grid {
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
}
/* Card ---------------------------------------------------------------- */
/*
* Each is a flex column so the read-more link can be pushed to the foot
* with margin-top: auto. Grid rows stretch to the tallest card, so when one
* title wraps to three lines and its neighbour to two, the links still line up
* across the row — the Figma cards are all the same height.
*/
.fcs-news-archive .fcs-news-archive__grid > li {
display: flex;
flex-direction: column;
margin: 0;
}
/* Clear core's and theme.json's block margins, then set the Figma rhythm. */
.fcs-news-archive .fcs-news-archive__grid > li > * {
margin-block: 0;
}
/* Image → 20px → title → 8px → excerpt → 20px → link. */
.fcs-news-archive .fcs-news-archive__grid .fcs-news-archive__title {
margin-block-start: 20px;
}
.fcs-news-archive .fcs-news-archive__grid .fcs-news-archive__excerpt {
margin-block-start: 8px;
}
/* Image --------------------------------------------------------------- */
/*
* The 4:3 ratio and the 12px radius are block attributes on the featured image
* (editable from its sidebar), so neither is restated here. This only makes
* the image fill the card width.
*/
.fcs-news-archive .fcs-news-archive__media {
width: 100%;
}
.fcs-news-archive .fcs-news-archive__media img {
display: block;
width: 100%;
object-fit: cover;
}
/* Title --------------------------------------------------------------- */
/*
* Type comes from theme.json's h4 element (24/32, body font, 700, -0.2px) —
* see the heading-scale rule: patterns never restate heading type.
*
* The link takes the heading's colour, not the link preset. On hover it moves
* to the link colour, which is DERIVED: Figma has no hover state for the card.
*/
.fcs-news-archive .fcs-news-archive__title a {
color: inherit;
text-decoration: none;
}
.fcs-news-archive .fcs-news-archive__title a:hover,
.fcs-news-archive .fcs-news-archive__title a:focus-visible {
color: var( --wp--preset--color--link );
}
/* Excerpt ------------------------------------------------------------- */
/*
* Figma gives the excerpt a fixed 72px box — three 24px lines — with
* text-overflow: ellipsis. A line clamp is the CSS equivalent, and unlike a
* fixed height it never cuts a line in half. excerptLength on the block keeps
* the source text short; the clamp guarantees the three lines.
*/
.fcs-news-archive .fcs-news-archive__excerpt .wp-block-post-excerpt__excerpt {
display: -webkit-box;
margin: 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
/* Read more ----------------------------------------------------------- */
/*
* "Read the article". Size, weight, case and colour are block attributes
* (editable in the sidebar); the sweep underline is .fcs-link--animated from
* components/links.css, the same idiom as the is-style-link card CTAs.
*
* margin-top: auto pins it to the foot of the card; the 20px padding above it
* is the Figma gap to the excerpt when the card is at its natural height.
*/
.fcs-news-archive .fcs-news-archive__grid .fcs-news-archive__more {
align-self: flex-start;
margin-block-start: auto;
padding-block-start: 20px;
text-decoration: none;
}
/*
* The padding above moves the sweep bar's anchor box, but the bar is drawn
* from the bottom edge (inset: auto 0 -2px 0), so it still sits under the text.
*/
/* Pagination ---------------------------------------------------------- */
/*
* Figma 10016:12431: a 52px strip, 64px below the grid, items centred in it
* with an 8px gap. "Previous" and "Next" are plain text — paginationArrow is
* "none" on the block — and core only prints Previous from page 2 onward, which
* is what the Figma frame (on page 2) shows.
*
* The whole strip is hidden by core when there is a single page of results.
*/
.fcs-news-archive .fcs-news-archive__pagination {
gap: 8px;
align-items: center;
justify-content: center;
min-height: 52px;
margin-block-start: 64px;
}
/* Core gives each child a 0.5em right/bottom margin; the gap replaces it. */
.fcs-news-archive .fcs-news-archive__pagination > * {
margin: 0;
}
.fcs-news-archive .fcs-news-archive__pagination .wp-block-query-pagination-numbers {
display: inline-flex;
gap: 8px;
align-items: center;
}
.fcs-news-archive .fcs-news-archive__pagination a,
.fcs-news-archive .fcs-news-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border: 1px solid transparent;
border-radius: 4px;
font-size: var( --wp--preset--font-size--medium );
line-height: 1.5;
color: var( --wp--preset--color--foreground );
text-decoration: none;
transition:
background-color var( --fcs-transition ),
border-color var( --fcs-transition ),
color var( --fcs-transition );
}
/* Previous / Next carry no box in Figma — text only, flush to the row. */
.fcs-news-archive .fcs-news-archive__pagination .wp-block-query-pagination-previous,
.fcs-news-archive .fcs-news-archive__pagination .wp-block-query-pagination-next {
padding-inline: 0;
border: 0;
}
/* Current page: filled #0074c8 (the link preset) with white text. */
.fcs-news-archive .fcs-news-archive__pagination .page-numbers.current {
background-color: var( --wp--preset--color--link );
border-color: var( --wp--preset--color--link );
color: var( --wp--preset--color--on-primary );
}
/* Figma's ellipsis is a 10px glyph with no box around it. */
.fcs-news-archive .fcs-news-archive__pagination .page-numbers.dots {
padding-inline: 0;
border: 0;
}
/* Hover — DERIVED; Figma draws no hover state for pagination. */
.fcs-news-archive .fcs-news-archive__pagination a:hover,
.fcs-news-archive .fcs-news-archive__pagination a:focus-visible {
color: var( --wp--preset--color--link );
}
.fcs-news-archive .fcs-news-archive__pagination a.page-numbers:hover,
.fcs-news-archive .fcs-news-archive__pagination a.page-numbers:focus-visible {
border-color: var( --wp--preset--color--link );
}