/* =====================================================================
   TABLET LAYER — 479px … 1024px  (plus one header block up to 1365px)
   ---------------------------------------------------------------------
   Everything here is tablet-only: each rule sits inside a width-bounded
   media query, so phones (≤478px) and desktops (≥1025px) render exactly
   as before. The single exception is §1b, the header nav squeeze for
   small laptops (1200–1365px), where the desktop menu did not fit.

   Loaded LAST on every front-end page (register.php → wp_footer), so it
   overrides the per-element sheets without editing them. To roll the
   whole tablet layer back, dequeue/delete this one file.

   Most selectors are class/structure based because the three header
   templates (Home / Pages / Black-video) and the per-page Bricks
   instances carry different #brxe-ids. Bricks emits per-instance
   styles as #brxe-<id> rules, hence the occasional !important.
   ===================================================================== */


/* ---------------------------------------------------------------------
   §1  HEADER — hamburger + off-canvas (the mobile pattern) up to 1199px
   The desktop nav needs ~1360px; below that it ran off the left edge and
   made every page scroll sideways. The off-canvas already holds the main
   menu, the top links and a search field.
   --------------------------------------------------------------------- */
@media (min-width: 479px) and (max-width: 1199px) {
	#brx-header .acs-hdr {
		justify-content: space-between;
		padding-inline: 32px;
		box-sizing: border-box;
	}
	/* Logo on the right, burger on the left (RTL: first child = right). */
	#brx-header .acs-hdr > .brxe-toggle {
		display: block !important;
		margin-inline-start: auto;
	}
	/* The nav + search row, and the teal programmes row under the logo bar
	   (only the Home template gives it .acs-hdrwrap__sub, so match by order).
	   Phones hide both the same way. */
	#brx-header .acs-hdr > .brxe-block,
	#brx-header > .brxe-section:has(.acs-hdr) ~ .brxe-section {
		display: none !important;
	}
}
@media (min-width: 479px) and (max-width: 1199px) {
	/* Off-canvas panel: the phone panel's spacing (it is full-width there),
	   at a fixed 400px so it reads as a drawer on the wider screen. */
	#brx-header .brxe-offcanvas .brx-offcanvas-inner {
		width: 400px !important;
		max-width: 100%;
		padding: 24px !important;
		gap: 24px !important;
		align-items: stretch !important;
		box-sizing: border-box;
	}
	#brx-header .brx-offcanvas-inner > .brxe-toggle {
		align-self: flex-end !important;
		color: #CB9B2A !important;
		font-size: 20px !important;
	}
	#brx-header .brx-offcanvas-inner > .brxe-toggle i { font-size: 20px !important; color: inherit !important; }
	#brx-header .brx-offcanvas-inner .brxe-search,
	#brx-header .brx-offcanvas-inner .bricks-search-form { width: 100% !important; display: flex; }
	#brx-header .brx-offcanvas-inner .bricks-search-form input[type=search] { flex: 1 1 auto; width: auto !important; min-width: 0; }
}
@media (min-width: 479px) and (max-width: 1024px) {
	/* Teal utility row: its links live in the off-canvas too; keep the
	   social icons only, like the phone header. */
	#brx-header .acs-hdrwrap__util .brxe-nav-menu {
		display: none !important;
	}
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-header .acs-hdr { padding-inline: 24px; }
}

/* §1b  Small laptops 1200–1365px: keep the desktop menu, tighten it so it
   fits (smaller logo, gaps and type) with a 32px side gutter. */
@media (min-width: 1200px) and (max-width: 1365px) {
	#brx-header .acs-hdr {
		column-gap: 32px !important;
		padding-inline: 32px;
		box-sizing: border-box;
	}
	#brx-header .acs-hdr > .brxe-logo img {
		width: 280px !important;
		height: auto !important;
	}
	#brx-header .acs-hdr__nav .bricks-nav-menu {
		column-gap: 12px !important;
	}
	#brx-header .acs-hdr__nav .bricks-nav-menu > li > a,
	#brx-header .acs-hdr__nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
		font-size: 15px !important;
	}
}


/* ---------------------------------------------------------------------
   §2  FOOTER
   The about column (logo + text) shrank to ~74px with vertical text, and
   the bottom-bar links wrapped. Stack like the phone footer, but keep two
   columns where they fit. There is a single footer template, so its
   #brxe-ids are stable:
     #brxe-kimhbn  newsletter (#brxe-04bace) | social (#brxe-16afdd)
     #brxe-emwvkm  [ links (#brxe-6720dd) | contact (#brxe-bb15d1) ] = #brxe-820c8e,
                   then about: logo + text (#brxe-003443)
     #brxe-ec0f23  bottom bar: copyright | links menu
   --------------------------------------------------------------------- */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-footer #brxe-kimhbn { gap: 32px !important; align-items: flex-start !important; }
	#brx-footer #brxe-04bace { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
	#brx-footer #brxe-16afdd { flex: 0 0 auto !important; width: auto !important; }
	#brx-footer .mc4wp-form,
	#brx-footer .mc4wp-form-fields { width: 100% !important; max-width: 100% !important; }
	#brx-footer .mc4wp-form-fields > p:first-child { flex: 1 1 auto; min-width: 0; }
	#brx-footer .mc4wp-form-fields > p:first-child input { width: 100% !important; }

	#brx-footer #brxe-emwvkm { flex-direction: column !important; gap: 40px !important; }
	#brx-footer #brxe-820c8e {
		width: 100% !important;
		max-width: none !important;
		gap: 32px !important;
		justify-content: space-between !important;
	}
	#brx-footer #brxe-6720dd,
	#brx-footer #brxe-bb15d1 { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
	/* About block: logo beside the text, full width under the columns. */
	#brx-footer #brxe-003443 {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: none !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 32px !important;
	}
	#brx-footer #brxe-003443 > .brxe-logo { flex: 0 0 200px !important; width: 200px !important; }
	#brx-footer #brxe-003443 > .brxe-logo img { width: 200px !important; height: auto !important; }
	#brx-footer #brxe-003443 > .brxe-text-basic { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
	/* Bottom bar: copyright above, links on one wrapping line below. Its
	   section has a fixed desktop height, which left the links hanging
	   below the dark background once they moved to their own line. */
	#brx-footer > .brxe-section:last-child {
		height: auto !important;
		min-height: 0 !important;
		padding-block: 16px !important;
	}
	#brx-footer > .brxe-section:last-child > .brxe-container {
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
		text-align: center;
		height: auto !important;
	}
	#brx-footer > .brxe-section:last-child .bricks-nav-menu {
		flex-wrap: wrap !important;
		justify-content: center;
		row-gap: 8px !important;
	}
	#brx-footer > .brxe-section:last-child .bricks-nav-menu a {
		white-space: nowrap;
	}
	/* 479–767px: Bricks collapses this menu into its own burger
	   (mobile_landscape); show the plain links instead. */
	#brx-footer .bricks-nav-menu-wrapper.mobile_landscape { display: block !important; }
	#brx-footer .bricks-mobile-menu-toggle { display: none !important; }
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-footer #brxe-kimhbn,
	#brx-footer #brxe-820c8e,
	#brx-footer #brxe-003443 { flex-direction: column !important; align-items: stretch !important; }
	#brx-footer #brxe-04bace,
	#brx-footer #brxe-6720dd,
	#brx-footer #brxe-bb15d1 { flex: 0 0 auto !important; width: 100% !important; }
	#brx-footer #brxe-003443 > .brxe-logo { flex: 0 0 auto !important; }
	/* Bricks' own ≤767px settings turn these into rows; keep them stacked. */
	#brx-footer #brxe-04bace,
	#brx-footer #brxe-16afdd { flex-direction: column !important; align-items: flex-start !important; flex-wrap: nowrap !important; }
	#brx-footer #brxe-osjwcj { width: 100% !important; max-width: 100% !important; }
}


/* ---------------------------------------------------------------------
   §3  PAGE GUTTER
   Desktop centres content with max-width wrappers; phones get 16px from
   Bricks. In between, content ran edge to edge (first letters clipped).
   The gutter goes on the SECOND level (section › block/element), the way
   Bricks pads phones: those are full-width rows, and padding never insets
   an element's own background, so white/teal bands stay edge to edge
   while their content moves in.
   --------------------------------------------------------------------- */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content > * > * {
		padding-inline: 32px !important;
		box-sizing: border-box;
		/* the wrappers are flex columns aligned to the start, so a widget
		   with little content (e.g. the news list) shrank to its content */
		width: 100%;
	}
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-content > * > * { padding-inline: 24px !important; }
}


/* ---------------------------------------------------------------------
   §3b TABLET CAROUSELS
   Card rows that do not fit as a grid become the phone's swipe carousel
   (.acs-cslider — homepage.js binds every one at any width) with its
   round prev/next buttons (.acs-cnav, display:none above phones).
     479–899px   programme cards (featB)
     479–1024px  «أخبار المركز» / related news, «فيديوهات أخرى»,
                 «مختارات» (buttons only)
     479–860px   «منشورات ذات صلة»
   --------------------------------------------------------------------- */
@media (min-width: 479px) and (max-width: 899px) {
	.brxe-acs-cards-b .acs-cslider__track {
		display: flex !important; gap: 16px; overflow-x: auto;
		scroll-snap-type: x mandatory; scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.brxe-acs-cards-b .acs-cslider__track::-webkit-scrollbar { display: none; }
	.brxe-acs-cards-b .acs-cslider__track > * { flex: 0 0 auto; scroll-snap-align: start; }
	.brxe-acs-cards-b .acs-cnav { display: flex; }
}
@media (min-width: 479px) and (max-width: 1024px) {
	.acs-newscards .acs-cslider__track {
		display: flex !important; gap: 16px; overflow-x: auto;
		scroll-snap-type: x mandatory; scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.acs-newscards .acs-cslider__track::-webkit-scrollbar { display: none; }
	.acs-newscards .acs-cslider__track > * { flex: 0 0 auto; scroll-snap-align: start; }
	.acs-newscards .acs-cnav,
	.acs-curated .acs-cnav { display: flex; }
	/* «فيديوهات أخرى» on the video single: 5 cards came out 3 + 2 */
	#brx-content .acs-cslider__track.acs-vmore__grid {
		display: flex !important; gap: 16px; overflow-x: auto;
		scroll-snap-type: x mandatory; scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	#brx-content .acs-vmore__grid::-webkit-scrollbar { display: none; }
	#brx-content .acs-vmore__grid .acs-vmore-card { flex: 0 0 260px; width: 260px; scroll-snap-align: start; }
	.brxe-acs-video-more .acs-cnav { display: flex; }
}
@media (min-width: 479px) and (max-width: 860px) {
	#brx-content .acs-scards__grid.acs-scards__track--related {
		display: flex !important; gap: 16px; overflow-x: auto;
		scroll-snap-type: x mandatory; scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	#brx-content .acs-scards__track--related::-webkit-scrollbar { display: none; }
	#brx-content .acs-scards__track--related > * { scroll-snap-align: start; }
	#brx-content .acs-scards--related .acs-cnav { display: flex; }
}
/* The button look, copied from the phone block in homepage.css. It only
   shows where one of the rules above switched the toolbar on. */
@media (min-width: 479px) and (max-width: 1024px) {
	.acs-cnav { justify-content: flex-end; gap: 16px; padding: 0 8px; margin-top: 16px; }
	.acs-cnav__btn {
		display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
		width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
		background: #fff; color: #168E7E; cursor: pointer;
		box-shadow: .63px 0 2.53px 0 rgba(0, 0, 0, .15);
	}
	.acs-cnav__btn svg { width: auto; height: 16px; fill: currentColor; }
	.acs-cnav__btn--prev svg { transform: scaleX(-1); }
}


/* ---------------------------------------------------------------------
   §4  HOMEPAGE
   --------------------------------------------------------------------- */

/* §4.1 Hero: above 820px the slide is [ text | 753px image ], which left
   the title a ~230px column at 1024. Balance the split and step the title
   down. (≤820px it already stacks, image first.) */
@media (min-width: 821px) and (max-width: 1024px) {
	.acs-hero__slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; }
	.acs-hero__title { font-size: 26px; }
	.acs-hero__excerpt {
		display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
		-webkit-box-orient: vertical; overflow: hidden;
	}
}
@media (min-width: 479px) and (max-width: 820px) {
	.acs-hero__title { font-size: 26px; }
}

/* §4.2 Programme cards (featB: المنتدى السنوي / الذاكرة السورية / …):
   2 columns left a hole and a 150px text column. ≥900px: three columns,
   image on top. Below: the swipe carousel (§3b) with the phone's 429px card. */
@media (min-width: 900px) and (max-width: 1024px) {
	.brxe-acs-cards-b .acs-cslider__track { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.acs-featB__row { flex-direction: column; }
	.acs-featB__img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
@media (min-width: 479px) and (max-width: 899px) {
	.brxe-acs-cards-b .acs-featB { width: 429px; box-sizing: border-box; }
	.brxe-acs-cards-b .acs-featB__desc { font-size: 16px; font-weight: 500; }
}

/* §4.3 «أخبار المركز»: five cards squeezed into one row (cut at 768).
   Use the phone carousel (homepage.js already binds every .acs-cslider)
   with tablet-sized cards; track + buttons come from §3b. */
@media (min-width: 479px) and (max-width: 1024px) {
	.acs-newscards .acs-card { width: 260px; box-sizing: border-box; }
	.acs-newscards .acs-card__img { width: 100%; height: 146px; aspect-ratio: auto; object-fit: cover; }
}

/* §4.4 «أحدث المنشورات»: ≤820px the 3-card top row went to 2 columns (one
   empty cell) and the side cards stacked into 550px-tall blocks. Dissolve
   the wrappers (as the phone layout does) into one even 2-column grid. */
@media (min-width: 479px) and (max-width: 820px) {
	.acs-cslider__track.acs-latest__track {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.acs-latest__track > .acs-grid,
	.acs-latest__track .acs-latest__row2,
	.acs-latest__track .acs-latest__side,
	.acs-latest__track .acs-latest__feature { display: contents; }
	.acs-latest__track .acs-card { height: auto; }
	.acs-latest__track .acs-card--h,
	.acs-latest__track .acs-card--big { flex-direction: column; }
	.acs-latest__track .acs-card__media { flex: 0 0 auto; }
	.acs-latest__track .acs-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 0; object-fit: cover; }
	.acs-latest .acs-card--h .acs-card__body,
	.acs-latest .acs-card--big .acs-card__body { justify-content: space-between; padding: 16px; }
	.acs-latest .acs-card--big .acs-card__title { font-size: inherit; }
}

/* §4.5 Magazine: cover beside the contents on tablets (it stacked and left
   the cover floating with empty space), CTA full width below. */
@media (min-width: 601px) and (max-width: 1024px) {
	.acs-magazine__main { grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; padding-top: 40px; }
	.acs-magazine__ribbon { --acs-ribbon-w: 130px; top: -36px; }
}
@media (min-width: 479px) and (max-width: 900px) {
	.acs-magazine__cols { row-gap: 16px; }
	.acs-magazine__aside .acs-cta,
	.acs-magazine__aside .acs-cta--boxed { width: 100% !important; max-width: none !important; height: auto; }
}
@media (min-width: 479px) and (max-width: 600px) {
	.acs-magazine__main { row-gap: 24px; padding-top: 51px; }
	.acs-magazine__cover { justify-content: center; }
	.acs-magazine__ribbon { top: -50px; inset-inline-start: 16px; }
}

/* §4.6 Events (homepage + «اتصل بنا»): the labels row is 300/494/494px and
   each card is [text | 258px image], so titles ran one word per line and
   the date slid under the image. Tablet: equal columns, image on top. */
@media (min-width: 768px) and (max-width: 1024px) {
	.acs-events__labels { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline-start: 0; }
	.acs-events__label--past { grid-column: 2 / span 2; }
	.acs-events__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 479px) and (max-width: 1024px) {
	.acs-events__grid .acs-event-card { flex-direction: column-reverse; height: auto !important; overflow: visible; }
	.acs-events .acs-event-card__media { flex: 0 0 auto; }
	.acs-events .acs-event-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
/* Narrow tablets: one card per row, text beside a 45% image (the phone
   card direction), so three cards don't leave an empty grid cell. */
@media (min-width: 479px) and (max-width: 767px) {
	/* Interleave each label with its cards, like the phone layout. */
	.acs-events { display: flex; flex-direction: column; gap: 16px; }
	.acs-events__labels,
	.acs-events__grid { display: contents; }
	.acs-events__label { order: 1; }
	.acs-event-card--upcoming { order: 2; }
	.acs-events__label--past { order: 3; }
	.acs-events__past > * { order: 4; }
	.acs-events .acs-event-card { flex-direction: row; height: auto !important; }
	.acs-events .acs-event-card__media { flex: 0 0 45%; }
}

/* §4.7 «مختارات» slider: its arrows only appear on :hover, which a touch
   screen cannot do — the swipe buttons (§3b) replace them. */
@media (min-width: 479px) and (max-width: 1024px) {
	.acs-curated__slider .acs-arrow { display: none; }
}


/* ---------------------------------------------------------------------
   §5  SHARED ARCHIVE PIECES (.acs-topic__*)
   Used by the news, publications, publication-type and research-topic
   pages. #brx-content prefixes beat the per-page sheets' longer selectors.
   --------------------------------------------------------------------- */

/* §5.1 Featured block. ≤860px it stacks, and the two side cards kept
   their desktop row geometry: a 340–372px image on the right and an empty
   left half. Put them side by side as two vertical cards. */
@media (min-width: 479px) and (max-width: 860px) {
	#brx-content .acs-topic__featured-side {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	#brx-content .acs-topic__featured-side .acs-card--h { flex-direction: column; }
	#brx-content .acs-topic__featured-side .acs-card--h .acs-card__media { flex: 0 0 auto; max-width: none; }
	#brx-content .acs-topic__featured-side .acs-card--h .acs-card__img {
		width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 0; object-fit: cover;
	}
}
/* 861–1024px: two columns, but the side cards' fixed 340–372px image left
   their text ~200px (titles clipped mid-line). Share the row instead. */
@media (min-width: 861px) and (max-width: 1024px) {
	#brx-content .acs-topic__featured-side .acs-card--h .acs-card__media { flex: 0 0 45%; max-width: 45%; }
	#brx-content .acs-topic__featured-side .acs-card--h .acs-card__img { width: 100%; height: 100%; object-fit: cover; }
}

/* §5.2 List + «من مكتبة الفيديو» aside. At 861–1024px the aside was ~235px
   (title overlapping «المزيد من الفيديو») and squeezed the rows. Below 861px
   the site already hides it; do the same up to 1024px. Below 861px the list
   was also pinned to the phone width (358px, a narrow centred column), and
   the topic page's list subtracts another 120px — fill the row instead. */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content .acs-topic__layout,
	#brx-content div.acs-browse-cols,
	#brx-content div.acs-browse-cols.acs-browse-cols--inset {
		grid-template-columns: minmax(0, 1fr) !important;
		width: 100% !important;
		max-width: none !important;
	}
	#brx-content .acs-topic__aside,
	#brx-content .acs-video-aside { display: none !important; }
}

/* §5.3 News archive grid: the list now has the full row (no aside), so
   3 columns on wide tablets; 2 on narrow ones (it dropped to 1 at 600px,
   leaving 550px-wide cards). */
@media (min-width: 861px) and (max-width: 1024px) {
	#brx-content .acs-newsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 479px) and (max-width: 860px) {
	#brx-content .acs-newsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------------
   §6  PUBLICATION SINGLE (and singles built the same way)
   Bricks row: [ main: title + (meta | body) ]  [ side: cover, PDF, CTA ].
   The desktop 3-column layout was crammed in: side ~130px, author bio one
   word per line, cover cut off. Matched by structure (:has), not template
   ids: the row is the one holding the post title AND the CTA column.
   --------------------------------------------------------------------- */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content div:has(> div > .brxe-post-title):has(> div > .acs-cta) {
		flex-wrap: wrap !important;
		row-gap: 40px !important;
	}
	#brx-content div:has(> div > .brxe-post-title):has(> div > .acs-cta) > div {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: none !important;
	}
	/* Side column → a strip under the article: cover + PDF on the right,
	   the «دعوة إلى الكتابة» card filling the rest. */
	#brx-content div:has(> .brxe-post-title) ~ div:has(> .acs-cta) {
		display: grid !important;
		grid-template-columns: 200px minmax(0, 1fr);
		column-gap: 24px;
		row-gap: 16px;
		align-items: start;
	}
	#brx-content div:has(> .brxe-post-title) ~ div:has(> .acs-cta) > :not(.acs-cta) { grid-column: 1; width: 100% !important; }
	#brx-content div:has(> .brxe-post-title) ~ div:has(> .acs-cta) > .acs-cta { grid-column: 2; grid-row: 1 / span 3; width: 100% !important; }
	#brx-content div:has(> .brxe-post-title) ~ div:has(> .acs-cta) img { width: 100% !important; height: auto !important; }
}
/* Meta column (date, author, topics, contents) beside the body: give it a
   real width on wide tablets; stack it above the body on narrow ones. */
@media (min-width: 768px) and (max-width: 1024px) {
	#brx-content div:has(> .brxe-post-title) > div:has(> div + div) > div:first-child {
		flex: 0 0 220px !important;
		width: 220px !important;
		max-width: none !important;
	}
	#brx-content div:has(> .brxe-post-title) > div:has(> div + div) > div:last-child {
		flex: 1 1 0 !important;
		min-width: 0;
		width: auto !important;
	}
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-content div:has(> .brxe-post-title) > div:has(> div + div) { flex-wrap: wrap !important; row-gap: 24px; }
	#brx-content div:has(> .brxe-post-title) > div:has(> div + div) > div {
		flex: 1 1 100% !important; width: 100% !important; max-width: none !important;
	}
	#brx-content div:has(> .brxe-post-title) ~ div:has(> .acs-cta) { grid-template-columns: 160px minmax(0, 1fr); }
}

/* §6.1 «منشورات ذات صلة»: ≤860px it fell to one column of 700px-wide
   cards. Swipe carousel (§3b) with 300px cards. */
@media (min-width: 479px) and (max-width: 860px) {
	#brx-content .acs-scards__track--related > * { flex: 0 0 300px; width: 300px; box-sizing: border-box; }
	#brx-content .acs-scards__track--related .acs-scard__img { width: 100%; height: 169px; aspect-ratio: auto; object-fit: cover; }
}


/* ---------------------------------------------------------------------
   §7  PUBLICATIONS ARCHIVE + FILTER BANDS
   --------------------------------------------------------------------- */

/* §7.1 Featured: big card + three cards. ≤1024px the three went to 2
   columns, leaving one card alone beside an empty half. */
@media (min-width: 600px) and (max-width: 1024px) {
	#brx-content .acs-pubs-hero__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 479px) and (max-width: 599px) {
	#brx-content .acs-pubs-hero__track { grid-template-columns: minmax(0, 1fr); }
}

/* §7.2 «يمكنك البحث حسب» filter band (publications, books, research
   topic…): a white full-width band with 60px side padding on desktop. The
   gutter above inset the band; let the band itself carry the gutter. */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content > * > .brxe-acs-archive-filter { padding-inline: 0 !important; }
	#brx-content .acs-topic__browse-bar { padding-inline: 32px; }
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-content .acs-topic__browse-bar { padding-inline: 24px; }
}

/* §7.3 List rows (research topic, publication type, search, tags, author,
   publications). ≤860px the topic / type rows stacked into full-width cards
   with 400px-tall images — they were sized for the 358px phone column. Now
   the list has the full row: keep every list a row of [text | 45% image].
   The header search popup (vertical cards) is left alone. */
@media (min-width: 479px) and (max-width: 860px) {
	#brx-content .acs-plist:not(.acs-search-overlay__list) .acs-plist__item {
		flex-direction: row;
		height: auto;
		min-height: 0;
	}
	#brx-content .acs-plist:not(.acs-search-overlay__list) .acs-plist__item .acs-plist__media {
		flex: 0 0 45%;
		width: 45%;
		max-height: none;
		aspect-ratio: 16 / 9;
		align-self: flex-start;
	}
	#brx-content .acs-plist:not(.acs-search-overlay__list) .acs-plist__body { flex: 1 1 0; min-width: 0; overflow: visible; }
}


/* ---------------------------------------------------------------------
   §8  SEARCH RESULTS (?s=)
   ≤1024px the sidebar filter is meant to stack above the list, but it kept
   its 330px desktop width (empty space beside it) with all five groups
   open, so the results began ~1700px down. Full width, groups in a grid.
   --------------------------------------------------------------------- */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content .acs-results-filter--sidebar {
		float: none;
		width: 100% !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}
	#brx-content .acs-results-filter--sidebar .acs-results-filter__inner { max-width: none; padding-inline: 0; }
	#brx-content .acs-results-filter--sidebar .acs-fside {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 8px;
		align-items: start;
		width: auto;
	}
	#brx-content .acs-results-filter--sidebar .acs-fside__group { border-bottom: 0; padding-bottom: 0; min-width: 0; }
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-content .acs-results-filter--sidebar .acs-fside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------------
   §9  MAGAZINE (archive + issue single)
   --------------------------------------------------------------------- */

/* §9.1 Archive head: ≤900px the band stacks, but the «هيئة التحرير» card
   and its two buttons stayed ~440px wide on the right. */
@media (min-width: 479px) and (max-width: 900px) {
	#brx-content .acs-magarc-head__side { width: 100%; align-self: stretch; }
}
/* §9.2 «أحدث الأعداد» featured issue: ≤900px it stacked, leaving the cover
   alone on the right of a wide teal box. Keep cover beside text. */
@media (min-width: 601px) and (max-width: 900px) {
	#brx-content .acs-magarc-card--featured { flex-direction: row; gap: 24px; }
}
/* The three compact issue cards at 861–1024px: smaller cover so the
   «قراءة العدد كاملًا» button stays on one line. */
@media (min-width: 861px) and (max-width: 1024px) {
	#brx-content .acs-magarc-card--compact .acs-magarc-card__cover { padding: 12px; }
	#brx-content .acs-magarc-card--compact .acs-magarc-card__cover img { width: 96px; height: auto; }
	#brx-content .acs-magarc-card--compact .acs-magarc__btn { white-space: nowrap; }
}
/* §9.3 «الأعداد السابقة» + the «العدد القادم» teaser column beside it
   (~170px, one or two words per line): teaser goes full width under the list. */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content .brxe-section:has(> div > .acs-magarc-teaser-el) {
		flex-wrap: wrap !important;
		row-gap: 32px;
	}
	#brx-content .brxe-section:has(> div > .acs-magarc-teaser-el) > div {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: none !important;
	}
	#brx-content .acs-magarc-teaser-el,
	#brx-content .acs-magarc-teaser-el .acs-magarc-teaser { width: 100%; box-sizing: border-box; }
}

/* §9.4 Issue single: Bricks row [ article | side: cover + CTA ]. Same
   treatment as the publication single (§6): side becomes a strip under the
   article, cover on the right, «دعوة إلى الكتابة» card beside it. */
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content div:has(> div > .acs-magcover) {
		flex-wrap: wrap !important;
		row-gap: 40px !important;
	}
	#brx-content div:has(> div > .acs-magcover) > div {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: none !important;
	}
	#brx-content div:has(> .acs-magcover) {
		display: grid !important;
		grid-template-columns: 200px minmax(0, 1fr);
		column-gap: 24px;
		align-items: start;
	}
	#brx-content div:has(> .acs-magcover) > .acs-magcover { grid-column: 1; width: 100% !important; }
	#brx-content div:has(> .acs-magcover) > .acs-magcover img { width: 100% !important; height: auto !important; }
	#brx-content div:has(> .acs-magcover) > :not(.acs-magcover) { grid-column: 2; width: 100% !important; }
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-content div:has(> .acs-magcover) { grid-template-columns: 160px minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------
   §10 EVENTS ARCHIVE, BOOKS, VIDEO ARCHIVE
   --------------------------------------------------------------------- */

/* §10.1 «فعاليات قادمة» hero: a 719px image left the text ~200px at 1024. */
@media (min-width: 821px) and (max-width: 1024px) {
	#brx-content .acs-ehero__media { flex: 0 0 50%; width: 50%; height: auto; aspect-ratio: 719 / 394; }
}
/* §10.2 Past-events grid: [text | 265px image] cards in 2 columns left a
   ~150px text column. Image on top; 3 columns wide, 2 narrow (it fell to
   one 700px column below 900px). */
@media (min-width: 479px) and (max-width: 1024px) {
	/* the card height is a fixed style control; in column-reverse a fixed
	   height pushed the image up over the filter bar */
	#brx-content .acs-earch-card { flex-direction: column-reverse; height: auto !important; min-height: 0 !important; }
	#brx-content .acs-earch-card__media { width: 100%; height: auto; aspect-ratio: 265 / 149; }
}
@media (min-width: 861px) and (max-width: 1024px) {
	#brx-content .acs-earch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 479px) and (max-width: 860px) {
	#brx-content .acs-earch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* §10.3 Books featured card: the 376px cover frame took half the card at
   768 (title 1–2 words per line). Narrower frame beside the text. */
@media (min-width: 601px) and (max-width: 1024px) {
	#brx-content .acs-books-hero__featured { flex-direction: row; gap: 24px; }
	#brx-content .acs-books-hero__cover-wrap {
		flex: 0 0 240px; width: 240px; max-width: none;
		padding: 40px 16px 16px; align-self: flex-start;
	}
}

/* §10.4 Video archive grid: 4 auto-fit columns left 2 + 2 empty cells. */
@media (min-width: 768px) and (max-width: 1024px) {
	#brx-content .acs-varch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-content .acs-varch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------------
   §11 BRICKS-BUILT PAGES (من نحن / فريق العمل / اتصل بنا / programme)
   Matched by structure, so the pages keep working if blocks are reordered.
   --------------------------------------------------------------------- */

/* §11.1 A row of [ list block | image block ] («الأهداف» on «من نحن»):
   the two widths added up to more than the row, so the photo sat on top
   of the checklist. Share the row (≥768) or put the photo first. */
@media (min-width: 768px) and (max-width: 1024px) {
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) {
		flex-wrap: nowrap !important;
		gap: 24px !important;
		align-items: flex-start !important;
	}
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) > div:has(> ul.brxe-list) {
		flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important;
	}
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) > div:has(> img.brxe-image) {
		flex: 0 0 38% !important; width: 38% !important; max-width: none !important;
	}
}
@media (min-width: 479px) and (max-width: 767px) {
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) {
		flex-direction: column-reverse !important; gap: 24px !important;
	}
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) > div {
		flex: 0 0 auto !important; width: 100% !important; max-width: none !important;
	}
}
@media (min-width: 479px) and (max-width: 1024px) {
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) img.brxe-image {
		width: 100% !important; height: auto !important;
	}
	/* the image block carries a negative desktop margin (a deliberate overlap
	   at full width) — that is what slid it over the list */
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) > div { margin-inline: 0 !important; }
	/* the «الأهداف» list carries a fixed desktop width of its own */
	#brx-content div:has(> div > ul.brxe-list):has(> div > img.brxe-image) ul.brxe-list {
		width: auto !important; max-width: 100% !important; min-width: 0 !important;
	}
}

/* §11.2 «استكشف المواضيع البحثية» panel: in a row, the chip block got
   ~200px and its 8 chips stacked into one tall column. Stack the panel the
   phone way (head, chips, «الكل»). */
@media (min-width: 479px) and (max-width: 900px) {
	.acs-topics__panel { flex-direction: column; align-items: start; }
	.acs-chips { flex: 0 0 auto; justify-content: start; }
	.acs-topics__all { align-self: flex-end; }
}

/* §11.3 «أحدث المنشورات» with only the 3-card top row (team / about pages):
   the 2-column grid of §4.4 left a lone card. Three columns instead. */
@media (min-width: 600px) and (max-width: 820px) {
	.acs-cslider__track.acs-latest__track:not(:has(.acs-latest__row2)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* §11.4 «اتصل بنا»: [ info list | info list | form ] in one row gave 240px
   columns («صندوق / البريد» on two lines). Lists side by side, form below. */
@media (min-width: 479px) and (max-width: 900px) {
	#brx-content .brxe-container:has(> div > ul.brxe-list):has(form) { flex-wrap: wrap !important; }
	#brx-content .brxe-container:has(> div > ul.brxe-list):has(form) > div {
		flex: 1 1 calc(50% - 16px) !important; width: auto !important; max-width: none !important;
	}
	#brx-content .brxe-container:has(> div > ul.brxe-list):has(form) > div:has(form) { flex-basis: 100% !important; }
}

/* §11.5 Programme intro card [ text | image ]: ~275px text column at 768.
   Image on top, as on phones. */
@media (min-width: 479px) and (max-width: 860px) {
	body.single-program #brx-content .brxe-container:has(> div > .brxe-text-basic):has(> div > img.brxe-image) {
		flex-direction: column-reverse !important;
	}
	body.single-program #brx-content .brxe-container:has(> div > .brxe-text-basic):has(> div > img.brxe-image) > div {
		width: 100% !important; max-width: none !important;
	}
}