/* ==============================
   Square Links - Custom Layout
============================== */

/* 4 عناصر في كل صف */
.square-links__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

/* الكارت */
.square-links__item {
    width: 100%;
    min-width: 0;
}

/* الرابط */
.square-links__item > a {
    display: block;
    width: 100%;
}

/* حاوية الصورة */
.square-links__image-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

/* الصورة كاملة بدون قص */
.square-links__image-wrap img {
    display: block;
    width: 100% !important;
    height: auto !important;

    /* إلغاء النسبة المفروضة من القالب */
    aspect-ratio: auto !important;

    /* أهم جزء: عدم قص الصورة */
    object-fit: contain !important;
    object-position: center !important;

    /* منع الزوم من قص الصورة عند الـ hover */
    transform: none !important;

    transition: opacity 0.3s ease;
}

/* Hover بسيط بدل التكبير */
.square-links__item:hover .square-links__image-wrap img {
    opacity: 0.9;
    transform: none !important;
}


/* ==============================
   Tablet
============================== */

@media (max-width: 991px) {
    .square-links__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}


/* ==============================
   Mobile
============================== */

@media (max-width: 480px) {
    .square-links__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .square-links__image-wrap {
        border-radius: 8px;
    }
}