/* Impact Services Grid - Frontend */

.isg-grid-wrapper {
    --isg-gap: 20px;
    --isg-radius: 28px;
    --isg-title-color: #ffffff;
    --isg-arrow-color: #febcb0;
    --isg-arrow-bg: rgba(255, 255, 255, 0.15);
    --isg-arrow-bg-hover: rgba(255, 255, 255, 0.3);
    --isg-arrow-size: 48px;
    --isg-overlay-color: rgba(0, 0, 0, 0.35);
    --isg-row-height: 220px;
    --isg-title-size: clamp(1.25rem, 2vw, 1.75rem);
    --isg-columns-desktop: 3;
    --isg-columns-tablet: 2;
    --isg-columns-mobile: 1;
    width: 100%;
}

.isg-grid-wrapper.isg-rtl {
    direction: rtl;
}

.isg-grid {
    display: grid;
    grid-template-columns: repeat(var(--isg-columns-desktop), minmax(0, 1fr));
    grid-auto-rows: var(--isg-row-height);
    grid-auto-flow: dense;
    gap: var(--isg-gap);
    width: 100%;
}

@media (max-width: 1024px) {
    .isg-grid {
        grid-template-columns: repeat(var(--isg-columns-tablet), minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .isg-grid {
        grid-template-columns: repeat(var(--isg-columns-mobile), minmax(0, 1fr));
    }
}

.isg-card {
    position: relative;
    min-height: var(--isg-row-height);
    border-radius: var(--isg-radius);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    text-decoration: none;
    color: var(--isg-title-color);
    isolation: isolate;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
    background-image: var(--isg-card-background, linear-gradient(135deg, #f5c5b3, #f08d7e));
    background-size: cover;
    background-position: var(--isg-card-position, center center);
    background-repeat: no-repeat;
}

.isg-card-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.isg-card-overlay {
    background: var(--isg-overlay-color);
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.isg-card--no-image {
    background-image: linear-gradient(135deg, #f5c5b3, #f08d7e);
}

.isg-card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 28px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    gap: 24px;
}

.isg-grid-wrapper.isg-rtl .isg-card-content {
    text-align: right;
    align-items: flex-end;
}

.isg-grid-wrapper.isg-rtl .isg-card-title {
    text-align: right;
    direction: rtl;
    align-self: flex-end;
    margin-left: auto;
}

.isg-card-title {
    font-family: var(--wp--preset--font-family--tajawal), 'Manrope', 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--isg-title-size, clamp(1.25rem, 2vw, 1.75rem));
    font-weight: 600;
    margin: 0;
    color: var(--isg-title-color);
}

.isg-card-arrow {
    width: var(--isg-arrow-size, 48px);
    height: var(--isg-arrow-size, 48px);
    border-radius: 50%;
    background: var(--isg-arrow-bg, rgba(255, 255, 255, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--isg-arrow-color);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    align-self: flex-end;
    margin-top: auto;
}

.isg-card-arrow svg {
    width: calc(var(--isg-arrow-size, 48px) * 0.45);
    height: calc(var(--isg-arrow-size, 48px) * 0.45);
}

.isg-grid-wrapper.isg-rtl .isg-card-arrow svg {
    transform: scaleX(-1);
}

.isg-card-arrow.isg-card-arrow--icon-only {
    background: transparent;
    width: auto;
    height: auto;
    padding: 0;
}

.isg-card-arrow.isg-card-arrow--icon-only svg {
    width: calc(var(--isg-arrow-size, 48px) * 0.75);
    height: calc(var(--isg-arrow-size, 48px) * 0.75);
}

.isg-card:hover .isg-card-overlay {
    opacity: 0.6;
}

.isg-card:hover .isg-card-arrow {
    background: var(--isg-arrow-bg-hover, rgba(255, 255, 255, 0.3));
    transform: translateX(4px);
}

.isg-grid-wrapper.isg-rtl .isg-card:hover .isg-card-arrow {
    transform: translateX(-4px);
}

.isg-card:focus-visible {
    outline: 3px solid var(--isg-arrow-color);
    outline-offset: 3px;
}