/* ================================================================
   ABOUT US - SECTION 3: 100MAP METHODOLOGY
   Pixel-Perfect Figma Implementation
   Target: 85%+ Figma Compliance
   Created: 2025-10-31
   ================================================================ */

:root {
    --torg-orange: rgb(228, 169, 96);
    --torg-orange-light: rgb(240, 190, 130);
    --text-primary: #FFFFFF;
    --bg-primary: #1a1a1a;
}

/* ================================================================
   SECTION 3: MAIN CONTAINER
   ================================================================ */

.about-section-3 {
    position: relative;
    min-height: auto;
    padding: 3rem 0; /* HEIGHT FIX: 48px top/bottom (was 64px) → reduce 32px total */
    background: radial-gradient(ellipse at top left, rgba(228, 169, 96, 0.03) 0%, transparent 50%),
                radial-gradient(ellipse at center, rgba(228, 169, 96, 0.1) 0%, transparent 50%),
                linear-gradient(to bottom right, rgba(228, 169, 96, 0.016) 0%, rgba(228, 169, 96, 0) 100%),
                var(--bg-primary);
    overflow: hidden;
    opacity: 1 !important;
}

.about-section-3 .container {
    max-width: 1242px; /* FIGMA API + O1: Base content width, not scaled */
    margin: 0 auto;
    padding: 0 5.3125rem; /* PLAN AGENT: 85px / 16 = 5.3125rem */
}

/* TWO-COLUMN GRID - Figma API Exact */
.about-section-3 .section-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* FIGMA API: Equal 589px columns */
    gap: 3.4375rem !important; /* FIGMA API: 55px / 16 = 3.4375rem EXACT */
    align-items: start !important;
}

/* ================================================================
   CONTENT COLUMN (LEFT - 60%)
   ================================================================ */

.about-section-3 .content-column {
    display: flex;
    flex-direction: column;
    gap: 1.875rem; /* OPENAI O1: 30px / 16 = 1.875rem between paragraphs */
    margin-top: 1.25rem; /* USER INSIGHT: 20px / 16 = 1.25rem (was 79px - too much!) */
}

/* Title with Gold Highlight - ABOVE GRID - O1 ENHANCED */
.about-section-3 .section-title {
    font-size: 40px !important; /* SINGLE LINE FIX: Fits in 790px width */
    font-weight: 700 !important; /* FIGMA STANDARD: Bold */
    line-height: 1.3 !important; /* O1: Slightly increased from 1.2 for better readability */
    letter-spacing: -0.01em !important;
    color: #FFFFFF !important; /* WHITE by default, gold only on .highlight-gold */
    margin: 0 0 3rem 0 !important; /* O1: Increased from 2.5rem (40px) to 3rem (48px) for stronger visual separation */
    text-align: left !important;
    text-transform: none !important;
    max-width: 100% !important;
    display: block !important;
}

.about-section-3 .highlight-gold {
    color: var(--torg-orange);
}

/* Description Text */
.about-section-3 .section-description {
    font-size: 22px !important; /* USER UPDATE: Decreased from 24px to 22px */
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: rgba(224, 224, 224, 1) !important;
    margin: 0 !important; /* Using gap instead */
    text-align: left !important;
}

/* ================================================================
   VISUAL COLUMN (RIGHT - 40%)
   ================================================================ */

.about-section-3 .visual-column {
    display: flex;
    align-items: center; /* FIGMA VISUAL: Center vertically to match text content */
    justify-content: center;
}

/* 100MAP Container - USER UPDATED: Match Figma 589x307px dimensions */
.about-section-3 .map-container {
    position: relative;
    width: 100% !important;
    max-width: 589px; /* USER UPDATE: Exact Figma width */
    max-height: 307px; /* USER UPDATE: Exact Figma height */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* USER UPDATE: New subtle gradient (corrected RGB values) */
    background: linear-gradient(135deg, rgba(228, 169, 96, 0.0) 0%, rgba(198, 149, 99, 0.01) 50%, rgba(99, 98, 88, 0.05) 100%),
                radial-gradient(ellipse at center, rgba(228, 169, 96, 0.2) 0%, rgba(228, 169, 96, 0.1) 30%, rgba(228, 169, 96, 0.03) 60%, transparent 100%);
    border-radius: 24px !important;
    border: 2px solid rgba(228, 169, 96, 1);
    padding: 45px 72px !important;
    gap: 1rem !important;
    box-shadow: 0 8px 24px rgba(228, 169, 96, 0.12);
}

/* Main Value "100 МАП" */
.about-section-3 .map-value {
    font-size: 78px !important; /* FIGMA API EXACT: 77.85px rounded */
    font-weight: 800 !important; /* FIGMA API EXACT: Extra Bold, not Bold */
    color: var(--torg-orange) !important;
    text-align: center !important;
    letter-spacing: -1.6px !important; /* FIGMA API EXACT: Negative spacing */
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Subtitle */
.about-section-3 .map-subtitle {
    font-size: 14px !important; /* FIGMA EXACT: Fixed font size from API */
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================ */

/* Tablet (1024px and below) */
@media (max-width: 64rem) { /* MATH: 1024px / 16 = 64rem */
    .about-section-3 {
        padding: 3.75rem 0; /* MATH: 60px / 16 = 3.75rem */
    }

    .about-section-3 .container {
        padding: 0 1.5rem; /* MATH: 24px / 16 = 1.5rem */
    }

    .about-section-3 .section-grid {
        grid-template-columns: 1fr;
        gap: 3rem; /* MATH: 48px / 16 = 3rem */
    }

    .about-section-3 .section-title {
        font-size: 2.5rem; /* MATH: 40px / 16 = 2.5rem */
    }

    .about-section-3 .map-container {
        width: 80%;
        max-width: 23.75rem; /* MATH: 380px / 16 = 23.75rem */
        aspect-ratio: 380 / 300;
    }

    .about-section-3 .map-value {
        font-size: 3.5rem; /* MATH: 56px / 16 = 3.5rem */
    }
}

/* Mobile (768px and below) */
@media (max-width: 48rem) { /* MATH: 768px / 16 = 48rem */
    .about-section-3 {
        padding: 2.5rem 0; /* MATH: 40px / 16 = 2.5rem */
    }

    .about-section-3 .container {
        padding: 0 1rem; /* MATH: 16px / 16 = 1rem */
    }

    .about-section-3 .section-title {
        font-size: 2rem; /* MATH: 32px / 16 = 2rem */
    }

    .about-section-3 .section-description {
        font-size: 0.875rem; /* MATH: 14px / 16 = 0.875rem */
    }

    .about-section-3 .map-container {
        width: 100%;
        max-width: 20rem; /* MATH: 320px / 16 = 20rem */
        aspect-ratio: 320 / 260;
    }

    .about-section-3 .map-value {
        font-size: 3rem; /* MATH: 48px / 16 = 3rem */
    }
}