/* ============================================================
   Service Page — Section 2: Challenges → Our Solution
   Reusable two-column split · one shared card component
   ============================================================ */

.svc-ps {
    background: var(--color-bg-white);
}

/* ── Two-column grid with centre connector ────────────────── */
.svc-ps__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* ── Column ───────────────────────────────────────────────── */
.svc-ps__col {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    /* per-column accent — drives icons, borders & hovers */
    --ps-accent: var(--color-text-muted);
    --ps-accent-rgb: 91, 100, 120;
}

.svc-ps__col--problem {
    --ps-accent: #F26B4E;
    --ps-accent-rgb: 242, 107, 78;
}

.svc-ps__col--solution {
    --ps-accent: var(--color-primary);
    --ps-accent-rgb: 14, 95, 232;
    border-color: rgba(14, 95, 232, 0.22);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(25, 167, 255, 0.08), transparent 55%),
        linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg-white) 60%);
    box-shadow: var(--shadow-md);
}

/* ── Column header ────────────────────────────────────────── */
.svc-ps__col-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px dashed var(--color-border);
}

.svc-ps__col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(var(--ps-accent-rgb), 0.12);
    color: var(--ps-accent);
}
.svc-ps__col-icon svg { width: 24px; height: 24px; }

.svc-ps__col-badge {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-accent);
    margin-bottom: 2px;
}

.svc-ps__col-title {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
}

/* ── Card stack (dynamic count, equal heights) ────────────── */
.svc-ps__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1; /* stretch so mirrored columns balance */
}

/* ── Shared card component ────────────────────────────────── */
.svc-ps-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.svc-ps-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--ps-accent-rgb), 0.35);
}

.svc-ps-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(var(--ps-accent-rgb), 0.1);
    color: var(--ps-accent);
    transition: background var(--transition), color var(--transition);
}
.svc-ps-card__icon svg { width: 20px; height: 20px; }
.svc-ps-card__icon img { width: 20px; height: 20px; object-fit: contain; }

.svc-ps-card:hover .svc-ps-card__icon {
    background: var(--ps-accent);
    color: #fff;
}

.svc-ps-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.35;
    margin-bottom: var(--space-1);
}

.svc-ps-card__text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Centre connector (challenges ⇢ solution) ─────────────── */
.svc-ps__connector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
}
.svc-ps__connector-line {
    position: absolute;
    inset: 0 auto 0 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
}
.svc-ps__connector-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}
.svc-ps__connector-badge svg { width: 22px; height: 22px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .svc-ps__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .svc-ps__connector {
        width: 100%;
        height: 48px;
    }
    .svc-ps__connector-line {
        inset: 50% 0 auto 0;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
    }
    .svc-ps__connector-badge svg { transform: rotate(90deg); }
}

@media (max-width: 560px) {
    .svc-ps__col { padding: var(--space-5); }
    .svc-ps-card { padding: var(--space-4); }
    .svc-ps__col-head { gap: var(--space-3); }
    .svc-ps__col-icon { width: 42px; height: 42px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .svc-ps-card { transition: none; }
}