@php
    $category = $categories[0] ?? null;
    $news = $category ? category_news($category->id)->take(8) : collect();
@endphp

<div class="row">
    {{-- Category Header --}}
    <div class="col-xs-12 paddingL8 paddingR8 marginB15">
        @include('global.separatior')
    </div>

    {{-- News Grid --}}
    @foreach ($news as $info)
        <div class="col-md-3 col-sm-6 col-xs-6 marginB30
            {{ $loop->iteration % 4 == 1 ? 'paddingL8' : '' }}
            {{ $loop->iteration % 4 == 0 ? 'paddingR8' : '' }}">

            <div class="itemDiv bgWhite hoverOrange shadow-sm" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: 0.3s;">
                <div class="thumbnail borderNone padding0 marginB0" style="position: relative;">

                    {{-- Image Section with Gradient Overlay --}}
                    <div class="positionRelative media-body" style="overflow: hidden;">
                        @include('global.image', ['info' => $info])

                        {{-- Optional: Subtitle Badge --}}
                        @if ($info->sub_title)
                            <span class="shoulder" style="position: absolute; top: 10px; left: 10px; background: #ff2e00; color: #fff; padding: 2px 8px; border-radius: 3px; z-index: 1;">
                                {{ $info->sub_title }}
                            </span>
                        @endif
                    </div>

                    {{-- Text Section --}}
                    <div class="caption padding15" style="min-height: 100px; display: flex; flex-direction: column; justify-content: space-between;">
                        <h2 class="title3 margin0 two-line " >
                            {{ $info->title }}
                        </h2>

                        {{-- Adding a small time/date or icon for better look --}}
                        <div class="marginT10" style="font-size: 12px; color: #888;">
                            <i class="fa fa-clock-o"></i>  {{ timeAgo($info->created_at) }}
                        </div>
                    </div>
                </div>

                {{-- Link Overlay --}}
                <a href="{{ news_url($info) }}" class="linkOverlay"></a>
            </div>
        </div>

        {{-- Row Clearfix for Mobile (Jate 2to kore grid thik thake) --}}
        @if($loop->iteration % 2 == 0)
            <div class="clearfix visible-xs visible-sm"></div>
        @endif
        @if($loop->iteration % 4 == 0)
            <div class="clearfix visible-md visible-lg"></div>
        @endif
    @endforeach
</div>