/**
 * Edufin - Trust Hook Section Styles
 * Pain points section with central figure
 * Matches Figma design node 971:3995
 */

/* Section container */
.trust-hook {
    position: relative;
    background-color: rgba(101, 101, 101, 0.04);
    padding: var(--space-16) var(--space-30);
    overflow: hidden;
}

/* Section heading */
.trust-hook-heading {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: 1.375;
    text-align: center;
    color: #1a1a1a;
    text-transform: capitalize;
    max-width: 36.75rem;
    margin: 0 auto var(--space-12);
}

/* ===================================
   MAIN LAYOUT CONTAINER
   =================================== */

.trust-hook-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 78.25rem;
    margin: 0 auto;
}

/* ===================================
   DESKTOP BACKDROP (painpoints.svg)
   Contains all 6 cards with text + connection lines
   =================================== */

.trust-hook-backdrop {
    display: none;
}

/* ===================================
   CENTER VISUAL AREA
   =================================== */

.trust-hook-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 21.875rem;
    z-index: 2;
}

/* Gradient overlay behind figure */
.trust-hook-overlay {
    position: absolute;
    top: var(--space-20);
    left: 50%;
    transform: translateX(-50%);
    width: 22.75rem;
    height: 27.25rem;
    background: linear-gradient(180deg, #ebfce1 0%, rgba(234, 251, 225, 0) 100%);
    border-radius: 31.25rem 31.25rem 0 0;
    z-index: 0;
}

/* Central figure image */
.trust-hook-figure {
    position: relative;
    z-index: 1;
    width: 21.875rem;
    height: auto;
    object-fit: contain;
}

/* ===================================
   PERSONA CARD
   =================================== */

.trust-hook-persona {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-base-white);
    border-radius: 3.125rem;
    padding: var(--space-2) 2.75rem var(--space-2) var(--space-2);
    box-shadow: 
        0px 2.743px 16.457px 5.486px rgba(205, 205, 205, 0.15),
        0px 0px 20px 0px rgba(77, 77, 77, 0.06);
    margin-top: calc(-1 * var(--space-10));
}

.trust-hook-persona-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.trust-hook-persona-info {
    display: flex;
    flex-direction: column;
}

.trust-hook-persona-name {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: 1.6;
    color: var(--color-neutral-900);
    margin: 0;
}

.trust-hook-persona-role {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 1.75;
    color: var(--color-neutral-600);
    margin: 0;
}

/* ===================================
   MOBILE/TABLET CARDS
   =================================== */

.trust-hook-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 25rem;
    margin-top: var(--space-6);
}

/* Pain point card */
.trust-hook-card {
    background: var(--color-base-white);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: 0px 4px 24px 2px rgba(0, 0, 0, 0.04);
    width: 100%;
}

.trust-hook-card-title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: 1.67;
    color: #1a1a1a;
    text-transform: capitalize;
    margin: 0 0 var(--space-1);
}

.trust-hook-card-description {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: #737373;
    margin: 0;
}

/* ===================================
   DESKTOP STYLES (min-width: 1280px)
   Uses painpoints.svg backdrop
   =================================== */

@media (min-width: 80rem) {
    .trust-hook {
        padding: var(--space-16) var(--space-10);
    }

    .trust-hook-layout {
        min-height: 32.5rem;
        justify-content: center;
    }

    /* Show the SVG backdrop on desktop */
    .trust-hook-backdrop {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 78.25rem;
        height: 30.125rem;
        z-index: 1;
    }

    .trust-hook-backdrop img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Position center content over the backdrop */
    .trust-hook-center {
        position: relative;
        margin-top: var(--space-5);
    }

    .trust-hook-overlay {
        top: 3.75rem;
    }

    .trust-hook-persona {
        margin-top: calc(-1 * var(--space-6));
    }

    /* Hide mobile cards on desktop */
    .trust-hook-cards-mobile {
        display: none;
    }
}

/* ===================================
   TABLET STYLES (769px - 1279px)
   Matches Figma design node 1028:8645
   =================================== */

@media (max-width: 80rem) and (min-width: 48.0625rem) {
    .trust-hook {
        padding: 3.75rem var(--space-5);
        background-color: #fafafa;
    }

    .trust-hook-heading {
        font-size: var(--space-8);
        line-height: 2.75rem;
        max-width: 36.75rem;
        margin-bottom: var(--space-12);
    }

    .trust-hook-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Cards grid - positioned above figure */
    .trust-hook-cards-mobile {
        display: grid;
        grid-template-columns: repeat(2, 22.125rem);
        gap: var(--space-5);
        order: 1;
        max-width: 45.5rem;
        margin-bottom: var(--space-10);
    }

    .trust-hook-card {
        width: 22.125rem;
        padding: var(--space-4);
        border-radius: var(--radius-md);
        box-shadow: 0px 4px 24px 2px rgba(0, 0, 0, 0.04);
    }

    .trust-hook-card-title {
        font-size: var(--text-lg);
        line-height: 1.875rem;
        margin-bottom: var(--space-1);
    }

    .trust-hook-card-description {
        font-size: var(--text-base);
        line-height: 1.75rem;
        letter-spacing: 0.01rem;
        color: #737373;
    }

    /* Center section with figure - positioned below cards */
    .trust-hook-center {
        order: 2;
        width: 21.875rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .trust-hook-overlay {
        width: 22.75rem;
        height: 27.25rem;
        top: var(--space-20);
    }

    .trust-hook-figure {
        width: 21.875rem;
        height: auto;
    }

    .trust-hook-persona {
        padding: var(--space-2) 2.75rem var(--space-2) var(--space-2);
        gap: var(--space-3);
        margin-top: -2.5rem;
        box-shadow: 
            0px 2.743px 16.457px 5.486px rgba(205, 205, 205, 0.15),
            0px 0px 20px 0px rgba(77, 77, 77, 0.06);
    }

    .trust-hook-persona-avatar {
        width: 4.5rem;
        height: 4.5rem;
    }

    .trust-hook-persona-name {
        font-size: var(--text-xl);
        line-height: var(--space-8);
        color: #202939;
    }

    .trust-hook-persona-role {
        font-size: var(--text-base);
        line-height: 1.75rem;
        color: #697586;
    }
}

/* ===================================
   MOBILE STYLES (max-width: 768px)
   Single column layout, hide figure
   =================================== */

@media (max-width: 48rem) {
    .trust-hook {
        padding: var(--space-12) var(--space-5);
        background-color: #fafafa;
    }

    .trust-hook-heading {
        font-size: var(--space-6);
        line-height: 2.125rem;
        max-width: 100%;
        margin-bottom: var(--space-8);
    }

    .trust-hook-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Cards in single column */
    .trust-hook-cards-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
        max-width: 22.125rem;
        margin-top: 0;
    }

    .trust-hook-card {
        width: 100%;
        padding: var(--space-4);
        border-radius: var(--radius-md);
        box-shadow: 0px 4px 24px 2px rgba(0, 0, 0, 0.04);
    }

    .trust-hook-card-title {
        font-size: var(--text-lg);
        line-height: 1.875rem;
        margin-bottom: var(--space-1);
    }

    .trust-hook-card-description {
        font-size: var(--text-base);
        line-height: 1.75rem;
        letter-spacing: 0.01rem;
        color: #737373;
    }

    /* Hide center section with figure on mobile */
    .trust-hook-center {
        display: none;
    }
}

/* ===================================
   SMALL MOBILE STYLES
   =================================== */

@media (max-width: 30rem) {
    .trust-hook {
        padding: var(--space-10) var(--space-4);
    }

    .trust-hook-heading {
        font-size: 1.375rem;
        line-height: var(--space-8);
    }

    .trust-hook-cards-mobile {
        max-width: 100%;
    }

    .trust-hook-card {
        padding: 0.875rem;
    }

    .trust-hook-card-title {
        font-size: var(--text-base);
        line-height: 1.625rem;
    }

    .trust-hook-card-description {
        font-size: var(--text-sm);
        line-height: var(--space-6);
    }
}