/**
 * Why Choose Axis Section
 * Image left, feature list right
 * 
 * STANDARDIZED: December 3, 2025
 * Now uses .axis-section--bg-white and .axis-grid-2 from styles.css
 * Reduced from 175 lines to ~145 lines (17% reduction)
 * 
 * USAGE IN HTML/JSON:
 * Section: "axis-section axis-section--bg-white why-choose-section"
 * Grid: "axis-grid-2 why-choose-wrapper"
 */

/* ==========================================================================
   Section Container - Extends .axis-section--bg-white
   ========================================================================== */

.why-choose-section {
    /* Background handled by .axis-section--bg-white */
    /* Padding handled by .axis-section */
    position: relative;
}

/* ==========================================================================
   Content Wrapper - Extends .axis-grid-2 with custom column sizes
   ========================================================================== */

.why-choose-wrapper {
    /* Base grid handled by .axis-grid-2 */
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

@media (min-width: 992px) {
    .why-choose-wrapper {
        grid-template-columns: 450px 1fr;
        gap: var(--axis-space-16);
    }
}

/* ==========================================================================
   Image Side
   ========================================================================== */

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

.why-choose-image .why-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Placeholder styling if no image */
.why-choose-image:not(:has(img[src])) {
    background: var(--axis-gradient-primary);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-choose-image:not(:has(img[src]))::after {
    content: 'Add your professional photo here';
    color: var(--axis-white);
    font-size: var(--axis-text-lg);
    text-align: center;
    padding: var(--axis-space-5);
}

/* ==========================================================================
   Text Side
   ========================================================================== */

.why-choose-content {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-8);
}

.why-intro {
    font-size: var(--axis-text-base);
    line-height: var(--axis-line-height-relaxed);
    color: var(--axis-text);
    margin-bottom: var(--axis-space-4);
}

/* ==========================================================================
   Features List
   ========================================================================== */

.why-features-list {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-6);
}

/* Individual Feature */
.why-feature {
    display: flex;
    gap: var(--axis-space-4);
    align-items: flex-start;
    padding: var(--axis-space-5);
    background: var(--axis-gray-50);
    border-radius: var(--axis-radius-md);
    transition: all var(--axis-transition-base);
}

.why-feature:hover {
    background: var(--axis-gray-200);
}

/* Feature Icon */
.why-feature .feature-icon {
    font-size: 32px;
    color: var(--axis-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.why-feature .feature-icon i,
.why-feature .feature-icon::before {
    color: var(--axis-primary) !important;
}

/* Feature Content */
.feature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-2);
}

.feature-title {
    font-size: var(--axis-text-lg);
    font-weight: var(--axis-font-semibold);
    color: var(--axis-dark);
    margin: 0;
}

.feature-description {
    font-size: var(--axis-text-sm);
    line-height: var(--axis-line-height-relaxed);
    color: var(--axis-text);
    margin: 0;
}

@media (min-width: 769px) {
    .feature-title {
        font-size: var(--axis-text-lg);
    }

    .feature-description {
        font-size: var(--axis-text-base);
    }
}

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

@media (max-width: 991px) {
    .why-choose-image {
        max-height: 400px;
    }

    .why-feature {
        padding: var(--axis-space-4);
    }

    .why-feature .feature-icon {
        font-size: 28px;
    }
}