/* ==========================================================================
   Social Proof Section - Testimonial & Stats
   Premium Layout: Testimonial Story (Left) / Heroic Stats Grid (Right)
   ========================================================================== */

#social-proof-section {
    --sp-primary: #004685;
    --sp-accent: #29afe3;
    --sp-bg-light: #f8fbfe;
    --sp-card-bg: #ffffff;
    --sp-text-main: #1f2937;
    --sp-text-muted: #6b7280;
    --sp-border-color: rgba(41, 175, 227, 0.15);
    --sp-shadow: 0 10px 30px rgba(0, 70, 133, 0.08);

    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

[data-theme="dark"] #social-proof-section {
    --sp-bg-light: #0d1117;
    --sp-card-bg: #161b22;
    --sp-text-main: #f3f4f6;
    --sp-text-muted: #9ca3af;
    --sp-border-color: rgba(255, 255, 255, 0.1);
    --sp-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

#social-proof-section .container {
    position: relative;
    z-index: 2;
}

/* Background Pattern */
.sp-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--sp-border-color) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    z-index: 1;
}

/* ===========================================
   Left Column: Testimonial Story
   =========================================== */
.sp-testimonial-card {
    background: transparent;
    padding: 20px 0;
    max-width: 95%;
    /* Prevent overly wide lines */
}

.sp-quote-icon {
    font-size: 3rem;
    color: var(--sp-accent);
    opacity: 0.3;
    display: block;
    margin-bottom: 20px;
}

.sp-testimonial-text p {
    font-family: 'Martel', serif;
    font-size: 1.4rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--sp-text-main);
    margin-bottom: 30px;
}

.sp-author-block {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--sp-border-color);
    width: fit-content;
}

.sp-author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #fff;
}

.sp-author-info strong {
    display: block;
    font-size: 1rem;
    color: var(--sp-text-main);
    font-weight: 700;
}

.sp-author-info span {
    display: block;
    font-size: 0.85rem;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navigation Controls (Customizing Owl) */
#social-proof-section .owl-nav {
    position: absolute;
    top: -60px;
    /* Position above/right of the card */
    right: 0;
    display: flex !important;
    gap: 10px;
    margin: 0 !important;
}

#social-proof-section .owl-prev,
#social-proof-section .owl-next {
    width: 40px;
    height: 40px;
    background: var(--sp-card-bg) !important;
    border: 1px solid var(--sp-border-color) !important;
    border-radius: 50% !important;
    color: var(--sp-primary) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#social-proof-section .owl-prev:hover,
#social-proof-section .owl-next:hover {
    background: var(--sp-primary) !important;
    color: #fff !important;
    border-color: var(--sp-primary) !important;
    transform: translateY(-2px);
}

/* ===========================================
   Right Column: Stat Cluster Grid
   =========================================== */
.sp-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    margin-left: 20px;
}

.sp-stat-card {
    background: var(--sp-card-bg);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--sp-border-color);
    box-shadow: var(--sp-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sp-stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--sp-accent);
}

/* Primary Stat (Spans full width or large spot) 
   Let's make the first one span full width on top for impact?
   Or keep 2x2. Let's do 2x2 but varying sizes if content suggests.
   For now, strictly 2 columns.
*/

.sp-stat-card.primary {
    background: linear-gradient(135deg, var(--sp-primary), #003366);
    color: #fff;
    grid-column: span 2;
    /* Full width top */
}

.sp-stat-card.primary .sp-stat-num {
    color: #fff;
    font-size: 4rem;
    font-weight: 800;
}

.sp-stat-card.primary .sp-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

/* Standard Stat Cards */
.sp-stat-num {
    font-size: 3rem;
    font-weight: 700;
    color: var(--sp-accent);
    line-height: 1;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    font-family: 'Poppins', sans-serif;
}

.sp-stat-num small {
    font-size: 1.5rem;
    margin-left: 2px;
}

.sp-stat-label {
    font-size: 0.95rem;
    color: var(--sp-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Decoration inside cards */
.sp-stat-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: var(--sp-accent);
    opacity: 0.05;
    border-radius: 50%;
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 991px) {
    #social-proof-section {
        padding: 60px 0;
    }

    .sp-bg-pattern {
        opacity: 0.2;
    }

    .sp-stat-grid {
        margin-left: 0;
        margin-top: 40px;
        grid-template-columns: 1fr 1fr;
        /* Keep 2 cols on tablet */
    }

    .sp-testimonial-card {
        text-align: center;
        max-width: 100%;
        padding: 0 10px;
    }

    .sp-author-block {
        margin: 0 auto;
        /* Center author */
    }

    #social-proof-section .owl-nav {
        /* Center arrows on mobile below text */
        position: relative;
        top: 0;
        justify-content: center;
        margin-top: 20px !important;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .sp-stat-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .sp-stat-card.primary {
        grid-column: span 1;
    }

    .sp-stat-num {
        font-size: 2.5rem;
    }

    .sp-testimonial-text p {
        font-size: 1.2rem;
    }
}