/* =============================================================================
   ECR — News listing
   Phase 8 · Website-suggestions-1_14.04.pdf p.1

   Client requirements addressed, with the measurement that prompted each:
     "use the same size of image block for all news"
        measured 281x291, 281x329, 281x221, 281x329 — three different heights
     "less space between the lines of the same title, and more space between
      the titles"  — title line-height was 1.27 with 51px between items
     "on the mobile version reduce linespace of the titles"
     "put title on top, and date on bottom. Use complete date '25/03/2026'"
        no date element was rendered at all; js/news.js places it

   All colours are existing ECR tokens. No new palette, no new typeface.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   UNIFORM IMAGE BLOCK
   A fixed 4:3 plate with object-fit: cover, so every item presents the same
   rectangle regardless of the source photograph's proportions.
   -------------------------------------------------------------------------- */

/*
 * The plate has to be set on the WRAPPER ANCHOR, not the image. Salient's
 * `.post-area.featured_img_left .article-content-wrap .post-featured-img-wrap a`
 * carries `height: 100%`, so the anchor stretches to whatever the text column
 * makes the row and the image fills it — which is exactly why the three items
 * measured 291px, 329px and 221px tall. Measured with
 * CSS.getMatchedStylesForNode; the rule below matches that selector's
 * specificity chain so it actually wins.
 */
.post-area.featured_img_left .article-content-wrap .post-featured-img-wrap,
.post-area.featured_img_left .article-content-wrap .post-featured-img-wrap a,
.masonry-blog-item .post-featured-img-wrap a {
	height: auto !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: block;
}

.post-featured-img-wrap img,
.masonry-blog-item .post-featured-img img,
.post-area .post .post-featured-img img,
.post-area.featured_img_left .article-content-wrap .post-featured-img-wrap a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* -----------------------------------------------------------------------------
   TITLE — tighter within a title, more air between items
   -------------------------------------------------------------------------- */

.post-area .post .post-header h2,
.masonry-blog-item .post-header h2,
.post-area .post .post-header h3,
.masonry-blog-item .post-header h3 {
	/* was 1.27 */
	line-height: 1.18;
	margin-bottom: 10px;
	overflow-wrap: anywhere;
}

/* "more space between the titles" — the gap between one item and the next.
   Salient sets `.post-area.featured_img_left article { margin-bottom: 6% }`
   at (0,2,1), so a two-class rule loses. Matched here. */
.post-area.featured_img_left article,
.post-area.featured_img_left .post,
.masonry-blog-item {
	margin-bottom: 68px;
}

/* -----------------------------------------------------------------------------
   DATE — placed by js/news.js, styled here.
   Sits last in the text column, i.e. under the excerpt.
   -------------------------------------------------------------------------- */

.ecr-news-date {
	display: block;
	margin-top: 14px;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: #667085;
}

/* -----------------------------------------------------------------------------
   BODY COPY COLOUR
   "use grey color for bold texts (like introduction) and black for
   light/regular for long article" — the excerpt is the introduction.
   -------------------------------------------------------------------------- */

.post-area .post .excerpt,
.masonry-blog-item .excerpt {
	color: #667085;
}

/* -----------------------------------------------------------------------------
   MOBILE — "reduce linespace of the titles"
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 690px) {

	.post-area .post .post-header h2,
	.masonry-blog-item .post-header h2,
	.post-area .post .post-header h3,
	.masonry-blog-item .post-header h3 {
		line-height: 1.1;
		font-size: 1.375rem;
	}

	.post-area.featured_img_left article,
	.post-area.featured_img_left .post,
	.masonry-blog-item {
		margin-bottom: 44px;
	}

	/* A slightly shallower plate on the phone, so the image does not push the
	   title below the fold on every card. */
	.post-area.featured_img_left .article-content-wrap .post-featured-img-wrap,
	.post-area.featured_img_left .article-content-wrap .post-featured-img-wrap a,
	.masonry-blog-item .post-featured-img-wrap a {
		aspect-ratio: 16 / 10;
	}
}

/* =============================================================================
   CLIENT FEEDBACK, SEPTEMBER 2026 — the listing and its sidebar
   ========================================================================== */

/* "Align bloc and image at top (there is difference for the moment)."
   Salient pads the text column (.post-content-wrap) ~51px from the top, so
   the category line started 54px below the top of the photograph. The column
   now starts level with the image. */
.post-area.featured_img_left article .post-content-wrap {
	padding-top: 0 !important;
}

.post-area.featured_img_left article .post-content-wrap .meta-category {
	display: block;
	line-height: 1.2;
}

/* "Only one 'Search' button - take out the top one. Use thinner outline."
   The search block printed the word "Search" twice: its label above the field
   and its button. The label stays for screen readers (it names the field) and
   leaves the screen; the field's outline goes from 2px to 1px. The 2px rule
   is an active Code Snippet (#46) keyed to the field's id, hence the id here. */
#sidebar .wp-block-search__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

#sidebar .wp-block-search__input,
#sidebar #wp-block-search__input-1 {
	border-width: 1px !important;
}

/* "On 'Recent Post' - put thin grey line to separate the news." */
#sidebar .widget_block ul li + li,
#sidebar .widget_recent_entries ul li + li {
	border-top: 1px solid var(--ecr-border, #E2E8F0);
	padding-top: 12px;
	margin-top: 12px;
}

/* =============================================================================
   CLIENT FEEDBACK, 29 SEPTEMBER 2026 — "reduce line spacing and the space
   between paragraphs, especially on the general News page"
   Measured before, at 1440: every text on the listing inherited Salient's body
   18px / 32px (1.78) — the excerpts, the Recent Posts links — and the featured
   article's title ran at 1.3 with a 45px gap under its excerpt. Scoped to this
   stylesheet's own views (news.css is only enqueued on news listings, see
   inc/news/news.php); the gap BETWEEN cards is the one set above and is kept.
   ========================================================================== */

/* Featured article (the Salient recent-posts slide at the top of /news/). */
.nectar-recent-post-slide .large-featured-post-title {
	line-height: 1.14;
	margin-bottom: 14px;
}

.nectar-recent-post-slide .excerpt {
	line-height: 1.5;
	margin-bottom: 28px;
}

/* Card title → excerpt → date. */
.post-area .post .post-header h3,
.masonry-blog-item .post-header h3 {
	margin-bottom: 8px;
}

.post-area .post .excerpt,
.masonry-blog-item .excerpt {
	line-height: 1.55;
}

.post-area .post .excerpt p,
.masonry-blog-item .excerpt p {
	padding-bottom: 0;
	margin-bottom: 0;
}

.ecr-news-date {
	margin-top: 10px;
}

/* Sidebar: search, "Recent Posts". */
#sidebar .wp-block-latest-posts__list li,
#sidebar .widget_recent_entries ul li {
	line-height: 1.4;
}

#sidebar .widget_block ul li + li,
#sidebar .widget_recent_entries ul li + li {
	padding-top: 10px;
	margin-top: 10px;
}

#sidebar .widget_block .wp-block-heading {
	margin-bottom: 12px;
}

@media only screen and (max-width: 690px) {
	.nectar-recent-post-slide .large-featured-post-title {
		line-height: 1.12;
	}

	.post-area .post .excerpt,
	.masonry-blog-item .excerpt {
		line-height: 1.5;
	}
}