/* =================================================================== Shared results-pages widgets (handle acs-results) — glue ONLY. Enqueued by each widget's enqueue_scripts(): acs-search-bar (elements/search-bar.php) acs-results-filter (elements/results-filter.php) + single.css acs-results-list (elements/results-list.php) + single.css acs-tag-hero (elements/tag-hero.php) The real looks come from elsewhere: - search bar homepage.css .acs-experts__search* (site-wide) - mint filter band single.css .acs-topic__filter / .acs-select / .acs-topic__chips (registered site-wide, pulled in by the two widgets that need it) - filter SIDEBAR (layout=sidebar, client draft) lives HERE: .acs-fside* + the .acs-results-filter--sidebar two-column float layout - list rows homepage.css .acs-plist* + .acs-badge (+ .acs-plist__play / --reel modifiers here) - pager single.css .acs-topic__pager Page-level rhythm lives in search.css / tag-archive.css. RTL: first DOM child = RIGHT; margin-inline-start:auto pushes LEFT. =================================================================== */ /* ── acs-search-bar ────────────────────────────────────────────────── */ .acs-search-bar__inner{max-width:1320px;margin-inline:auto} /* homepage.css gives the experts form 36px below; here the filter band follows */ .acs-search-bar .acs-experts__search{margin-top:24px} /* the typed search word (client): Readex Pro 300 / 16px / 150% / right */ .acs-search-bar .acs-experts__search-input{font-family:"Readex Pro",sans-serif;font-weight:300;font-size:16px;line-height:1.5;text-align:right} /* ── acs-results-filter ────────────────────────────────────────────── */ .acs-results-filter__inner{max-width:1320px;margin-inline:auto;padding-inline:16px} /* the topic filter centers itself at 1440px inside the topic band — neutral here */ .acs-results-filter .acs-topic__filter{margin:0;max-width:none} .acs-plist__media{flex: 0 0 401px;} .acs-plist__byline{display: none;} /* ── acs-results-filter — layout=sidebar (client's NEW draft) ────────── The mint collapsible filter panel (.acs-fside) docks on the inline-end side (LEFT in RTL). Mechanics: the whole filter section FLOATS out of flow, so the results section rises up beside it; the list inner then reserves the sidebar column via :has(). The float width is padded by the container-centering math so the panel's edge lines up with the 1320px content column of the list. DRAFT: place the filter widget directly before the results list at the template root. */ :root{--acs-fside-w:298px;--acs-fside-gap:24px} .acs-fside{box-sizing:border-box;display:flex;flex-direction:column;gap:4px;background:var(--acs-bg,#E5EFED);border-radius:var(--acs-radius,4px);padding:16px} .acs-fside__group{border-bottom:1px solid rgba(35,31,32,.12);padding-bottom:8px} .acs-fside__group:last-of-type{border-bottom:0;padding-bottom:0} .acs-fside__head{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:16px;line-height:1.5;color:var(--acs-ink,#231F20);padding:8px 0;user-select:none} .acs-fside__head::-webkit-details-marker{display:none} .acs-fside__body{display:flex;flex-direction:column;gap:8px;padding:4px 0 8px} /* الموضوع + نوع المنشور البحثي — outline chips (multi-select toggles). Client: UNSELECTED has no background (mint panel shows through); SELECTED is white. */ .acs-fside__chips{flex-direction:row;flex-wrap:wrap} .acs-fside__chip{position:relative;cursor:pointer} .acs-fside__chip input{position:absolute;opacity:0;pointer-events:none} .acs-fside__chip span{display:inline-block;background:transparent;border:.5px solid var(--acs-teal,#068788);border-radius:var(--acs-radius,4px);padding:6px 10px;font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:var(--acs-ink,#231F20)} .acs-fside__chip input:checked+span{background:#fff;border-color:var(--acs-teal,#068788);color:var(--acs-ink,#231F20)} .acs-fside__chip input:focus-visible+span{outline:2px solid var(--acs-teal,#068788);outline-offset:2px} /* نوع المحتوى / الباحثون — checkbox rows; التاريخ — radio rows */ .acs-fside__check{display:flex;align-items:center;gap:8px;font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:var(--acs-ink,#231F20);cursor:pointer} .acs-fside__check input{accent-color:var(--acs-teal,#068788);width:16px;height:16px;margin:0;flex:0 0 auto} .acs-fside__list{max-height:224px;overflow:auto;padding-inline-end:4px} /* الباحثون — scrollable list with a teal (not gray) scrollbar (Figma) */ .acs-fside__list--scroll{max-height:180px;scrollbar-width:thin;scrollbar-color:var(--acs-teal,#068788) rgba(35,31,32,.08)} .acs-fside__list--scroll::-webkit-scrollbar{width:6px} .acs-fside__list--scroll::-webkit-scrollbar-track{background:rgba(35,31,32,.08);border-radius:3px} .acs-fside__list--scroll::-webkit-scrollbar-thumb{background:var(--acs-teal,#068788);border-radius:3px} /* التاريخ — من / إلى date inputs + تطبيق */ .acs-fside__dates{display:flex;flex-direction:row;gap:8px;margin-top:4px} .acs-fside__date{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;font-family:"Readex Pro",sans-serif;font-size:12px;color:var(--acs-ink,#231F20)} .acs-fside__date input{width:100%;box-sizing:border-box;border:1px solid #d5dbdb;border-radius:var(--acs-radius,4px);background:#fff;padding:6px 8px;font:inherit;color:inherit} .acs-fside__apply{align-self:flex-start;margin-top:8px;background:var(--acs-teal,#068788);color:#fff;border:0;border-radius:var(--acs-radius,4px);padding:8px 20px;font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:500;cursor:pointer} .acs-fside__apply:hover{opacity:.9} /* phone-sheet chrome — hidden on desktop; the ≤478px block below turns it on. The chevron is hidden here too so the desktop panel keeps its no-chevron, all-expanded look (JS force-opens the groups above 478px). */ .acs-fside__trigger,.acs-fside__panelhead,.acs-fside__submit,.acs-fside__chevron{display:none} @media (max-width:1024.98px){ /* stacked (mobile/tablet): full-width panel above the list */ .acs-results-filter--sidebar{margin-bottom:24px} } @media (min-width:1025px){ /* float the whole section to the inline-end (left in RTL); the extra width is the centering gutter, so the inner panel aligns with the content column */ .acs-results-filter--sidebar{float:inline-end;width:calc(var(--acs-fside-w) + 16px + max((100% - 1320px)/2, 0px))} .acs-results-filter--sidebar .acs-results-filter__inner{max-width:none;padding-inline:0} /* RTL: margin-inline-end:auto pushes the panel RIGHT inside the float, i.e. against the results column */ .acs-results-filter--sidebar .acs-fside{width:var(--acs-fside-w);margin-inline-start:0;margin-inline-end:auto} /* the list reserves the sidebar column (+ its own 16px edge padding) */ /* body:has(.acs-results-filter--sidebar) .acs-results__inner{padding-inline-end:calc(var(--acs-fside-w) + var(--acs-fside-gap) + 16px)}*/ /* clearfix: the results section grows to contain the float so the footer never rides up beside a tall sidebar */ body:has(.acs-results-filter--sidebar) .acs-results::after{content:"";display:block;clear:both} } /* ── acs-results-list ──────────────────────────────────────────────── */ .acs-results__inner{max-width:1320px;margin-inline:auto;padding-bottom:56px} .acs-results__list{margin-top:8px;gap:24px}/* client row rhythm: 24px between rows */ /* generic rows reuse .acs-plist__item wholesale. The image is taken OUT of the row's intrinsic-height calculation (absolute fill) so the TEXT column alone sets the row height — a portrait reel thumbnail can never inflate its row. FIXED height (not min-height) so EVERY card is identical: a short-text row (e.g. فعالية, no byline) matches a tall publication row (byline + excerpt). The height is sized to FIT the tallest type at the design's line-heights (badge/date + byline + 2-line title + 2-line excerpt + topics ≈ 258px), so nothing is clipped — shorter types just show more image, with the topics footer pinned to the bottom (margin-top:auto). The image (object-fit:cover, absolute-fill) crops to the same box. Tune this one value if the design wants taller/shorter rows. */ .acs-results__list .acs-plist__item{height:220px} .acs-results__list .acs-plist__body{overflow:hidden} /* the related-topics footer stays on ONE line so a multi-topic post can never grow a second line and push content past the fixed height */ .acs-results__list .acs-plist__program{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acs-results__list .acs-plist__media{overflow:hidden} .acs-results__list .acs-plist__media img{position:absolute;inset:0;width:100%;height:100%;min-height:0} /* video rows (client): white play button at the TOP-LEFT of the thumbnail */ /* the shared play badge (--acs-play-icon, homepage.css) */ .acs-plist__play{position:absolute;top:12px;left:12px;transform:none;width:48px;height:48px;background:var(--acs-play-icon) center/100% 100% no-repeat;pointer-events:none} /* reels have no play button (client: only normal videos show it) */ .acs-plist__media--reel .acs-plist__play{display:none} /* reels (teammate's video_type = 'short'): letterbox the tall thumbnail on black inside the SAME fixed media box so every row keeps the same size */ .acs-plist__media--reel{background:#000} .acs-plist__media--reel img{object-fit:contain} .acs-results__empty{text-align:center;padding:40px 0} .acs-results--placeholder{max-width:1320px;margin-inline:auto;padding:24px 16px;color:var(--acs-muted,#6a7178);border:1px dashed var(--acs-border,#e2e5e5);border-radius:var(--acs-radius,4px)} /* ── acs-tag-hero ──────────────────────────────────────────────────── */ .acs-tag-hero__inner{max-width:1320px;margin-inline:auto;padding-inline:16px} /* §6 scale: h1 Readex 32/600, intro 16/300 */ .acs-tag-hero__title{font-family:"Readex Pro",sans-serif;font-size:32px;font-weight:600;line-height:1.5;color:var(--acs-ink,#231F20);margin:0} .acs-tag-hero__intro{font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:300;line-height:1.5;color:var(--acs-ink,#231F20);margin:8px 0 0} .acs-tag-hero__head{margin-bottom:24px} .acs-tag-hero--placeholder{max-width:1320px;margin-inline:auto;padding:24px 16px;color:var(--acs-muted,#6a7178);border:1px dashed var(--acs-border,#e2e5e5);border-radius:var(--acs-radius,4px)} /* ── per-widget mobile ─────────────────────────────────────────────── */ @media(max-width:700px){ /* search bar keeps its 44px height; just tighten the gap */ .acs-search-bar .acs-experts__search{margin-bottom:16px} /* filter band: single.css already drops the field dividers at 600px; stack the label above the fields a bit earlier */ .acs-results-filter .acs-topic__filter{padding:16px} .acs-results-filter .acs-topic__filter-label{width:100%;font-size:18px} /* rows stack (homepage.css flips .acs-plist__item to column at its own breakpoint); the fixed desktop row height is dropped so the stacked card grows to its content, stacked media boxes get a fixed 16:9 box again, and the absolute image keeps filling it (reels stay letterboxed on black) */ .acs-results__list .acs-plist__item{height:auto;min-height:0} .acs-results__list .acs-plist__body{overflow:visible} .acs-results__list .acs-plist__media{aspect-ratio:16/9} .acs-tag-hero__title{font-size:24px} } /* ── phones: the sidebar filter → green button + full-screen sheet ────── Reuses homepage.js initVFilter (bound via data-acs-vfilter on the section root); the sheet chrome (.acs-fside__trigger/__panelhead/__submit) is display:none above this width, so the desktop sidebar is untouched. Kept LAST so these override the 700px + 1024.98px sidebar rules on phones. */ @media(max-width:478px){ /* the trigger leaves the flow (fixed FAB below), so drop the wrapper's bottom margin — otherwise it lingers as an empty gap above the results */ .acs-results-filter--sidebar{float:none;width:auto;margin-bottom:0} /* same fixed floating action button as the other filter pages (see .acs-topic__trigger in single.css): a 56×56 teal circle pinned bottom-left with the shared sliders icon; the sheet (z 9995) covers it when open */ .acs-fside__trigger{position:fixed;left:20px;bottom:24px;z-index:1000;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;border-radius:28px;background:var(--acs-teal,#068788);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.12),inset 0 1px 4px rgba(255,255,255,.3)} .acs-fside__trigger span{display:none} /* icon-only FAB — no text label */ .acs-fside__trigger svg{display:none} /* hide the inline glyph; the icon below is the shared one */ .acs-fside__trigger::before{content:"";display:block;width:26px;height:23px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 27'%3E%3Cpath d='M12.0474 3.31579C11.6053 1.43684 9.83684 0 7.73684 0C5.63684 0 3.97895 1.43684 3.42632 3.31579H0V5.52632H3.42632C3.86842 7.40526 5.63684 8.8421 7.73684 8.8421C9.83684 8.8421 11.4947 7.40526 12.0474 5.52632H30.9474V3.31579H12.0474ZM7.73684 6.63158C6.52105 6.63158 5.52632 5.63684 5.52632 4.42105C5.52632 3.20526 6.52105 2.21053 7.73684 2.21053C8.95263 2.21053 9.94737 3.20526 9.94737 4.42105C9.94737 5.63684 8.95263 6.63158 7.73684 6.63158ZM23.2105 8.8421C21.1105 8.8421 19.4526 10.2789 18.9 12.1579H0V14.3684H18.9C19.3421 16.2474 21.1105 17.6842 23.2105 17.6842C25.3105 17.6842 26.9684 16.2474 27.5211 14.3684H30.9474V12.1579H27.5211C27.0789 10.2789 25.3105 8.8421 23.2105 8.8421ZM23.2105 15.4737C21.9947 15.4737 21 14.4789 21 13.2632C21 12.0474 21.9947 11.0526 23.2105 11.0526C24.4263 11.0526 25.4211 12.0474 25.4211 13.2632C25.4211 14.4789 24.4263 15.4737 23.2105 15.4737ZM13.2632 17.6842C11.1632 17.6842 9.50526 19.1211 8.95263 21H0V23.2105H8.95263C9.39474 25.0895 11.1632 26.5263 13.2632 26.5263C15.3632 26.5263 17.0211 25.0895 17.5737 23.2105H30.9474V21H17.5737C17.1316 19.1211 15.3632 17.6842 13.2632 17.6842ZM13.2632 24.3158C12.0474 24.3158 11.0526 23.3211 11.0526 22.1053C11.0526 20.8895 12.0474 19.8947 13.2632 19.8947C14.4789 19.8947 15.4737 20.8895 15.4737 22.1053C15.4737 23.3211 14.4789 24.3158 13.2632 24.3158Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 27'%3E%3Cpath d='M12.0474 3.31579C11.6053 1.43684 9.83684 0 7.73684 0C5.63684 0 3.97895 1.43684 3.42632 3.31579H0V5.52632H3.42632C3.86842 7.40526 5.63684 8.8421 7.73684 8.8421C9.83684 8.8421 11.4947 7.40526 12.0474 5.52632H30.9474V3.31579H12.0474ZM7.73684 6.63158C6.52105 6.63158 5.52632 5.63684 5.52632 4.42105C5.52632 3.20526 6.52105 2.21053 7.73684 2.21053C8.95263 2.21053 9.94737 3.20526 9.94737 4.42105C9.94737 5.63684 8.95263 6.63158 7.73684 6.63158ZM23.2105 8.8421C21.1105 8.8421 19.4526 10.2789 18.9 12.1579H0V14.3684H18.9C19.3421 16.2474 21.1105 17.6842 23.2105 17.6842C25.3105 17.6842 26.9684 16.2474 27.5211 14.3684H30.9474V12.1579H27.5211C27.0789 10.2789 25.3105 8.8421 23.2105 8.8421ZM23.2105 15.4737C21.9947 15.4737 21 14.4789 21 13.2632C21 12.0474 21.9947 11.0526 23.2105 11.0526C24.4263 11.0526 25.4211 12.0474 25.4211 13.2632C25.4211 14.4789 24.4263 15.4737 23.2105 15.4737ZM13.2632 17.6842C11.1632 17.6842 9.50526 19.1211 8.95263 21H0V23.2105H8.95263C9.39474 25.0895 11.1632 26.5263 13.2632 26.5263C15.3632 26.5263 17.0211 25.0895 17.5737 23.2105H30.9474V21H17.5737C17.1316 19.1211 15.3632 17.6842 13.2632 17.6842ZM13.2632 24.3158C12.0474 24.3158 11.0526 23.3211 11.0526 22.1053C11.0526 20.8895 12.0474 19.8947 13.2632 19.8947C14.4789 19.8947 15.4737 20.8895 15.4737 22.1053C15.4737 23.3211 14.4789 24.3158 13.2632 24.3158Z'/%3E%3C/svg%3E") center/contain no-repeat} /* the panel inner becomes the sheet; hidden until initVFilter adds .is-open */ .acs-results-filter--sidebar .acs-results-filter__inner{display:none;position:fixed;inset:0;z-index:9995;max-width:none;box-sizing:border-box;margin:0;padding:16px;background:var(--acs-bg,#E5EFED);overflow-y:auto} .acs-results-filter--sidebar.is-open .acs-results-filter__inner{display:flex;flex-direction:column} /* inside the sheet the form is just the groups — the sheet paints bg/padding */ .acs-results-filter--sidebar.is-open .acs-fside{flex:1;gap:12px;background:transparent;padding:0;border-radius:0} /* each group becomes a white rounded dropdown row (Figma phone sheet); the desktop border-bottom divider + always-open body are dropped here — the groups collapse (sidebar_script strips `open` ≤478px) and expand on tap */ .acs-results-filter--sidebar .acs-fside__group{border-bottom:0;padding:0;background:#fff;border-radius:var(--acs-radius,4px)} .acs-results-filter--sidebar .acs-fside__head{padding:12px 16px} .acs-results-filter--sidebar .acs-fside__body{padding:0 16px 12px} .acs-fside__chevron{display:block;width:16px;height:16px;flex:0 0 auto;color:var(--acs-ink,#231F20);transition:transform .2s} .acs-fside__group[open] .acs-fside__chevron{transform:rotate(180deg)} /* head: × at the start · title · «مسح» pushed to the far (left in RTL) end */ .acs-fside__panelhead{display:flex;align-items:center;gap:12px;margin-bottom:16px} .acs-fside__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:var(--acs-ink,#231F20)} .acs-fside__paneltitle svg{width:20px;height:20px;flex:0 0 auto} .acs-fside__close{display:inline-flex;padding:0;border:0;background:none;color:var(--acs-teal,#068788);cursor:pointer} .acs-fside__close svg{width:20px;height:20px;display:block} .acs-fside__clearlink{margin-inline-start:auto;padding:0;color:var(--acs-teal,#068788);font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:500;text-decoration:none} /* the date group's own «تطبيق» is redundant next to the sheet's «بحث» */ .acs-fside__apply{display:none} .acs-plist__media {flex: 0 0 196px;} /* primary submit pinned to the foot of the sheet */ .acs-fside__submit{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:var(--acs-teal,#068788);color:#fff;cursor:pointer;font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:600;line-height:150%;text-align:center} }