/* ============================================================================
   Program single — «مفرد: البرنامج»
   Styles for the acs-program-* Bricks elements (RTL). Numbers come from the
   client's Figma spec; shared type/colour follow the site design system.
   Enqueued on is_singular('program') and pulled into the Bricks canvas by each
   element's enqueue_scripts().
   ========================================================================== */

.acs-program {
	--acs-teal: #068788;
	--acs-gray: #9c999a;
	--acs-black: #231f20;
	direction: rtl;
	text-align: right;
	font-family: "Readex Pro", sans-serif;
	color: var(--acs-black);
}

.acs-program__inner {
	max-width: 1440px;   /* 1320px content + 2×60px side padding = the 1440 frame */
	margin-inline: auto;
	box-sizing: border-box;
}

/* Inter-section vertical rhythm (client spec). Each element is its own Bricks
   widget, so the gap between two sections lives on the LOWER one's top. Zero any
   Bricks section padding on the template so these are the only gaps. */
.acs-program-head    { padding-top: 24px; }
.acs-program-topics  { margin-top: 32px; padding-top: 16px; padding-bottom: 32px; }
.acs-program-workshops { margin-top: 32px; }
.acs-program-pubs    { margin-top: 0; }        /* no gap after the workshops «المزيد» */
.acs-program-books   { margin-top: 0; }        /* no gap after the pubs «المزيد»; 22px top lives on the heading */

/* Workshops + publications section heading: box padding 16 (top/bottom/right) +
   a 16px gap down to the cards (client spec), overriding the site default 32. */
.acs-program-workshops .acs-section__head,
.acs-program-pubs .acs-section__head {
	padding: 16px 16px 16px 0;
	margin-bottom: 16px;
}

.acs-program--placeholder {
	padding: 24px;
	background: #f7f7f7;
	color: var(--acs-gray);
	border-radius: 4px;
	font-family: "Readex Pro", sans-serif;
}

/* Shared «المزيد» button (workshops + publications) ------------------------- */
/* The 32px "last-cards-row → next" gap lives on the GRID's margin-bottom (below),
   NOT here — so the spacing survives when there is no «المزيد» button (few items)
   and the next section can't collapse against the cards. */
.acs-program-more-row {
	margin-top: 0;
	padding-top: 8px;
	padding-bottom: 24px;
	display: flex;
	justify-content: center;
}
.acs-program-more {
	width: 776px;
	max-width: 100%;
	height: 48px;
	border: 0;
	border-radius: 10px;
	background: var(--acs-teal);
	color: #fff;
	font: 500 16px/1.5 "Readex Pro", sans-serif;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s ease, background .15s ease;
}
.acs-program-more:hover { background: #05716f; }
.acs-program-more.is-loading { opacity: .7; pointer-events: none; }

/* ── 1. Hero header (acs-program-head) ─────────────────────────────────── */
.acs-phead__title {
	margin: 32px 0 32px;    /* 32px below the breadcrumb */
	font: 600 32px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-black);
}
.acs-phead__stats {
	display: flex;
	flex-flow: row-reverse;
    justify-self: start;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 32px;           /* 32px each side of the «|» dividers */
	padding-top: 32px;    /* 32px below the title */
}
.acs-phead__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.acs-phead__sep {
	align-self: stretch;
	color: var(--acs-gray);
	font: 400 24px/1.5 "Readex Pro", sans-serif;
	display: flex;
	align-items: center;
}
.acs-phead__num {
	font: 600 24px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-black);
}
.acs-phead__lbl {
	font: 400 12px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-gray);
}
.acs-phead__cols {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;    /* 32px below the stats rail */
	background: white;
    border-radius: 4px;
}
.acs-phead__text { flex: 1; min-width: 0; }
.acs-phead__intro {
	margin: 0;
	font: 300 18px / 1.5 "Readex Pro", sans-serif;
	color: var(--acs-black);
	padding: 16px 60px 16px 16px;
}
.acs-phead__media { flex: 0 1 719px; margin: 0; }
.acs-phead__img {
	width: 719px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 719 / 404;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

/* ── 2. Topics chips (acs-program-topics) ──────────────────────────────── */
.acs-ptopics__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.acs-ptopic {
	/* fixed 294px cells, 8px apart → 4 per row on the 1200+ inner; long titles
	   wrap to a new line inside their own cell rather than widening it */
	flex: 0 0 294px;
	max-width: 294px;
	white-space: normal;
	font: 600 16px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-gray);
	text-decoration: none;
	transition: color .15s ease;
}
.acs-ptopic:hover { color: var(--acs-teal); }

/* ── 3. Workshops / events (acs-program-workshops) ─────────────────────── */
.acs-pwgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 32px;   /* last cards row → «المزيد» / next section (client spec) */
}
.acs-pwcard {
	display: flex;
	gap: 16px;           /* between the text column and the thumbnail */
	box-sizing: border-box;
	min-height: 184px;
	padding: 16px;
	background: #fff;
	border-radius: 4px;
}
.acs-pwcard__media { flex: 0 0 265px; }
.acs-pwcard__img {
	width: 265px;
	max-width: 100%;
	height: 145px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}
.acs-pwcard__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.acs-pwcard__title {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	font: 500 18px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-black);
	text-decoration: none;
}
.acs-pwcard__title:hover { color: var(--acs-teal); }
/* The grey research-topics line (shared .acs-plist__program). Homepage.css pins
   it to the card bottom with margin-top:auto — reset it here so it sits in the
   16px-gap flow under the title, at this card's size (18/500). */
.acs-pwcard .acs-plist__program {
	margin-top: 0;
	padding-top: 0;
	font-size: 12px;
	font-weight: 400;
}
.acs-pwcard__date {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: auto;   /* pinned to the card bottom; aligns at the 16px card inset like the title */
}
.acs-pwcard__day {
	font: 500 32px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-gray);
}
.acs-pwcard__my {
	font: 400 12px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-gray);
}

/* ── 4. Publications (acs-program-pubs) ────────────────────────────────── */
/* Uses the SHARED grid + card (.acs-grid acs-grid--N + acs_pub_card_html), so the
   card typography matches latest / workshop-pubs / topic hero verbatim — we only
   set the 24px column gap (the shared --acs-gap isn't defined on this page) and
   the 32px cards → «المزيد»/next gap on the grid itself. */
.acs-program-pubs .acs-grid {
	--acs-gap: 24px;
	gap: 24px;
	margin-bottom: 32px;
}
/* The pub card's grey research-topics footer uses the shared .acs-plist__program
   styling (homepage.css — 12/400 muted, padding-top:8px). Reserve one line even
   when empty (  placeholder) so cards in a row keep the same height. */
.acs-program-pubs .acs-plist__program { min-height: 26px;color: #9C999A; }

/* Publication card TYPOGRAPHY — the global .acs-card__title is 700/16px
   (homepage.css); every singular content page re-scopes it to the design-system
   18/500 title + 12/400 meta (see single.css: `.acs-topic .acs-card__title` and
   `.acs-wspubs .acs-card__title`). We mirror that same declaration here so the
   program pubs read identically to the topic / workshop publication cards. */
.acs-program-pubs .acs-card__title {
	font-family: "Readex Pro", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}
.acs-program-pubs .acs-card__meta,
.acs-program-pubs .acs-card__date,
.acs-program-pubs .acs-byline__name,
.acs-program-pubs .acs-byline__name a {
	font-family: "Readex Pro", sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color:#9C999A
}
/* type badge « | » date separator — same as the topic page */
.acs-program-pubs .acs-card__date::before {
	content: "|";
	margin-inline-end: 8px;
	color: var(--acs-border, #c9d1d1);
	font-weight: 400;
}

/* ── 5. Books (acs-program-books) ──────────────────────────────────────── */
.acs-program-books { background: #fff; }
.acs-program-books .acs-section__head {
	padding-top: 22px;
	padding-right: 24px;
	margin-bottom: 46px;
}
.acs-program-books .acs-section__title {
	font: 600 18px/1.5 "Readex Pro", sans-serif;
	padding-inline-start: 0;
}
/* Column count comes from the element's «عدد الأعمدة» control via
   .acs-pbooks__grid--N (default 2 = client Figma). */
.acs-pbooks__grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 24px;
	row-gap: 32px;
	padding: 0 24px 24px 24px;
}
.acs-pbooks__grid--1 { grid-template-columns: 1fr; }
.acs-pbooks__grid--3 { grid-template-columns: repeat(3, 1fr); }
.acs-pbooks__grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 2 columns + odd count → the last book spans the full width. */
.acs-pbooks__grid--2 > .acs-pbook:last-child:nth-child(odd) { grid-column: 1 / -1; }
.acs-pbook {
	display: flex;
	width: 100%;           /* fill the grid column (belt-and-braces if the grid ever falls back to flow) */
	align-items: flex-start;
	gap: 24px;
	flex-direction: row-reverse;
}
.acs-pbook__media { flex: 0 0 auto; }
.acs-pbook__img {
	width: 118.72px;
	height: 158.3px;
	box-sizing: border-box;
	object-fit: cover;
	border: 0.49px solid #e2e2e2;
	border-radius: 1.98px;
	padding: 5.94px;
	background: #fff;
	display: block;
}
.acs-pbook__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 16px;
}
.acs-pbook__title {
	display: block;
	font: 500 18px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-black);
	text-decoration: none;
}
.acs-pbook__title:hover { color: var(--acs-teal); }
/* Excerpt — clamped to exactly 2 lines (with «…»); min-height reserves both
   lines for short excerpts so the authors line stays aligned across a row. */
.acs-pbook__excerpt {
	margin: 8px 0 0;
	font: 300 14px/1.5 "Readex Pro", sans-serif;
	color: #9C999A;
	min-height: 3em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.acs-pbook__authors {
	margin-top: 16px;
	padding-block: 16px;
	font: 300 14px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-gray);
}
.acs-pbook__author {
	padding-block: 5px;
	padding-inline-end: 8px;
	color: var(--acs-gray);
	text-decoration: none;
	color:#068788;
	font-size: 400 12px/1.5 "Readex Pro", sans-serif;
}
.acs-pbook__author:hover { color: var(--acs-teal); }
.acs-pbook__sep {
	padding-inline-end: 8px;
	color: var(--acs-gray);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
/* 3/4 book columns leave too little room for the cover + text below desktop. */
@media (max-width: 1200px) {
	.acs-pbooks__grid--3,
	.acs-pbooks__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.acs-program__inner { padding-inline: 20px; }
	.acs-phead__cols { flex-direction: column; }
	.acs-phead__media { flex-basis: auto; width: 100%; }
	.acs-phead__img { width: 100%; }
	.acs-phead__stats { gap: 24px; }
	.acs-pwgrid { grid-template-columns: 1fr; }
	/* pubs use .acs-grid--3 → homepage.css already collapses it 3→2 (≤900) and
	   2→1 (≤600), so no bespoke rule is needed here. */
	.acs-pbooks__grid { grid-template-columns: 1fr; }
	.acs-pbooks__grid--2 > .acs-pbook:last-child:nth-child(odd) { grid-column: auto; }
	.acs-program-more { width: 100%; }
}
@media (max-width: 560px) {
	.acs-pwcard { flex-direction: column; }
	.acs-pwcard__media { flex-basis: auto; }
	.acs-pwcard__img { width: 100%; }
}
/* mobile peek-slider chrome (shared .acs-mslider) — arrow bar hidden on desktop,
   where the «ورشات» grid stays a normal 2-column grid. min-width:0 keeps the
   over-wide track scrolling INSIDE the wrapper instead of stretching the page. */
.acs-mslider { min-width: 0; }
.acs-mslider__nav { display: none; }
/* ── phones ── the tablet rules above already collapse every grid to one column;
   this block is phone POLISH: the site's 16px gutter, the mobile h1 size, and
   tighter rhythm/gaps so nothing looks zoomed-out on a ~390px screen. */
@media (max-width: 478px) {
	/* match the site-wide 16px phone gutter (the 900px rule sets 20px) */
	.acs-program__inner { padding-inline: 0px; }
	.acs-phead__num {
    font: 600 18px / 1.5 "Readex Pro", sans-serif;
}
	/* CONTAIN the over-wide «ورشات» slider — same as the magazine: the COLUMN width
	   is a DEFINITE viewport value (not a % of the track, which is circular and
	   makes the track grow instead of scroll), plus clip the page + section root as
	   belt-and-braces. The track's overflow-x:auto does the finger/arrow scroll. */
	body { overflow-x: clip; }
	.acs-program-workshops { min-width: 0; overflow-x: clip;margin-top: 24px;}
	/* the program h1 stays large/bold per the Figma hero (not the 24px used on the
	   news/topic pages) — «برنامج الانتقال السياسي» wraps to 2 lines at 28px */
	.acs-phead__title { margin-top: 16px; font-size: 28px; }
	/* stats (Figma): one row, order books → … → date (row-reverse of the desktop
	   date-first DOM), and the bold «|» separators are HIDDEN — kept only as a
	   hair-thin faint divider between cells. */
	.acs-phead__stats { gap: 12px; margin-top: 24px; flex-wrap: nowrap; flex-direction: row-reverse; align-items: flex-start;border-top: 1px solid #E8EEEA; }
	.acs-phead__stat { min-width: 0;align-self: stretch;justify-content: space-between;}
	.acs-phead__sep {align-self: start;padding: 0;height: 40px; font-size: 0; flex: 0 0 1px; width: 1px; padding: 0; background: rgba(35,31,32,.12); }
	.acs-phead__cols { margin-top: 16px; padding: 16px;width: 358px;margin-inline: auto;}
	.acs-phead__intro{padding: 0;}
	.acs-phead__top{margin-bottom: 24px;width: 390px;padding: 0 16px;}
	/* Figma phone order: the hero image sits ABOVE the intro text (desktop is
	   text-right ‖ image-left; the DOM is text-then-media, so the plain column
	   stack would put text first — flip just the image up on phones). */
	.acs-phead__media { order: -1; }
	/* «مواضيع البرنامج»: a VERTICAL list, one topic per line (Figma), not wrapped chips */
	.acs-ptopics__list { flex-direction: column; align-items: flex-start; gap: 16px; }
	/* books: bring the cover closer to its text, and drop the desktop 46px gap
	   under the heading to a phone rhythm */
	.acs-pbook { gap: 16px; }
	.acs-program-books .acs-section__head { padding-right: 16px; margin-bottom: 24px; }
	/* last cards → «المزيد» gap tightens a touch (pubs/books; workshops hides it) */
	.acs-program-more-row { margin-top: 24px; }
	.acs-section__title{padding-inline-start: 0px;}
	.acs-pwcard__title {
		-webkit-line-clamp: 3;
	}
	/* «ورشات» → horizontal slider of COLUMNS: cards flow top-to-bottom into columns
	   of 3 (grid-auto-flow:column, 3 rows). Each column is a fixed 612px card —
	   wider than the screen, so the cover (on the LEFT) is cut and the off-screen
	   part is the slide cue. Still a DEFINITE width, never a % of the track (which
	   is circular and grows the track instead of scrolling it); the track scrolls
	   inside itself (finger / arrows) and does NOT stretch the page. Cards stay
	   HORIZONTAL (image left, text right). */
	.acs-pwgrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: 612px; gap: 16px; min-width: 0; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.acs-pwgrid::-webkit-scrollbar { display: none; }
	/* card 612×211 (the base 16px padding + border-box are inherited). MUST stay
	   after the 560px block, which stacks the card and makes the image 100% wide —
	   same specificity, so order is what overrides it. overflow:hidden keeps an
	   unusually long topics line inside the fixed height instead of spilling out. */
	.acs-pwgrid > .acs-pwcard { scroll-snap-align: start; flex-direction: row; width: 612px; height: 211px; min-height: 0; overflow: hidden; }
	/* image 265×145 — the desktop size, restored after the 560px rule shrank it */
	.acs-pwcard__media { flex: 0 0 265px;align-self: center;}
	.acs-pwcard__img { width: 265px; height: 145px; }
	.acs-program-workshops .acs-program-more-row { display: none; }
	/* slider arrow bar (shared .acs-mslider chrome): two teal circles, bottom-left */
	.acs-mslider__nav { display: flex; direction: ltr; justify-content: flex-start; gap: 16px; margin-top: 16px; }
	.acs-mslider__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid #068788; border-radius: 50%; background: #fff; color: #068788; cursor: pointer; }
	.acs-mslider__btn svg { width: 22px; height: 22px; }
	/* «الأوراق البحثية» → a TWO-row slider of the same VERTICAL publication cards
	   (image on top, text below — unchanged from desktop). Same mechanism as the
	   «ورشات» slider above: columns flow sideways, each a DEFINITE 429px (never a %
	   of the track), and the track scrolls inside itself. Selectors are two
	   classes so they beat the shared .acs-grid--N / ≤600px 1fr columns in
	   homepage.css whatever the order; grid-template-columns:none drops those
	   explicit columns, which would otherwise make the first column 1fr wide. */
	.acs-program-pubs { min-width: 0; overflow-x: clip; }
	/* margin-bottom:0 — the desktop 32px cards→«المزيد» gap; the arrow bar brings its own 16px */
	.acs-ppslider .acs-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 429px; margin-bottom: 0; min-width: 0; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.acs-ppslider .acs-grid::-webkit-scrollbar { display: none; }
	/* card 429×444, image 429×235 — aspect-ratio has to be cleared, or the shared
	   .acs-card__img 16/9 fights the explicit height */
	.acs-ppslider .acs-grid > .acs-card { width: 429px; height: 444px; box-sizing: border-box; scroll-snap-align: start; }
	.acs-ppslider .acs-card__img { width: 429px; height: 235px; aspect-ratio: auto; object-fit: cover; }
	/* like «ورشات»: the slider replaces the «المزيد» paging on phones */
	.acs-program-pubs .acs-program-more-row { display: none; }
	/* «كتب صادرة في إطار المؤتمر» → a ONE-row slider of VERTICAL book cards (Figma):
	   cover on top, title, then the authors pinned to the card bottom so they line
	   up across cards whatever the title length. The DOM is body-then-cover (the
	   desktop row-reverse), so column-reverse lifts the cover above the text.
	   Two-class selectors beat the ≤900px `.acs-pbooks__grid { 1fr }` rule. */
	.acs-program-books { min-width: 0; overflow-x: clip; }
	.acs-pbslider .acs-pbooks__grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 144px; column-gap: 24px; width: auto; min-width: 0; max-width: 100%; padding: 0 16px; scroll-padding-inline: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.acs-pbslider .acs-pbooks__grid::-webkit-scrollbar { display: none; }
	/* card 144×329 */
	.acs-pbslider .acs-pbook { flex-direction: column-reverse; width: 144px; height: 329px; gap: 16px; overflow: hidden; scroll-snap-align: start; }
	/* cover 144×192 — the desktop inner frame padding is dropped so the cover fills it */
	.acs-pbslider .acs-pbook__img { width: 144px; height: 192px; padding: 0; }
	.acs-pbslider .acs-pbook__body {width: 100%; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-top: 0; }
	.acs-pbslider .acs-pbook__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
	.acs-pbslider .acs-pbook__excerpt { display: none; }
	.acs-pbslider .acs-pbook__authors { margin-top: auto; padding-block: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
	/* arrows line up with the 16px gutter; 24px bottom replaces the grid's desktop padding */
	.acs-pbslider .acs-mslider__nav { padding: 0 16px 24px; }
}