/* =========================================
   ISOLATED LAYOUT FIX
   ========================================= */

/* 1. DESKTOP DEFAULT forced with !important */
.venture-card-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;

    /* Cosmetics that were missing */
    background: #ffffff;
    /* Use hex fallback in case var is broken */
    background: var(--color-surface);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
    width: 100%;
}

.venture-layout-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 40px !important;
    width: 100%;
}

.profile-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* 2. MOBILE OVERRIDE */
@media screen and (max-width: 1024px) {
    .venture-card-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        padding: 15px !important;
        gap: 20px !important;
    }

    .venture-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .profile-container {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
    }
}

/* 3. SMALL SCREEN FIX (iPhone 13 / 12 / Mini) */
@media screen and (max-width: 480px) {

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        /* max-width: 100vw !important; Prevents "Desktop Mode" feel if child overflows */
    }

    .container,
    .main-content,
    header,
    footer,
    section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Ensure Header doesn't blow out */
    header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .logo img {
        max-height: 50px !important;
        /* Safety for very small screens */
    }
}