# Leaders Overview Directory

This folder powers the reusable leadership directory section that can be dropped into Elementor/the block editor via a shortcode.

- `acf.php`: registers the `remark_leaders` repeater under the “Leaders Overview” options page (`Remark Builder`). Each leader stores name, role, biography (WYSIWYG), country, leader type, headshot, and any number of social links.
- `shortcodes.php`: exposes `[remark_leaders_overview]` (alias `[remark_leaders_list]`) which loads the page assets, builds the two-level filter UI (country + leader type), renders leader cards, and wires up the “Read More” targets.
- `page.css`: styles the filter pills, tab underline, responsive 3× card grid, social badges, and expanded biography panel.
- `page.js`: handles filter switching and the read-more toggle logic; no dependencies required.
- `page.anim.js`: uses GSAP/ScrollTrigger (already enqueued globally) to fade in the filters and cards as the section enters the viewport.

## Usage

1. Populate leaders via **Remark Builder → Leaders Overview**. Use consistent values for *Country* and *Leader Type* to control the filter buttons (e.g. “Bangladesh”, “Board of Directors”). Blank values fall back to “Global” and “Leadership”.
2. Drop the shortcode where you want the directory to appear:
   ```
   [remark_leaders_overview]
   ```
   Optional attributes `default_country` or `default_type` can preselect a tab (supply the label, e.g. `default_country="Bangladesh"`).
3. The section automatically loads its CSS/JS/animations when the shortcode is rendered.