/* ============================================================
   News (post) archive — «اخبار المركز».
   Widgets: acs-news-hero + acs-news-list (this file).

   The HERO reuses the research-topic single hero verbatim: same markup/classes
   (`.acs-topic__featured` grid 519fr:785fr → `.acs-topic__featured-main` big
   card RIGHT + `.acs-topic__featured-side` two horizontal cards LEFT), the
   shared `acs_pub_card_html()` renderer, the `.acs-topic` typography scope and
   the `.acs-cslider` mobile carousel. Only the news-specific deltas live below.

   Dependencies: acs-home (brand tokens, .acs-breadcrumb, .acs-card, .acs-scard),
                 acs-single (.acs-topic__featured / .acs-topic__layout / aside).
   RTL: first DOM child = RIGHT.
   Tokens: gray text rgba(133,135,135,1); image border rgba(133,135,135,0.24).
   ============================================================ */

/* ── Shared max-width inner wrapper (≈60px side gutters at 1440) ───────────── */
.acs-news__inner {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 16px;
}

.acs-news-hero { background: transparent; }

/* Site rule: breadcrumb 32px below the top menu, H1 32px below the breadcrumb. */
.acs-news-hero .acs-breadcrumb {
	margin-block: 32px 0;
}
.acs-news-hero__title {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	color: #231F20;
	text-align: right;
	margin-block: 32px 32px;
}

/* ── Featured hero — news-specific deltas over the shared .acs-topic hero ───── */

/* News cards carry no byline/badge → drop the leading "|" date separator. */
.acs-news-hero .acs-card__date::before { content: none; margin: 0; }

/* Side (left) cards: title on TOP, date pinned to the BOTTOM. (The research-topic
   hero floats its meta ABOVE the title via order:-1 / column-reverse — undo that
   for news, where the client wants title-top / date-bottom.) */
.acs-news-hero .acs-topic__featured-side .acs-card__body { justify-content: flex-start; }
.acs-news-hero .acs-topic__featured-side .acs-card__meta {
	order: 0;
	margin-top: auto;
	flex-direction: row;
}

/* Desktop/tablet image geometry. Guarded to ≥479px so the ≤478px carousel keeps
   the shared 318×175 card images (single.css) untouched. */
@media (min-width: 479px) {
	/* Big (right) post: image height 284.29px (Figma). */
	.acs-news-hero .acs-card--big .acs-card__img { height: 284.29px; }

	/* Side posts (Figma frame 339.83 × 186.15): the shared research-topic hero
	   uses a wider 372.686px media (single.css), giving an ~2.0 aspect box that
	   made object-fit:cover crop the news thumbnails top/bottom («cut from the
	   bottom»). Narrow the media to the news Figma width so the box aspect matches
	   the image (1.826) and nothing is cropped. */
	.acs-news-hero .acs-topic__featured-side .acs-card--h .acs-card__media {
		flex: 0 0 339.83px;
		max-width: 339.83px;
	}
	.acs-news-hero .acs-topic__featured-side .acs-card--h .acs-card__img { height: 186.15px; }
}

.acs-news-hero .acs-empty {
	padding-block: 32px;
	font-family: 'Readex Pro', sans-serif;
	color: rgba(133, 135, 135, 1);
}

/* mslider arrow bar — phone-only (shown in the ≤478px block below). */
.acs-news-hero .acs-mslider__nav { display: none; }

/* ── Phone (≤478px): featured block becomes an acs-mslider peek carousel ──────
   SELF-CONTAINED mirror of the publications hero — we do NOT lean on single.css's
   `.acs-cslider__track.acs-topic__featured` block (that cross-file dependency
   didn't take effect here, so the main card filled the row and nothing peeked).
   Everything the carousel needs is declared right here: flex row + native scroll
   + snap, the .acs-topic__featured-main/-side wrappers dissolved so every card is
   a direct child, and a uniform 318px card / 318×175 image so a slice of the next
   card peeks. Arrows (mobile-sliders.js) scroll it. */
@media (max-width: 478px) {
	.acs-news-hero .acs-topic__featured {
		display: flex;
		gap: 16px;
		max-width: 100%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.acs-news-hero .acs-topic__featured::-webkit-scrollbar { display: none; }

	/* Dissolve the big/side wrappers so every card is a direct, uniform flex child. */
	.acs-news-hero .acs-topic__featured-main,
	.acs-news-hero .acs-topic__featured-side { display: contents; }

	/* Uniform card box — 318px wide so a slice of the next card peeks. */
	.acs-news-hero .acs-topic__featured .acs-card {
		flex: 0 0 auto;
		width: 318px;
		box-sizing: border-box;
		scroll-snap-align: start;
	}
	/* The side ('h') cards collapse to the same vertical shape as the big one. */
	.acs-news-hero .acs-topic__featured .acs-card--h { flex-direction: column; }
	.acs-news-hero .acs-topic__featured .acs-card--h .acs-card__media { flex: 0 0 auto; max-width: none; }
	/* Uniform image on every card (overrides the ≥479 news image heights below). */
	.acs-news-hero .acs-topic__featured .acs-card__img {
		width: 318px;
		height: 175px;
		min-height: 0;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/* Arrow bar (DOM order next→prev via direction:ltr for predictable L→R). */
	.acs-news-hero .acs-mslider__nav {
		display: flex;
		direction: ltr;
		justify-content: flex-start;
		gap: 16px;
		margin-top: 16px;
	}
	/* Figma arrows: white circle, subtle inset + drop shadow, GREEN chevron
	   (rgba(22,142,126) via currentColor). Both buttons alike (no filled). */
	.acs-news-hero .acs-mslider__btn,
	.acs-news-hero .acs-mslider__btn--next {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid rgba(133, 135, 135, 0.5);
		border-radius: 50%;
		background: #fff;
		color: rgba(22, 142, 126, 1);
		cursor: pointer;
		box-shadow: inset 0 0.63px 2.53px rgba(0, 0, 0, 0.08), 0 1.27px 3.8px rgba(0, 0, 0, 0.12);
	}
	.acs-news-hero .acs-mslider__btn svg {
		width: 22px;
		height: 22px;
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
	}

	/* Breadcrumb (Figma Frame 732 spec, stored in memory): Readex 12/500; links
	   teal #068788, current node grey #9C999A; wrap so the long first crumb never
	   overflows the phone width. */
	.acs-news-hero .acs-breadcrumb {
		flex-wrap: wrap;
		row-gap: 4px;
		font-family: 'Readex Pro', sans-serif;
		font-weight: 500;
		font-size: 12px;
		line-height: 150%;
	}
	.acs-news-hero .acs-breadcrumb a { color: #068788; }
	.acs-news-hero .acs-breadcrumb .is-current { color: #9C999A; }
}

/* ============================================================
   acs-news-list — news card grid + sticky video aside.
   Card: image 136.64px tall; text section 106px, 16px padding (14 bottom),
   vertically centered; title 16/500 #101010; date 12/400 gray, aligned start
   (RIGHT); grid↔video 24px; video sticky.
   ============================================================ */

.acs-news-list { padding-block: 40px; }

/* Main grid ↔ video aside gap = 24px (layout comes from acs-single). */
.acs-news-list .acs-topic__layout { gap: 24px; }

/* News card grid: 16px gaps, N columns via the --acs-news-cols custom property. */
.acs-newsgrid {
	display: grid;
	grid-template-columns: repeat( var( --acs-news-cols, 4 ), 1fr );
	gap: 16px;
}

/* Card sizing (acs_scard_html markup, scoped to the news grid). */
.acs-newsgrid .acs-scard { background: #fff; border-radius: 4px; overflow: hidden; }
.acs-newsgrid .acs-scard__media { display: block; }
.acs-newsgrid .acs-scard__img {
	width: 100%;
	height: 136.64px;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
}

/* Text section: 16px top/side padding + a 14px bottom (the title/date section).
   Natural height so the card grows with a 3-line title (Frame 549) instead of
   being crammed into a short fixed box. flex:1 (from base) lets the foot pin the
   date to the bottom so dates line up across a grid row. */
.acs-newsgrid .acs-scard__body {
	box-sizing: border-box;
	padding: 16px 16px 14px;
	gap: 8px;
}
.acs-newsgrid .acs-scard__title {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: #101010;
	text-align: right;
	text-decoration: none;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Date: 16px below itself (foot) + the body's 14px = 30px from the date down to
   the card's bottom edge; 16px from the right comes from the body's right
   padding. The base .acs-scard__foot{margin-top:auto} keeps it pinned low. */
.acs-newsgrid .acs-scard__foot { padding-block-end: 16px; }

/* Date aligned to the START (RIGHT in RTL) — undo the base meta--inline rule that
   pushes the date to the far (left) end via margin-inline-start:auto. */
.acs-newsgrid .acs-scard__meta--inline { width: 100%; }
.acs-newsgrid .acs-scard__meta--inline .acs-scard__date { margin-inline-start: 0; }
.acs-newsgrid .acs-scard__date {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 150%;
	color: rgba(133, 135, 135, 1);
	text-align: right;
}

/* Video aside stays sticky (top offset from acs-single .acs-topic__aside). */
.acs-news-list .acs-topic__aside { position: sticky; top: 100px; align-self: start; }

.acs-news-list .acs-pager { margin-block-start: 32px; }

@media (max-width: 1024px) {
	.acs-newsgrid { grid-template-columns: repeat( 2, 1fr ); }
}
@media (max-width: 600px) {
	.acs-newsgrid { grid-template-columns: 1fr; }
	.acs-news-list .acs-topic__aside { position: static; }
}