@if ($categories->count() > 0 )
<style>
  /* فل-ويدث اختياري — إذا سبب سكرول أفقي، شِلّه وخَلّي width:100% */
  .categories-grid-full{
    width:100vw;
    left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
    margin-top:0 !important; padding:0 !important;
    overflow-x:hidden;
  }

  .categories-grid{
    display:grid;
    gap:8px;                 /* مسافة خفيفة بين البطاقات */
    margin:0; padding:0;
    direction:ltr !important;
    grid-template-columns: repeat(2, minmax(0,1fr));   /* موبايل: عمودان */
  }

  /* موبايل عريض ~ ≥ 400px: 3 أعمدة */
  @media (min-width: 400px){
    .categories-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  }

  /* تابلت صغير ≥ 576px: رجّع auto-fit مع حد أدنى مريح */
  @media (min-width: 576px){
    .categories-grid{ grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
  }

  /* لابتوب ≥ 992px: مربعات أكبر قليلًا */
  @media (min-width: 992px){
    .categories-grid{ grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
  }

  /* كرت مربع */
  .cat-card{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio: 1 / 1;
    overflow:hidden;
    border-radius:12px;
    transition: transform .15s ease;
  }
  .cat-card:hover{ transform: translateY(-2px); }

  .cat-img{
    width:100%; height:100%;
    object-fit:cover; display:block;
  }

  /* Overlay بنص أصغر على الموبايل */
  .cat-overlay{
    position:absolute; inset:0;
    display:flex; align-items:flex-end; justify-content:center;
    padding:10px; text-align:center; direction: rtl;
    color:#fff; font-weight:700;
    font-size: clamp(12px, 3.5vw, 18px);  /* أصغر على الشاشات الصغيرة */
    line-height:1.2;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.38) 100%);
    pointer-events:none;                  /* الرابط يظل قابل للنقر */
  }

  /* Fallback للمتصفحات بدون aspect-ratio */
  @supports not (aspect-ratio: 1 / 1){
    .cat-card::before{ content:""; display:block; padding-top:100%; }
    .cat-img{ position:absolute; top:0; left:0; }
  }
</style>

<section class="categories-grid-full m-0 p-0">
  <div class="categories-grid">
    @foreach($categories as $category)
      <a
        href="{{ route('products', ['id'=> $category['id'],'data_from'=>'category','page'=>1]) }}"
        class="cat-card"
        aria-label="{{ $category->name }}"
      >
        <img
          alt="{{ $category->name }}"
          src="{{ getStorageImages(path: $category->icon_full_url, type: 'category') }}"
          class="cat-img"
          loading="lazy"
        >
        <span class="cat-overlay">{{ $category->name }}</span>
      </a>
    @endforeach
  </div>
</section>
@endif