/* ============================================================
   Publications post-type archive (frame «المنشورات», Figma «المنشورات»+
   «Mob_المنشورات») — hero + shared inner wrapper.
   baseline — reconcile vs Figma «المنشورات»
   Widgets: acs-pubs-hero (this file), acs-pubs-filter, acs-pubs-list (Tasks 4/5).
   Dependencies: acs-home (brand tokens, .acs-breadcrumb, .acs-arrow, .acs-hero__*),
                 acs-single (chips / custom-select / filter panel).
   RTL: first DOM child = RIGHT; margin-inline-start:auto pushes LEFT.
   ============================================================ */

/* ── Shared max-width inner wrapper ─────────────────────────────────────────
   Every acs-pubs-* widget wraps its content in .acs-pubs__inner so all sections
   align vertically regardless of how the Bricks template nests their roots.
   Mirrors .acs-pubtype__inner (pubtype-archive.css:21). */
.acs-pubs__inner {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 16px;
}

/* ── Hero band ──────────────────────────────────────────────────────────────
   The breadcrumb + H1 sit in a light background band; the slider bleeds full
   width below. Matches the pubtype-hero rhythm (32px bottom padding). */
.acs-pubs-hero {
	background: transparent;
	padding-block-end: 0;
}

/* Site rule: breadcrumb 32px below the top menu, H1 32px below the breadcrumb. */
.acs-pubs-hero .acs-breadcrumb {
	margin-block: 32px 32px;
}

/* H1: Readex Pro 32 / 600 — PROJECT.md §6 design-system scale */
.acs-pubs-hero__title {
	font-family: 'Readex Pro', sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	color: #231F20;
	margin-block: 0 24px;
}

/* ── Hero slider overrides ──────────────────────────────────────────────────
   The slider reuses all .acs-hero__* classes from homepage.css (acs-home dep).
   Only publication-archive-specific adjustments live here. */

/* Scope the slider inside the hero root to avoid bleeding onto the homepage hero */
.acs-pubs-hero .acs-hero__slider {
	position: relative;
	overflow: hidden;
}

/* Slide layout: panel (text, right in RTL) + media (image, left in RTL).
   First DOM child = right = panel. Second DOM child = left = image. */
.acs-pubs-hero .acs-hero__slide {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 360px;
}

.acs-pubs-hero .acs-hero__panel {
	flex: 1 1 55%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 40px;
	padding-inline: 40px 24px;
}

.acs-pubs-hero .acs-hero__media {
	flex: 0 0 45%;
	display: block;
	overflow: hidden;
}

.acs-pubs-hero .acs-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Title link */
.acs-pubs-hero .acs-hero__title {
	font-family: 'Readex Pro', sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	color: #231F20;
	text-decoration: none;
	display: block;
	margin-block-end: 12px;
}
.acs-pubs-hero .acs-hero__title:hover {
	color: #068788;
}

/* Excerpt: intro scale — 16px / 300 */
.acs-pubs-hero .acs-hero__excerpt {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: #231F20;
	margin-block: 12px 0;
}

/* Arrows: position relative to the slider container */
.acs-pubs-hero .acs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
.acs-pubs-hero .acs-arrow--prev { inset-inline-start: 12px; }
.acs-pubs-hero .acs-arrow--next { inset-inline-end: 12px; }

/* Dots */
.acs-pubs-hero .acs-hero__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding-block: 12px;
}

/* ── Placeholder (canvas / empty state) ─────────────────────────────────── */
.acs-pubs-hero--placeholder {
	padding-block: 32px;
}

/* ── Publications list body (acs-pubs-list element, Task 4) ─────────────────
   Base two-column .acs-topic__layout / .acs-topic__main / .acs-topic__aside /
   .acs-topic__videos* rules come from single.css (enqueued via 'acs-single').
   Only publications-archive-specific DELTAS live here.
   ─────────────────────────────────────────────────────────────────────────── */

/* Aside width — Figma shows ≈ 320px column for the video aside.           */
/* reconcile vs Figma */
.acs-pubs-list {
	--acs-topic-aside: 320px; /* reconcile vs Figma */
}

/* Row gap between publication rows in the list (Figma: 18 px).            */
/* reconcile vs Figma */
.acs-pubs-list .acs-plist {
	gap: 18px; /* reconcile vs Figma */
}

/* Align the two-column layout to the shared .acs-pubs__inner max-width.   */
.acs-pubs-list .acs-pubs__inner {
	display: flex;
	flex-direction: column;
}

/* Empty-state message */
.acs-pubs-list .acs-topic__empty {
	padding-block: 32px;
	text-align: center;
	color: #6b7280;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.acs-pubs-hero__title {
		font-size: 24px;
	}

	.acs-pubs-hero .acs-hero__slide {
		flex-direction: column;
		min-height: unset;
	}

	/* On mobile the image stacks on top (visual top), panel below.
	   In RTL column-reverse keeps DOM order (panel first = reads first). */
	.acs-pubs-hero .acs-hero__media {
		flex: 0 0 200px;
		height: 200px;
	}

	.acs-pubs-hero .acs-hero__panel {
		padding: 20px 16px;
	}
}