/* ==========================================================================
   NEWS INDEX — ELEMENTOR BUILD
   Sudair Pharma

   The News page used to be one Shortcode widget, [sud_news], printing its own
   HTML from the posts table. It is now built from ordinary Elementor elements —
   Containers, Headings, Text Editors and Images — so every title, excerpt,
   date, category and photograph can be clicked and edited in the editor.

   The design did not change, and that is this file's whole job. The Elementor
   elements carry the SAME `sud-ed__*` classes the shortcode printed, so
   editorial.css still styles them. What it cannot do on its own is win against
   the markup Elementor wraps around every element, which the shortcode never
   had:

     · Containers are flex boxes driven by CSS variables (display, gap, padding,
       width, position…), all at one class. The shortcode's wraps were plain
       blocks — and block layout COLLAPSES adjacent margins where flex does not,
       so leaving them flex would have opened up the vertical rhythm.
     · Every visible string sits one level deeper: a Heading prints
       `<div class="sud-ed__card-title"><h3 class="elementor-heading-title">`,
       and the kit styles that inner element (font, colour, size) directly.
     · Widgets are positioned, which would trap the card-wide link inside the
       title instead of letting it cover the whole card.

   So this file does three things and nothing else:

     1. puts each container back into the display mode the shortcode's element
        had (block / grid / flex), with Elementor's padding and gap cleared,
     2. makes the inner heading and paragraph INHERIT the typography that
        editorial.css sets on the classed wrapper,
     3. restores the whole-card link, and switches it off inside the editor so
        each field can be clicked on its own.

   Every value below is editorial.css's own — nothing is restyled.

   Loaded only on the News page (inc/editorial.php), after editorial.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINERS BACK TO THE SHORTCODE'S LAYOUT

   Elementor's container rules sit at one class; two classes plus the `e-con`
   class clears them without !important.
   -------------------------------------------------------------------------- */

/* Plain blocks, as the shortcode's <div>s were — so margins collapse exactly as
   they did (the lead story's bottom margin and the filter row's top margin
   share one space instead of adding up). */
.sud-ed.e-con,
.sud-ed .e-con.sud-ed__wrap,
.sud-ed .e-con.sud-ed__lead-body {
	display: block;
	gap: 0;
	min-block-size: 0;
}

.sud-ed.e-con {
	padding: 0;
	inline-size: 100%;
	max-inline-size: none;
}

/* The rail: same width, centring and gutter as .sud-ed__wrap. */
.sud-ed .e-con.sud-ed__wrap {
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	padding-block: 0;
	padding-inline: var(--ed-gutter);
}

.sud-ed .e-con.sud-ed__wrap--wide { max-inline-size: 1440px; }

.sud-ed .e-con.sud-ed__head {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.25rem);
}

/* Lead story — a grid, as the <article> was. */
.sud-ed .e-con.sud-ed__lead {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 0;
	margin-block: clamp(2.5rem, 5vw, 4rem);
	margin-inline: 0;
	inline-size: auto;
	max-inline-size: none;
	min-block-size: 0;
}

@media (min-width: 900px) {
	.sud-ed .e-con.sud-ed__lead {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: center;
	}
}

.sud-ed .e-con.sud-ed__lead-body {
	padding: clamp(1.75rem, 3.4vw, 3.25rem);
	margin: 0;
	inline-size: auto;
	max-inline-size: none;
}

@media (min-width: 900px) {
	.sud-ed .e-con.sud-ed__lead-body {
		margin-inline-start: clamp(-5rem, -4vw, -2rem);
		z-index: 1;
	}
}

@media (max-width: 899px) {
	.sud-ed .e-con.sud-ed__lead-body { margin-inline-start: 0; }
}

/* The grid — as the <ul> was. Column counts and their breakpoints still come
   from editorial.css; only what Elementor overrides is restated. */
.sud-ed .e-con.sud-ed__grid {
	display: grid;
	gap: clamp(2rem, 3.4vw, 3.25rem) clamp(1.5rem, 2.6vw, 2.5rem);
	padding: 0;
	margin: 0;
	inline-size: auto;
	max-inline-size: none;
	min-block-size: 0;
	flex-wrap: nowrap;
}

@media (max-width: 640px) {
	.sud-ed .e-con.sud-ed__grid { gap: 2rem; }
}

/* A card — a flex column, as the <li> was. */
.sud-ed .e-con.sud-ed__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	padding: 1.25rem 0 0;
	margin: 0;
	inline-size: auto;
	max-inline-size: none;
	min-block-size: 0;
	border-block-start: 1px solid var(--ed-line-strong);
}

/* The filter hides a card with the `hidden` attribute. The rule above outranks
   editorial.css's `.sud-ed__card[hidden]`, so it is restated one class higher —
   without it, filtering would change the buttons but leave every card showing. */
.sud-ed .e-con.sud-ed__card[hidden] { display: none; }

/* Category · date — a wrapping flex row, as the <p class="sud-ed__meta"> was. */
.sud-ed .e-con.sud-ed__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: .5rem .85rem;
	padding: 0;
	/* It was a <p>, so its labels wrapped the way every paragraph on the site
	   does — "Local Content & / Government Partnerships", not a lone last word. */
	text-wrap: pretty;
	/*
	 * 16px below, because the shortcode's meta line was a <p> and the kit gives
	 * every paragraph `margin-block-end: 16px` (.elementor-kit-5 p) — editorial.css
	 * never set a margin on it, so that is the gap the live cards show between
	 * the date and the headline.
	 */
	margin: 0 0 16px;
	inline-size: auto;
	max-inline-size: none;
	min-block-size: 0;
}

/*
 * The 3px pip between category and date. It was its own <span>; here it is the
 * row's ::after, which a flex container treats as an item — so the row's gap
 * spaces it exactly as before, and it wraps with the row the same way.
 *
 * ::after, not ::before: Elementor draws a container's background overlay on
 * `.e-con::before` — absolutely positioned, full size — and a pip there is
 * pulled out of the row. Nothing claims ::after. `order` puts it between the
 * two labels: category, pip, date.
 *
 * Only drawn when there is a category to separate, so clearing a category in
 * the editor does not leave a stray dot in front of the date.
 */
.sud-ed .e-con.sud-ed__meta > .sud-ed__cat  { order: 1; }
.sud-ed .e-con.sud-ed__meta > .sud-ed__date { order: 3; }

.sud-ed .e-con.sud-ed__meta:has(> .sud-ed__cat .elementor-heading-title)::after {
	content: '';
	order: 2;
	inline-size: 3px;
	block-size: 3px;
	background: var(--ed-line-strong);
	flex: 0 0 auto;
}

/* Lighter on the lead's green panel. Written with the same :has() as above so it
   carries the same weight plus one class — otherwise the grey rule wins. */
.sud-ed .sud-ed__lead-body .e-con.sud-ed__meta:has(> .sud-ed__cat .elementor-heading-title)::after {
	background: rgba(255, 255, 255, .35);
}

/* --------------------------------------------------------------------------
   2. TEXT INHERITS FROM ITS CLASSED WRAPPER

   editorial.css sets size, weight, tracking, line-height and colour on the
   classed element. Here that is the widget's wrapper; the heading or paragraph
   inside is what the kit styles. Handing everything down restores the design.
   -------------------------------------------------------------------------- */

.sud-ed .elementor-widget-heading .elementor-heading-title,
.sud-ed .elementor-widget-text-editor > p {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
	text-transform: inherit;
	/* text-wrap is deliberately NOT touched: the site gives every <p>
	   `text-wrap: pretty`, and the shortcode's paragraphs had it. Headings take
	   `balance` from their wrapper by ordinary inheritance. */

	/*
	 * Words break where they always broke here: nowhere mid-word.
	 *
	 * responsive-corrections.css gives every Elementor heading and text-editor
	 * paragraph `overflow-wrap: break-word`, as a site-wide guard against long
	 * words pushing a page sideways. The shortcode's markup was not Elementor
	 * widgets, so the News page never had it — and applying it now would change
	 * the masthead on phones from "News & / Announcements" to
	 * "News & / Announcement / s".
	 *
	 * KNOWN, AND PRE-EXISTING: at 36px "Announcements" is ~277px, wider than the
	 * masthead's column on a phone, so it overhangs the column — and at 320px it
	 * pushes the live page 20px sideways. That is how the page behaves today; it
	 * is kept as-is here and reported separately rather than fixed inside a
	 * migration that is meant to change nothing visible.
	 */
	overflow-wrap: normal;
}

/* Each widget's margin, restated from editorial.css at a weight that clears
   Elementor's own widget spacing. These are the shortcode's spacings exactly. */
.sud-ed .elementor-widget.sud-ed__kicker        { margin: 0 0 1.25rem; }
.sud-ed .elementor-widget.sud-ed__masthead      { margin: 0; }
.sud-ed .elementor-widget.sud-ed__standfirst    { margin: 1.25rem 0 0; }

/* The standfirst's 58ch measure. Elementor caps every widget in a container at
   `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` — four
   classes — so the measure is restated at five. */
.sud-ed.e-con .e-con > .elementor-widget.sud-ed__standfirst { max-inline-size: 58ch; }
.sud-ed .elementor-widget.sud-ed__lead-title    { margin: 1rem 0 0; }
.sud-ed .elementor-widget.sud-ed__lead-excerpt  { margin: 1rem 0 0; }
.sud-ed .elementor-widget.sud-ed__card-title    { margin: .7rem 0 0; }
.sud-ed .elementor-widget.sud-ed__card-excerpt  { margin: .65rem 0 0; }
.sud-ed .elementor-widget.sud-ed__cat,
.sud-ed .elementor-widget.sud-ed__date          { margin: 0; }

/* The three-line clamp belongs on the box that holds the lines. */
.sud-ed .sud-ed__card-excerpt {
	display: block;
	overflow: visible;
	-webkit-line-clamp: none;
	line-clamp: none;
}

.sud-ed .sud-ed__card-excerpt > p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Photographs — the Image widget's wrapper is the <figure> it replaces. */
.sud-ed .elementor-widget-image.sud-ed__card-media,
.sud-ed .elementor-widget-image.sud-ed__lead-media {
	position: relative;
	overflow: hidden;
	background: var(--ed-paper-2);
	text-align: start;
	line-height: 0;
}

/*
 * No gap under the photograph. editorial.css asks for 1.15rem, but on the live
 * page the shortcode's <figure> sat inside an Elementor widget, where Elementor's
 * `.elementor .elementor-widget:not(…) figure { margin: 0 }` outranks it. The
 * cards have always shown the photo touching the category line; kept that way.
 */
.sud-ed .elementor-widget-image.sud-ed__card-media { margin: 0; order: -1; }
.sud-ed .elementor-widget-image.sud-ed__lead-media { margin: 0; }

.sud-ed .elementor-widget-image.sud-ed__card-media img,
.sud-ed .elementor-widget-image.sud-ed__lead-media img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
	transition: transform 1.2s var(--ed-ease);
}

/* --------------------------------------------------------------------------
   3. THE WHOLE CARD IS THE LINK

   The shortcode made the title link cover its card with a pseudo-element, so
   the photograph and excerpt were clickable too while only one link existed.
   The heading and its wrapper are un-positioned so that pseudo-element reaches
   the card rather than stopping at the headline.
   -------------------------------------------------------------------------- */

.sud-ed .sud-ed__card-title,
.sud-ed .sud-ed__card-title .elementor-heading-title,
.sud-ed .sud-ed__lead-title,
.sud-ed .sud-ed__lead-title .elementor-heading-title,
.sud-ed .sud-ed__lead-body {
	position: static;
}

.sud-ed .sud-ed__card-title .elementor-heading-title a,
.sud-ed .sud-ed__lead-title .elementor-heading-title a {
	text-decoration: none;
	background: none;
}

/*
 * THE HEADLINE TEXT IS SET IN THE KIT'S LINK TYPE — AND ALWAYS HAS BEEN.
 *
 * editorial.css sizes a card headline at 17-19px, but that size lands on the
 * <h3>, and the words are inside an <a>. The global kit styles every link at
 * `.elementor-kit-5 a` with its Accent typography — 15px, weight 600, 1.6px
 * tracking, 1.5em leading (14px at 1024px and below) — and in the shortcode's
 * markup nothing told the link otherwise. So what the live page actually shows
 * is 15px headlines in the ink colour. That is the design being preserved.
 *
 * Elementor's own Heading widget would change it: it forces a heading's link to
 * inherit the heading's size and colour (widget-heading.css, at three classes and
 * a tag). These rules put the kit's values back, through the kit's own variables
 * so every breakpoint follows the kit exactly as before.
 *
 * The lead headline was the one exception and still is: editorial.css gave its
 * link `color: inherit` so it stays white on the green panel.
 */
.sud-ed .sud-ed__card-title .elementor-heading-title[class*=elementor-size-] > a,
.sud-ed .sud-ed__lead-title .elementor-heading-title[class*=elementor-size-] > a {
	font-family: var( --e-global-typography-accent-font-family ), Montserrat, Poppins;
	font-size: var( --e-global-typography-accent-font-size );
	font-weight: var( --e-global-typography-accent-font-weight );
	line-height: var( --e-global-typography-accent-line-height );
	letter-spacing: var( --e-global-typography-accent-letter-spacing );
}

.sud-ed .sud-ed__card-title .elementor-heading-title[class*=elementor-size-] > a { color: var( --e-global-color-primary ); }
.sud-ed .sud-ed__lead-title .elementor-heading-title[class*=elementor-size-] > a { color: inherit; }

.sud-ed .sud-ed__card-title .elementor-heading-title a::after,
.sud-ed .sud-ed__lead-title .elementor-heading-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.sud-ed .sud-ed__card-title .elementor-heading-title a:focus-visible::after,
.sud-ed .sud-ed__lead-title .elementor-heading-title a:focus-visible::after {
	outline: 3px solid var(--sud-green-500, #43B649);
	outline-offset: 3px;
}

/*
 * In the Elementor editor the covering link would sit on top of every field in
 * the card, so clicking the photograph or the excerpt would select the headline
 * instead. It is switched off there — on the live page the card stays one link.
 */
.elementor-editor-active .sud-ed .sud-ed__card-title .elementor-heading-title a::after,
.elementor-editor-active .sud-ed .sud-ed__lead-title .elementor-heading-title a::after {
	content: none;
}

/* Hover — the same two cues the shortcode cards had. */
@media (hover: hover) {
	.sud-ed .e-con.sud-ed__lead:hover .sud-ed__lead-media img,
	.sud-ed .e-con.sud-ed__card:hover .sud-ed__card-media img { transform: scale(1.04); }

	.sud-ed .e-con.sud-ed__card:hover .sud-ed__card-title { color: var(--ed-green); }
}

@media (prefers-reduced-motion: reduce) {
	.sud-ed .e-con.sud-ed__lead:hover .sud-ed__lead-media img,
	.sud-ed .e-con.sud-ed__card:hover .sud-ed__card-media img { transform: none; }
}

/* --------------------------------------------------------------------------
   5. THE CATEGORY · DATE ROW SITS TOO FAR FROM ITS HEADLINE

   Measured on all 22 grid cards, at 1440, 1280 and 390 alike:

     image bottom  ->  meta top      0.0px
     meta bottom   ->  title top    27.2px
     title bottom  ->  excerpt top  10.4px

   So the row is flush against the photograph and then floats 27px above the
   headline it belongs to — nearly three times the gap the headline keeps from
   its own excerpt. The lead card, built from the same parts, shows 16px.

   WHY 27.2 AND NOT 16

   Two margins that used to collapse no longer can:

     .sud-ed .e-con.sud-ed__meta        margin-block-end   16px    (this file)
     .sud-ed .sud-ed__card-title        margin-block-start 0.7rem  (editorial.css)

   In the shortcode markup the meta was a <p> and the title an <h3>, adjacent
   siblings in normal flow, so their margins collapsed to the larger of the two
   — 16px, which is what the live cards showed and what the rule above was
   written to reproduce. The Elementor rebuild makes the card a flex column,
   and flex containers do not collapse adjacent-sibling margins. The two values
   stopped collapsing and started adding: 16 + 11.2 = 27.2.

   THE FIX

   The headline's own top margin is dropped inside a card, which is what the
   collapse used to do, and the 16px on the meta is left to carry the gap by
   itself. That restores the designed number exactly and makes every grid card
   match the lead card:

     meta bottom -> title top    27.2px  ->  16px

   Nothing else moves. The 16px is not re-invented, the meta keeps its own
   margin, padding and gap, and the headline, excerpt, photograph, card width,
   type and colour are untouched — the title box simply starts 11.2px higher,
   and the card is 11.2px shorter.

   Scope: this file is enqueued only on the News page (inc/editorial.php checks
   the id against sud_ed_page_id('news')), and `.e-con` narrows it again to
   Elementor containers. News Detail prints a plain <p class="sud-ed__meta">
   from that same file and is not an .e-con, so it cannot match. The `>` keeps
   it to a title that is a direct child of a grid card.

   No breakpoint of its own: the two margins are the same px at every width, so
   one rule corrects desktop, tablet and phone by the same amount.
   -------------------------------------------------------------------------- */

.sud-ed .e-con.sud-ed__card > .elementor-widget.sud-ed__card-title {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   6. BREATHING ROOM UNDER THE PHOTOGRAPH

   With section 5 in place the row reads image | 0px | meta | 16px | title, so
   the label still starts on the photograph's own edge — its line box begins at
   exactly the pixel the picture ends.

   The 0 is this file's doing. editorial.css gives the card's picture

     .sud-ed__card-media { margin: 0 0 1.15rem; }        18.4px

   and the Elementor mapping further up zeroes it, because there the picture is
   an image WIDGET and Elementor's own widget spacing was expected to stand in
   for that margin. Inside a flex column it does not, so the gap was simply lost.

   12px is given back — enough to lift the label clear of the picture, short of
   editorial.css's original 18.4px, which would have reopened the same oversized
   look section 5 closed. The result is an even ladder down the card:

     image | 12px | meta | 16px | title | 10.4px | excerpt

   Only the picture's bottom margin changes. Its width, height, aspect-ratio
   (3/2) and `order: -1` are all untouched, so the photograph itself is exactly
   the same size and in the same place; the card grows by 12px, which is the
   gap itself and cannot be had without it.

   Scope, as in section 5: this file loads only on the News page, `.e-con`
   narrows it to Elementor containers, and `>` keeps it to a picture that is a
   direct child of a grid card. The lead card carries no .sud-ed__card-media at
   all — all 22 on the page sit in grid cards — so it cannot be reached, and
   News Detail never loads this file.
   -------------------------------------------------------------------------- */

.sud-ed .e-con.sud-ed__card > .elementor-widget-image.sud-ed__card-media {
	margin-block-end: 12px;
}