/* ===================================================================
   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;padding-inline:16px}
/* homepage.css gives the experts form 36px below; here the filter band follows */
.acs-search-bar .acs-experts__search{margin-bottom: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-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:306px;--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}
@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-inline:16px;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.
   min-height keeps short-text rows at the standard editorial row height. */
.acs-results__list .acs-plist__item{min-height:200px}
.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 */
.acs-plist__play{position:absolute;top:12px;left:12px;transform:none;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);pointer-events:none}
/* triangle matches the homepage .acs-vcard__play glyph (points right) */
.acs-plist__play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--acs-teal,#068788)}
/* 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); 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{min-height:0}
	.acs-results__list .acs-plist__media{aspect-ratio:16/9}
	.acs-tag-hero__title{font-size:24px}
}