/* Project Showcase */
.projects {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    max-width: 1000px;
    width: 100%;

    padding: 45px;             /* adds spacing around */
    margin: 0 auto;           /* centers the container */
    justify-content: center; /* ensures even spacing if there's fewer cards */
}
.project-card {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform 0.42s ease, box-shadow 0.42s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    max-width: 400px;
    width: 100%;
    height: 475px;
}
.project-card:hover {
    transform: scale(1.025);
    box-shadow: -4px 4px 10px rgba(0,0,0,0.15);
}
.project-top {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 20px;
    flex-wrap: wrap; /* for mobile fallback */
}
/* Showcase Image carousel */
#carousel-container {
    flex: 1;
    max-width: 100%;
    position: relative;
    height: 475px;
}
#carousel img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    background: var(--bg-mid);

    border-radius: var(--card-radius);
    display: none;
}
#carousel img.active {
    display: block;
}
.proj-desc-container {
    flex: 1;

    min-width: 225px;
    max-width: 450px;
}
.carousel {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.carousel img {
    display: none;
    width: 95%;
    height: 275px;
    object-fit: contain;
    background: var(--card-bg) solid;

    border-radius: var(--card-radius);
}
.carousel img.active {
    display: block;
}
.carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.65);
    color: var(--h1-color);
    border: none;
    padding: 6px 12px;
    cursor: pointer;
}
.carousel .prev {
    left: 10px;
}
.carousel .next {
    right: 10px;
}
.project-content {
    padding: var(--post-padding);
}
.project-title {
    font-size: var(--font-h3);
    color: var(--h1-color);
    margin: 0;
}
.project-desc {
    font-size: var(--font-h4);
    color: var(--h2-color);
}
/* Showcase Link */
/* container for all badges */
.links-container {
    position: absolute;
    bottom: 25px;
    right: 15px;
    display: flex;
    gap: 8px;
}
/* individual badge (link or static) */
.link-badge {
    width: 28px;
    height: 28px;
    display: block;
}
.link-badge img {
    width: 100%;
    height: 100%;
    opacity: 0.75;
    transition: opacity 0.2s;
}
.link-badge:hover img {
    opacity: 1;
}