{{!-- FT & NYT Hybrid Broadsheet — Computational Engines & Horizontal Topic Ribbons --}}
<section class="ft-broadsheet-engines-ribbons" aria-label="Computational Engines and Topic Hubs">

    {{!-- 1. COMPUTATIONAL SUITE DOCK --}}
    <div class="ft-comp-dock">
        <div class="ft-comp-header">
            <div class="ft-comp-titles">
                <h3 class="ft-comp-title">The Falah Computational Suite</h3>
                <p class="ft-comp-subtitle">Deterministic Shariah engines executing AAOIFI 2026.4 standards and Islamic estate distribution algorithms</p>
            </div>
            <div class="ft-comp-status">
                <span class="ft-status-pill">Active Engines &bull; Live Telemetry</span>
            </div>
        </div>

        <div class="ft-comp-grid">
            <div class="ft-comp-card">
                <span class="ft-dock-badge">Succession Protocol</span>
                <h4 class="ft-dock-name">Faraid Estate Distribution</h4>
                <p class="ft-dock-desc">Mathematical calculation of Islamic inheritance shares under Ashab al-Furud, Asabah, and Rad. Automated Radd, Awl, and spouse shares.</p>
                <a href="/calculator/" class="ft-dock-link">Launch Engine &rarr;</a>
            </div>

            <div class="ft-comp-card">
                <span class="ft-dock-badge">Purification Engine</span>
                <h4 class="ft-dock-name">Portfolio Zakat &amp; Dividend Engine</h4>
                <p class="ft-dock-desc">Calculates operational zakat liability across equities, cash, private equity, and gold, with automated dividend purification deductions.</p>
                <a href="/zakat/" class="ft-dock-link">Launch Engine &rarr;</a>
            </div>

            <div class="ft-comp-card">
                <span class="ft-dock-badge">Family Governance</span>
                <h4 class="ft-dock-name">The Virtual Family Office</h4>
                <p class="ft-dock-desc">Interactive curriculum and templates for Muslim family wealth preservation, Waqf covenants, and emergency estate dossiers.</p>
                <a href="/tools/" class="ft-dock-link">Explore Curriculum &rarr;</a>
            </div>
        </div>
    </div>

    {{!-- 2. HORIZONTAL SECTION TOPIC RIBBONS (NYT 4-Column Horizontal Layout) --}}
    {{#get "tags" filter="slug:[islamic-finance,shifa,geopolitical-intelligence,philosophy]" limit="4"}}
        {{#foreach tags}}
            <div class="ft-section-ribbon">
                <div class="ft-ribbon-bar">
                    <h3 class="ft-ribbon-tag-name"><a href="{{url}}">{{name}}</a></h3>
                    <a href="{{url}}" class="ft-ribbon-view-all">View Full Section &rarr;</a>
                </div>
                <div class="ft-ribbon-grid-4">
                    {{#get "posts" filter="tag:{{slug}}+status:published" limit="4" include="tags,authors"}}
                        {{#foreach posts}}
                            <article class="ft-ribbon-card">
                                {{#if feature_image}}
                                    <div class="ft-ribbon-thumb">
                                        <a href="{{url}}"><img src="{{img_url feature_image size="m"}}" alt="{{title}}"></a>
                                    </div>
                                {{/if}}
                                <h4 class="ft-ribbon-card-headline">
                                    <a href="{{url}}">{{title}}</a>
                                </h4>
                                <p class="ft-ribbon-card-excerpt">
                                    {{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="18"}}{{/if}}
                                </p>
                                <div class="ft-ribbon-card-byline">
                                    {{#if primary_author}}<a href="{{primary_author.url}}">{{primary_author.name}}</a>{{/if}} &middot; {{reading_time}}
                                </div>
                            </article>
                        {{/foreach}}
                    {{/get}}
                </div>
            </div>
        {{/foreach}}
    {{/get}}

</section>