/* your-theme/css/author-cards.css */

/* --- General Card Container Styles --- */
.author-card-container {
    display: grid;
    /* Allows 2 cards per row on larger screens, adjusts for smaller */
    grid-template-columns: repeat(auto-fit, minmax(670px, 1fr)); 
    gap: 15px; /* Space between cards */
    justify-content: center;
    padding: 0px; /* Overall padding if needed */
    max-width: 1402px; /* Max width for the entire grid */
    margin: 0 auto; /* Center the container */
}

/* --- Individual Author Card Styles --- */
.author-card {
    display: flex;
    gap: 20px; /* Space between avatar and text content */
    align-items: flex-start; /* Aligns avatar and text to the top */
    background-color: #ffffff; /* White background for the card */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 10px; /* Slightly more rounded corners */
    padding: 25px; /* Internal padding of the card */
    box-shadow:0 6px 12px #da2e292b;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.author-card:hover {
    transform: translateY(-5px); /* Lift card slightly on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
}

/* --- Author Avatar Styles --- */
.author-card img.author-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Perfect circle */
    object-fit: cover; /* Ensures image covers the area without distortion */
    flex-shrink: 0; /* Prevents avatar from shrinking */
    border: 3px solid #da2e29; /* Small border around avatar for emphasis */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Slight shadow for depth */
}

/* --- Author Card Content Wrapper --- */
.author-card-content {
    flex-grow: 1; /* Allows content to take available space */
}

/* --- Author Name (H3) Styles --- */
.author-card-content h3 {
    margin: 0 0 8px 0; /* Space below the name */
    font-size: 22px; /* Slightly larger name */
    color: #333333; /* Darker text for name */
    font-weight: 600; /* Semi-bold */
    display: flex;
    align-items: center; /* Vertically aligns name and arrow */
}

.author-card-content h3 .profile-link-arrow {
    font-size: 18px; /* Larger arrow icon */
    margin-left: 10px; /* Space between name and arrow */
    text-decoration: none;
    color: #da2e29; /* Standard link blue */
    transition: color 0.2s ease;
}

.author-card-content h3 .profile-link-arrow:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* --- Post and Company Name Styles --- */
.author-card-content .post-company-name {
    color: #777777; /* Softer grey */
    font-size: 14px;
    margin-bottom: 3px; /* Smaller space */
}

/* --- Writer Role Styles --- */
.author-card-content .author-role {
    color: #da2e29; /* Highlight color as per photo */
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 12px; /* Space below role */
    text-transform: uppercase; /* Uppercase for "Writer" */
    letter-spacing: 0.5px;
}

/* --- Author Description (P) Styles --- */
.author-card-content p {
    max-width: 500px; /* Limits description width for readability */
    font-size: 14.5px; /* Slightly larger font for description */
    line-height: 1.6; /* Improved readability */
    color: #555555; /* Medium grey */
    margin-bottom: 20px; /* More space before social links */
}

/* --- Social Links Container Styles --- */
.author-social-links {
    display: flex;
    gap: 15px; /* More space between icons */
    margin-top: 10px; /* Top margin for the group */
    align-items: center; /* Aligns icons vertically */
}

/* --- Social Link & Button Styles --- */
.author-social-links a,
.author-social-links button {
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0; /* Remove default padding */
    line-height: 1; /* Ensures icons sit correctly */
    display: flex; /* For perfect centering if needed */
    align-items: center;
    justify-content: center;
}

.author-social-links img {
    width: 45px;
    height: 45px;
    display: block;
    background: #da2e29;
    padding: 8px;
    border-radius: 8px!important;
}

.author-social-links img:hover {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
}

/* --- Copied Feedback Style --- */
.author-social-links button.copied-feedback {
    color: #28a745; /* Green color for "Copied!" text */
    font-size: 14px;
    font-weight: bold;
    padding-left: 5px; /* Small padding if text replaces icon */
}