/* ================================================================
   ABOUT US - SECTION 4: INFORMATION RESOURCES & RISKS
   Pixel-Perfect Figma Implementation
   Target: 85%+ Figma Compliance
   Created: 2025-10-31
   ================================================================ */

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

/* ================================================================
   SECTION 4: MAIN CONTAINER
   ================================================================ */

.about-section-4 {
    position: relative;
    min-height: 800px;
    padding: 160px 0; /* RESTORE: Back to 58% compliance version */
    background: radial-gradient(
        ellipse at top left,
        rgba(228, 169, 96, 0.03) 0%,
        transparent 50%
    ), var(--bg-primary);
    overflow: hidden;
    opacity: 1 !important; /* Override JavaScript inline styles */
}

.about-section-4 .container {
    max-width: 1246px; /* FIX 2.1: X=337px positioning: 1920 - (337×2) = 1246px */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 80px; /* RESTORE: Back to 58% compliance version */
}

/* ================================================================
   GRID LAYOUT (40% / 60%)
   ================================================================ */

.about-section-4 .section-grid {
    display: grid;
    grid-template-columns: 40fr 60fr; /* FIX 2.2: Precise 40/60 ratio instead of 1fr/1.5fr */
    gap: 95px; /* VQA FIX: Increase from 65px - needs 30-40px more horizontal gap */
    align-items: center; /* VQA FIX: Change from flex-start - text should be vertically centered with box */
}

/* ================================================================
   VISUAL COLUMN (LEFT - 40%) - INFORMATION RESOURCES
   ================================================================ */

.about-section-4 .visual-column {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* Vertically center box */
    align-items: center;       /* REVERT: Center box - left-align made compliance worse */
}

/* Gold bordered container */
.about-section-4 .resources-container {
    border: 2px solid rgba(228, 169, 96, 0.6);
    border-radius: 24px;
    width: 560px;              /* VQA FIX: Increase to 560px to account for padding (480px content + 80px padding) */
    min-height: 380px;         /* VQA FIX: Increase from 310px to match Figma height expectation */
    padding: 45px 40px;        /* VQA FIX: Increase vertical padding for proper height */
    box-sizing: border-box;    /* VQA FIX: Include padding in width calculation */
    display: flex;
    flex-direction: column;
    gap: 32px;                 /* VQA FIX: Increase from 28px for more title spacing */
    justify-content: center;   /* VQA FIX: Vertically center icons within box */
}

.about-section-4 .resources-title {
    font-size: 20px; /* USER UPDATE: Increased from 13px to 20px */
    font-weight: 700; /* USER UPDATE: Made bold (increased from 600 to 700) */
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: 0;
    text-transform: uppercase;
}

/* Resources Grid (3x2) */
.about-section-4 .resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 75px 34px; /* RESTORE: Back to 58% compliance version - 75px row-gap, 34px column-gap */
}

/* EXACT Figma icon images - pixel-perfect! */
.about-section-4 .resource-icon-img {
    width: 105px;  /* FIX 2.3: REDUCE from 128px - my overcorrection! Figma shows ~100-110px */
    height: 105px;
    display: block;
    transition: all 0.3s ease;
    image-rendering: crisp-edges;  /* Prevent blurry scaling */
    image-rendering: -webkit-optimize-contrast;  /* Better quality */
}

.about-section-4 .resource-icon-img:hover {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(228, 169, 96, 0.3));
}

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

.about-section-4 .content-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* VQA FIX: Change from center - need manual positioning with margin */
    gap: 28px;                   /* FIX GROUP 5: VQA says expected 24-28px spacing */
    margin-top: 10px;            /* VQA FIX: Add small top margin to align text with box icons */
}

/* Title with Orange Highlights - ABOVE GRID (full width) */
.about-section-4 .section-title {
    font-size: 52px;          /* VQA FIX: Increase from 48px to match Figma (48-52px range) */
    font-weight: 700;
    line-height: 1.4;         /* VQA FIX: Increase from 1.3 for more breathing room */
    letter-spacing: 0;        /* VQA FIX: Remove negative spacing - makes text appear smaller */
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    max-width: 95%;           /* VQA FIX: Increase from 90% to allow larger text */
    margin: 0 auto;
    word-wrap: break-word;
}

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

/* Risks Description */
.about-section-4 .risks-description {
    display: flex;
    flex-direction: column;
    gap: 24px; /* VQA FIX: Increase from 22px to match Figma paragraph spacing */
}

.about-section-4 .risks-description p {
    font-size: 18px; /* USER UPDATE: Increased from 16px to 18px */
    font-weight: 400;
    line-height: 1.7;          /* VQA FIX: Increase to 1.7 - VQA expects 1.6-1.8 range */
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-align: left;
    max-width: 540px;          /* FIX GROUP 5: VQA says control line breaking to match Figma */
}

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

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

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

    .about-section-4 .section-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-section-4 .section-title {
        font-size: 40px;
    }

    .about-section-4 .resources-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 400px;
        margin: 0 auto;
    }
}

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

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

    .about-section-4 .section-title {
        font-size: 32px;
    }

    .about-section-4 .risks-description p {
        font-size: 14px;
    }

    .about-section-4 .resources-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 280px;
    }
}