/* Styles for widgets used on single post templates (not the homepage). */ :root{ --acs-teal:#1c7c6e; --acs-teal-dark:#14594e; --acs-text:#20242a; --acs-muted:#6a7178; } /* post authors */ .acs-post-authors{display:flex;flex-direction:column;gap:16px} .acs-post-authors__item{display:flex;flex-direction:column;gap:8px} .acs-post-authors__head{display:flex;align-items:center;gap:12px} .acs-post-authors__avatar{box-sizing:border-box;width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto;border:1px solid var(--acs-border,#e2e5e5);box-shadow:0 0 0 6px rgba(28,124,110,.08);background:var(--acs-bg,#E5EFED)} .acs-post-authors__body{display:flex;flex-direction:column;gap:2px} .acs-post-authors__name{font-weight:700;color:var(--acs-text);text-decoration:none} .acs-post-authors__name:hover{color:var(--acs-teal)} .acs-post-authors__position{color:var(--acs-muted);font-size:.85rem;line-height:1.6} .acs-post-authors__social{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .acs-post-authors__soc{display:inline-flex;width:20px;height:20px;color:#068788;transition:opacity .15s} .acs-post-authors__soc:hover{opacity:.75} .acs-post-authors__soc svg{width:100%;height:100%;fill:currentColor} /* ---- phones: names only, on one line, separated by a rule ---- The widget stays a stack of __item > __head > __body on desktop; here every part except the name is dropped and the wrappers flip to a row, so the names read as a byline. Nothing is removed from the markup, so the Bricks controls and the desktop layout are untouched. */ @media(max-width:478px){ .acs-post-authors{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px} .acs-post-authors__item{flex-direction:row;align-items:center;gap:8px} /* the avatar's own wrapper is a direct child of __head, so it has to go too — hiding just the would leave an empty link holding the gap */ .acs-post-authors__head>a, .acs-post-authors__avatar, .acs-post-authors__position, .acs-post-authors__social{display:none} /* only BETWEEN items, so a single author gets no stray separator */ .acs-post-authors__item + .acs-post-authors__item::before{content:"|";flex:0 0 auto;color:var(--acs-muted,#9C999A);font-weight:400} } /* post content (acs-post-content): share + text-resize toolbar, then the body */ .acs-postcontent__bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px} .acs-postcontent__share{display:flex;align-items:center;gap:12px;position:relative} /* The box reads --acs-share-btn, which acs_share_button_style() sets inline per button from the repeater's «حجم الزر». A variable rather than an inline width so the phone rule further down can substitute a different one — an inline width would outrank every selector and leave mobile unstylable. */ .acs-postcontent__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--acs-share-btn,40px);height:var(--acs-share-btn,40px);padding:0;border:0;background:none;color:var(--acs-text);cursor:pointer;font:inherit;font-size:1.1rem;line-height:1;border-radius:50%;box-sizing:border-box;transition:color .15s ease,background-color .15s ease} .acs-postcontent__btn:hover{color:var(--acs-teal);background:#eef4f3} .acs-postcontent__btn[disabled]{opacity:.35;cursor:default;background:none} /* --acs-share-icon is set per button by the repeater's icon-size field */ .acs-postcontent__btn svg{width:var(--acs-share-icon,24px);height:var(--acs-share-icon,24px);fill:currentColor;display:block} /* Branded share icons BY DEFAULT so every share toolbar (magazine head + body, publication, news…) matches without per-instance Bricks colour/size overrides. The monochrome SVGs take their colour from the button; Instagram is full-colour via its own SVG (instagram-color). */ .acs-postcontent__btn--copy{color:#068788} .acs-postcontent__btn--facebook{color:#1877F2} .acs-postcontent__btn--x{color:#000000} .acs-postcontent__btn--linkedin{color:#0A66C2} /* text resizer: a fixed white pill holding − Aa + */ .acs-postcontent__resize{display:flex;align-items:center;justify-content:space-between;position:relative;box-sizing:border-box;width:130px;height:40px;padding:2px 16px;gap:8px;border-radius:14px;background:#FFFFFF} .acs-postcontent__btn--size{width:24px;height:24px;flex:0 0 auto;color:#168E7E} .acs-postcontent__btn--size:hover{color:#168E7E;background:#eef4f3} /* these two glyphs are drawn at their exact Figma sizes, not the 20px default */ .acs-postcontent__btn--size svg{width:14px;height:14px} .acs-postcontent__btn[data-acs-size="down"] svg{height:2px} /* the "Aa" indicator is a static size cue, not a control */ .acs-postcontent__size-label{direction:ltr;display:inline-flex;align-items:center;font-family:"Readex Pro";font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;text-align:right;color:#9C999A} .acs-postcontent__size-label small{font-family:inherit;font-weight:600;font-size:18px;line-height:150%} /* ---- phones: share icons and the resizer share one row ---- DOM order is resizer → share, which in RTL puts the resizer on the right; `order` flips them to icons-first (the right) without touching the markup, so desktop and the Bricks controls are unaffected. nowrap is only half of it — the pair has to actually FIT, and at the desktop 40px button plus a 12px gap it does not on a 390px screen, which is what was pushing it onto two lines. The two numbers below are floors: the element's «حجم الأيقونة» and «المسافة بين الأيقونات» controls emit `#brxe- …`, so anything set there still wins. */ @media(max-width:478px){ .acs-postcontent__bar{flex-wrap:nowrap;gap:12px} .acs-postcontent__share{order:1;flex-wrap:nowrap;min-width:0;gap:8px} .acs-postcontent__resize{order:2;flex:0 0 auto;height:32px} .acs-postcontent__size-label{font-size:18px} .acs-postcontent__size-label small{font-size:16px} /* Phone sizes come from the repeater's «(جوال)» fields. Scoped to __share so the resizer's own +/− buttons are untouched. The two fall back differently on purpose. The BOX drops to 32px when no mobile value is set — it has a hard constraint, five buttons plus the 130px resizer have to fit ~390px, so inheriting a roomy desktop size would push the row over again. The GLYPH falls through to the desktop value, since it has no such constraint and should stay visually consistent unless asked otherwise. */ .acs-postcontent__share .acs-postcontent__btn{width:var(--acs-share-btn-m,32px);height:var(--acs-share-btn-m,32px)} .acs-postcontent__share .acs-postcontent__btn svg{width:var(--acs-share-icon-m,var(--acs-share-icon,20px));height:var(--acs-share-icon-m,var(--acs-share-icon,20px))} } /* copy-link confirmation, anchored under the share row */ .acs-postcontent__toast{position:absolute;top:calc(100% + 6px);inset-inline-start:0;background:var(--acs-teal-dark);color:#fff;font-size:.75rem;padding:4px 10px;border-radius:var(--acs-radius,4px);white-space:nowrap;z-index:2} .acs-postcontent__body{line-height:1.9;color:var(--acs-text)} /* --acs-fs is set on the widget root by the resizer; --acs-fs-base is the body text size in px. The multiplication happens once here, on the scale wrapper, so descendants stay relative (em) and headings, lists and quotes scale too. */ .acs-postcontent__scale{--acs-fs-base:18px;font-size:calc(var(--acs-fs-base) * var(--acs-fs,1))} /* ===== mobile TOC dropdown (.acs-tocdrop) + read-more ===== Both are phone-only: the site's separate [acs_toc] widget owns the desktop index, and the body is never clamped there. Hidden by default and switched on inside the 478px block below, so nothing here leaks upward. Every colour is a Bricks control (see the «فهرس المحتويات» and «زر المزيد» groups); the values here are the design defaults. */ .acs-tocdrop{display:none;margin-bottom:16px} .acs-tocdrop__label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:500;line-height:150%;color:#9C999A} .acs-tocdrop__label svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor} .acs-tocdrop__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:12px 16px;border:0;border-radius:4px;background:#CB9B2A;color:#fff;cursor:pointer;font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:500;line-height:150%;text-align:start} /* the bar is one line whatever the heading length — min-width:0 is what lets a flex item shrink far enough for the ellipsis to engage */ .acs-tocdrop__current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acs-tocdrop__caret{flex:0 0 auto;display:inline-flex;transition:transform .2s ease} .acs-tocdrop__caret svg{width:12px;height:8px;display:block} .acs-tocdrop.is-open .acs-tocdrop__caret{transform:rotate(180deg)} .acs-tocdrop__list{list-style:none;margin:4px 0 0;padding:0;background:#fff;border-radius:4px;overflow:hidden} .acs-tocdrop__list[hidden]{display:none} .acs-tocdrop__item + .acs-tocdrop__item{border-top:1px solid var(--acs-border,#e2e5e5)} .acs-tocdrop__link{display:block;padding:12px 16px;color:#231F20;text-decoration:none;font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:500;line-height:150%} /* h3 entries indent under their h2 when both levels are listed */ .acs-tocdrop__item--h3 .acs-tocdrop__link{padding-inline-start:32px} .acs-postcontent__more{text-align: center;display:none;width:100%;box-sizing:border-box;margin-top:16px;padding:12px 16px;border:0;border-radius:4px;background:#068788;color:#fff;cursor:pointer;font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:500;line-height:150%} @media(max-width:478px){ .acs-tocdrop{display:block} .acs-postcontent.is-clamped .acs-postcontent__more{display:block} .acs-postcontent.is-clamped .acs-postcontent__body{position:relative} /* The clamp lives on __scale, not __body: em there resolves against the resizer's scaled font-size, so «15 lines» stays 15 lines after the reader hits (+). A max-height rather than -webkit-line-clamp because the body is block content — paragraphs, headings, images — which line-clamp cannot measure. line-height 1.9 comes from __body and is inherited. */ .acs-postcontent.is-clamped .acs-postcontent__scale{max-height:calc(var(--acs-more-lines,15) * var(--acs-more-lh,1.9) * 1em);overflow:hidden} .acs-postcontent.is-clamped .acs-postcontent__body::after{content:"";position:absolute;inset-inline:0;bottom:0;height:var(--acs-more-fade,96px);background:linear-gradient(to bottom,transparent,var(--acs-more-fade-color,#fff));pointer-events:none} } .acs-postcontent__scale p,.acs-postcontent__scale li,.acs-postcontent__scale blockquote,.acs-postcontent__scale td,.acs-postcontent__scale th,.acs-postcontent__scale figcaption{font-size:1em} /* body headings (Figma publication body): H2 = Readex 18/500, 24px gap to the text below it. Sizes stay in em so the − Aa + resizer still scales them. */ .acs-postcontent__scale h2{font-family:"Readex Pro",sans-serif;font-size:1.125em;font-weight:500;line-height:1.5;color:#231F20;margin:32px 0 24px} .acs-postcontent__scale h2:first-child{margin-top:0} .acs-postcontent__scale h3{font-size:1.25em} .acs-postcontent__scale h4{font-size:1.1em} /* pull-quote (الاقتباس), Figma: mint box with the bubble radius (all corners 32px except bottom-right). The double-quote asset sits at the top inline-END corner (top-left in RTL): 8px in from the end edge and nudged 1px up so it straddles the top border. The glyph is assets/images/quote.png. */ .acs-postcontent__scale blockquote{position:relative;box-sizing:border-box;margin:24px 32px;padding:16px;background:#E5EFED;border:0;border-radius:32px 32px 0 32px;font-family:"Readex Pro",sans-serif;font-weight:300;font-size:1.125em;line-height:1.5;color:#231F20;text-align:right} .acs-postcontent__scale blockquote::before{content:"";position:absolute;top:-1px;inset-inline-end:8px;width:32px;height:32px;background:url("images/quote.png") center/contain no-repeat} .acs-postcontent__scale blockquote > :first-child{margin-top:0} .acs-postcontent__scale blockquote > :last-child{margin-bottom:0} .acs-postcontent__scale blockquote p{font-weight:300;margin:0} /* tag chips under the content (gap/typography/bg overridable in Bricks) */ .acs-postcontent__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .acs-postcontent__tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:16px;background-color:#E5EFED;color:#101010;font-size:12px;font-weight:400;line-height:150%;text-decoration:none} a.acs-postcontent__tag:hover{background-color:#d6e7e3} /* post figure (acs-post-figure): featured image + alt caption ------------------ image gets the 4px brand radius; caption is Readex 12/400 with a short yellow accent line at the inline-end (the left, in RTL — matches Figma). */ .acs-postfigure{margin:0} .acs-postfigure__img{display:block;width:100%;height:auto;border-radius:4px} .acs-postfigure__caption{display:flex;align-items:center;gap:16px;margin-top:16px} .acs-postfigure__caption-text{flex:1;min-width:0;font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5;color:#231F20;text-align:right} .acs-postfigure__caption::after{content:"";flex:0 0 auto;width:52px;height:4px;border-radius:2px;background:#CB9B2A} .acs-postfigure .acs-empty{color:var(--acs-muted);padding:16px 0} /* single-template card lists (author's latest / related posts) */ .acs-scards{margin-block:32px} /* «أحدث منشورات الكاتب»: a thin-bordered box with 24px inner padding (Figma). */ .acs-scards--author{border:1px solid var(--acs-border,#e2e5e5);border-radius:var(--acs-radius,4px);padding:24px} .acs-scards--author .acs-section__head{margin-bottom:24px} /* «منشورات ذات صلة» is the last section — keep exactly 32px down to the footer. If a larger gap remains, remove the wrapping Bricks Section's bottom padding. */ .acs-scards--related{margin-top:32px;margin-bottom:32px} .acs-scards__grid{display:grid;gap:24px} /* ---- phones: the scards grids that become carousels ---- acs_scards_grid_html() serves author-latest, related-posts AND magazine-related off the same classes, so each carousel passes its own __track-- modifier and the sizes below hang off that. magazine-related opts into nothing and keeps its grid. The track and toolbar behaviour come from the shared component in homepage.css (enqueued site-wide). Only `display` is restated here: single.css loads AFTER homepage.css, so .acs-scards__grid{display:grid} would otherwise win on order — hence the two-class selector. */ /* author-latest card — the SAME fixed horizontal box at every width, not just on phones, so it is outside the media query. .acs-scard renders media BEFORE body, so `order` is what puts the text first (the right, in RTL) without touching the shared card helper. */ .acs-scards__track--author .acs-scard{flex-direction:row;gap:8px;width:624px;height:186px;box-sizing:border-box} .acs-scards__track--author .acs-scard__body{order:1} .acs-scards__track--author .acs-scard__media{order:2;flex:0 0 281px} .acs-scards__track--author .acs-scard__img{width:281px;height:154px;aspect-ratio:auto;object-fit:cover} @media(max-width:478px){ .acs-scards__grid.acs-cslider__track{display:flex;gap:16px} /* related-posts: the card stays vertical — media on top, then body — which is already the DOM order, so only the boxes change. Phone-only, unlike the author card above. */ .acs-scards__track--related .acs-scard{width:317px;height:384px;box-sizing:border-box} .acs-scards__track--related .acs-scard__img{width:317px;height:174px;aspect-ratio:auto;object-fit:cover} } .acs-scard{background:#fff;border-radius:var(--acs-radius,4px);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease} /* scard: site-wide latest hover — image zoom + teal underline, no lift */ .acs-scard:hover{box-shadow:none;transform:none} .acs-scard__img{transition:transform .35s ease} .acs-scard:hover .acs-scard__img{transform:scale(1.06)} .acs-scard:hover .acs-scard__title{color:#068788 !important;text-decoration:underline} .acs-scard__media{display:block;overflow:hidden;flex:0 0 auto} .acs-scard__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .acs-scard__body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0} .acs-scard__badges{display:flex;flex-wrap:wrap;gap:6px} /* Publication card/list title — Figma §6 scale: Readex Pro 500 / 18px / 150%. Shared base for every acs-scard consumer (related / author-latest / news-related / magazine-related) so titles match without a per-instance Bricks typography override. */ .acs-scard__title{font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:500;color:#231F20;text-decoration:none;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .acs-scard__title:hover{color:var(--acs-teal)} /* footer pinned to the card bottom, so a short title never lifts the author/date block up under it */ .acs-scard__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start} /* author row: meta sizing, not the title's — the byline sets its own weight */ .acs-scard__author{display:flex;align-items:center;font-size:.78rem;color:var(--acs-muted)} .acs-scard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.78rem;color:var(--acs-muted)} .acs-scard__date{white-space:nowrap} /* inline: author at the text start, date pushed to the opposite end */ .acs-scard__meta--inline{width:100%} .acs-scard__meta--inline .acs-scard__date{margin-inline-start:auto} /* stacked: date and badge stay packed together at the text start (the right, in RTL). Explicitly zero the margin so no wider `__date` rule can push them. */ .acs-scard__meta--stacked{justify-content:flex-start} .acs-scard__meta--stacked .acs-scard__date{margin-inline-start:0;margin-inline-end:0} .acs-scard__sep{color:var(--acs-muted);opacity:.5} /* horizontal variant: image beside the text. row-reverse puts the media (the first child) on the left in this RTL layout. */ .acs-scard--h{flex-direction:row-reverse;align-items:stretch} .acs-scard--h .acs-scard__media{flex:0 0 auto} .acs-scard--h .acs-scard__img{height:100%;aspect-ratio:auto;min-height:130px} .acs-scards .acs-empty{color:var(--acs-muted);padding:16px 0} @media(max-width:860px){.acs-scards__grid{grid-template-columns:1fr!important}} @media(max-width:560px){.acs-scard--h{flex-direction:column}.acs-scard--h .acs-scard__img{aspect-ratio:16/9;min-height:0}} /* ============================================================ research-topic single (acs-topic) — Figma "Category page" scale. Fonts: most text = "Readex Pro"; author position + pagination = "Bahij TheSansArabic". All sizes in px (page must not look zoomed out). ============================================================ */ /* The page is built from three separate widgets (hero / researchers / publications). Each keeps the .acs-topic class so the typography scoping below still applies, but the Bricks section owns the width and padding. */ .acs-topic--part{max-width:none;padding:0;width:100%;align-self:stretch;box-sizing:border-box} .acs-topic--part + .acs-topic--part{margin-top:32px} .acs-topic__title{font-family:"Readex Pro",sans-serif;font-size:32px;font-weight:600;line-height:1.5;color:var(--acs-text);margin:0 0 12px;text-align:right} .acs-topic__intro{font-family:"Readex Pro",sans-serif;font-weight:300;font-size:16px;line-height:1.5;color:#231F20;margin:0 0 32px;text-align:right} /* section headings (الباحثون / تصفّح …) — 24 / 600 */ .acs-topic .acs-section__title{font-family:"Readex Pro",sans-serif;font-size:24px;font-weight:600;line-height:1.5} /* publication cards + list items — title 18/500, excerpt 16/300 */ .acs-topic .acs-card__title,.acs-topic .acs-card--big .acs-card__title,.acs-topic .acs-plist__title{font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:500;line-height:1.5} .acs-topic .acs-card__excerpt{font-family:"Readex Pro",sans-serif;font-weight:300;font-size:14px;line-height:1.6;color:var(--acs-muted);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .acs-topic .acs-plist__excerpt{font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:300} /* type badge | date */ .acs-topic .acs-card__date::before,.acs-topic .acs-plist__date::before{content:"|";margin-inline-end:8px;color:var(--acs-border,#c9d1d1);font-weight:400} /* meta typography: date + author name = Readex Pro 400 / 12px */ .acs-topic .acs-card__meta,.acs-topic .acs-card__date,.acs-topic .acs-plist__date,.acs-topic .acs-byline__name,.acs-topic .acs-byline__name a{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5} /* hero side (h) cards: meta ABOVE the title (Figma), and date+badge before author */ .acs-topic__featured-side .acs-card__meta{order:-1;margin-top:0;flex-direction:column-reverse} /* Keep the featured h-card text TOP-aligned beside the image. The global .acs-card__body{justify-content:center} otherwise floats the (short) text to the middle of the card when it stretches to the big card's height — leaving a large gap under the fixed-height image. */ .acs-topic__featured-side .acs-card__body{justify-content:flex-start} /* featured (Figma): big card 519 (right) + two stacked h-cards 785 (left), 16px gaps */ .acs-topic__featured{display:grid;grid-template-columns:519fr 785fr;gap:16px;margin-bottom:32px;align-items:stretch} .acs-topic__featured-side{display:flex;flex-direction:column;gap:16px} .acs-topic__featured-side .acs-card{flex:1 1 0;min-height:0} @media (max-width:860px){.acs-topic__featured{grid-template-columns:1fr}.acs-topic__featured-side .acs-card{flex:auto}} /* card images: 4px brand radius + subtle image border (clips the hover zoom too) */ .acs-topic .acs-card__media{border-radius:4px;overflow:hidden} .acs-topic .acs-card__img{border-radius:4px;border:.5px solid rgba(133,135,135,.24);box-sizing:border-box} /* side featured (h) images: fixed 372.686 x 204.146 (Figma) */ .acs-topic__featured-side .acs-card--h .acs-card__media{flex:0 0 372.686px;max-width:372.686px} .acs-topic__featured-side .acs-card--h .acs-card__img{width:100%;height:204.146px;min-height:0;object-fit:cover} /* ---- phones: the featured block becomes the shared swipe carousel ---- The editorial layout keeps its cards in two wrappers (the big one and the side column); display:contents dissolves both so every card becomes a direct child of ONE flex track. The wrappers stay in the markup, so desktop is untouched. Track, snapping and the .acs-cnav toolbar come from the .acs-cslider component in homepage.css. The image rules repeat the THREE-class selectors above rather than using a shorter one: display:contents removes the wrapper's box, not its place in a selector, so `.acs-topic__featured-side .acs-card--h .acs-card__img` still matches and would otherwise keep its 204.146px height. */ @media(max-width:478px){ .acs-cslider__track.acs-topic__featured{display:flex;gap:16px;margin-bottom:16px} .acs-topic__featured-main,.acs-topic__featured-side{display:contents} .acs-topic__featured .acs-card{flex:0 0 auto;width:318px;height:369px;box-sizing:border-box;scroll-snap-align:start} /* every variant renders as the plain vertical card here: --big carries height:100%, --h is a row until the 820px rule stacks it */ .acs-topic__featured .acs-card--h{flex-direction:column} .acs-topic__featured-side .acs-card--h .acs-card__media{flex:0 0 auto;max-width:none} .acs-topic__featured .acs-card__img, .acs-topic__featured .acs-card--big .acs-card__img, .acs-topic__featured-side .acs-card--h .acs-card__img{width:318px;height:175px;min-height:0;aspect-ratio:auto;object-fit:cover} } /* section-title accent line beside the title (inline), not overlapping it */ .acs-topic .acs-section__title{display:inline-flex;align-items:center;gap:24px} .acs-topic .acs-section__title::after{position:static;margin-inline-start:0} /* phones: the 24px between the heading and its dash is the only spacing left (the dash's own margin is zeroed above), and it costs width the title needs */ @media(max-width:478px){.acs-topic .acs-section__title{gap:14px}} /* search-results list image — 4px radius */ .acs-topic .acs-plist__media{border-radius:4px} /* «تصفّح محتويات هذا المسار» rows (Figma, desktop): 1019×220 card = 401×220 media + 8px gap + 610×220 text. The shared results row is fixed at 260px with a 372px media flush against the body; here the two are separate blocks, so the row itself is transparent and the white fill moves to the text column (the 8px gap shows the page through). 1019px needs a 277px video column beside it (1320 − 24 − 1019) — the default below; the Bricks «عرض عمود الفيديو» control still overrides it. Below 861px the layout collapses and the stacked rules apply. */ @media (min-width:861px){ .acs-topic__browse{--acs-topic-aside:277px} .acs-topic__list .acs-results__list .acs-plist__item{height:220px;gap:8px;background:#FFF;border-radius:0} .acs-topic__list .acs-results__list .acs-plist__media{flex:0 0 401px;width:401px;height:220px} .acs-topic__list .acs-results__list .acs-plist__body{flex:1 1 auto;min-width:0;height:220px;box-sizing:border-box;background:#fff;border-radius:4px} } /* researchers slider — photo 126, 8px ring, 52px gap */ .acs-topic__researchers{margin-bottom:32px} .acs-topic__researchers .acs-section__head{margin-bottom:16px} .acs-topic__researchers-slider{position:relative} .acs-topic__researchers-track{display:flex;gap:52px;justify-content:start;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:10px 4px} .acs-topic__researchers-track::-webkit-scrollbar{display:none} /* phones: 52px between 126px photos leaves the row mostly empty on a 390px screen — the track is already a swipe carousel at every width, only the spacing changes here */ @media(max-width:478px){.acs-topic__researchers-track{gap:32px}} .acs-topic__researchers-slide{flex:0 0 auto;width:126px} .acs-researcher{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px} .acs-researcher__photo{display:block;width:126px;height:126px;border-radius:50%;overflow:hidden;background:#eef1f2;box-shadow:0 0 0 8px rgba(229,239,237,1)} .acs-researcher__photo img{width:100%;height:100%;object-fit:cover;display:block} .acs-researcher__name{font-family:"Readex Pro",sans-serif;font-weight:500;font-size:16px;line-height:1.5;color:var(--acs-text);text-decoration:none} a.acs-researcher__name:hover{color:var(--acs-teal)} .acs-researcher__pos{font-family:"Bahij TheSansArabic",sans-serif;font-weight:400;font-size:11px;line-height:1.5;color:var(--acs-muted)} /* browse: the white band holds the heading + the mint filter panel */ .acs-topic__browse-bar{margin-bottom: 16px;width:100%;background:#fff;padding:32px 60px;box-sizing:border-box} .acs-topic__browse-head{background:none;margin-inline:auto;max-width:var(--acs-topic-bar,1440px);box-sizing:border-box} .acs-topic__browse-head .acs-section__head{margin-bottom:0} /* the filter panel: capped at 1440, chips under the fields */ .acs-topic__filter{position:relative;z-index:5;margin:16px auto 0;width:100%;max-width:var(--acs-topic-bar,1440px);padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--acs-bg,#E5EFED);border-radius:var(--acs-radius,4px)} .acs-topic__filter-inner{display:flex;align-items:center;gap:16px;padding:0;position:relative;z-index:2;flex-wrap:wrap} .acs-topic__filter-label{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:24px;line-height:1.5;color:var(--acs-text)} .acs-topic__filter-field{display:inline-flex;align-items:center;gap:8px;color:var(--acs-text);font-family:"Readex Pro",sans-serif;font-weight:500;font-size:14px;border-inline-start:1px solid #231F20;padding-inline-start:16px} .acs-topic__filter-field select{border:0;background:transparent;font:inherit;color:var(--acs-text);cursor:pointer;padding:4px 4px} /* custom dropdown (native