/*
 * SoftKey Projects Grid — v2.2
 * Separate namespace from the Related Projects carousel: skpg-*
 */
.skpg-wrap {
    --skpg-accent-1: #B47EF2;
    --skpg-accent-mid: #C96BDD;
    --skpg-accent-2: #F049BF;
    --skpg-columns: 2;
    --skpg-column-gap: 28px;
    --skpg-row-gap: 38px;

    width: 100%;
    box-sizing: border-box;
    position: relative;
    background: transparent !important;
    font-family: inherit;
}

/* Optional front-end category filters. */
.skpg-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
}

.skpg-filter {
    position: relative;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid rgba(180,126,242,.32);
    border-radius: 999px;
    color: rgba(255,255,255,.86);
    background: rgba(9,8,20,.48);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.skpg-filter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, var(--skpg-accent-2) 0%, var(--skpg-accent-mid) 52%, var(--skpg-accent-1) 100%);
    opacity: 0;
    transition: opacity .25s ease;
}

.skpg-filter:hover,
.skpg-filter.is-active {
    color: #fff;
    border-color: rgba(240,73,191,.78);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.20), 0 0 18px rgba(180,126,242,.12), 0 0 24px rgba(240,73,191,.08);
}

.skpg-filter:hover::before,
.skpg-filter.is-active::before {
    opacity: 1;
}

/* 2 columns desktop by default; responsive Elementor control can override. */
.skpg-grid {
    display: grid;
    grid-template-columns: repeat(var(--skpg-columns), minmax(0, 1fr));
    column-gap: var(--skpg-column-gap);
    row-gap: var(--skpg-row-gap);
    width: 100%;
    align-items: start;
}

.skpg-item {
    min-width: 0;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .28s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}

.skpg-item.is-hidden {
    display: none;
}

.skpg-card {
    position: relative;
    min-width: 0;
    text-align: center;
}

/* Image tile gets the premium treatment; the section itself stays transparent. */
.skpg-media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #080A16;
    isolation: isolate;
    text-decoration: none !important;
    border: 1px solid rgba(180,126,242,.30);
    box-shadow: 0 16px 34px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.015);
    transition: transform .42s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .42s ease;
}

.skpg-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(115deg, var(--skpg-accent-1), var(--skpg-accent-mid) 46%, var(--skpg-accent-2) 76%, var(--skpg-accent-1));
    background-size: 220% 220%;
    opacity: .40;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity .35s ease;
}

.skpg-media::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 11%;
    right: 11%;
    bottom: -14px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--skpg-accent-1), var(--skpg-accent-2));
    filter: blur(21px);
    opacity: 0;
    transition: opacity .35s ease;
}

.skpg-ratio-16-9 { aspect-ratio: 16 / 9; }
.skpg-ratio-3-2  { aspect-ratio: 3 / 2; }
.skpg-ratio-4-3  { aspect-ratio: 4 / 3; }

.skpg-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform .72s cubic-bezier(.16,.76,.3,1), filter .45s ease;
}

.skpg-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 26% 18%, rgba(180,126,242,.32), transparent 34%),
        linear-gradient(135deg, rgba(180,126,242,.18), rgba(240,73,191,.08));
}

.skpg-image-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 58%, rgba(4,5,14,.12) 75%, rgba(4,5,14,.42) 100%);
}

.skpg-open-icon {
    position: absolute;
    z-index: 5;
    right: 16px;
    top: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(6,8,18,.72);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    opacity: 0;
    transform: translate(7px,-7px) scale(.88);
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
    transition: opacity .3s ease, transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}

.skpg-open-icon::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--skpg-accent-1), var(--skpg-accent-mid), var(--skpg-accent-2));
    opacity: .78;
}

.skpg-open-icon::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: rgba(6,8,18,.94);
}

.skpg-open-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.skpg-card:hover .skpg-media {
    transform: translateY(-7px);
    border-color: rgba(240,73,191,.64);
    box-shadow: 0 24px 46px rgba(0,0,0,.30), 0 0 22px rgba(180,126,242,.12), 0 0 34px rgba(240,73,191,.08);
}

.skpg-card:hover .skpg-media::before {
    opacity: 1;
    animation: skpg-border-shift 4s linear infinite;
}

.skpg-card:hover .skpg-media::after {
    opacity: .30;
}

.skpg-card:hover .skpg-media img {
    transform: scale(1.035);
    filter: saturate(1.06) contrast(1.025) brightness(.97);
}

.skpg-card:hover .skpg-open-icon {
    opacity: 1;
    transform: translate(0,0) scale(1);
    box-shadow: 0 0 18px rgba(180,126,242,.18), 0 0 25px rgba(240,73,191,.10);
}

.skpg-card:hover .skpg-open-icon svg {
    transform: translate(1px,-1px);
}

.skpg-body {
    padding: 17px 10px 0;
}

.skpg-title {
    margin: 0;
    line-height: 1.2;
}

.skpg-title-link {
    display: inline-block;
    margin: 0;
    text-decoration: none !important;
    font-size: clamp(22px, 1.75vw, 30px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #F049BF;
    background: linear-gradient(100deg, var(--skpg-accent-2) 0%, var(--skpg-accent-mid) 50%, var(--skpg-accent-1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: filter .3s ease, transform .3s ease;
}

.skpg-card:hover .skpg-title-link {
    filter: brightness(1.16) drop-shadow(0 0 9px rgba(240,73,191,.12));
    transform: translateY(-1px);
}

.skpg-category {
    margin-top: 7px;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}

.skpg-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 126px;
    min-height: 42px;
    margin-top: 15px;
    padding: 0 19px;
    border-radius: 7px;
    overflow: hidden;
    isolation: isolate;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(100deg, var(--skpg-accent-2) 0%, var(--skpg-accent-mid) 52%, var(--skpg-accent-1) 100%);
    box-shadow: 0 8px 18px rgba(0,0,0,.16), 0 0 14px rgba(240,73,191,.08);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.skpg-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, var(--skpg-accent-1), var(--skpg-accent-mid), var(--skpg-accent-2));
    opacity: 0;
    transition: opacity .3s ease;
}

.skpg-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.skpg-button:hover {
    color: #fff !important;
    transform: translateY(-3px);
    filter: brightness(1.06);
    box-shadow: 0 12px 24px rgba(0,0,0,.22), 0 0 20px rgba(180,126,242,.14), 0 0 26px rgba(240,73,191,.10);
}

.skpg-button:hover::before { opacity: 1; }
.skpg-button:hover svg { transform: translateX(3px); }

.skpg-empty {
    grid-column: 1 / -1;
    padding: 28px;
    border: 1px solid rgba(180,126,242,.26);
    border-radius: 14px;
    color: rgba(255,255,255,.72);
    text-align: center;
    background: rgba(6,8,18,.40);
}

@keyframes skpg-border-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

/* Tablet defaults to 2, unless Elementor responsive control overrides it. */
@media (max-width: 1024px) {
    .skpg-grid {
        --skpg-columns: 2;
        --skpg-column-gap: 22px;
        --skpg-row-gap: 32px;
    }

    .skpg-title-link {
        font-size: clamp(20px, 2.5vw, 26px);
    }
}

/* Mobile: exactly one project per row by default. */
@media (max-width: 767px) {
    .skpg-grid {
        --skpg-columns: 1;
        --skpg-column-gap: 0px;
        --skpg-row-gap: 28px;
    }

    .skpg-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-bottom: 22px;
        padding-bottom: 3px;
    }

    .skpg-filters::-webkit-scrollbar { display: none; }

    .skpg-filter {
        flex: 0 0 auto;
        min-height: 39px;
        padding: 0 17px;
        font-size: 12px;
    }

    .skpg-media {
        border-radius: 16px;
    }

    .skpg-open-icon {
        width: 38px;
        height: 38px;
        right: 12px;
        top: 12px;
        opacity: .92;
        transform: none;
    }

    .skpg-body {
        padding-top: 14px;
    }

    .skpg-title-link {
        font-size: 23px;
    }

    .skpg-category {
        font-size: 13px;
    }

    .skpg-button {
        min-width: 124px;
        min-height: 41px;
        margin-top: 13px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skpg-media,
    .skpg-media img,
    .skpg-open-icon,
    .skpg-button,
    .skpg-title-link,
    .skpg-filter,
    .skpg-item {
        transition: none !important;
        animation: none !important;
    }
}


/* Arabic page only: RTL filters and text, without changing the grid layout. */
.skpg-wrap[dir="rtl"] { direction: rtl; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; }
.skpg-wrap[dir="rtl"] .skpg-filter,
.skpg-wrap[dir="rtl"] .skpg-title,
.skpg-wrap[dir="rtl"] .skpg-category,
.skpg-wrap[dir="rtl"] .skpg-button { letter-spacing: 0; }