/* ================================================================
   ABOUT US - SECTION 1 (PIXEL-PERFECT FIGMA VERSION)
   Section+BackgroundColor+Gradient--1
   Target: 85%+ Figma Compliance
   Created: 2025-10-31
   ================================================================ */

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

/* ================================================================
   SECTION 1: MAIN CONTAINER
   ================================================================ */

.about-section-1 {
    position: relative;
    min-height: 800px; /* Changed from 100vh to fixed height matching Figma */
    margin-top: 80px; /* Push section below navbar (navbar is 80px high) */
    padding: 210px 0 80px 0; /* REVERT: Back to original value - VQA v3 showed heading 70px too high */
    background: radial-gradient(
        ellipse at top left,
        rgba(228, 169, 96, 0.03) 0%,
        transparent 50%
    ), var(--bg-primary);
    overflow: hidden;
}

.about-section-1 .container {
    max-width: 1600px; /* Match Figma canvas: 1600px */
    margin: 0 auto; /* Center container: (1920-1600)/2 = 160px left edge */
    padding: 0 20px 0 20px; /* FIX v5: VQA says left padding 165-170px actual vs 180px expected - use 20px */
}

/* ================================================================
   GRID LAYOUT (60% / 40%) - FIGMA EXACT
   ================================================================ */

.about-section-1 .section-grid {
    display: grid;
    grid-template-columns: 55% 45%; /* FIX v5: VQA says 55/45 split per Figma (was 52/48) */
    gap: 0%; /* No gap for precise spacing */
    align-items: center; /* FIX v5: Center vertically per VQA logo alignment requirement */
    padding-top: 0px; /* No padding-top */
}

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

.about-section-1 .content-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Main Heading - Figma node 8:876 */
.about-section-1 .section-title {
    font-size: 54px; /* FIX v5: VQA says expected 52-56px (appears 48-50px) - set to 54px */
    font-weight: 700;
    line-height: 1.15; /* FIX v5: Slight increase from 1.1 for better readability */
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 56px 0; /* FIX v5: VQA says expected 50-60px spacing - set to 56px */
    text-align: left;
    max-width: 730px; /* FIX v5: CRITICAL - increase from 665px to prevent "недвижимости" line break */
}

/* Subtitle - Figma node 8:879 */
.about-section-1 .section-subtitle {
    font-size: 22px; /* FIX v2: VQA says expected 20-22px (currently appears 19-20px from 16px) */
    font-weight: 400;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.9); /* ITERATION 1: Increased from 0.85 to 0.9 for brightness */
    margin: 0;
    text-align: left;
    max-width: 758px;
    white-space: nowrap;
}

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

.about-section-1 .visual-column {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 332px;
    align-self: center; /* REVERT: Keep centered - v3 fix went wrong direction */
}

/* Logo Container - Figma node 108:684 */
.about-section-1 .logo-container {
    position: relative;
    width: 420px; /* FIX v5: VQA says expected ~420x420px (was 415x345px showing as ~350x350px) */
    min-width: 420px;
    height: 320px; /* USER UPDATE: Reduced from 420px to 320px */
    min-height: 330px; /* USER UPDATE: Set to 330px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        ellipse at center,
        rgba(228, 169, 96, 0.20) 0%,
        rgba(228, 169, 96, 0.10) 30%,
        rgba(228, 169, 96, 0.03) 60%,
        transparent 100%
    );
    border-radius: 24px;
    border: 2px solid #D4A574; /* FIX 1: Golden border */
    padding: 48px 56px;
}

/* TorgAI Logo - Figma node 8:843 (300x84px) */
.about-section-1 .torgai-logo {
    width: 300px;
    height: 84px;
    object-fit: contain;
}

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

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .about-section-1 {
        padding: 60px 0;
    }

    .about-section-1 .container {
        padding: 0 24px;
    }

    .about-section-1 .section-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-section-1 .visual-column {
        min-height: 300px;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .about-section-1 {
        padding: 40px 0;
    }

    .about-section-1 .container {
        padding: 0 16px;
    }

    .about-section-1 .content-column {
        gap: 1.5rem;
    }

    .about-section-1 .section-title {
        font-size: 1.75rem; /* 28px on mobile */
    }

    .about-section-1 .uniqueness-text {
        font-size: 1rem; /* 16px on mobile */
    }
}

/* Small Mobile (375px and below) */
@media (max-width: 375px) {
    .about-section-1 {
        padding: 32px 0;
    }

    .about-section-1 .section-title {
        font-size: 1.5rem; /* 24px on small mobile */
    }

    .about-section-1 .uniqueness-panel {
        padding: 1rem;
    }
}

/* ================================================================
   ACCESSIBILITY & INTERACTIONS
   ================================================================ */

.about-section-1 .uniqueness-panel:hover {
    border-color: rgba(228, 169, 96, 0.5);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(228, 169, 96, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .about-section-1 .uniqueness-panel {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .about-section-1 {
        background: white;
        color: black;
    }

    .about-section-1 .section-title,
    .about-section-1 .uniqueness-text {
        color: black;
    }
}