/* Default Card Container (Above 1045px) */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px); /* Keeps 3 cards per row with a fixed card width */
    justify-content: center; /* Center the grid items */
    padding: 20px; /* Adjusts padding around the card container */
    box-sizing: border-box; /* Prevents padding from breaking the layout */
    width: 100%; /* Ensures the container spans the entire width */
    gap: 25px; /* Force the gap */
}

/* Individual Card */
.card {
    background-color: #1c1c1c; /* Dark background */
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 300px; /* Fixed width for horizontal view */
    height: 580px; /* Fixed height for consistent card sizes */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
    position: relative; /* For internal positioning */
    transition: transform 0.3s, box-shadow 0.3s;
    
    margin: 0;
    box-sizing: border-box; /* Ensures padding doesn’t affect size */
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}

/* Card Image */
.card-image {
    width: 100%;
    height: auto; /* Ensure consistent scaling */
    aspect-ratio: 365 / 580; /* Locks the image ratio */
    object-fit: cover; /* Prevents distortion */
    border: 10px solid #000; /* Subtle border around images */
    border-radius: 8px; /* Rounded corners for images */
    box-sizing: border-box;
    transition: all 0.3s ease; /* Smooth transition */
}

/* Card on Hover (Switch to Older Format) */
.card:hover .card-image,
.card.active .card-image { /* 'active' is added dynamically when clicked */
    max-height: 50%; /* Restrict image height */
    object-fit: cover; /* Ensure images scale correctly */
    aspect-ratio: unset; /* Removes forced aspect ratio */
    height: auto; /* Let it adjust based on content */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Card Content */
.card-content {
    padding: 0px 15px 5px 15px;
    background: linear-gradient(
        to bottom,
        #000000 0%,  /* Top dark gray */
        #000000 10%,  /* Top dark gray */
        #1c1c1c 10%, /* Middle dark gray */
        #1c1c1c 79%, /* Middle dark gray */
        #000000 83%, /* Bottom white */
        #ff8800 100% /* Bottom white */
    );
    border-radius: 0 0 10px 10px; /* Rounds bottom corners to match card */
    box-sizing: border-box; /* Ensures padding doesn't affect the layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Properly spaces content */
    position: absolute;
    top: 50%; /* Aligns the content below the image */
    left: 0;
    width: 100%;
    height: 50%; /* Ensures the content fills the lower half of the card */
    z-index: 1;
    opacity: 0; /* Hide content by default */
    transition: opacity 0.3s ease, top 0.3s ease; /* Smooth transition */
}

/* Show Content on Hover or Click */
.card:hover .card-content,
.card.active .card-content {
    opacity: 1; /* Reveal content */
    top: 50%; /* Ensures proper alignment */
}

/* Card Title */
.card-title {
    font-size: 1.5rem;
    margin: -7px 0px 0px 0px; /* Adjust spacing around title */
    color: #fff; /* Keeps title readable on dark background */
    text-transform: capitalize; /* Capitalizes the first letter of each word */
}

/* Card Name */
.card-name {
    font-size: 1.1rem; /* Slightly larger than the description */
    font-weight: bold; /* Makes it stand out */
    margin-bottom: 0px; /* Adds spacing between the name and the description */
    color: #fff; /* Keeps the name readable on dark background */
    padding-top: 5px;
}

/* Card Description */
.card-description {
    font-size: 1rem;
    margin: 0px 0px 10px 0px; /* Add spacing above the button */
    color: #ccc; /* Keeps description readable */
    display: -webkit-box;
    -webkit-line-clamp: 8; /* Allows up to 9 lines before cutting off */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds the ... at the cutoff */
}

/* Card Button */
.card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000; /* Black background for the button */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    align-self: center; /* Centers the button */
    margin-top: auto; /* Pushes the button to the bottom of the content area */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* Card Button Hover */
.card-button:hover {
    background-color: #333333; /* Slightly lighter gray */
    color: #ffffff; /* Keeps the text white */
    border: 2px solid #ffffff; /* Adds a white border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Soft white glow */
    transform: scale(1.1); /* Slight scale-up for emphasis */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}






/* Card Overlay */
.card-overlay {
    position: absolute;
    bottom: 9px; /* Align to the bottom of the card */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Perfect centering */
    width: 94%; /* Adjust width of the overlay */
    height: 111px; /* Set the height of the banner */
    background-image: url('/images/Overlays/NamePlate.png');
    background-size: cover; /* Ensure the overlay scales properly */
    background-repeat: no-repeat;
    z-index: 2; /* Sit above the image but below the duplicate title */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

/* Duplicate Title (Overlay Title) */
.card-overlay-title {
    position: absolute;
    bottom: 25px; /* Position above the bottom of the overlay */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%);
    font-size: 1.2rem; /* Adjust size for readability */
    color: #fff; /* Contrast text against the overlay */
    z-index: 3; /* Ensure it layers above the overlay */
    pointer-events: none; /* Prevent interaction */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Subtle shadow for readability */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
    width: 90%; /* Adjust width of the overlay */
    text-transform: capitalize; /* Capitalizes the first letter of each word */
}

/* Hide Overlay Title on Hover/Flip */
.card:hover .card-overlay,
.card.active .card-overlay,
.card:hover .card-overlay-title,
.card.active .card-overlay-title {
    opacity: 0; /* Fade out the overlay title */
    z-index: -5;
}