/**
 * About Me Preview Section
 * Image left (450px), bio + specializations right
 * Follows Why Choose section pattern for consistency
 */

/* ==========================================================================
   Section Container
   ========================================================================== */

.about-preview-section {
    /* Padding handled by .axis-section */
    /* position: relative; */
}

/* ==========================================================================
   Section Heading
   ========================================================================== */

.about-preview-section .section-heading {
    text-align: center;
    margin-bottom: var(--axis-space-10);
    line-height: 1.3;
}

/* Hide heading component underline for cleaner look */
.about-preview-section .section-heading-wrapper::after {
    display: none;
}

/* Tagline integrated into heading - hide separate element */
.about-subheading {
    display: none;
}


/* ==========================================================================
   Two-Column Grid - Tighter alignment
   ========================================================================== */

.about-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--axis-space-8);
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
    /* Photo aligns with headline */
}

@media (min-width: 992px) {
    .about-preview-grid {
        grid-template-columns: 450px 1fr;
        gap: var(--axis-space-12);
    }
}

/* ==========================================================================
   Image Column
   ========================================================================== */

.about-preview-image {
    position: relative;
    border-radius: var(--axis-radius-lg);
    overflow: hidden;
    box-shadow: var(--axis-shadow-lg);
}

.about-preview-image .about-image,
.about-preview-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--axis-radius-lg);
}

/* Mobile: Center constrain */
@media (max-width: 991px) {
    .about-preview-image {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Content Column - Simplified
   ========================================================================== */

.about-preview-content {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-6);
}

/* Italic Subtitle - Better visual hierarchy */
.about-subtitle-italic {
    font-size: var(--axis-text-lg);
    font-style: italic;
    line-height: 1.5;
    color: var(--axis-text-muted);
    /* margin-bottom: var(--axis-space-2); */
    /* text-align: center; */
}

.about-subtitle-italic p {
    margin: 0;
    /* text-align: center; */
}

/* Body paragraph - improved readability */
.about-preview-content>.brxe-text-basic:not(.about-subtitle-italic) {
    font-size: var(--axis-text-lg);
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--axis-text-primary);
    /* text-align: center !important; */
    /* padding: var(--axis-space-6) var(--axis-space-4) !important; */
    /* background: rgb(55 120 199 / 4%) !important; */
    /* border-radius: var(--axis-radius-md) !important; */
    /* border: 1px solid rgba(0, 136, 204, 0.1) !important; */
}

/* ==========================================================================
   Credential Badges - Uses Global Hero Badge Class
   ========================================================================== */

.credentials-badges {
    display: flex;
    /* flex-direction: column; */
    /* margin-top: var(--axis-space-0); */
    /* text-align: center; */
    background: rgba(0, 136, 204, 0.03) !important;
    border-radius: var(--axis-radius-md) !important;
    border: 1px solid rgba(0, 136, 204, 0.1) !important;
    padding: var(--axis-space-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: var(--axis-space-2); */
    /* margin-top: var(--axis-space-4); */
}

/* Badge hover effects - subtle interaction */
.credentials-badges .hero-badge {
    /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
    /* border: none; */
    background: none;
    border: none;
}

.credentials-badges .hero-badge:hover {
    /* transform: translateY(-2px) scale(1.02); */
    /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); */
    background: none;
    border: none;
}

.credentials-badges .hero-badge:hover .brxe-icon,
.credentials-badges .hero-badge:hover i {
    transform: rotate(5deg);
}

/* Badges use global .hero-badge class from styles.css - no custom styling needed */

/* Custom icon colors for each badge */
.credentials-badges .hero-badge:nth-child(1) .brxe-icon,
.credentials-badges .hero-badge:nth-child(1) i {
    color: var(--axis-accent);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.credentials-badges .hero-badge:nth-child(2) .brxe-icon,
.credentials-badges .hero-badge:nth-child(2) i {
    color: var(--axis-success);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.credentials-badges .hero-badge:nth-child(3) .brxe-icon,
.credentials-badges .hero-badge:nth-child(3) i {
    color: var(--axis-info);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile: Stack badges vertically */
@media (max-width: 640px) {
    .credentials-badges {
        /* flex-direction: column; */
        /* align-items: flex-start; */
    }
}

/* Hide old help cards */
.help-card,
.help-card-emoji,
.help-card-title,
.help-card-description {
    display: none;
}

/* ==========================================================================
   CTA Section - Horizontal Layout with Separator
   ========================================================================== */

.about-cta-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--axis-space-4);
    margin-top: var(--axis-space-6);
    flex-wrap: wrap;
}

/* Separator between CTAs */
.about-cta-section::before {
    /* content: '|'; */
    color: var(--axis-text-muted);
    font-size: var(--axis-text-lg);
    order: 1;
}

/* Primary CTA - First position */
.about-cta-section .btn-primary,
.about-cta-section .cta-primary-btn {
    min-width: 240px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    order: 0;
}

/* Secondary Link - Second position */
.about-secondary-link {
    margin: 0;
    order: 2;
}

.about-secondary-link p {
    margin: 0;
    font-size: var(--axis-text-base);
}

.about-secondary-link a {
    color: var(--axis-primary);
    text-decoration: none;
    font-weight: var(--axis-font-semibold);
    transition: color 0.2s ease;
}

.about-secondary-link a:hover {
    color: var(--axis-primary-dark);
    text-decoration: underline;
}

/* Mobile: Stack CTAs vertically */
@media (max-width: 640px) {
    .about-cta-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-cta-section::before {
        order: 1;
    }

    .about-cta-section .btn-primary,
    .about-cta-section .cta-primary-btn {
        order: 0;
        width: 100%;
        min-width: unset;
    }

    .about-secondary-link {
        order: 2;
    }
}

/* ==========================================================================
   Mobile Optimizations
   ========================================================================== */

@media (max-width: 991px) {
    .about-cta-section {
        align-items: center;
    }

    .about-cta-section .btn-primary {
        width: 100%;
        max-width: 320px;
    }
}

/* ==========================================================================
   MOBILE HOMEPAGE OPTIMIZATION
   ========================================================================== */

/* TASK 7: Condense bio section on mobile homepage */
@media (max-width: 767px) {

    /* Hide second/third paragraphs on mobile homepage */
    .about-preview-section .about-preview-content>p:nth-of-type(2),
    .about-preview-section .about-preview-content>p:nth-of-type(3) {
        display: none;
    }

    /* Tighten spacing */
    .about-preview-section {
        padding-top: var(--axis-space-8) !important;
        padding-bottom: var(--axis-space-8) !important;
    }

    .about-preview-section .about-preview-grid {
        gap: var(--axis-space-6) !important;
    }

    /* Smaller image on mobile */
    .about-preview-section .about-preview-image {
        max-width: 280px !important;
    }

    .about-preview-content>.brxe-text-basic:not(.about-subtitle-italic) {
        /* text-align: center !important; */
        padding: var(--axis-space-6) var(--axis-space-4) !important;
        background: rgb(55 120 199 / 2%) !important;
        border-radius: var(--axis-radius-md) !important;
    }

    .about-subtitle-italic p {
        margin: 0;
        text-align: center;
    }


    /* Convert badges to clean list on mobile */
    .credentials-badges {
        /* display: flex; */
        /* flex-direction: column; */
        gap: var(--axis-space-3);
        margin-top: var(--axis-space-0);
        /* text-align: center; */
        /* background: rgba(0, 136, 204, 0.03) !important; */
        /* border-radius: var(--axis-radius-md) !important; */
        /* border: 1px solid rgba(0, 136, 204, 0.1) !important; */
        /* padding: var(--axis-space-5); */
    }

    .credentials-badges .hero-badge {
        background: none;
        border: none;
        padding: 0;
        box-shadow: none;
        font-size: var(--axis-text-base);
        gap: var(--axis-space-2);
        justify-content: center;
        /* text-align: center; */
    }

    .credentials-badges .hero-badge:hover {
        background: none;
        transform: none;
        box-shadow: none;
    }

    .credentials-badges .hero-badge .brxe-icon,
    .credentials-badges .hero-badge i {
        font-size: 1.2em;
    }

}