/* ============================================================================
   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;
	padding-inline: 60px;
	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) ------------------------- */
.acs-program-more-row {
	margin-top: 32px;      /* from the last cards row */
	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 0;    /* 32px below the breadcrumb */
	font: 600 32px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-black);
}
.acs-phead__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 32px;           /* 32px each side of the «|» dividers */
	margin-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: flex-start;
	gap: 32px;
	margin-top: 32px;    /* 32px below the stats rail */
}
.acs-phead__text { flex: 1 1 auto; min-width: 0; }
.acs-phead__intro {
	margin: 0;
	font: 400 12px/1.5 "Readex Pro", sans-serif;
	color: var(--acs-black);
}
.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: 24px;
}
.acs-ptopic {
	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;
}
.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 {
	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: 18px;
	font-weight: 500;
}
.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) ────────────────────────────────── */
.acs-pgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* 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-pgrid .acs-plist__program { min-height: 26px; }

/* ── 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;
}
.acs-pbooks__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 24px;
	row-gap: 32px;
}
/* Odd count → the last book spans the full width. */
.acs-pbooks__grid > .acs-pbook:last-child:nth-child(odd) { grid-column: 1 / -1; }
.acs-pbook {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
.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); }
.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;
}
.acs-pbook__author:hover { color: var(--acs-teal); }
.acs-pbook__sep {
	padding-inline-end: 8px;
	color: var(--acs-gray);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@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; }
	.acs-pgrid { grid-template-columns: repeat(2, 1fr); }
	.acs-pbooks__grid { grid-template-columns: 1fr; }
	.acs-pbooks__grid > .acs-pbook:last-child:nth-child(odd) { grid-column: auto; }
	.acs-program-more { width: 100%; }
}
@media (max-width: 560px) {
	.acs-pgrid { grid-template-columns: 1fr; }
	.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: 16px; }
	/* 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; }
	/* 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; }
	.acs-phead__stat { min-width: 0; }
	.acs-phead__sep { font-size: 0; flex: 0 0 1px; width: 1px; padding: 0; background: rgba(35,31,32,.12); }
	.acs-phead__cols { margin-top: 24px; }
	/* 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; }

	/* «ورشات» → horizontal slider of COLUMNS: cards flow top-to-bottom into columns
	   of 3 (grid-auto-flow:column, 3 rows). Each column is WIDER than the screen
	   (100% + 70px) so the cards' covers (on the LEFT) are cut — the off-screen
	   left is the slide cue; the track scrolls inside itself (finger / arrows), it
	   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: calc(100vw + 40px); 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; }
	.acs-pwgrid > .acs-pwcard { scroll-snap-align: start; flex-direction: row; }
	.acs-pwcard__media { flex: 0 0 110px; }
	.acs-pwcard__img { width: 110px; height: auto; }
	.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; }
	.acs-mslider__btn--next { background: #068788; color: #fff; }
}