{{!-- 홈 Latest 하단: 태그별 최신 글 최대 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
<section class="px-4 sm:px-5 lg:px-6 py-4 mb-8 home-categories" data-home-categories>
    <div class="max-w-content mx-auto">
        <div class="flex gap-2 items-end justify-between border-b border-brd pb-3">
            <h2 class="text-sm uppercase font-medium text-typ-tone">Categories</h2>
        </div>
        <div data-feed="categories">
            {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
                <ul
                    class="flex flex-col"
                    data-category-priority-list
                    data-category-priority-order="tech,business,health,science,design,travel,gaming,music,diy,photography,books"
                    data-category-priority-limit="10"
                >
                    {{#foreach tags}}
                        {{#if count.posts}}
                            <li
                                class="home-categories__row grid grid-cols-1 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-6 gap-y-3 md:gap-y-2 md:items-start border-b border-b-brd p-4 sm:p-5 pl-4 sm:pl-5"
                                data-category-priority-item
                                data-category-slug="{{slug}}"
                                style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}#94a3b8{{/if}};"
                            >
                                <div class="home-categories__meta flex min-h-0 min-w-0 flex-col gap-1.5 border-b border-brd pb-3 md:border-b-0 md:pb-0">
                                    <h2 class="font-medium leading-tight text-typ">{{name}}</h2>
                                    {{#if description}}
                                        <p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{description}}</p>
                                    {{/if}}
                                    <a href="{{url}}" class="home-categories__view-all mt-0.5 flex items-center gap-1 text-sm font-semibold leading-snug text-typ-tone hover:opacity-75">
                                        <span>View all</span>
                                        <i class="icon icon-arrow-up-right size-3.5 shrink-0 stroke-2" role="presentation" aria-hidden="true">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M17 7l-10 10"></path>
                                                <path d="M8 7l9 0l0 9"></path>
                                            </svg>
                                        </i>
                                    </a>
                                </div>
                                <ol class="home-categories__posts flex min-h-0 min-w-0 list-none flex-col gap-1.5 text-sm font-medium text-typ-tone">
                                    {{#get "posts" filter=(concat "tag:" slug) limit="5" include="authors,tags" order="published_at desc"}}
                                        {{#foreach posts}}
                                            <li>
                                                <a
                                                    href="{{url}}"
                                                    data-number="{{@number}}. "
                                                    title="{{title}}"
                                                    class="line-clamp-1 text-ellipsis before:content-[attr(data-number)] before:font-bold leading-snug hover:opacity-75"
                                                    aria-label="{{title}}"
                                                >{{title}}</a>
                                            </li>
                                        {{/foreach}}
                                    {{/get}}
                                </ol>
                            </li>
                        {{/if}}
                    {{/foreach}}
                </ul>
            {{/get}}
        </div>
    </div>
</section>
