/* Base Card Styling */
.chairman-connect-card {
    /* The soft green-to-white gradient from the design */
    /* background: linear-gradient(135deg, #e5f1ec 0%, #f6fbf9 50%, #fefefe 100%); */
    border-radius: 0px 40px 40px 0px; /* Kept your exact radius */
    
    /* NEW: Fluid dimensions to fix the AEM column layout */
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    padding: 3rem 2rem 1.5rem 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    background: radial-gradient(circle at top left, #dcefdc 0%, transparent 40%), radial-gradient(circle at bottom left, #e6f3df 0%, transparent 35%), linear-gradient(135deg, #f5f5f0 0%, #dfeaf6 60%, #c9dbf5 100%);
}

/* Top Section (Flexbox Layout) */
.chairman-connect-card .card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

/* Profile Image */
.chairman-connect-card .profile-wrapper {
    flex: 1 1 45%;
    text-align: center;
}

.chairman-connect-card .profile-img {
    max-width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
}

/* Info Section (Text & QR) */
.chairman-connect-card .info-wrapper {
    flex: 1 1 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chairman-connect-card .text-block {
    margin-bottom: 1.5rem;
}

.chairman-connect-card .card-heading {
    color: #333333;
    font-size: 2.8rem;
    font-weight: 600;
    margin: 0 0 0.2rem 0;
}

.chairman-connect-card .card-subheading {
    /* The rust/orange color from the design */
    color: #de7536; 
    font-size: 3.2rem;
    font-weight: 800;
    margin: 0;
}

/* QR Code Styling */
.chairman-connect-card .qr-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    /* Dark green border matching the design */
    /* border: 6px solid #285437;  */
    border-radius: 8px;
    padding: 4px;
    background-color: #fff;
}

/* Bottom Section (Social Icons) */
.chairman-connect-card .card-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 1.5rem;
    margin-top: auto; /* Pushes social icons to the absolute bottom */
}

.chairman-connect-card .social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.chairman-connect-card .social-item {
    display: flex;
    align-items: center;
}

/* The magic for the vertical lines! Adds a right border to all EXCEPT the last one */
.chairman-connect-card .social-item:not(:last-child) {
    border-right: 1px solid #cccccc;
    padding-right: 15px;
    margin-right: 15px;
}

.chairman-connect-card .social-link {
    display: block;
    transition: transform 0.2s ease-in-out;
}

.chairman-connect-card .social-link:hover {
    transform: scale(1.1); /* Slight pop effect on hover */
}

.chairman-connect-card .social-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Ensures they are perfect circles */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .chairman-connect-card {
        padding: 2rem 1rem;
        /* On mobile, usually it's better to round all corners since they stack */
        border-radius: 24px; 
    }
    .chairman-connect-card .card-top {
        flex-direction: column;
        gap: 2rem;
    }
    .chairman-connect-card .info-wrapper {
        order: -1; /* Puts the Text & QR above the person on mobile */
    }
    .chairman-connect-card .social-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .chairman-connect-card .social-item:not(:last-child) {
        border-right: none; /* Removes vertical lines on mobile if they wrap */
        padding-right: 0;
        margin-right: 0;
    }
}