/*
* patterns/latest-news.css — "Latest News"
* Markup: wp-content/themes/fcs/patterns/latest-news.php
* Root: .fcs-latest-news
*
* The homepage News & Announcements band (Figma 7926:758): a heading over a
* three-post core Query Loop and a section button. The card is the same card as
* News Archive's, restated here under this root because pattern CSS never
* reaches across into another pattern's classes.
*
* 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, which `text-decoration: none` cannot
* remove. It is unset once, for all links in the section, below. The section
* button is excluded: it is a button, and buttons.css owns it.
*/
/* 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. See CLAUDE.md § "Section padding".
*
* overflow: hidden catches the mobile slider's off-screen cards, which escape
* the track on purpose (see Slider below).
*/
.fcs-latest-news {
overflow: hidden;
}
.fcs-latest-news a:not( .wp-element-button ) {
background-image: none;
padding-bottom: 0;
}
/* Header -------------------------------------------------------------- */
/*
* Eyebrow → 8px → heading → 40px → cards, the Multicolumn rhythm. The header
* runs the full container and centres rather than being constrained, which is
* what keeps the heading from wrapping early.
*
* The doubled class raises specificity to (0,2,0). Core's layout rules —
* `:root :where( .is-layout-flow ) > *` and the constrained twin — are (0,1,0)
* because :root counts, and they print after the theme's stylesheets, so a
* single class ties and loses.
*/
.fcs-latest-news__header.fcs-latest-news__header {
margin-block-end: 40px;
text-align: center;
}
.fcs-latest-news__header.fcs-latest-news__header > * {
margin-block: 0;
}
.fcs-latest-news__header.fcs-latest-news__header > * + * {
margin-block-start: 8px;
}
/* Grid ---------------------------------------------------------------- */
/*
* DERIVED — there is no mobile or tablet design for this band.
*
* Small slider one card with the next peeking in, dots below — the
* Multicolumn pattern's mobile behaviour, so the two
* homepage bands match. Mounted by assets/js/query-slider.js;
* the 1-column grid here is only the no-JS fallback
* Medium 2 columns the third card wraps under the first two
* Large 3 columns Figma: 3 cards in the 1240px container, 20px gap
*
* The grid is written here rather than with post-template's Grid layout,
* because core's grid collapses at its own 600px breakpoint and cannot express
* the 768/1024 pair. The default layout adds is-layout-flow and a block-gap
* margin to each — reset below, or it would offset every row.
*/
.fcs-latest-news .fcs-latest-news__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px 20px;
margin: 0;
padding: 0;
list-style: none;
}
@media ( min-width: 768px ) {
.fcs-latest-news .fcs-latest-news__grid {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( min-width: 1024px ) {
.fcs-latest-news .fcs-latest-news__grid {
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
}
/* Card ---------------------------------------------------------------- */
/*
* Each is a flex column so the read-more link can sit at the foot with
* margin-top: auto, lining the links up across a row of uneven titles.
*/
.fcs-latest-news .fcs-latest-news__grid > li {
display: flex;
flex-direction: column;
margin: 0;
}
.fcs-latest-news .fcs-latest-news__grid > li > * {
margin-block: 0;
}
/* Image → 20px → title → 8px → excerpt → 20px → link. */
.fcs-latest-news .fcs-latest-news__grid .fcs-latest-news__title {
margin-block-start: 20px;
}
.fcs-latest-news .fcs-latest-news__grid .fcs-latest-news__excerpt {
margin-block-start: 8px;
}
/* The 4:3 ratio and 12px radius are block attributes on the featured image. */
.fcs-latest-news .fcs-latest-news__media {
width: 100%;
}
.fcs-latest-news .fcs-latest-news__media img {
display: block;
width: 100%;
object-fit: cover;
}
/*
* Type comes from theme.json's h4 element. The link takes the heading's colour
* and moves to the link colour on hover — DERIVED, Figma has no hover state.
*/
.fcs-latest-news .fcs-latest-news__title a {
color: inherit;
text-decoration: none;
}
.fcs-latest-news .fcs-latest-news__title a:hover,
.fcs-latest-news .fcs-latest-news__title a:focus-visible {
color: var( --wp--preset--color--link );
}
/* Three lines with an ellipsis, as in News Archive. */
.fcs-latest-news .fcs-latest-news__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 the article" — type and colour are block attributes. */
.fcs-latest-news .fcs-latest-news__grid .fcs-latest-news__more {
align-self: flex-start;
margin-block-start: auto;
padding-block-start: 20px;
text-decoration: none;
}
/* Slider (Small only) -------------------------------------------------- */
/*
* query-slider.js mounts Splide on .fcs-latest-news__query below 768px, wrapping
* the post in an injected .splide__track. Everything here is scoped to
* .is-active, which Splide adds once mounted, so the un-mounted grid (no JS,
* the editor canvas, Medium and up) is untouched. Mirrors the Small slider in
* patterns/multicolumn.css, restated under this root.
*
* The track stays overflow: visible so the next card peeks past it — the peek
* is the swipe affordance, there are no arrows. The section clips it instead.
*/
.fcs-latest-news__query.is-active .splide__track {
overflow: visible;
}
/*
* The grid rule above is (0,2,0); this is (0,3,0), so the mounted list becomes
* the single non-wrapping row Splide translates. Splide spaces the slides with
* its own inline margin, so the grid gap goes.
*/
.fcs-latest-news__query.is-active .fcs-latest-news__grid {
display: flex;
flex-wrap: nowrap;
gap: 0;
}
/* Splide sets each slide's width inline; this stops flex shrinking it. */
.fcs-latest-news__query.is-active .fcs-latest-news__grid > li {
flex: 0 0 auto;
}
/*
* Pagination dots — Multicolumn's, in the link blue Figma uses on light bands.
* Multicolumn's "Slider dots" sidebar picker is registered for that pattern
* only; this band is always on the light surface, so the colour is fixed.
* The list and item resets undo the post-content list styling it lands in.
*/
.fcs-latest-news .splide__pagination {
display: flex;
gap: 0.5rem;
justify-content: center;
width: 100%;
margin: 0;
margin-block-start: var( --wp--preset--spacing--30 );
padding: 0;
list-style: none;
}
.fcs-latest-news .splide__pagination li {
margin: 0;
}
.fcs-latest-news .splide__pagination__page {
width: 10px;
height: 10px;
padding: 0;
border: 1px solid var( --wp--preset--color--link );
border-radius: var( --wp--preset--border-radius--pill );
background: transparent;
opacity: 0.6;
transition:
background-color var( --fcs-transition ),
opacity var( --fcs-transition );
}
.fcs-latest-news .splide__pagination__page.is-active {
background: var( --wp--preset--color--link );
opacity: 1;
}
/* Section button ------------------------------------------------------ */
/* Figma: 40px below the cards, matching the gap above them. */
.fcs-latest-news__actions.fcs-latest-news__actions {
margin-block-start: 40px;
}