@php
    $settings = $widget->settings;
    $news = category_news($settings['category_id']);
    $category = category($settings['category_id']);
@endphp

<style>
.wgt-wrap {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #f0e8e8;
    transition: box-shadow .25s;
}
.wgt-wrap:hover {
    box-shadow: 0 8px 28px rgba(214,54,63,.13), 0 2px 8px rgba(0,0,0,.07);
}

/* ── Category header ── */
.wgt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px 10px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2b0707 60%, #1a1a1a 100%);
    border-bottom: 3px solid #d6363f;
    position: relative;
    overflow: hidden;
}
.wgt-header::after {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 80px; height: 80px;
    background: rgba(214,54,63,.12);
    border-radius: 50%;
}
.wgt-header-bar {
    width: 4px; height: 22px;
    background: #d6363f;
    border-radius: 3px;
    flex-shrink: 0;
}
.wgt-header a {
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}
.wgt-header a:hover { color: #ffb3b6 !important; }

/* ── News items ── */
.wgt-item {
    display: flex;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid #f5eded;
    position: relative;
    transition: background .18s;
}
.wgt-item:last-child { border-bottom: none; }
.wgt-item:hover { background: #fff8f8; }

/* left border accent on hover */
.wgt-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #d6363f;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .22s ease;
    border-radius: 0 2px 2px 0;
}
.wgt-item:hover::before { transform: scaleY(1); }

/* image thumb */
.wgt-thumb {
    flex-shrink: 0;
    width: 90px; height: 68px;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
}
.wgt-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.wgt-item:hover .wgt-thumb img { transform: scale(1.07); }

/* title */
.wgt-title {
    flex: 1;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    transition: color .18s;
    align-self: center;
}
.wgt-item:hover .wgt-title { color: #d6363f; }
</style>

<div class="paddingL0 paddingR0">
    <div class="loadingDiv2 text-center" style="display:none;"><i class="fa fa-spinner"></i></div>

    <div class="wgt-wrap">

        {{-- ── Header ── --}}
        <div class="wgt-header">
            <div class="wgt-header-bar"></div>
            <a aria-label="{{ $category->name }}"
               href="{{ route('news', $category->name) }}">{{ $category->name }}</a>
        </div>

        {{-- ── News items ── --}}
        @forelse ($news->slice(0,6) as $info)
        <div class="wgt-item">
            <div class="">
                @include('global.image', ['w' => '90px'])
            </div>
            <h2 class="wgt-title title2">{{ $info->title }}</h2>
            <a aria-label="{{ $info->title }}"
               href="{{ route('news', [str_replace(' ', '_', $info->category), $info->uuid]) }}"
               class="linkOverlay"></a>
        </div>
        @empty
        @endforelse

    </div>
</div>