/* Profile Section - Dedicated Styles */

/* 1. Section Background - Force specificity */
section.profile-preview {
    background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('../images/hero.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 5rem 0;
    position: relative;
    width: 100%;
}

@media (hover: hover) {
    section.profile-preview {
        background-attachment: fixed !important;
    }
}

/* 2. Grid Layout - Split */
.profile-preview .grid.split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Force side-by-side */
    gap: 3rem !important;
    align-items: center !important;
    max-width: 1000px;
    margin: 0 auto;
}

/* 3. Image Styling - Fix Shape */
/* Use specific class and tag to override anything else */
.profile-preview img.profile-img {
    width: 100% !important;
    max-width: 400px;
    /* Limit width just in case */
    height: auto !important;
    border-radius: 12px !important;
    /* Rectangle with rounded corners */
    aspect-ratio: auto !important;
    /* prevented forced aspect ratio */
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
    /* Center if it becomes block */
}

/* 4. Text Content */
.profile-content {
    text-align: left !important;
}

.profile-content h3 {
    border-bottom: 2px solid var(--primary-color) !important;
    display: inline-block;
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
    .profile-preview .grid.split {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .profile-content {
        text-align: center !important;
    }

    .profile-preview img.profile-img {
        max-width: 80%;
    }
}