/* ============================================================
   Services Section - Mobile First
   ============================================================ */

/* ── Mobile: horizontal swipe carousel ── */
.ww-services__grid {
    display: flex;
    gap: 16px;
    margin-top: var(--ww-base-space-48);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 clamp(1rem, 4vw, 1.5rem);
    padding-bottom: var(--ww-base-space-8);
    scrollbar-width: none;
}

.ww-services__grid::-webkit-scrollbar {
    display: none;
}

.ww-services__grid > .ww-services__card {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: center;
}

/* ── Tablet (2 columns grid) ── */
@media (min-width: 768px) {
    .ww-services__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        overflow-x: visible;
        scroll-snap-type: none;
        scroll-padding: 0;
        padding-bottom: 0;
        margin-top: var(--ww-base-space-64);
    }

    .ww-services__grid > .ww-services__card {
        flex: none;
        max-width: none;
        scroll-snap-align: unset;
    }
}

/* ── Desktop (3 columns grid) ── */
@media (min-width: 1025px) {
    .ww-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ww-services__orb {
    position: absolute;
    right: 25%;
    top: 33%;
    width: 600px;
    height: 600px;
    background: var(--ww-base-glow-cyan);
    border-radius: var(--ww-base-radius-full);
    filter: blur(140px);
    pointer-events: none;
}

.ww-services__subtitle {
    font-size: var(--ww-base-font-18);
    color: var(--ww-invi-page-text-muted);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
    text-align: center;
}

.ww-services__card {
    position: relative;
    padding: var(--ww-base-space-32);
    border-radius: var(--ww-invi-card-radius);
    background: var(--ww-invi-card-bg);
    border: 1px solid var(--ww-invi-card-border);
    backdrop-filter: var(--ww-invi-glass-blur);
    box-shadow: inset 0 1px 1px var(--ww-base-glass-05);
    transition: transform var(--ww-base-transition-normal), box-shadow var(--ww-base-transition-normal);
    overflow: hidden;
}

.ww-services__card:hover {
    transform: scale(1.05) translateY(-8px);
}

.ww-services__card-icon {
    display: inline-flex;
    padding: var(--ww-base-space-16);
    border-radius: var(--ww-base-radius-12);
    margin-bottom: var(--ww-base-space-24);
    background: linear-gradient(135deg, var(--ww-base-glow-cyan-orb), var(--ww-base-glow-purple-orb));
    border: 1px solid var(--ww-base-glow-cyan-strong);
    box-shadow: 0 0 20px var(--ww-base-glow-cyan);
    color: var(--ww-base-cyan-500);
    transition: transform var(--ww-base-transition-normal);
}

.ww-services__card:hover .ww-services__card-icon {
    transform: scale(1.1) rotate(3deg);
}

.ww-services__card-title {
    font-size: var(--ww-base-font-24);
    font-weight: var(--ww-base-weight-bold);
    color: var(--ww-invi-page-text);
    margin-bottom: var(--ww-base-space-16);
    transition: color var(--ww-base-transition-fast);
}

.ww-services__card:hover .ww-services__card-title {
    color: var(--ww-base-cyan-500);
}

.ww-services__card-text {
    color: var(--ww-invi-page-text-muted);
    line-height: 1.6;
}

.ww-services__card-glow {
    position: absolute;
    inset: 0;
    border-radius: var(--ww-invi-card-radius);
    opacity: 0;
    background: linear-gradient(135deg, var(--ww-base-glow-cyan-subtle) 0%, transparent 50%, var(--ww-base-glow-purple-subtle) 100%);
    transition: opacity var(--ww-base-transition-normal);
    pointer-events: none;
}

.ww-services__card:hover .ww-services__card-glow {
    opacity: 1;
}

.ww-services__card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 0 0 var(--ww-invi-card-radius) var(--ww-invi-card-radius);
    opacity: 0;
    transition: opacity var(--ww-base-transition-normal);
}

.ww-services__card:hover .ww-services__card-line {
    opacity: 1;
}

.ww-services__card-line--cyan-blue {
    background: var(--ww-invi-gradient-cyan-blue);
}

.ww-services__card-line--purple {
    background: var(--ww-invi-gradient-purple);
}

.ww-services__card-line--green {
    background: var(--ww-invi-gradient-green);
}

.ww-services__card-line--cyan-purple {
    background: var(--ww-invi-gradient-cyan-purple);
}

.ww-services__card-line--purple-green {
    background: var(--ww-invi-gradient-purple-green);
}

.ww-services__card-line--green-cyan {
    background: var(--ww-invi-gradient-green-cyan);
}