/* ============================
   Global Styles for friends.html
   ============================ */
html, body {
    height: 100% !important; /* Force full height */
    margin: 0 !important;
    padding: 0 !important;
    /* Global fixed background for the friends page */
    background: url('https://i.postimg.cc/FsDwKh9q/Pastel-checkers.png') no-repeat center center fixed !important;
    background-attachment: fixed !important; /* Ensure background is fixed on scroll */
    background-size: cover !important; /* Ensure background covers the entire viewport */
    font-family: 'Arial', sans-serif; /* Standard, readable sans-serif font */
}

/* ============================
   Main Friends Page Container
   ============================ */
.friends-container {
    max-width: 1200px; /* Max width for the content area */
    margin: 0 auto; /* Center the container */
    padding: 0 0 70px 0; /* Bottom padding to avoid overlap with a fixed footer if any */
}

.header-image {
    text-align: center;
    margin: 20px auto; /* Centrer horizontalement et ajouter de l'espace vertical */
    max-width: 95%; /* Limiter la largeur pour éviter de toucher les bords */
    width: auto; /* Permettre au conteneur de s'adapter à son contenu */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-image img {
    max-width: 100%; /* Images adaptatives */
    width: auto; /* Largeur automatique basée sur la hauteur */
    height: auto; /* Conserver les proportions */
    margin: 10px auto; /* Espacement entre les images et centrage horizontal */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); /* Ombre subtile */
    object-fit: contain; /* S'assure que l'image s'adapte sans être coupée */
}

/* Grid container for friend cards */
.friend-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid columns */
    gap: 30px; /* Space between cards */
    padding: 20px; /* Padding around the grid */
}

/* Individual friend card container with perspective for 3D flip effect */
.friend-card {
    background: #90C67F; /* Updated green background */
    border-radius: 25px;
    padding: 15px;
    box-shadow: 0 0 0 5px #E18FA4; /* White solid border */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover */
    position: relative;
    overflow: hidden; /* Clip any overflowing content (e.g., during animations) */
    perspective: 1000px; /* Define perspective for 3D transformations on children */
    box-sizing: border-box; /* Include padding in width calculations */
}

/* Hover effect for the friend card: slight lift and increased shadow */
.friend-card:hover {
    transform: translateY(-5px); /* Lift the card slightly */
    box-shadow: 0 0 0 5px #E18FA4; /* White solid border on hover */
}

/* Inner container that handles the 3D flip animation */
.flip-card-inner {
    position: relative;
    width: 100%;
    transition: transform 0.6s ease, height 0.3s ease; /* Smooth transform and height change */
    transform-style: preserve-3d; /* Allow 3D positioning of children */
    box-sizing: border-box; /* Include padding in width calculations */
}

/* When the .flipped class is added, rotate the inner container */
.flip-card-inner.flipped {
    transform: rotateY(180deg); /* Rotate around the Y-axis */
}

/* Styles for both the front and back faces of the card */
.flip-card-front, .flip-card-back {
    position: absolute; /* Positioned on top of each other within flip-card-inner */
    width: 100%;
    height: 100%; /* Ensure faces take full height */
    left: 0;
    top: 0;
    backface-visibility: hidden; /* Hide the back of the element when it's facing away */
    -webkit-backface-visibility: hidden; /* For Safari */
    display: flex; /* Use flexbox for content alignment */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
    text-align: center; /* Ensure text within is centered */
    padding: 10px; /* Standard padding for card faces */
    box-sizing: border-box; /* Include padding in width calculations */
}

/* Front face of the card (visible by default) */
.flip-card-front {
    z-index: 2; /* Ensures front is initially on top */
    transform: rotateY(0deg); /* Explicitly set, though it's the default */
}

/* Back face of the card (hidden by default, revealed on flip) */
.flip-card-back {
    transform: rotateY(180deg); /* Rotated to be hidden initially */
    padding: 15px; /* Padding for the back face */
    background: #90C67F; /* Updated green background */
    border-radius: 25px; /* Match front border-radius */
    color: white; /* Text color */
    overflow-y: auto; /* Enable scrolling if content is too long */
}

/* Friend's avatar image */
.friend-avatar {
    width: 120px; /* Reduced size */
    height: 120px; /* Reduced size */
    border-radius: 50%; /* Circular avatar */
    border: 5px solid #E18FA4; /* White border around avatar */
    margin: 0 auto 10px auto; /* Centered with reduced bottom margin */
    display: block;
    transition: transform 0.3s ease; /* Smooth hover effect */
    transform-origin: center; /* Rotate/scale from the center */
    flex-shrink: 0; /* Prevent image from shrinking */
}

.friend-avatar:hover {
    transform: rotate(10deg) scale(1.1); /* Playful rotation and scale on hover */
}

/* Container for friend's information (name, links, description) */
.friend-info {
    text-align: center;
    color: white; /* Text color for info on the card */
    width: 100%; /* Full width of the card */
    padding: 8px; /* Padding for the info container */
    box-sizing: border-box; /* Include padding in width calculations */
    overflow-wrap: break-word; /* Ensure text wraps if it's too long */
    word-wrap: break-word; /* Legacy */
    word-break: break-word; /* Make sure words break properly */
}

.friend-info h2 {
    font-size: 22px; /* Slightly smaller */
    margin: 0 0 8px 0; /* Reduced margins */
    font-weight: bold;
    padding: 0 5px; /* Horizontal padding */
}

/* Container for social media links */
.friend-info .links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allow links to wrap if needed */
    gap: 10px; /* Reduced space between social icons */
    margin: 6px 0; /* Reduced vertical margin */
    width: 100%; /* Ensure it takes the full width */
}

/* Individual social media icon */
.social-icon {
    width: 22px; /* Slightly smaller */
    height: 22px; /* Slightly smaller */
    transition: transform 0.2s ease; /* Smooth hover effect */
    vertical-align: middle; /* Align with text */
}

.social-icon:hover {
    transform: scale(1.2); /* Slightly enlarge icon on hover */
}

/* Styling for description and lore text */
.friend-info .description,
.friend-info .lore {
    font-size: 14px;
    line-height: 1.4;
    padding: 0 5px; /* Horizontal padding */
    margin: 5px 0; /* Vertical margin */
    max-width: 100%; /* Ensure it doesn't overflow */
    overflow-wrap: break-word; /* Ensure text wraps if it's too long */
    word-wrap: break-word; /* Legacy */
    word-break: break-word; /* Make sure words break properly */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .friend-cards {
        grid-template-columns: 1fr; /* Stack cards in a single column */
        gap: 20px; /* Reduced gap between cards */
        padding: 10px; /* Reduced padding around the grid */
    }
    
    .friend-card {
        padding: 10px; /* Reduced padding */
        margin: 0; /* Reset margin */
    }
    
    .friend-avatar {
        width: 100px; /* Further reduced for mobile */
        height: 100px; /* Further reduced for mobile */
        margin-bottom: 8px; /* Reduced margin */
    }
    
    .friend-info h2 {
        font-size: 20px; /* Smaller heading on mobile */
        margin-bottom: 6px; /* Reduced margin */
    }
    
    .friend-info .links {
        gap: 8px; /* Further reduced spacing */
    }
    
    .social-icon {
        width: 20px; /* Smaller icons on mobile */
        height: 20px; /* Smaller icons on mobile */
    }
    
    .friend-info .description,
    .friend-info .lore {
        font-size: 13px; /* Slightly smaller text */
        padding: 0 3px; /* Reduced padding */
    }
    
    .header-image {
        padding: 0 10px; /* Ajouter du padding horizontal sur mobile */
        margin: 10px auto; /* Réduire les marges verticales */
    }
    
    .header-image img {
        max-width: 95%; /* Légèrement plus petit que le conteneur parent */
        margin: 5px auto; /* Réduire l'espacement entre les images */
    }
}

/* Extremely small screens */
@media (max-width: 360px) {
    .friend-avatar {
        width: 90px; /* Even smaller for very small screens */
        height: 90px; /* Even smaller for very small screens */
    }
    
    .friend-info h2 {
        font-size: 18px; /* Smaller heading */
    }
    
    .social-icon {
        width: 18px; /* Smaller icons */
        height: 18px; /* Smaller icons */
    }
}