:root{
--acs-teal:#1c7c6e; --acs-teal-dark:#14594e; --acs-orange:#e8863a;
--acs-footer:#262a2e; --acs-bg:#E5EFED; --acs-text:#20242a; --acs-muted:#6a7178;
--acs-border:#e2e5e5; --acs-radius:4px; --acs-gap:16px;
/* Shared «دعوة إلى الكتابة» shapes texture (assets/images/cta-bg.png) */
--acs-cta-texture:url(images/cta-bg.png);
--acs-teal2:#068788; --acs-yellow:#CB9B2A; --acs-ink:#231F20;
/* Shared play badge (Figma play.svg): a #F7F7F7 disc with the triangle cut
out, so the thumbnail shows through it. Every play icon on the site —
cards, archive hero, results rows, single + workshop players — paints this
as its background, so a redesign is one edit here. The triangle is a HOLE
(opposite winding to the disc), which is why there is no ::after glyph. */
--acs-play-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 47'%3E%3Cpath fill='%23F7F7F7' d='M23.3333 0C10.4533 0 0 10.4533 0 23.3333C0 36.2133 10.4533 46.6667 23.3333 46.6667C36.2133 46.6667 46.6667 36.2133 46.6667 23.3333C46.6667 10.4533 36.2133 0 23.3333 0ZM18.6667 31.5V15.1667C18.6667 14.95 18.727 14.7376 18.8409 14.5533C18.9548 14.369 19.1178 14.2201 19.3116 14.1232C19.5054 14.0263 19.7223 13.9853 19.9381 14.0047C20.1539 14.0242 20.36 14.1033 20.5333 14.2333L31.43 22.4C32.06 22.8667 32.06 23.8 31.43 24.2667L20.5333 32.4333C20.36 32.5633 20.1539 32.6425 19.9381 32.662C19.7223 32.6814 19.5054 32.6404 19.3116 32.5435C19.1178 32.4466 18.9548 32.2977 18.8409 32.1134C18.727 31.9291 18.6667 31.7167 18.6667 31.5Z'/%3E%3C/svg%3E");
}
/*.acs-section{margin:48px 0}*/
.acs-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
/* phones: no gap of its own. Every section that needs one spaces its heading
with the wrapper's own `gap` (the workshop sections, the topics menu…), so the
32px only ever doubled it there. Per-widget overrides are two classes and keep
winning — .acs-scards--author's 24px, for one. */
@media(max-width:478px){.acs-section__head{margin-bottom:16px}}
.acs-section__title{font-size:1.5rem;font-weight:700;color:var(--acs-text);position:relative;padding-inline-start:14px}
/*.acs-section__title::before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--acs-teal);border-radius:2px}*/
/* The dash reads custom properties (current values as fallbacks) so the
standalone «ACS: عنوان قسم» element can retune it past the !important. */
.acs-section__title::after{content:"";position:absolute;align-self:center;width:var(--acs-title-dash-w,52px) !important;height:var(--acs-title-dash-h,4px);background:var(--acs-title-dash-c,#168E7E52);margin-inline-start:var(--acs-title-dash-gap,24px)}
.acs-title--nodash .acs-section__title::after{display:none}
.acs-section__more{color:var(--acs-teal);text-decoration:none;font-size:16px;font-weight:600}
.acs-grid{display:grid;gap:var(--acs-gap)}
.acs-grid--2{grid-template-columns:repeat(2,1fr)}
.acs-grid--3{grid-template-columns:repeat(3,1fr)}
.acs-grid--4{grid-template-columns:repeat(4,1fr)}
.acs-grid--5{grid-template-columns:repeat(5,1fr)}
.acs-grid--6{grid-template-columns:repeat(6,1fr)}
.acs-card{background:#fff;border:0;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
/* card lift on hover is topic-page only — news/latest use their own hover (see below) */
.acs-topic .acs-card:hover{box-shadow:0 10px 28px rgba(20,30,40,.15);transform:translateY(-3px)}
.acs-card__media{display:block}
.acs-card__img{aspect-ratio:16/9;object-fit:fill;width:100%;height:100%;display:block}
.acs-card__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;justify-content: center;}
.acs-card__title{font-size:1.02rem;font-weight:700;color:var(--acs-text);text-decoration:none;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acs-card__title:hover{color:var(--acs-teal)}
.acs-card__meta{font-size:.78rem;color:var(--acs-muted);margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.acs-card__typedate{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.acs-card__date{white-space:nowrap}
.acs-byline{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.acs-byline__author{display:inline-flex;align-items:center;gap:7px}
.acs-byline__sep{color:var(--acs-text);margin-inline-start:-3px}
.acs-byline__avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.acs-byline__name{color:var(--acs-text);font-weight:600}
.acs-byline__name a{color:inherit;text-decoration:none}
.acs-byline__name a:hover{color:var(--acs-teal);text-decoration:underline}
.acs-byline__avatar-link{display:inline-flex;flex:0 0 auto;line-height:0}
a.acs-magazine__contents-author{text-decoration:none}
a.acs-magazine__contents-author:hover{text-decoration:underline}
/* horizontal card (image beside text) */
.acs-card--h{flex-direction:row;align-items:stretch}
.acs-card--h .acs-card__media{flex:0 0 54%}
.acs-card--h .acs-card__img{aspect-ratio:auto;height:100%;min-height:130px}
.acs-card--h .acs-card__body{padding:16px 18px}
/* big featured card */
.acs-card--big{height:100%}
.acs-latest__feature{height:100%}
.acs-latest__feature .acs-card{height:100%}
.acs-card--big .acs-card__media{display:block;overflow:hidden;flex:0 0 auto}
.acs-card--big .acs-card__img{aspect-ratio:auto;width:100%;height:auto;object-fit:cover;display:block}
.acs-card--big .acs-card__title{font-size:1.15rem;-webkit-line-clamp:3}
/* latest editorial layout */
.acs-latest__top{margin-bottom:16px}
.acs-latest__row2{display:grid;grid-template-columns:773fr 531fr;gap:16px;align-items:stretch}
.acs-latest__side{display:flex;flex-direction:column;gap:16px}
.acs-latest__side .acs-card{flex:1}
/* ============================================================
SITE-WIDE card hover (except the homepage hero, which uses .acs-hero__*):
the image zooms and the title turns teal + underlines — the «أحدث المنشورات»
(acs-latest) effect applied to every card family, with NO lift/shadow.
Card families: .acs-card, .acs-vcard, .acs-plist__item (the .acs-topic list
rows already carry this in single.css; .acs-scard is added there too).
============================================================ */
.acs-card__media,.acs-vcard__media,.acs-plist__media{overflow:hidden}
.acs-card__img,.acs-vcard__img,.acs-plist__media img{transition:transform .35s ease}
.acs-card:hover .acs-card__img,
.acs-vcard:hover .acs-vcard__img,
.acs-plist__item:hover .acs-plist__media img{transform:scale(1.06)}
/* !important: Bricks' global link-hover Theme Style emits an ID-level rule
(#brxe-… a:hover) that otherwise overrides the colour and can strip the
underline on these card-title links. */
.acs-card:hover .acs-card__title,
.acs-vcard:hover .acs-vcard__title,
.acs-plist__item:hover .acs-plist__title{color:#068788 !important;text-decoration:underline !important}
/* drop the old lift/shadow so the hover matches latest exactly */
.acs-topic .acs-card:hover,.acs-plist__item:hover{box-shadow:none;transform:none}
/* all latest images fully rounded 4px; horizontal (side) cards center their text */
.acs-latest .acs-card__img{border-radius:4px}
.acs-latest .acs-card--h .acs-card__body{justify-content:center}
.acs-latest .acs-card--h .acs-card__meta{margin-top:8px}
/* big feature card: center the title+byline+date block vertically (cancel the meta's push-to-bottom) */
.acs-latest .acs-card--big .acs-card__body{justify-content:center}
.acs-latest .acs-card--big .acs-card__meta{margin-top:8px}
/* ---- phones: two-row carousel ----
The editorial layout keeps its six cards in three containers; display:contents
dissolves those so every card becomes an item of ONE grid, which then flows in
columns — two rows tall, scrolling sideways. The wrappers stay in the markup,
so desktop is untouched.
The track overrides the shared .acs-cslider__track display:flex with a
two-class selector, so it wins on specificity rather than on file order. */
@media(max-width:478px){
.acs-cslider__track.acs-latest__track{display:grid;grid-auto-flow:column;grid-auto-columns:318px;grid-template-rows:repeat(2,auto);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}
/* the shared `> *` snap rule lands on the dissolved wrappers, which have no
box — so the cards carry the snap themselves */
.acs-latest__track .acs-card{width:318px;height:384px;box-sizing:border-box;scroll-snap-align:start}
/* every variant renders as the plain vertical card here: --big is height:100%
off .acs-latest__feature, --h is a row, and both set their own image box */
.acs-latest__track .acs-card__img{width:318px;height:174px;aspect-ratio:auto;object-fit:cover}
/* Every card is the same 318x384 box now, so the text spreads to fill it —
title at the top, meta pinned to the bottom — instead of floating in the
middle the way the desktop --h and --big cards do. All three are scoped to
.acs-latest so the shared card families elsewhere keep their own spec, and
each is one class deeper than the rule it replaces. */
.acs-latest .acs-card--h .acs-card__body,
.acs-latest .acs-card--big .acs-card__body{justify-content:space-between}
/* the taller card has room for 4 lines, where the desktop clamps are 2 (base)
and 3 (--big) */
.acs-latest .acs-card__title,
.acs-latest .acs-card--big .acs-card__title{-webkit-line-clamp:4;line-clamp:4}
/* even 16px all round, not the desktop 16/18 */
.acs-latest .acs-card--h .acs-card__body{padding:16px}
}
/* أخبار المركز (news) cards: image inset 4px + rounded; body 16/16/8 margins; Readex fonts */
.acs-newscards .acs-card>a:first-child{display:block}
.acs-newscards .acs-card__img{border-radius:4px}
.acs-newscards .acs-card__body{padding:16px}
.acs-newscards .acs-card__title{font-family:"Readex Pro",sans-serif;font-weight:500;font-size:16px;line-height:1.5;text-align:right;-webkit-line-clamp:3}
.acs-newscards .acs-card__date{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5;text-align:right}
/* phones: carousel card + image sizes (track/toolbar come from .acs-cslider).
aspect-ratio has to be cleared — the .acs-card__img base sets 16/9, which
would fight the explicit 215×141. */
@media(max-width:478px){
.acs-newscards .acs-card{width:251px;height:315px;box-sizing:border-box}
.acs-newscards .acs-card__img{width:251px;height:141px;aspect-ratio:auto;object-fit:cover;border-radius:4px;margin-inline:auto}
}
@media(max-width:820px){.acs-latest__row2{grid-template-columns:1fr}.acs-card--h{flex-direction:column}.acs-card--h .acs-card__media{flex:auto}.acs-card--h .acs-card__img{aspect-ratio:16/9}}
.acs-badge{display:inline-block;padding:2px 10px;border-radius:4px;color:#fff;font-size:12px;background:var(--acs-teal)}
.acs-datechip{background:var(--acs-orange);color:#fff;border-radius:6px;padding:4px 8px;font-weight:700;text-align:center;line-height:1.1}
/* hero */
.acs-hero__slider{position:relative}
/* Slides are stacked in one grid cell (so the track keeps the tallest slide's
height) and cross-slide with a transform the JS drives; overflow hides the
incoming/outgoing slide while it is off to the side. */
.acs-hero__track{position:relative;display:grid;overflow:hidden}
.acs-hero__slide{grid-area:1/1;display:grid;grid-template-columns:1fr 753px;gap:32px;align-items:start;opacity:0;visibility:hidden;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s ease,visibility .5s}
.acs-hero__slide.is-active{opacity:1;visibility:visible;transform:none}
.acs-hero__slide.is-leaving{opacity:0;visibility:visible;pointer-events:none}
@media(prefers-reduced-motion:reduce){.acs-hero__slide{transition:none}}
.acs-hero__panel{gap:16px}
.acs-hero__title{display:block;font-family:"Readex Pro",sans-serif;font-size:32px;line-height:1.5;font-weight:500;color:#231F20;text-decoration:none;margin-bottom:16px}
.acs-hero__title:hover{color:var(--acs-teal-dark);text-decoration:underline}
.acs-hero__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:400;line-height:1.5}
.acs-hero__meta-main{display:inline-flex;align-items:center;gap:8px}
.acs-hero__type{background:rgba(6,135,136,.12);color:#231F20;font-size:12px;font-weight:400;line-height:1.5;padding:2px 8px;border-radius:4px}
.acs-hero__sep{color:#9C999A}
.acs-hero__date{color:#9C999A}
.acs-hero__authors{color:var(--acs-teal2);font-weight:400}
.acs-hero__excerpt{color:#131313;font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:300;line-height:1.5}
.acs-hero__media{display:block;position:relative;background:var(--acs-teal);border-radius:var(--acs-radius);overflow:hidden}
.acs-hero__img{display:block;width:100%;object-fit:fill;}
.acs-hero__dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.acs-hero__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--acs-border);cursor:pointer;transition:width .2s}
.acs-hero__dot.is-active{width:26px;border-radius:6px;background:var(--acs-teal)}
/* shared slider arrows (hero / curated / videos) */
.acs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:64px;height:64px;border-radius:50%;border:0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#168E7E;box-shadow:0 2px 6px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,box-shadow .15s}
.acs-arrow:hover{box-shadow:0 6px 16px rgba(0,0,0,.25)}
.acs-arrow svg{width:auto;height:30px;fill:currentColor;stroke:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.acs-arrow--prev svg{transform:scaleX(-1)}
.acs-arrow--prev{inset-inline-start:8px}
.acs-arrow--next{inset-inline-end:8px}
/* arrows appear only while hovering the slider; they pop in bigger, then settle */
@keyframes acs-arrow-pop{from{transform:translateY(-50%) scale(1.35)}to{transform:translateY(-50%) scale(1)}}
.acs-hero__slider:hover .acs-arrow,.acs-curated__slider:hover .acs-arrow,.acs-videos__track:hover .acs-arrow,.acs-arrow:focus-visible{opacity:1;visibility:visible;animation:acs-arrow-pop .7s cubic-bezier(.22,.61,.36,1)}
/* ===== shared mobile carousel (.acs-cslider + .acs-cnav) =====
Opt-in per widget from PHP: `acs-cslider` on the root, `acs-cslider__track` on
the grid, acs_nav_buttons() for the toolbar. Everything below is layout only —
each widget sets its own card size in its own block. homepage.js binds every
.acs-cslider on the page (initCarousel).
Above the breakpoint the track stays whatever it already was (a plain
.acs-grid) and the toolbar is not rendered visually, so adding the hooks to a
widget costs nothing on desktop. */
.acs-cnav{display:none}
@media(max-width:478px){
/* display:flex beats .acs-grid's display:grid on order alone (one class
each) — which is also why any grid-template-columns further down the file
stops mattering here. scroll-snap lands a free swipe on a card edge. */
.acs-cslider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.acs-cslider__track::-webkit-scrollbar{display:none}
/* every direct child is a slide, whatever class the widget gives it */
.acs-cslider__track>*{flex:0 0 auto;scroll-snap-align:start}
/* toolbar at the bottom, inline end — the left in RTL */
.acs-cnav{display:flex;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}
/* base triangle points left (= next, the way the track travels in RTL); the
prev button mirrors it to point right */
.acs-cnav__btn--prev svg{transform:scaleX(-1)}
}
.acs-hero__authors a{color:inherit;text-decoration:none}
.acs-hero__authors a:hover{text-decoration:underline}
@media(max-width:820px){.acs-hero__slide{grid-template-columns:1fr}.acs-hero__media{order:-1}.acs-hero__img{clip-path:none}}
/* Phones (Bricks' Mobile Portrait). The 479–820px band above stays as it is —
single column, 32px gap, arrows on — and is the tablet pass, done separately.
Arrows go because they are revealed on :hover, which a touch screen cannot
express; display:none also drops them from the tab order, which is right for
a control that cannot be reached. The dots stay: with the arrows gone they
are the only visible way to change slide. Scoped to the hero — the curated
and video sliders keep their own arrows. */
@media(max-width:478px){
.acs-hero__slider .acs-arrow{display:none}
.acs-hero__slide{gap:16px}
/* Meta stacks: type+date on one line, authors under it. align-items has to be
reset too — as a row it centred the two groups vertically, but in a column
it is the horizontal axis, so `center` would centre both lines instead of
hanging them off the inline start (the right, in RTL). space-between is
left as-is: with no height on the box it has nothing to distribute. */
.acs-hero__meta{flex-direction:column;align-items:flex-start}
/* two lines, then ellipsis */
.acs-hero__excerpt{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* ===== events hero (ACS: هيرو الفعاليات) =====
Rides the .acs-hero__slider engine above — same slide transition, same dots,
same hover-revealed arrows — and only re-lays out the slide: text panel first
(right in RTL), image second. The panel stretches to the image height so the
date always lands in its bottom-start (right) corner. Sizes/gap/background
here are the defaults; the element's style controls override them. */
.acs-ehero__slide{display:flex;align-items:stretch;gap:32px}
.acs-ehero__panel{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.acs-ehero__title{display:block;font-family:"Readex Pro",sans-serif;font-size:24px;font-weight:500;line-height:1.5;color:#231F20;text-decoration:none;margin-bottom:16px}
.acs-ehero__title:hover{color:var(--acs-teal);text-decoration:underline}
.acs-ehero__excerpt{margin:0;color:#131313;font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:300;line-height:1.5}
/* margin-top:auto drops the date to the bottom of the panel; align-self keeps it
on the inline start, i.e. the right edge in RTL. Day scales with the block's
font-size (em) so one typography control moves both parts together. */
.acs-ehero__date{margin-top:auto;align-self:flex-start;display:flex;align-items:baseline;gap:6px;padding-top:16px;font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:#9C999A}
.acs-ehero__day{font-size:2.6667em;font-weight:500;line-height:1;color:inherit}
.acs-ehero__month{white-space:nowrap}
/* flex-basis stays auto so the width control (default 719px) drives the column,
while shrink:1 + min-width:0 let it narrow instead of overflowing. */
.acs-ehero__media{flex:0 1 auto;width:719px;height:394px;min-width:0;max-width:100%;display:block;border-radius:var(--acs-radius);overflow:hidden}
.acs-ehero__img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
.acs-ehero__slide{flex-direction:column}
/* align-self, because the panel-height stretch of the desktop row makes no
sense stacked — and it is what keeps the image centred when the width
control caps it below the column's full width */
.acs-ehero__media{order:-1;width:100%;height:auto;aspect-ratio:719/394;align-self:center}
.acs-ehero__date{padding-top:12px}
}
/* style A cards (image + overlay title) */
.acs-featA{position:relative;display:block;border:6px solid var(--acs-teal);border-radius:var(--acs-radius);overflow:hidden;transition:box-shadow .25s ease}
.acs-featA:hover{box-shadow:0 10px 26px rgba(20,30,40,.18)}
.acs-featA__img{width:100%;aspect-ratio:16/9;object-fit:fill;display:block}
.acs-featA__overlay{position:absolute;inset-inline:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.acs-featA__title{color:#fff;font-weight:700;font-size:1.1rem;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.6);transition:transform .3s ease}
.acs-featA__desc{color:#fff;font-family:"Readex Pro",sans-serif;font-weight:300;font-size:14px;line-height:1.5;text-align:right;text-shadow:0 1px 6px rgba(0,0,0,.6);max-height:0;opacity:0;overflow:hidden;transform:translateY(10px);transition:max-height .35s ease,opacity .3s ease,transform .3s ease;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}
.acs-featA:hover .acs-featA__desc{max-height:4.5em;opacity:1;transform:translateY(0)}
/* style B highlights */
.acs-featB{display:flex;flex-direction:column;gap:0}
.acs-featB__title{color:var(--acs-teal-dark);font-weight:700;position:relative;padding-inline-start:12px;padding-bottom:16px}
.acs-featB__row{display:flex;gap:14px;align-items:flex-start}
.acs-featB__title::after {content: "";position: absolute;top: 20px !important ;width: 52px !important ;height: 4px;background: #168E7E52;margin-inline-start: 24px;}
.acs-featB__img{width:168px;height:92px;flex:0 0 auto;object-fit:cover;border-radius:6px;display:block}
.acs-featB__desc{flex:1;color:var(--acs-muted);font-size:.9rem;line-height:1.7}
@media(max-width:480px){.acs-featB__row{flex-direction:column}.acs-featB__img{width:100%;height:auto;aspect-ratio:16/9}}
/* ---- phones: the featB grid becomes a swipe carousel ----
MUST stay after the 480px block above, which stacks the row and blows the
image up to 100% — same specificity, so order is what overrides it. Only the
card/image/text sizes live here; the track and toolbar come from the shared
.acs-cslider component below. */
@media(max-width:478px){
.acs-featB{width:429px;height:199px;box-sizing:border-box}
/* image beside the text again — image first, so the right in RTL */
.acs-featB__row{flex-direction:row}
.acs-featB__img{width:168px;height:92px;flex:0 0 auto;aspect-ratio:auto;border-radius:4px}
.acs-featB__desc{font-size:16px;font-weight:500}
}
/* magazine */
.acs-magazine__issue-title{font-size:1.3rem;font-weight:800;line-height:1.7;color:var(--acs-text);margin:4px 0 28px}
/* two blocks side by side: the grey panel (cover + contents) and the CTA, 16px apart.
align-items:stretch makes both columns share the row's height — the shorter one
grows so the two backgrounds (grey panel ↔ CTA) end on the same line, whatever
the contents count. */
.acs-magazine__cols{display:grid;grid-template-columns:minmax(0,1fr) 305px;column-gap:16px;align-items:stretch}
/* the panel: cover ↔ contents = 32px, on a #F7F7F7 card with 16px side padding.
align-content:start keeps the rows at the top, so if the CTA is the taller column
the extra height is just empty grey at the bottom — the cover image only ever
fills its own content row, so it is never over-stretched. */
.acs-magazine__main{display:grid;grid-template-columns:324px minmax(0,1fr);column-gap:32px;align-items:start;align-content:start;background-color:#F7F7F7;border-radius:4px;padding:16px}
/* the CTA column fills its full stretched height so its #E5EFED background reaches
the bottom of the grey panel beside it */
.acs-magazine__aside{display:grid}
.acs-magazine__aside .acs-cta{height:100%;box-sizing:border-box}
.acs-magazine__contents{padding-inline:0}
.acs-magazine__invite{background-color:var(--acs-bg);background-image:var(--acs-cta-texture,none);background-repeat:no-repeat;background-position:top left;background-size:50%;border-radius:var(--acs-radius);padding:24px;align-self:start;height:100%}
.acs-magazine__intro{color:var(--acs-muted);font-size:16px;line-height:1.8;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acs-magazine__invite-label{display: block;color: #068788;font-weight: 500;font-size: 18px;line-height: 150%;margin-bottom: 14px;}
.acs-magazine__invite-title{color:#231F20;line-height:150%;font-weight:600;font-family:"Readex Pro";font-size:18px;margin:0 0 10px}
.acs-magazine__invite-text{color:var(--acs-muted);font-size:.9rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:10;line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
.acs-magazine__invite-text p{margin:0 0 10px}
.acs-magazine__invite-more{display:inline-block;margin-top:14px;color:var(--acs-teal);text-decoration:none;font-size:16px;font-weight:600}
.acs-magazine__contents-title{display:block;font-weight:700;color:var(--acs-text);text-decoration:none;margin-bottom:16px;}
.acs-magazine__contents-list{list-style:none;margin:0;padding:0}
.acs-magazine__contents-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--acs-border)}
.acs-magazine__contents-author{font-size:12px;font-weight:400;line-height:150%;color:#068788;white-space:nowrap}
.acs-magazine__contents-heading{font-size:16px;font-weight:300;line-height:150%;color:#231F20}
.acs-magazine__btn{display:block;text-align:center;background:var(--acs-teal);color:#fff;border-radius:6px;padding:12px 22px;text-decoration:none;font-weight:600}
.acs-magazine__cover{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:flex-end}
.acs-magazine__cover-img{height:100%;width:auto;max-width:100%;display:block;border-radius:24px 24px 0 0}
/* ribbon: the gold banner (images/ribbon.svg) with the label written on it.
The element itself is only the banner's flat middle plate — the graphic is
drawn by ::before, which is bigger than the box and overflows it so the two
tails stick out past the sides and below. Ratios measured off the asset:
inside its square, the plate is 59.57% × 22.07%, top-left at 20.12% / 38.87%,
so plate height = 0.3705 × plate width. Change --acs-ribbon-w to resize. */
.acs-magazine__ribbon{
--acs-ribbon-w:145px;
position:absolute;top:0px;inset-inline-start:8px;z-index:2;
box-sizing:border-box;
width:var(--acs-ribbon-w);
height:calc(var(--acs-ribbon-w) * .3705);
display:flex;align-items:center;justify-content:center;
padding:0 10px;
background:none;border-radius:0;box-shadow:none;
font-family:"Readex Pro",sans-serif;
font-size:14px;font-weight:600;line-height:150%;color:#FFFFFF;
text-align:center;
}
.acs-magazine__ribbon::before{
content:"";
position:absolute;z-index:-1;top:0;left:0;
width:calc(100% / .5957); /* the whole square, scaled to this plate */
aspect-ratio:1;
transform:translate(-20.12%,-38.87%); /* slide the plate onto the box */
background:url("images/ribbon.svg") no-repeat center/100% 100%;
}
@media(max-width:900px){.acs-magazine__cols,.acs-magazine__main{grid-template-columns:1fr}}
/* ---- phones ----
The 900px rule above has already stacked __main into one column, so the cover
and the contents list sit one above the other — which is why the cover↔text
spacing is a ROW gap on the grid, not a margin on either box. __main only ever
set column-gap, so there was no row gap at all until now. */
@media(max-width:478px){
.acs-magazine__issue-title{margin:4px 0 16px}
/* stacked by the 900px rule, so this is the panel↔CTA spacing. __cols only
ever set column-gap too, so the row gap was 0. */
.acs-magazine__cols{row-gap:16px}
/* the extra top padding is headroom for the ribbon, which now hangs 35px
above the cover (top:-35px below) instead of sitting inside it; the bottom
matches so the panel stays visually balanced. The side padding stays at the
base 16px. */
.acs-magazine__main{row-gap:24px;padding-top:51px}
/* justify-content is the inline axis of this flex box — flex-end parks the
cover against the right in RTL, center brings it back to the middle. The
ribbon is absolutely positioned, so it tracks the cover regardless. */
.acs-magazine__cover{justify-content:center}
.acs-magazine__ribbon{--acs-ribbon-w:145px;top:-38px;inset-inline-start:16px}
/* border-box because the boxed CTA carries 24px of its own padding — without
it the panel would come out 358+48 wide. */
.acs-magazine__aside .acs-cta--boxed{width:358px;height:460px;box-sizing:border-box}
}
/* events */
.acs-events__labels{display:grid;grid-template-columns:300px 494px 494px;gap:var(--acs-gap);margin-bottom:18px}
.acs-events__label{font-weight:600;color:#068788;padding:6px 0}
.acs-events__label.is-active{color:#068788;text-decoration: underline;}
.acs-events__label--past{grid-column:2/span 2}
.acs-events__grid{display:grid;gap:var(--acs-gap);grid-template-columns:300px 494px 494px}
@media(max-width:900px){.acs-events__grid{grid-template-columns:repeat(2,1fr)}.acs-events__labels{grid-template-columns:repeat(2,1fr)}.acs-events__label--past{grid-column:1/-1}}
@media(max-width:600px){.acs-events__grid{grid-template-columns:1fr}.acs-events__labels{grid-template-columns:1fr}.acs-events__label--past{grid-column:1}}
.acs-event-card{display:flex;align-items:stretch;gap:16px}
.acs-event-card--upcoming{max-width:100%;background:#E5EFED!important;border-radius:var(--acs-radius);padding:16px}
.acs-event-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.acs-event-card__title{font-size:18px;font-weight:500;line-height:150%;color:#231F20;text-decoration:none}
.acs-event-card__title:hover{color:var(--acs-teal)}
.acs-event-card__date{margin-top:auto;display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:400;line-height:150%;color:#9C999A}
.acs-event-card__day{font-size:32px;font-weight:500;color:#9C999A}
.acs-event-card__media{flex:0 0 300px;display:block}
.acs-event-card__img{width:300px;height:204px;object-fit:cover;border-radius:var(--acs-radius);display:block}
/* the two wrappers are transparent by default, so the cards remain direct
children of the 300/494/494 grid exactly as before the carousel was added */
.acs-events__up,.acs-events__past{display:contents}
@media(max-width:600px){.acs-event-card{flex-direction:column}.acs-event-card__media{flex:auto}.acs-event-card__img{width:100%;height:auto;aspect-ratio:300/204}}
/* ---- phones: upcoming card first, then the past events as a carousel ----
MUST stay after the 600px block above, which stacks the card and stretches
its image — same specificity, so order is what overrides it.
The design interleaves the labels with their content (قادمة → card →
سابقة → carousel), but the markup keeps both labels together in one row
ahead of the grid. Rather than reshuffle the DOM and lose the desktop row,
__labels and __grid dissolve with display:contents so everything lands as a
flex child of the section, and `order` puts them in the design's sequence. */
@media(max-width:478px){
.acs-events{display:flex;flex-direction:column;gap:16px}
.acs-events__labels,.acs-events__grid{display:contents}
/* two classes, to beat the display:contents base above */
.acs-cslider__track.acs-events__past{display:flex;gap:16px}
.acs-events__label{order:1}
.acs-event-card--upcoming{order:2;width:358px;height:204px;box-sizing:border-box}
/* after .acs-events__label — same specificity, so this must come later */
.acs-events__label--past{order:3}
.acs-events__past{order:4}
.acs-cnav{order:5}
/* text + date first, image after — the row direction the 600px rule undid */
.acs-events__past .acs-event-card{flex-direction:row;width:494px;height:204px;box-sizing:border-box}
.acs-events__past .acs-event-card__media{flex:0 0 265px}
.acs-events__past .acs-event-card__img{width:265px;height:145px;aspect-ratio:auto}
}
/* ===== past-events archive (ACS: أرشيف الفعاليات) =====
Full-bleed white band holding the teal filter panel, then a card grid and a
numbered pager. The filter fields borrow .acs-topic__filter-field so they get
the site's enhanced dropdown (homepage.js) and its styling (single.css).
Every value below is the default; the element's style controls override it. */
.acs-earch__bar{background:#fff;padding:32px 60px}
.acs-earch__panel{position:relative;box-sizing:border-box;max-width:1320px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px;border-radius:var(--acs-radius);background-color:var(--acs-bg,#E5EFED)}
.acs-earch__panel--plain{background-image:none}
/* The wrap and the form generate no box, so the panel's flex row sees exactly
the two children it always did — the fields and the calendar link. Both come
back as real boxes inside the phone block below, where the form is the sheet. */
.acs-earch__searchwrap,.acs-earch__form{display:contents}
.acs-earch__filters{display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
.acs-earch__label{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:24px;line-height:1.5;color:var(--acs-text)}
/* «تصفح تقويم المركز» — sits at the opposite end of the panel from the filters */
.acs-earch__cal{display:inline-flex;align-items:center;gap:8px;position:relative;z-index:2;color:var(--acs-teal2);font-family:"Readex Pro",sans-serif;font-weight:500;font-size:14px;line-height:1.5;text-decoration:none}
.acs-earch__cal:hover{text-decoration:underline}
.acs-earch__cal svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.acs-earch__go{border:0;background:var(--acs-teal);color:#fff;border-radius:var(--acs-radius);padding:6px 14px;cursor:pointer}
.acs-earch__body{max-width:1320px;margin-inline:auto;padding:32px 0}
.acs-earch__grid{display:grid;grid-template-columns:repeat(var(--acs-earch-cols,2),minmax(0,1fr));column-gap:16px;row-gap:16px}
.acs-earch__empty{color:var(--acs-muted);text-align:center;padding:40px 0}
/* card: fixed 145px tall, image locked to 265px wide and stretched to the inner
height, text column beside it with the date pinned to its bottom */
.acs-earch-card{display:flex;align-items:stretch;gap:16px;box-sizing:border-box;height:145px;padding:8px;background:#fff;border-radius:var(--acs-radius)}
.acs-earch-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:8px 8px 8px 0}
.acs-earch-card__title{font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:500;line-height:1.5;color:#231F20;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acs-earch-card__title:hover{color:var(--acs-teal)}
/* the program name, between title and date — phones only (see the 478px block) */
.acs-earch-card__program{display:none;font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:#9C999A}
.acs-earch-card__date{margin-top:auto;display:flex;align-items:baseline;gap:6px;font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:#9C999A}
.acs-earch-card__day{font-size:2.6667em;font-weight:500;line-height:1;color:inherit}
.acs-earch-card__month{white-space:nowrap}
.acs-earch-card__media{flex:0 0 auto;width:265px;max-width:100%;display:block;overflow:hidden;border-radius:var(--acs-radius)}
.acs-earch-card__img{width:100%;height:100%;object-fit:cover;display:block}
/* pager: 256px strip of 28px buttons, active one teal */
.acs-earch__pager{margin-top:48px;display:flex;justify-content:center}
.acs-earch__pager ul{display:flex;align-items:center;justify-content:center;gap:4px;list-style:none;margin:0;padding:4px 8px;width:256px;box-sizing:border-box}
.acs-earch__pager li{display:flex}
/* paginate_links() marks both the links and the current/dots spans with
.page-numbers, so one selector styles every button (and keeps the element's
style controls to a single, prefixable selector). */
.acs-earch__pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:28px;height:28px;border:0;border-radius:4px;background:#fff;color:#231F20;text-decoration:none;font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:500;line-height:1.5}
.acs-earch__pager .current{background:#068788;color:#fff}
.acs-earch__pager a.page-numbers:hover{background:var(--acs-bg,#E5EFED)}
.acs-earch__pager .dots{background:transparent}
@media(max-width:1100px){.acs-earch__bar{padding:24px}}
@media(max-width:900px){
.acs-earch__grid{grid-template-columns:1fr}
.acs-earch__panel{justify-content:flex-start}
}
@media(max-width:600px){
.acs-earch__bar{padding:16px}
.acs-earch-card{height:auto;flex-direction:column-reverse}
.acs-earch-card__media{width:100%;aspect-ratio:265/129}
.acs-earch-card__body{padding:8px}
}
/* the sheet chrome exists in the markup at every width but only shows on phones */
.acs-earch__trigger,.acs-earch__panelhead,.acs-earch__apply{display:none}
/* ---- phones: the filter fields become a button + full-screen sheet ----
The same component as the video archive's (see .acs-varch__searchwrap below,
and initVFilter in homepage.js, which drives both off the shared
data-acs-vfilter hooks). What becomes the sheet here is the FORM: the panel
stays put in the white band, holding the trigger and — outside the sheet —
«تصفح تقويم المركز», which is not a filter and should not need the sheet
opened to be reached. */
@media(max-width:478px){
/* the panel stacks its two remaining children: the trigger, then the calendar */
.acs-earch__panel{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:32px}
.acs-earch__trigger{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:12px 16px;border:0;border-radius:10px;background:#068788;color:#fff;cursor:pointer;font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:600;line-height:150%}
.acs-earch__trigger svg{width:20px;height:20px;flex:0 0 auto}
/* the form leaves the panel's flow and fills the screen. It brings its own
background and padding — the panel's are still behind it in the band. */
.acs-earch__form{display:none;position:fixed;inset:0;z-index:9995;box-sizing:border-box;padding:24px;background-color:var(--acs-bg,#E5EFED);overflow-y:auto}
/* a column, so the apply button can be pushed to the FOOT of the sheet —
sticky alone only pins once the content is tall enough to scroll, which two
collapsed dropdowns never are */
.acs-earch__searchwrap.is-open .acs-earch__form{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:16px}
/* head: × at the inline start, title, «مسح» pushed to the far end */
.acs-earch__panelhead{display:flex;align-items:center;gap:12px}
.acs-earch__paneltitle{display:inline-flex;align-items:center;gap:8px;font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:600;line-height:150%;color:#231F20}
.acs-earch__paneltitle svg{width:20px;height:20px;flex:0 0 auto}
.acs-earch__clear{margin-inline-start:auto;padding:0;border:0;background:none;color:#068788;cursor:pointer;font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:500}
.acs-earch__close{display:inline-flex;padding:0;border:0;background:none;color:#068788;cursor:pointer}
.acs-earch__close svg{width:20px;height:20px;display:block}
/* fields stack full width; the desktop label is redundant beside the sheet's
own title, which says the same thing */
.acs-earch__filters{flex-direction:column;align-items:stretch;gap:12px}
.acs-earch__label{display:none}
.acs-earch__form .acs-topic__filter-field{width:100%;box-sizing:border-box;background:#fff;border-radius:4px;padding:12px 16px;border-inline-start:0}
/* Accordion, not a dropdown: the enhanced panel drops into the flow so the
group expands in place. Three classes because single.css's own
.acs-select--multi .acs-select__list rules are two and load later. */
.acs-earch__form .acs-select .acs-select__list{position:static;min-width:0;max-height:none;padding:8px 0 0;border:0;box-shadow:none}
/* «تصفح تقويم المركز» sits under the button, on its own line */
.acs-earch__cal{align-self:flex-start}
/* margin-top:auto puts it on the foot of a short sheet; sticky keeps it there
once the dropdowns are open and the sheet does scroll */
.acs-earch__apply{display:block;position:sticky;bottom:0;z-index:1;width:100%;box-sizing:border-box;margin-top:auto;padding:12px 16px;border:0;border-radius:10px;background:#068788;color:#fff;cursor:pointer;font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:600;line-height:150%;text-align:center}
/* ---- cards: 358×380, image 358×196 on top ----
MUST stay after the 600px block above, which frees the height and gives the
image an aspect-ratio — same specificity, so order is what overrides it.
That block already flipped the card to column-REVERSE, which is what puts
the media (last in the DOM) on top; only the boxes change here.
The 358 is the 390px phone less the body's 16px insets, so the card takes
the column's full width rather than a hard-coded one. The card itself has no
padding — that is what keeps the image flush to its edges — and the 16px
sides live on the body instead. */
.acs-earch__body{padding-inline:16px}
.acs-earch-card{height:380px;padding:0;gap:16px;overflow:hidden}
.acs-earch-card__media{width:100%;height:196px;aspect-ratio:auto;border-radius:0}
.acs-earch-card__body{padding:0 16px 16px;gap:16px}
.acs-earch-card__program{display:block}
}
/* curated slider */
.acs-curated__slider{position:relative;width:100%}
.acs-curated__track{display:flex;width:100%;gap:var(--acs-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none;user-select:none}
.acs-curated__track::-webkit-scrollbar{display:none}
.acs-curated__track.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
.acs-curated__slide{flex:0 0 563px;width:563px;min-width:0;scroll-snap-align:start}
.acs-curated-card{height: 200px;display:flex;align-items:stretch;gap:16px;background:#fff;border-radius:4px;overflow:hidden}
.acs-curated-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;justify-content:flex-start}
.acs-curated-card__badges{min-height:22px}
.acs-curated-card__body .acs-badge{align-self:flex-start}
.acs-curated-card__body .acs-byline{margin-top:auto}
.acs-curated-card__title{font-size:1rem;font-weight:700;color:var(--acs-text);text-decoration:none;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acs-curated-card__title:hover{color:var(--acs-teal)}
.acs-curated-card__media{flex:0 0 281.13px;display:block;overflow:hidden;border-radius:4px}
.acs-curated-card__img{width:281.13px;height:154px;object-fit:cover;border-radius:4px;display:block;transition:transform .35s ease}
/* curated hover: same as latest — image zooms, title underlines and turns teal */
.acs-curated-card:hover .acs-curated-card__img{transform:scale(1.06)}
.acs-curated-card:hover .acs-curated-card__title{color:#068788 !important;text-decoration:underline}
@media(max-width:600px){.acs-curated__slide{flex-basis:85%;width:85%}.acs-curated-card{flex-direction:column}.acs-curated-card__media{flex:auto}.acs-curated-card__img{width:100%;height:auto;aspect-ratio:281.13/154}}
/* ---- phones ----
Already a carousel, so only the card geometry and the controls change. MUST
stay after the 600px block above, which stacks the card and makes the slide a
percentage — same specificity, so order is what overrides it.
The overlay arrows go for the same reason as the hero's: they are revealed on
:hover, which a touch screen cannot express. The .acs-cnav toolbar rendered
alongside them takes over, and both are wired to the same scroll handler. */
@media(max-width:478px){
.acs-curated__slider .acs-arrow{display:none}
.acs-curated__slide{flex:0 0 563px;width:563px}
/* text + date first, image after — the row direction the 600px rule undid */
.acs-curated-card{flex-direction:row;height:186px;box-sizing:border-box}
.acs-curated-card__media{flex:0 0 281px}
.acs-curated-card__img{width:281px;height:154px;aspect-ratio:auto}
/* two lines, then ellipsis — the base clamp of 3 does not fit the 186px card
once the badge and byline have taken their share */
.acs-curated-card__title{-webkit-line-clamp:2;line-clamp:2}
}
/* Research topics — Figma HOME 1396:7494 (grey panel + bordered chips) */
.acs-topics{background:#fff;padding-block:32px;width:100%}
.acs-topics__panel{position:relative;max-width:1320px;margin-inline:auto;background:#E5EFED;border-radius:4px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acs-topics__head{text-align:right;order:1}
.acs-topics__title{font-size:24px;font-weight:600;color:var(--acs-ink,#231F20);margin:0}
.acs-topics__sub{font-size: 14px;font-weight: 300;color:var(--acs-ink,#231F20);opacity:.8;margin:4px 0 0}
.acs-chips{display:flex;flex-wrap:wrap;gap:16px;order:2;flex:1;justify-content:center}
.acs-chip{background:#fff;border:.5px solid var(--acs-teal,#068788);border-radius:4px;padding:10px 16px;color:var(--acs-ink,#231F20);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.acs-chip:hover{background:var(--acs-teal,#068788);color:#fff}
.acs-topics__all{order:3;color:var(--acs-teal,#068788);font-size:14px;text-decoration:underline;white-space:nowrap}
@media(max-width:600px){.acs-topics__panel{padding-inline:16px}}
/* ---- phones: stack the panel, «الكل» on its own row ----
The existing order values (head 1, chips 2, all 3) already give the right
sequence, so only the direction changes. */
@media(max-width:478px){
/* align-items is the horizontal axis in a column, so `start` hangs the head
and the chip block off the inline start — the right, in RTL — instead of
centring them. */
.acs-topics__panel{flex-direction:column;align-items:start}
/* `flex:1` was written for a row, where it means "take the leftover width".
Turned on its side it becomes flex-basis:0 on the BLOCK axis, which can
collapse the chips to nothing in an auto-height panel. */
.acs-chips{flex:0 0 auto;justify-content:start}
/* the one exception to align-items above: «الكل» sits at the opposite edge */
.acs-topics__all{align-self:flex-end}
}
/* chips + newsletter + videos */
.acs-newsletter__form{display:flex;gap:10px;max-width:520px}
.acs-newsletter__input{flex:1;padding:12px;border:1px solid var(--acs-border);border-radius:6px}
.acs-btn{background:var(--acs-teal);color:#fff;border:0;border-radius:6px;padding:12px 22px;cursor:pointer;text-decoration:none}
/* Video library — Figma HOME 1396:7469 (teal band) */
.acs-videos{background:var(--acs-teal,#068788);padding-block:32px;position:relative;overflow:hidden;width:100%}
.acs-videos .acs-section__title{color:#fff;font-size:24px;font-weight: 600;line-height: 150%;}
.acs-videos .acs-section__title::after{background:var(--acs-teal-light,#E5EFED)}
/* touch-action:pan-y is what makes the drag work on touch. This track is
overflow:hidden with a transform-driven marquee, so unlike the curated slider
there is no native scrolling to fall back on — the pointer drag in
initVideoMarquee is the only way to swipe it. Left at the default `auto`, the
browser claims a horizontal gesture as a page scroll and fires pointercancel,
so pointermove never survives the slop check and nothing moves. Handing the
browser the vertical axis only keeps the page scrollable over the row. */
.acs-videos__track{position:relative;overflow:hidden;padding-block:8px;direction:rtl;cursor:grab;user-select:none;touch-action:pan-y}
.acs-videos__track.is-dragging{cursor:grabbing}
.acs-videos__marquee{display:flex;gap:16px;width:max-content;direction:rtl;will-change:transform}
.acs-vcard{align-self:auto;flex:0 0 244px;width:244px;text-decoration:none;display:flex;flex-direction:column;gap:8px}
.acs-vcard__media{position:relative;display:block;width:244px;height:301px;border-radius:4px;overflow:hidden;background:rgba(0,0,0,.15)}
.acs-vcard__img{width:100%;height:100%;object-fit:cover;display:block}
.acs-vcard__play{position:absolute;top:16px;inset-inline-end:16px;width:56px;height:56px;background:var(--acs-play-icon) center/100% 100% no-repeat;display:block}
.acs-vcard__dur{position:absolute;bottom:12px;inset-inline-start:16px;background:rgba(16,16,16,.72);color:#fff;font-size:16px;line-height:1.5;padding:2px 8px;border-radius:4px}
.acs-vcard__title{color:#fff;font-size:18px;line-height:1.5;text-align:right;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;}
.acs-vcard:hover .acs-vcard__title{text-decoration:underline}
/* This teal band uses WHITE card titles, so it opts OUT of some site-wide card
hover effects:
- the global `.acs-vcard:hover .acs-vcard__title{color:#068788 !important}` (for
light cards) turned these titles teal-on-teal, i.e. invisible → keep them WHITE
+ underline;
- Bricks' global link-hover Theme Style fades the card `` → hold it opaque so
the play icon (a circle with a see-through triangle) doesn't go translucent. */
.acs-videos .acs-vcard:hover .acs-vcard__title{color:#fff !important;text-decoration:underline !important}
.acs-videos .acs-vcard:hover,
.acs-videos .acs-vcard:hover .acs-vcard__play,
.acs-videos .acs-vcard:hover .acs-vcard__img{opacity:1 !important}
/* KEEP the thumbnail zoom (`.acs-vcard__img` scale 1.06), but PIN the play icon:
Bricks' link-hover scales the whole card ``, which dragged the play button up
with the image. Neutralise the transform on the card / media / play ONLY — the
image keeps its own scale, so it zooms while the play button stays put. */
.acs-videos .acs-vcard:hover,
.acs-videos .acs-vcard:hover .acs-vcard__media,
.acs-videos .acs-vcard:hover .acs-vcard__play{transform:none !important}
/* Event single — round the body image 4px like every other image on the site.
On the (shared workshop+event) single it's a NATIVE-editor CONTENT image inside
the body prose (`![]()
` under `.acs-wsbody__prose`), NOT a
Bricks featured-image element — hence the earlier selectors missed it. Target the
prose images; scope to the event body class so workshops/other pages are untouched. */
.single-event .acs-wsbody__prose img,
.single-event .acs-wsbody__text img{border-radius:4px}
@media(max-width:600px){.acs-videos__inner{padding-inline:20px}}
/* ---- phones ----
The overlay arrows go for the same reason as the hero and curated: they are
revealed on :hover, which a touch screen cannot express. The .acs-cnav toolbar
rendered after the track takes over; both drive the same marquee nudge.
Only the card height changes — .acs-vcard is already 244 wide and its media
already 244×301, so the thumbnail needs no override. */
@media(max-width:478px){
.acs-videos__track .acs-arrow{display:none}
/* Scoped to this section: .acs-vcard is a SHARED card — the workshop's «فيديو»
row and the topic aside render it too, and an unscoped 425px there stretched
the card far past its own thumbnail. */
.acs-videos .acs-vcard{height:425px;box-sizing:border-box}
}
/* MZH */
@media(max-width:900px){.acs-grid--3,.acs-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.acs-grid--2,.acs-grid--3,.acs-grid--4{grid-template-columns:1fr}.acs-featB{flex-direction:column}}
/* Obada */
/* @media(max-width:900px){.acs-grid--3,.acs-grid--4,.acs-grid--5,.acs-grid--6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.acs-grid--2,.acs-grid--3,.acs-grid--4,.acs-grid--5,.acs-grid--6{grid-template-columns:1fr}} */
/* write-invitation block */
.acs-cta{padding:8px 0}
.acs-cta--boxed{border:1px solid var(--acs-border);border-radius:4px;padding:24px;background-color:#E5EFED;background-image:var(--acs-cta-texture,none);background-repeat:no-repeat;background-position:bottom center;background-size:cover}
.acs-cta__eyebrow{color:var(--acs-teal);font-weight:700;font-size:1rem;margin:0 0 10px}
.acs-cta__title{color:#231F20;font-weight:800;font-size:1.25rem;line-height:1.55;margin:0 0 12px}
.acs-cta__text{color:var(--acs-muted);line-height:1.9;font-size:.95rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
.acs-cta__text p{margin:0 0 10px}
.acs-cta__btn{display:inline-block;margin-top:14px;color:var(--acs-teal);font-weight:600;text-decoration:underline;background:none;padding:0}
.acs-cta__btn:hover{color:var(--acs-teal-dark)}
/* floating action button */
.acs-fab{position:fixed;inset-block-end:24px;z-index:1000}
.acs-fab--start{inset-inline-start:24px}
.acs-fab--end{inset-inline-end:24px}
.acs-fab__btn{display:flex;align-items:center;background:var(--acs-teal);color:#fff;border:0;border-radius:999px;height:58px;padding:0;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);overflow:hidden}
.acs-fab__icon{width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto}
.acs-fab__label{max-width:0;opacity:0;white-space:nowrap;overflow:hidden;font-weight:700;transition:max-width .28s ease,opacity .28s ease,padding .28s ease}
.acs-fab:hover .acs-fab__label,.acs-fab__btn:focus-visible .acs-fab__label{max-width:260px;opacity:1;padding-inline-end:22px;padding-inline-start:4px}
.acs-fab__popup{position:fixed;inset-block-end:96px;width:340px;max-width:calc(100vw - 48px);background:#fff;border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.22);padding:22px;display:none}
.acs-fab--start .acs-fab__popup{inset-inline-start:24px}
.acs-fab--end .acs-fab__popup{inset-inline-end:24px}
.acs-fab__popup.is-open{display:block}
.acs-fab__close{position:absolute;inset-inline-end:12px;inset-block-start:8px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--acs-muted)}
.acs-fab__ptitle{color:var(--acs-teal-dark);font-weight:800;margin:0 0 10px;font-size:1.05rem}
.acs-fab__ptext{color:var(--acs-text);line-height:1.9;font-size:.92rem}
.acs-fab__plink{margin-top:14px;display:inline-block}
/* ===== Experts archive (الخبراء) ===== */
.acs-experts{padding:32px 0;background:#F7F7F7}
.acs-experts__inner{max-width:1440px;margin-inline:auto;padding-inline:60px}
.acs-experts__title{font-size:32px;font-weight:600;color:var(--acs-text);margin:32px 0 0}
.acs-experts__sub{color:var(--acs-ink);font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:300;line-height:1.5;margin:16px 0 64px;}
.acs-experts__search{display:flex;align-items:stretch;height:44px;background:#fff;border:1px solid var(--acs-border);border-radius:16px;overflow:hidden;margin-bottom:48px}
.acs-experts__search-btn{display:flex;align-items:center;justify-content:center;width:64px;min-width:64px;flex:0 0 auto;border:0;background:#CB9B2A;color:#fff;cursor:pointer}
.acs-experts__search-btn svg{width:20px;height:20px;fill:currentColor}
.acs-experts__search-input{flex:1;min-width:0;border:0;outline:0;padding:0 14px;font:inherit;font-size:16px;font-weight: 300;background:transparent;color:var(--acs-text);text-align:right}
.acs-experts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.acs-expert{display:flex;align-items:flex-start;justify-content:flex-start;gap:16px}
.acs-expert.hidden{display:none}
.acs-expert__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.acs-expert__name{font-size:18px;font-weight:600;color:var(--acs-text);text-decoration:none;line-height:1.5}
.acs-expert__name:hover{color:var(--acs-teal)}
.acs-expert__pos{font-family: "Bahij TheSansArabic";font-size:12px;font-weight:300;color:#101010;line-height:1.5}
.acs-expert__social{display:flex;gap:10px;margin-top:4px}
.acs-expert__soc{display:inline-flex;width:22px;height:22px;color:var(--acs-muted);transition:color .15s}
.acs-expert__soc:hover{color:var(--acs-teal)}
.acs-expert__soc svg{width:100%;height:100%;fill:currentColor}
.acs-expert__photo{flex:0 0 auto;width:126px;height:126px;border-radius:50%;overflow:hidden;border:1px solid var(--acs-border);box-shadow:0 0 0 6px rgba(28,124,110,.08);background:var(--acs-bg)}
.acs-expert__photo img{width:100%;height:100%;object-fit:cover;display:block}
.acs-experts__empty{color:var(--acs-muted);text-align:center;padding:40px 0}
@media(max-width:900px){.acs-experts__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.acs-experts__grid{grid-template-columns:1fr}}
/* phones: grid is already one column (560px). Cards STAY horizontal (photo beside
text — RTL: photo right, text left — like desktop), just a smaller photo + tighter
gap so the name/role/social keep room on a narrow card. NOT stacked/centred. */
@media(max-width:478px){
.acs-experts{padding-bottom:24px}
.acs-experts__title{font-size:24px;margin: 24px 0 16px;}
/* client: sub 16px, 46px below it down to the search field */
.acs-experts__sub{font-size:16px;margin:0 0 46px}
.acs-experts__search{margin-bottom:46px}
/* client: 32px between stacked author cards + 16px below the grid */
.acs-experts__grid{gap:32px;padding-bottom:16px}
.acs-expert{gap:12px}
.acs-expert__photo{width:100px;height:100px;box-shadow:0 0 0 4px rgba(28,124,110,.08)}
.acs-expert__name{font-size:18px}
}
/* author single page (صفحة الباحث) — split into acs-author-hero / -filter / -list.
Every part wraps its content in .acs-author__inner, so the breadcrumb band,
profile, filter bar and list all share the same 60px content inset. */
.acs-author{background:#fff}
.acs-author__inner{max-width:1440px;margin-inline:auto;padding-inline:60px}
.acs-author--placeholder,.acs-author-filter .acs-results--placeholder,.acs-author-list .acs-results--placeholder{max-width:1320px;margin-inline:auto;padding:24px 60px;color:var(--acs-muted);border:1px dashed var(--acs-border);border-radius:var(--acs-radius)}
.acs-breadcrumb{display:flex;gap:8px;align-items:center;font-size:14px;color:#068788;}
.acs-breadcrumb a{color:#068788;text-decoration:none}
.acs-breadcrumb a:hover{color:#068788;text-decoration:underline}
.acs-breadcrumb .is-current{color:#068788}
/* Mobile breadcrumb (site-wide): each path crumb + «/» stays intact on one line and
the row wraps at the separators (no ragged mid-word columns); the current page
(often a long title) truncates with «…» and drops to its own row only when it no
longer fits. Readex 12/500, teal links, grey current. */
@media(max-width:600px){
.acs-breadcrumb{flex-wrap:wrap;row-gap:4px;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:12px;line-height:150%}
.acs-breadcrumb a,.acs-breadcrumb .acs-breadcrumb__sep{flex:0 0 auto;white-space:nowrap}
.acs-breadcrumb .is-current{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9C999A}
}
/* Figma header breadcrumb band: full-width #F7F7F7, 88px tall, 32px/60px padding, 32px gap */
.acs-author-band{background:rgba(247,247,247,1)}
.acs-author-band__inner{box-sizing:border-box;max-width:1440px;margin-inline:auto;min-height:88px;display:flex;align-items:center;gap:32px;padding:32px 60px}
.acs-author-band .acs-breadcrumb{padding:0}
/* profile header */
.acs-author-hero .acs-author__inner{padding-block:32px 40px}
/* Grid (was flex) so the bio — now a direct header child, not nested in the
profile — sits in the name column on desktop (identical look) yet can span
full-width under the photo on phones. Columns: name/bio (1fr, RIGHT in RTL) |
photo+social (210px, LEFT). Rows: name/pos, then bio; the aside spans both. */
.acs-author__head{display:grid;grid-template-columns:1fr 210px;column-gap:40px;align-items:start;grid-template-areas:"profile aside" "bio aside"}
.acs-author__aside{grid-area:aside;flex:0 0 auto;width:210px;display:flex;flex-direction:column;align-items:center;gap:18px}
.acs-author__photo{width:190px;height:190px;border-radius:50%;overflow:hidden;border:1px solid var(--acs-border);box-shadow:0 0 0 10px rgba(28,124,110,.07);background:var(--acs-bg)}
.acs-author__photo img{width:100%;height:100%;object-fit:cover;display:block}
.acs-author__aside .acs-expert__social{gap:14px}
.acs-author__aside .acs-expert__soc{width:22px;height:22px;color:var(--acs-text)}
.acs-author__profile{grid-area:profile;flex:1;min-width:0}
.acs-author__name{font-size:24px;font-weight:800;color:var(--acs-text);margin:4px 0 6px;line-height:1.4}
.acs-author__pos{font-size:14px;color:var(--acs-muted);margin:0 0 18px}
.acs-author__bio{grid-area:bio;color:var(--acs-text);font-size:18px;line-height:2;text-align:justify}
.acs-author__bio p{margin:0 0 14px}
/* filter bar: reuses .acs-topic__filter (single.css); the side inset comes from .acs-author__inner */
.acs-author-filter{margin-block:40px 0;padding: 32px 60px;background: #FFF;}
.acs-author-filter .acs-topic__filter{margin:0}
/* Author body layout — the list (ACS: قائمة محتوى الباحث) and the STANDALONE
ACS: دعوة إلى الكتابة element sit in a Bricks two-column container. Apply
.acs-author-body to the full-width grey Section and .acs-author-body__grid to the
container inside it. The list is placed on the right (1fr) and the CTA on the left
(340px) EXPLICITLY, so the builder order doesn't matter. The CTA keeps its own
element style controls (background / padding / …) — same as the CTA on other pages. */
.acs-author-body{background:rgba(247,247,247,1)}
.acs-author-body__grid{max-width:1440px;margin-inline:auto;padding:32px 60px 48px;display:grid;grid-template-columns:minmax(0,1fr) 277px;gap:24px;align-items:start}
.acs-author-body__grid>.acs-author-list{grid-column:1;min-width:0}
.acs-author-body__grid>.acs-cta{grid-column:2;position:sticky;top:24px}
/* list only: content cards (white, from .acs-plist__item), 24px apart */
.acs-author-list .acs-plist{gap:24px}
/* drop the shared .acs-results__list 8px top margin here only (kept on search/tags/topic) */
.acs-author-list .acs-results__list{margin-top:0}
.acs-author__empty{color:var(--acs-muted);text-align:center;padding:40px 0}
/* Author-page CTA — exact Figma «دعوة إلى الكتابة» card: a 277px WHITE frame with
16px padding, holding a 245px mint inner (#E5EFED + cta-bg.png, 16px top). SCOPED
to .acs-author-body so the homepage / other CTAs stay as they are. */
.acs-author-body .acs-cta{padding:0}
.acs-author-body .acs-cta--boxed{background:#fff;background-image:none;border:0;border-radius:var(--acs-radius,4px);padding:16px}
.acs-author-body .acs-cta__inner{background-color:rgba(229,239,237,1);background-image:var(--acs-cta-texture,none);background-repeat:no-repeat;background-position:bottom center;background-size:cover;border-radius:var(--acs-radius,4px);padding:16px 15px 24px}
.acs-author-body .acs-cta__eyebrow{margin:0;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:18px;line-height:1.5;color:rgba(6,135,136,1);text-align:right}
.acs-author-body .acs-cta__title{margin:16px 0 0;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:18px;line-height:1.5;color:rgba(35,31,32,1);text-align:right}
.acs-author-body .acs-cta__text{margin:24px 0 0;font-family:"Readex Pro",sans-serif;font-weight:300;font-size:16px;line-height:1.5;color:rgba(35,31,32,1);text-align:right}
.acs-author-body .acs-cta__text p{margin:0}
.acs-author-body .acs-cta__btn{display:inline-block;margin:24px 0 0;padding:0;font-family:"Readex Pro",sans-serif;font-weight:300;font-size:16px;line-height:1.5;color:rgba(6,135,136,1);text-decoration:underline;background:none}
/* horizontal publication list — SHARED base for every list page (topic,
author, pubtype, search, tags): white, NO border (client design) */
.acs-plist{display:flex;flex-direction:column;gap:18px}
.acs-plist__item{display:flex;gap:0;background:rgba(255,255,255,1);border:0;border-radius:var(--acs-radius);overflow:hidden;transition:box-shadow .2s ease}
.acs-plist__item:hover{box-shadow:none}/* latest-style hover: no shadow — zoom + underline only (search / tags / overlay) */
.acs-plist__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:18px 20px}
.acs-plist__meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--acs-muted)}
.acs-plist__meta .acs-badge{font-size:12px}
.acs-plist__date{white-space:nowrap}
.acs-plist__byline{font-size:12px}
.acs-plist__byline .acs-byline__avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}
.acs-plist__byline .acs-byline__name a{color:var(--acs-text);text-decoration:none}
.acs-plist__byline .acs-byline__name a:hover{color:var(--acs-teal)}
.acs-plist__title{font-size:18px;font-weight:700;color:var(--acs-text);text-decoration:none;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acs-plist__title:hover{color:var(--acs-teal)}
.acs-plist__excerpt{color:var(--acs-muted);font-size:16px;line-height:1.8;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* related-program footer line (client draft): Readex 12/400/150%, muted grey, pinned to the row bottom */
.acs-plist__program{margin-top:auto;padding-top:8px;font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:var(--acs-muted)}
/* phones: the row is short on width and height — tighter text spacing, and the
related-program line goes entirely */
@media(max-width:478px){
.acs-plist__body{gap:8px}
.acs-plist__excerpt{display:none}
.acs-plist__title{-webkit-line-clamp: 3;}
}
.acs-plist__media{flex:0 0 372px;display:block;position:relative;background:var(--acs-teal)}
.acs-plist__media img{width:100%;height:100%;object-fit:cover;display:block;min-height:150px}
/* invite sidebar */
.acs-invite{position:relative;background-color:var(--acs-bg);border:1px solid var(--acs-border);border-radius:var(--acs-radius);padding:22px;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='90'%3E%3Cpath d='M0 90 78 0 78 90Z' fill='%23168e7e' fill-opacity='0.10'/%3E%3Cpath d='M56 90 134 0 134 90Z' fill='%23168e7e' fill-opacity='0.07'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right top;background-size:150px auto}
.acs-invite>*{position:relative;z-index:1}
.acs-invite__label{display:block;color:var(--acs-teal);font-weight:700;font-size:18px;margin-bottom:14px}
.acs-invite__title{color:var(--acs-text);font-weight:700;font-size:16px;line-height:1.7;margin:0 0 12px}
.acs-invite__text{color:var(--acs-muted);font-size:15px;line-height:1.9}
.acs-invite__text p{margin:0 0 10px}
.acs-invite__more{display:inline-block;margin-top:10px;color:var(--acs-teal);text-decoration:none;font-size:14px}
/* ── Global pagination (.acs-pager) ───────────────────────────────────────────
SITE-WIDE pager component (rendered by acs_pager_html), matched to the Figma
pager: « first / ‹ prev / «صفحة X من Y» / next › / last ». Use it on any page
instead of hand-rolling pager markup. */
.acs-author__pager-wrap{margin-top:32px}
.acs-pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;direction:rtl;margin-top:32px}
/* 40×40 buttons; ENABLED buttons are teal (border + glyph) by default — not only
on hover (client); bigger arrow glyphs; disabled fade to the neutral border. */
.acs-pager__arrow,.acs-pager__edge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(6,135,136,1);border-radius:var(--acs-radius);color:rgba(6,135,136,1);text-decoration:none;font-size:22px;line-height:1;background:#fff;transition:border-color .15s ease,color .15s ease,background .15s ease}
.acs-pager__arrow:hover,.acs-pager__edge:hover{background:rgba(6,135,136,1);border-color:rgba(6,135,136,1);color:#fff}
.acs-pager__arrow.is-disabled,.acs-pager__edge.is-disabled{opacity:1;pointer-events:none;border-color:var(--acs-border);color:var(--acs-muted,#9C999A)}
.acs-pager__status{font-family:"Bahij TheSansArabic",sans-serif;font-weight:500;font-size:14px;color:var(--acs-text);padding:0 12px;white-space:nowrap}
@media(max-width:900px){
.acs-author-body__grid{grid-template-columns:1fr;padding:24px}
.acs-author-body__grid>.acs-author-list,.acs-author-body__grid>.acs-cta{grid-column:auto}
.acs-author-body__grid>.acs-cta{position:static}
/* Figma phone header: photo LEFT (spans), name + position RIGHT, social RIGHT
under them, bio FULL-WIDTH below — NOT the old centred stack. The aside
becomes display:contents so its photo + social are placed individually.
RTL: the FIRST grid column is the RIGHT one, so profile/social are col 1
(1fr, right) and the photo is col 2 (auto, left). */
.acs-author__head{grid-template-columns:1fr auto;column-gap:16px;grid-template-areas:"profile photo" "social photo" "bio bio";text-align:right}
.acs-author__aside{display:contents}
.acs-author__photo{grid-area:photo;width:110px;height:110px}
.acs-author__aside .acs-expert__social{grid-area:social;display:flex;justify-content:flex-start;gap:14px;margin:0}
.acs-author__inner{padding-inline:24px}
.acs-author-band__inner{padding:24px;min-height:0;gap:16px}
/* bio spans full width under the header block, with a light divider (Figma) */
.acs-author__bio{text-align:start;margin-top:16px;padding-top:16px;border-top:1px solid rgba(35,31,32,.1)}
}
@media(max-width:560px){
.acs-plist__item{flex-direction:column}
.acs-plist__media{flex:auto;width:100%;aspect-ratio:16/9}
}
@media(max-width:478px){
/* author single — phone refinements (client). Comes after the ≤900 block so
the 16px gutter wins over its 24px at phone width; tablets keep 24px. */
.acs-author__inner{padding-inline:16px}
.acs-author__name{margin-bottom:16px}
.acs-author__pos{margin-bottom:12px}
.acs-author-filter{padding:32px 16px}
}
/* ===== header ===== */
.acs-header{font-family:"Readex Pro",sans-serif}
.acs-header.is-sticky{position:sticky;top:0;z-index:100}
.acs-header__inner{max-width:1320px;margin-inline:auto;padding-inline:16px}
.acs-header__utility{background:var(--acs-teal2);color:#fff}
.acs-header__utility .acs-header__inner{display:flex;align-items:center;gap:22px;min-height:37px}
.acs-header__utility-end{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.acs-header__sep{width:1px;height:18px;background:rgba(255,255,255,.45);display:inline-block;flex:0 0 auto}
.acs-header__social{display:flex;align-items:center;gap:8px}
.acs-header__social .acs-social__link{width:20px;height:20px;color:#fff;display:inline-flex}
.acs-header__social .acs-social__link svg{width:100%;height:100%;fill:currentColor}
.acs-menu--utility{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0;width:100%; justify-content: end;}
.acs-menu--utility a{color:#fff;text-decoration:none;font-size:12px;white-space:nowrap}
.acs-menu--utility a:hover{text-decoration:underline}
.acs-header__main{background:#fff;border-bottom:1px solid var(--acs-border)}
.acs-header__main .acs-header__inner{--acs-header-gap:28px;display:flex;align-items:center;gap:var(--acs-header-gap);min-height:82px}
.acs-header__logo img{max-height:53px;width:auto;display:block}
.acs-header__logo-link{display:inline-flex;line-height:0}
.acs-header__logo .acs-header__logo-img{max-height:none;height:auto;width:auto;display:block}
.acs-header__sitename{font-weight:800;color:var(--acs-ink);text-decoration:none}
/* The nav owns the leftover space (flex-basis 0 + grow), so opening the search is
a pure flex-grow handoff: the nav gives its grow to the field and the row
re-lays itself out — no measuring, and it stays exact whatever the logo width.
Timing is staged so the menu has fully faded before the space starts moving
(the links are `nowrap`, so a shrinking nav would spill over the logo mid-way).
`visibility` also drops the hidden links out of the tab order. */
.acs-header__nav{flex:1 1 0;min-width:0;transition:flex-grow .34s cubic-bezier(.22,.61,.36,1),margin-inline-end .34s cubic-bezier(.22,.61,.36,1),opacity .18s ease .34s,visibility 0s .34s}
.acs-menu--main{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;justify-content:center}
.acs-menu--main>.acs-menu__item{position:relative}
.acs-menu--main a{display:inline-flex;align-items:center;gap:4px;color:var(--acs-ink);text-decoration:none;font-size:16px;font-weight:500;white-space:nowrap}
.acs-menu--main>.acs-menu__item.is-active>a,.acs-menu--main a:hover{color:var(--acs-teal2)}
.acs-menu__caret{width:0;height:0;border-inline:4px solid transparent;border-top:5px solid currentColor;display:inline-block}
.acs-menu__sub{position:absolute;inset-inline-start:0;top:100%;min-width:200px;background:#fff;border:1px solid var(--acs-border);border-radius:var(--acs-radius);box-shadow:0 8px 24px rgba(20,30,40,.12);list-style:none;margin:0;padding:8px 0;display:none;z-index:20}
.acs-menu--main .acs-menu__item.has-children:hover>.acs-menu__sub,.acs-menu--main .acs-menu__item:focus-within>.acs-menu__sub{display:block}
.acs-menu__sub a{display:block;padding:8px 16px;font-weight:400}
.acs-header__search{display:flex;align-items:stretch;height:34px;flex:0 1 var(--acs-header-search-w,270px);min-width:0;transition:flex-grow .34s cubic-bezier(.22,.61,.36,1)}
.acs-header__search-input{flex:1;min-width:120px;box-sizing:border-box;height:34px;border:1px solid var(--acs-border);border-left:0;border-top-right-radius:16px;border-bottom-right-radius:16px;padding:0 16px;font:inherit;font-size:14px;background:#fff;color:var(--acs-ink);text-align:right;outline:0}
.acs-header__search-btn{flex:0 0 auto;width:64px;min-width:64px;max-width:150px;height:34px;border:0;background:var(--acs-yellow);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-top-left-radius:16px;border-bottom-left-radius:16px}
.acs-header__search-btn svg{width:18px;height:18px}
/* close (×) — collapsed to zero width beside the field, revealed when it expands */
.acs-header__search-close{flex:0 0 auto;width:0;margin-inline-start:0;padding:0;border:0;background:transparent;color:var(--acs-yellow);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;visibility:hidden;transition:width .34s cubic-bezier(.22,.61,.36,1),margin-inline-start .34s cubic-bezier(.22,.61,.36,1),opacity .18s ease,visibility 0s .34s}
.acs-header__search-close svg{width:22px;height:22px;flex:0 0 auto}
/* ---- expanded state (class set by homepage.js) ----
The field takes the nav's grow, so it spans from the logo to the row's end.
The negative margin swallows the now-empty nav's leftover flex gap. */
.acs-header__main.is-search-open .acs-header__nav{flex-grow:0;margin-inline-end:calc(var(--acs-header-gap,28px) * -1);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s,flex-grow .34s cubic-bezier(.22,.61,.36,1) .18s,margin-inline-end .34s cubic-bezier(.22,.61,.36,1) .18s}
.acs-header__main.is-search-open .acs-header__search{flex-grow:1;transition:flex-grow .34s cubic-bezier(.22,.61,.36,1) .18s}
.acs-header__main.is-search-open .acs-header__search-close{width:22px;margin-inline-start:20px;opacity:1;visibility:visible;transition:width .34s cubic-bezier(.22,.61,.36,1) .18s,margin-inline-start .34s cubic-bezier(.22,.61,.36,1) .18s,opacity .18s ease .34s,visibility 0s .18s}
@media(prefers-reduced-motion:reduce){
.acs-header__nav,.acs-header__search,.acs-header__search-close,
.acs-header__main.is-search-open .acs-header__nav,
.acs-header__main.is-search-open .acs-header__search,
.acs-header__main.is-search-open .acs-header__search-close{transition:none}
}
.acs-header__burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;border:0;background:transparent;cursor:pointer;padding:8px}
.acs-header__burger span{display:block;height:2px;background:var(--acs-ink);border-radius:2px}
.acs-header__drawer{background:#fff;border-bottom:1px solid var(--acs-border);padding:12px 16px}
.acs-header__drawer .acs-menu{list-style:none;margin:0 0 8px;padding:0}
.acs-header__drawer .acs-menu a{display:block;padding:10px 4px;color:var(--acs-ink);text-decoration:none;border-bottom:1px solid var(--acs-border)}
.acs-header__drawer .acs-menu__sub{padding-inline-start:16px}
@media(max-width:900px){
.acs-header__nav,.acs-header__search{display:none}
.acs-header__burger{display:flex}
.acs-header__main .acs-header__inner{justify-content:space-between}
}
@media(min-width:901px){ .acs-header__drawer{display:none!important} }
/* ===== Fullscreen search overlay (acs-search-overlay) =====
Opened from the header magnifier/field by homepage.js. Near-opaque white panel
(like asharqbusiness.com); two AJAX-filled sections — whole site, then video —
each with «عرض الكل», plus a "see all results" footer link to ?s=. RTL: the
field leads on the right, magnifier just left of the text, × at the far left. */
html.acs-search-lock{overflow:hidden}
.acs-search-overlay{position:fixed;inset:0;z-index:99999;overflow-y:auto;-webkit-overflow-scrolling:touch}
.acs-search-overlay[hidden]{display:none}
.acs-search-overlay__backdrop{position:fixed;inset:0;background:rgba(255,255,255,.97);cursor:pointer}
.acs-search-overlay__panel{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:64px 24px 80px;min-height:100%;box-sizing:border-box}
.acs-search-overlay__form{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--acs-teal2);padding:10px 6px}
.acs-search-overlay__input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:30px;line-height:1.4;color:var(--acs-ink);text-align:right}
.acs-search-overlay__input::placeholder{color:var(--acs-muted)}
.acs-search-overlay__submit,.acs-search-overlay__close{flex:0 0 auto;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px}
.acs-search-overlay__submit{color:var(--acs-teal2)}
.acs-search-overlay__submit svg{width:30px;height:30px}
.acs-search-overlay__close{color:var(--acs-ink)}
.acs-search-overlay__close svg{width:26px;height:26px}
.acs-search-overlay__close:hover{color:var(--acs-yellow)}
.acs-search-overlay__results{margin-top:36px}
.acs-search-overlay__results.is-loading{opacity:.5;pointer-events:none}
.acs-search-overlay__section{margin-bottom:40px}
.acs-search-overlay__section[hidden]{display:none}
.acs-search-overlay__section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--acs-border);padding-bottom:12px;margin-bottom:20px}
.acs-search-overlay__section-title{margin:0;font-size:20px;font-weight:700;color:var(--acs-ink)}
.acs-search-overlay__all{color:var(--acs-teal2);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
.acs-search-overlay__all:hover{color:var(--acs-yellow)}
.acs-search-overlay__empty{color:var(--acs-muted);font-size:16px;padding:20px 0}
.acs-search-overlay__footer{text-align:center;margin-top:8px}
.acs-search-overlay__footer[hidden]{display:none}
.acs-search-overlay__seeall{display:inline-block;color:var(--acs-ink);font-weight:700;font-size:17px;text-decoration:none;border-bottom:2px solid var(--acs-yellow);padding-bottom:4px}
.acs-search-overlay__seeall:hover{color:var(--acs-teal2)}
@media(max-width:600px){
.acs-search-overlay__panel{padding:40px 16px 60px}
.acs-search-overlay__input{font-size:22px}
.acs-search-overlay__submit svg{width:24px;height:24px}
}
/* Overlay results as compact 3-up cards (image on top, like the mobile card
layout) so both sections — site + video — fit on one screen without scrolling.
The extra .acs-search-overlay ancestor lifts specificity above results.css's
`.acs-results__list .acs-plist__*` rules (that file loads after this one). The
excerpt + topics footer are hidden to keep each card short. */
.acs-search-overlay .acs-search-overlay__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
/* height:auto overrides results.css's `.acs-results__list .acs-plist__item{height:220px}`
— that fixed height is for the horizontal ROW; as a vertical card 220px is too
short (the 16:9 image alone ~fills it), which cropped the title + badge off the
bottom. Let the card grow to its content instead. */
.acs-search-overlay .acs-search-overlay__list .acs-plist__item{flex-direction:column;min-height:0;height:auto}
/* flex:0 0 auto (not flex:auto) locks the image to its aspect-ratio box so it can't
grow/shrink and squeeze the body. */
.acs-search-overlay .acs-search-overlay__list .acs-plist__media{flex:0 0 auto;width:100%;aspect-ratio:16/9}
.acs-search-overlay .acs-search-overlay__list .acs-plist__body{padding:12px 2px;gap:8px;overflow:visible}
/* reserve two lines so 1-line and 2-line titles keep the grid cards uniform */
.acs-search-overlay .acs-search-overlay__list .acs-plist__title{font-size:16px;line-height:1.5;min-height:48px}
.acs-search-overlay .acs-search-overlay__list .acs-plist__excerpt,
.acs-search-overlay .acs-search-overlay__list .acs-plist__topics{display:none}
.acs-search-overlay__section{margin-bottom:28px}
@media(max-width:900px){ .acs-search-overlay .acs-search-overlay__list{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .acs-search-overlay .acs-search-overlay__list{grid-template-columns:1fr} }
/* ===== Bricks-built header — expanding search =====
For headers assembled from native Bricks elements. Add these CSS classes in
the builder: `acs-hdr` on the Block (the flex row), `acs-hdr__nav` on the Nav
Menu, `acs-hdr__search` on the Search. homepage.js injects the × and toggles
`is-search-open` on the Block.
Opening is a pure flex handoff: the nav owns the leftover space (basis 0 +
grow 1); when it hands its grow over, the field takes the freed width. The
nav fades out BEFORE the widths move, because its links are `nowrap` and a
shrinking nav would otherwise spill across the logo mid-animation. */
.acs-hdr{--acs-hdr-search:117px;--acs-hdr-search-open:825px;--acs-hdr-gap-open:24px;--acs-hdr-ease:cubic-bezier(.22,.61,.36,1)}
/* The logo↔row gap is owned here, not in Bricks — leave column-gap unset on the
OUTER Block in the builder (the inner row keeps whatever gap you give it).
column-gap is animatable, so the closed→open change is just another
transition, with no negative-margin trickery. !important in case a gap is
still set on #brxe-. */
.acs-hdr{transition:column-gap .34s var(--acs-hdr-ease)}
/* A nested Block holding the nav + search has to take the row's free space,
otherwise the nav has nothing to hand over when it collapses. */
.acs-hdr__row{flex:1 1 0;min-width:0;display:flex;align-items:center}
.acs-hdr__nav{flex:1 1 0;min-width:0;overflow:hidden;transition:flex-grow .34s var(--acs-hdr-ease),margin-inline-end .34s var(--acs-hdr-ease),opacity .18s ease .34s,visibility 0s .34s}
/* The logo must not absorb the squeeze: without this it is a shrinkable flex
item, so a wide field steals width from it instead of from the field. */
.acs-hdr__logo,.acs-hdr>.brxe-logo,.acs-hdr>.brxe-image{flex:0 0 auto}
/* Wrapper and form only hug their content — it is the INPUT that widens, so the
two width vars above are the single knob for the field. Both need `auto`
forced: a width set on the Search element in Bricks lands on #brxe- and
would cap the field no matter how wide the input grows. */
.acs-hdr__search{display:flex;align-items:center;flex:0 0 auto;width:auto!important;min-width:0;max-width:100%}
/* Bricks ships the form as justify-content:space-between with an auto-width
input, which is exactly what parks the submit button away from the field. */
.acs-hdr__search .bricks-search-form{width:auto!important;justify-content:flex-start;gap:0}
/* Plain px, never a percentage: the form is content-sized, so a % width on the
input is cyclic and the browser throws it away. Overflow is handled by
flex-shrink instead — the input gives way when the row runs out of room. */
.acs-hdr__search .bricks-search-form input[type=search]{width:var(--acs-hdr-search)!important;min-width:0;max-width:none;transition:width .34s var(--acs-hdr-ease)}
/* Expanded: the logo↔row gap drops to --acs-hdr-gap-open, waiting out the nav's
180ms fade first, exactly like the widths do. */
.acs-hdr.is-search-open{column-gap:var(--acs-hdr-gap-open)!important;transition:column-gap .34s var(--acs-hdr-ease) .18s}
.acs-hdr.is-search-open .acs-hdr__nav{flex-grow:0;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s,flex-grow .34s var(--acs-hdr-ease) .18s}
/* Flat structure (nav is a direct child, no wrapper Block): there are two open
gaps around the collapsed nav instead of one, so cancel the extra. Must come
after the rule above, which would otherwise drop this transition. */
.acs-hdr.is-search-open>.acs-hdr__nav{margin-inline-end:calc(var(--acs-hdr-gap-open,0px) * -1)!important;transition:opacity .18s ease,visibility 0s .18s,flex-grow .34s var(--acs-hdr-ease) .18s,margin-inline-end .34s var(--acs-hdr-ease) .18s}
.acs-hdr.is-search-open .acs-hdr__search .bricks-search-form input[type=search]{width:var(--acs-hdr-search-open)!important;transition:width .34s var(--acs-hdr-ease) .18s}
/* × sits at the inline end of the field — the left in RTL — collapsed to zero
width until the field expands. `min-width:0` is what actually makes it take
no room: a flex item defaults to min-width:auto, so the 22px icon would keep
holding the space open however small the width is set.
Everything boxy is !important because the × lives inside the Search element,
so the submit button's own styling — emitted as `#brxe- button`, an ID
selector — otherwise wins and hands it that button's size and background. */
.acs-hdr__close{flex:0 0 auto;width:0!important;min-width:0!important;height:auto!important;margin-inline-start:0;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--acs-yellow,#CB9B2A)!important;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:width .34s var(--acs-hdr-ease),margin-inline-start .34s var(--acs-hdr-ease),opacity .18s ease,visibility 0s .34s}
.acs-hdr__close svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.acs-hdr.is-search-open .acs-hdr__close{width:22px!important;margin-inline-start:20px;opacity:1;visibility:visible;transition:width .34s var(--acs-hdr-ease) .18s,margin-inline-start .34s var(--acs-hdr-ease) .18s,opacity .18s ease .34s,visibility 0s .18s}
@media(prefers-reduced-motion:reduce){
.acs-hdr__nav,.acs-hdr__close,
.acs-hdr__search .bricks-search-form input[type=search],
.acs-hdr.is-search-open .acs-hdr__nav,
.acs-hdr.is-search-open .acs-hdr__close,
.acs-hdr.is-search-open .acs-hdr__search .bricks-search-form input[type=search]{transition:none}
}
/* ===== Bricks-built header — scroll states =====
Three stacked sections inside #brx-header: `acs-hdrwrap__util` (teal utility
row), the white bar (logo + the .acs-hdr row above), `acs-hdrwrap__sub` (teal
section nav). Bricks itself adds `.scrolling` to #brx-header past 1px of
scroll (state 2); two «Enter viewport» interactions write data-acs-sub on/off
(state 3). Nothing here is scripted — the classes arrive from the builder.
Every selector below is an id + a class, so it outranks the `#brxe-`
rules Bricks emits for the same elements whichever sheet loads first. That is
what lets these live in a stylesheet instead of the builder's code box. */
#brx-header{--acs-ease:cubic-bezier(.22,.61,.36,1)}
/* State 1 → 2: the teal utility row collapses, the white bar stays pinned.
Closing fades the content out first, then the row follows it shut; opening
expands the row, then fades the content back in. The 37px is a MEASURE —
.acs-hdrwrap__util offsetHeight — so re-measure if that row's content grows. */
#brx-header .acs-hdrwrap__util{overflow:hidden!important;max-height:37px;min-height:0!important;opacity:1;transition:max-height .35s var(--acs-ease),opacity .3s ease .1s}
#brx-header.scrolling .acs-hdrwrap__util{max-height:0!important;opacity:0;transition:opacity .15s ease,max-height .35s var(--acs-ease) .08s}
/* Logo: 363px wordmark → 47px mark. The height is explicit on purpose — Bricks
swaps the src on the same ![]()
, so with height:auto the box would recompute
from the square ratio for a frame. */
#brx-header .bricks-site-logo{width:363px!important;height:53px!important;object-fit:contain;object-position:right center;transition:width .35s var(--acs-ease),height .35s var(--acs-ease)}
#brx-header.scrolling .bricks-site-logo{width:47px!important;height:47px!important}
/* Mobile keeps the full wordmark, frozen — same image, same box, scrolled or
not. 270px fills the width the logo link is given in Bricks; the 40px height
is that width over the source's 2560×376 ratio, so `contain` has no slack to
letterbox. This is only half the freeze: Bricks' own JS still swaps the file,
so acsFreezeMobileLogo in homepage.js neutralises that. Keep this breakpoint
and the one in homepage.js in sync. */
@media(max-width:767px){
#brx-header .bricks-site-logo,
#brx-header.scrolling .bricks-site-logo{width:270px!important;height:40px!important;transition:none}
}
/* State 3: the teal section nav, opened by the Bricks interaction. The open
height is a MEASURE too — .acs-hdrwrap__sub offsetHeight while open. */
#brx-header .acs-hdrwrap__sub{overflow:hidden!important;max-height:0!important;min-height:0!important;opacity:0;transition:opacity .15s ease,max-height .35s var(--acs-ease) .08s}
#brx-header[data-acs-sub="on"] .acs-hdrwrap__sub{max-height:53px!important;opacity:1;transition:max-height .4s var(--acs-ease),opacity .3s ease .15s}
/* The nav dropdowns are position:absolute, so the nav must not clip them — this
reopens the `overflow:hidden` set on .acs-hdr__nav above, which is needed only
while the search is expanded and the links are sliding out of view. */
.acs-hdr__nav{overflow:visible!important}
.acs-hdr.is-search-open .acs-hdr__nav{overflow:hidden!important}
@media(prefers-reduced-motion:reduce){
#brx-header .acs-hdrwrap__util,
#brx-header .acs-hdrwrap__sub,
#brx-header .bricks-site-logo,
#brx-header.scrolling .acs-hdrwrap__util,
#brx-header[data-acs-sub="on"] .acs-hdrwrap__sub{transition:none}
}
/* Enhanced dropdown (homepage.js) — the panel is anchored with
inset-inline-start in single.css; this clears an inset-inline-end coming from
outside this plugin, which would otherwise fight that anchor. Unrelated to the
header, but it shared the builder's code box with the block above. */
.acs-select__list{inset-inline-end:unset!important}
/* ===== Bricks offcanvas — mobile menu panel =====
Scoped to .brxe-offcanvas so the header's desktop dropdowns keep their own
behaviour. */
/* Kill the UA tap-highlight for the whole panel — every link, button, the
search and the accordion. -webkit-tap-highlight-color inherits, so the root
is the only place it needs saying; per-element rules would be redundant.
It reads worst on the accordion, where Bricks' base gives .brxe-dropdown
`cursor:pointer` and the browser therefore treats the whole — toggle row
AND expanded sub-list — as one tap target, flashing a box over all of it. */
.brxe-offcanvas{-webkit-tap-highlight-color:transparent}
/* Same symptom on a mouse: the toggle row is a label, not a link, so a stray
drag or double-click selects its text and paints a selection block over it.
The sub-list links are left selectable. */
.brxe-offcanvas .brx-submenu-toggle{-webkit-user-select:none;user-select:none}
/* ===== helper: acs-wrap — let a flex row run onto more lines =====
Opt-in, applied from the builder. The classic Nav Menu is display:flex with
no flex-wrap in Bricks' base and exposes no Wrap control (unlike the nestable
nav, whose items Block has Layout → Wrap), so a row of links can only ever
overflow. Add `acs-wrap` to the Nav Menu element and it wraps instead.
Two selectors because the class lands on the element ROOT (.brxe-nav-menu),
while the flex container is the