/* ===== AUTHOR SECTION STYLES ===== */

/* CSS Custom Properties */
:root {
    --author-bg-dark: #17191d;
    --author-bg-light: #efeff2;
    --author-bg-context: #2e2e2e;
    --author-text-primary-dark: #fff;
    --author-text-primary-light: #101215;
    --author-text-secondary: #7c7c7c;
    --author-accent: #fd8d02;
    --author-radius-sm: 8px;
    --author-radius-lg: 10px;
    --author-gap: 20px;
    --author-gap-sm: 15px;
    --author-avatar-size: 60px;
    --author-social-size: 34px;
    --author-social-icon: 20px;
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.5s;
}

/* ===== BASE STYLES ===== */
.auteur {
    display: flex;
    align-items: flex-start;
    gap: var(--author-gap);
    padding: 20px;
    background: var(--author-bg-dark);
    border-radius: var(--author-radius-sm);
    margin: 20px 0;
    width: 100%;
    height: auto;
    transition: background var(--transition-smooth);
}

@media screen and (min-width: 992px) {
    .container .auteur {
        grid-gap: 40px;
        padding: 17px 19px;
    }
}

/* Light mode */
body.light-mode .auteur {
    background: var(--author-bg-light);
}

/* ===== CONTEXT-SPECIFIC STYLES ===== */

.post-template-full-width-template article .auteur {
    width: 85%;
    margin-inline: auto;
}

.author .auteur {
    width: 100%;
    height: auto;
}

/* ===== AVATAR STYLES ===== */
.auteur figure {
    position: relative;
    margin: 0;
    flex-shrink: 0;
}

.auteur figure img,
.auteur figure .author-full-width-link img {
    width: var(--author-avatar-size);
    height: var(--author-avatar-size);
    border-radius: 50% !important;
    object-fit: cover;
    transition: var(--transition-smooth);
}

/* ===== SOCIAL LINKS ===== */
.member-social {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 0.5rem;
}

.member-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--author-social-size);
    height: var(--author-social-size);
    margin: 0 2px;
    background: #f5f5f5;
    border-radius: 50%;
    color: #666;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.member-social svg {
    width: var(--author-social-icon);
    height: var(--author-social-icon);
}

.member-social .linkedin-url svg path {
    fill: #000;
}

/* Social hover states */
.member-social .linkedin-url:hover {
    background: #0077b5;
    color: white;
}

.member-social .tiktok-url:hover {
    background: #000;
    color: white;
}

.member-social .instagram-url:hover {
    background: #e4405f;
    color: white;
}

.member-social .linkedin-url:hover svg path,
.member-social .tiktok-url:hover svg path,
.member-social .instagram-url:hover svg path {
    fill: white;
}

/* Light mode social links */
body.light-mode .member-social a {
    background: #e0e0e0;
}

body.light-mode .member-social svg path {
    fill: #333;
}

/* ===== LEGACY SOCIAL SYSTEM (Compatibility) ===== */
.auteur figure a {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    margin-left: 4px;
}

.auteur figure a:first-of-type {
    margin-left: 0;
}

.auteur figure a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.auteur figure a svg {
    width: 25px;
    height: 25px;
    fill: #cecbcb;
    transition: fill var(--transition-fast);
    margin-top: 5px;
}

.actualites > .auteur > figure > a > svg {
    width: 30px;
    height: 30px;
}

.auteur figure a:hover svg,
.auteur figure a svg:hover path {
    fill: var(--author-accent);
}

/* Legacy social platform colors */
.auteur figure .linkedin-url:hover svg {
    fill: #0077b5;
}

.auteur figure .tiktok-url:hover svg {
    fill: #ff0050;
}

.auteur figure .instagram-url:hover svg {
    fill: #e4405f;
}

/* Light mode legacy styles */
body.light-mode .auteur figure a svg,
body.light-mode .auteur figure a svg path {
    fill: var(--author-text-primary-light);
    transition: var(--transition-smooth);
}

body.light-mode .auteur figure a:hover svg,
body.light-mode .auteur figure a svg:hover path {
    fill: var(--author-accent);
}

/* ===== TEXT CONTENT ===== */
.auteur .author-text,
.author-text {
    flex: 1;
    height: 100%;
}

.auteur .author-text h3,
.auteur h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    color: var(--author-text-primary-dark);
    text-align: left;
    font-family: "Open Sans", sans-serif;
    letter-spacing: 0;
}

.auteur .author-text h3 a,
.auteur h3 a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auteur .author-text h3 a:hover {
    color: var(--author-accent);
}

.auteur .author-text p,
.auteur p {
    margin: 0;
    color: var(--author-text-secondary);
    font-size: 14px;
    line-height: 19px;
    text-align: left;
    font-family: "Open Sans", sans-serif;
    letter-spacing: 0;
}

/* Light mode text styles */
body.light-mode .auteur .author-text h3,
body.light-mode .auteur h3 {
    color: var(--author-text-primary-light);
}

body.light-mode .auteur .author-text p,
body.light-mode .auteur p {
    color: var(--author-text-primary-light);
}

/* Context-specific typography */
.container-authors-page .auteur h3,
.actualites .auteur h3,
.author .auteur h3 {
    margin-top: 0;
    font-size: 1.5em;
}

.container-authors-page .auteur p,
.actualites .auteur p,
.author .auteur p {
    font-size: 0.9em;
    line-height: 1.25rem;
}


/* ===== RESPONSIVE STYLES ===== */

/* Tablet (max-width: 992px) */
@media screen and (max-width: 992px) {    
    .container-authors-page .auteur h3 {
        margin-top: 10px;
    }
    
    .container .auteur {
            padding: 29px 23px 29px 20px;
    }

    .container .auteur figure {
        min-width: var(--author-avatar-size);
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .auteur {
        flex-direction: row;
        text-align: center;
        gap: var(--author-gap);
        margin: 23px 0 10px 0 !important;

    }
    
    .auteur figure {
        align-self: center;
    }
    
    /* Mobile avatar size */
    .auteur figure img,
    .auteur .author-image figure img,
    .single-post .auteur figure .author-full-width-link img {
        width: var(--author-avatar-size) !important;
        height: var(--author-avatar-size) !important;
    }
    
    /* Legacy social positioning */
    .auteur figure a {
        bottom: -3px;
        right: -3px;
    }
    
    .container-authors-page > .auteur {
        margin: 23px 0 10px 0 !important;
    }
    
    /* Modern social system adjustments */
    .author-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: var(--author-avatar-size);
        height: var(--author-avatar-size);
    }
    
    .member-social {
        margin-top: 1rem;
        justify-content: center;
    }
    
    /* Center author text */
    .author-text {
        text-align: center;
        width: 100%;
    }
    
    .author-text h3,
    .author-text p {
        text-align: center;
    }
}