/* ============================================================
   PROJECTS PAGE - Soft & Clean
   ============================================================ */

.projects-page {
    background: var(--bg-surface);          /* White page background */
    padding: 5rem 0;                        /* 80px vertical spacing */
}

/* ----- Section Header ----- */
.projects-header {
    text-align: center;                     /* Center align header */
    margin-bottom: 3rem;                    /* 48px space below */
}

.projects-badge {
    display: inline-flex;                   /* Inline flex for icon + text */
    align-items: center;                    /* Vertically center */
    gap: 0.5rem;                            /* 8px gap */
    background: var(--pastel-rose);         /* Soft pink badge bg */
    color: var(--btn-primary);              /* Maroon text */
    font-size: var(--size-small);           /* 0.875rem */
    font-weight: var(--weight-semi);        /* 500 */
    padding: 0.5rem 1.25rem;                /* 8px 20px */
    border-radius: var(--radius-pill);      /* Pill shape */
    border: 1px solid var(--border);        /* Soft border */
    margin-bottom: 1.5rem;                  /* 24px below badge */
    letter-spacing: 0.5px;                  /* Elegant spacing */
}

.badge-dot {
    width: 8px;                             /* Small dot */
    height: 8px;                            /* Small dot */
    background: var(--btn-primary);         /* Maroon */
    border-radius: 50%;                     /* Circle */
    display: inline-block;                  /* Allow sizing */
}

.projects-heading {
    font-family: var(--font-heading);       /* Georgia serif */
    font-size: var(--size-title);           /* 2rem */
    font-weight: var(--weight-bold);        /* 700 */
    color: var(--text-heading);             /* Near-black */
    margin-bottom: 1rem;                    /* 16px below */
}

.projects-subtitle {
    font-size: var(--size-body);            /* 1rem */
    color: var(--text-muted);               /* Gray */
    max-width: 750px;                       /* Readable line length */
    margin: 0 auto;                         /* Center */
    line-height: var(--leading-body);       /* 1.65 */
}

/* ============================================================
   TABS - Soft small pill buttons
   ============================================================ */

.project-tabs {
    display: flex;                          /* Horizontal layout */
    flex-wrap: wrap;                        /* Wrap on small screens */
    justify-content: center;                /* Center tabs */
    gap: 0.5rem;                            /* 8px between tabs */
    margin-bottom: 2.5rem;                  /* 40px below tabs */
    list-style: none;                       /* Remove bullets */
    padding: 0;                             /* Remove padding */
}

.project-tab {
    border: 1px solid var(--border);        /* Soft blush border */
    background: var(--bg-surface);          /* White background */
    color: var(--text-muted);               /* Gray text */
    border-radius: var(--radius-pill);      /* Fully rounded pill */
    padding: 8px 20px;                      /* Small compact padding */
    font-size: var(--size-small);           /* 0.875rem */
    font-weight: var(--weight-semi);        /* 500 */
    cursor: pointer;                        /* Pointer cursor */
    transition: all 0.3s ease;            /* Smooth transitions */
    font-family: var(--font-body);          /* System font */
    outline: none;                          /* Remove focus outline */
}

/* Hover state */
.project-tab:hover {
    background: var(--pastel-rose);         /* Soft pink hover */
    color: var(--btn-primary);              /* Maroon text */
    border-color: var(--pastel-blush);      /* Blush border */
}

/* Active state */
.project-tab.active {
    background: var(--btn-primary);         /* Maroon background */
    border-color: var(--btn-primary);       /* Maroon border */
    color: var(--btn-text);                 /* White text */
    box-shadow: 0 4px 12px rgba(107, 15, 26, 0.2); /* Soft maroon shadow */
}

/* ============================================================
   PROJECT GRID
   ============================================================ */

.projects-grid {
    display: grid;                          /* CSS Grid layout */
    grid-template-columns: repeat(3, 1fr);  /* 3 columns desktop */
    gap: 1.5rem;                            /* 24px gap */
}

/* ============================================================
   PROJECT CARD - Compact & Soft
   ============================================================ */

.project-card {
    background: var(--bg-surface);          /* White card */
    border: 1px solid var(--border);        /* Soft blush border */
    border-radius: var(--radius-lg);        /* 16px rounded corners */
    overflow: hidden;                       /* Clip to border radius */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
    box-shadow: 0 2px 12px rgba(107, 15, 26, 0.04); /* Very soft shadow */
    display: flex;                          /* Flex column layout */
    flex-direction: column;                 /* Stack vertically */
    height: 100%;                           /* Full height of grid cell */
}

/* Card hover - gentle lift */
.project-card:hover {
    transform: translateY(-6px);              /* Gentle lift up */
    box-shadow: 0 12px 32px rgba(107, 15, 26, 0.08); /* Soft maroon shadow */
    border-color: var(--btn-soft);            /* Slightly stronger border */
}

/* ----- Card Image ----- */
.project-img {
    width: 100%;                            /* Full card width */
    height: 220px;                          /* REDUCED from 300px */
    object-fit: cover;                      /* Cover without distortion */
    transition: transform 0.5s ease;      /* Smooth zoom */
    display: block;                         /* Remove inline gap */
}

/* Gentle zoom on hover */
.project-card:hover .project-img {
    transform: scale(1.04);                 /* Subtle 4% zoom */
}

/* ----- Card Content ----- */
.project-content {
    padding: 1.25rem;                       /* 20px padding */
    flex: 1;                                /* Fill remaining space */
    display: flex;                          /* Flex for alignment */
    flex-direction: column;                 /* Stack content */
}

/* Category tag pill */
.project-tag {
    display: inline-block;                  /* Inline block */
    padding: 4px 12px;                      /* Small compact padding */
    background: var(--pastel-rose);         /* Soft pink background */
    color: var(--btn-primary);              /* Maroon text */
    border-radius: var(--radius-pill);      /* Pill shape */
    font-size: var(--size-tiny);            /* 0.75rem */
    font-weight: var(--weight-semi);        /* 500 */
    margin-bottom: 0.75rem;                 /* 12px below tag */
    width: fit-content;                     /* Fit to text width */
}

/* Project title */
.project-content h5 {
    font-family: var(--font-heading);       /* Georgia serif */
    font-size: var(--size-subhead);         /* 1.125rem */
    font-weight: var(--weight-bold);        /* 700 */
    color: var(--text-heading);             /* Near-black */
    margin-bottom: 0.5rem;                  /* 8px below title */
    line-height: 1.4;                       /* Comfortable line height */
}

/* Project description */
.project-desc {
    color: var(--text-muted);               /* Gray text */
    font-size: var(--size-small);           /* 0.875rem */
    line-height: 1.65;                      /* Comfortable reading */
    margin-bottom: 1rem;                    /* 16px below text */
    flex: 1;                                /* Push actions to bottom */
}

/* ----- Actions Row ----- */
.project-actions {
    display: flex;                          /* Horizontal layout */
    justify-content: flex-end;              /* Push live link to right */
    align-items: center;                    /* Center vertically */
    padding-top: 0.75rem;                   /* 12px top spacing */
    border-top: 1px solid var(--pastel-soft); /* Very soft top divider */
}

/* Live site link (external icon button) */
.project-live {
    width: 38px;                            /* Small square */
    height: 38px;                           /* Small square */
    display: flex;                          /* Center icon */
    align-items: center;                    /* Vertical center */
    justify-content: center;                /* Horizontal center */
    border-radius: var(--radius-md);        /* 10px rounded */
    background: var(--pastel-rose);         /* Soft pink background */
    color: var(--btn-primary);              /* Maroon icon */
    text-decoration: none;                  /* No underline */
    transition: all 0.3s ease;            /* Smooth hover */
    font-size: 14px;                        /* Icon size */
    border: 1px solid var(--pastel-blush);  /* Soft border */
}

.project-live:hover {
    background: var(--btn-primary);         /* Maroon background */
    color: var(--btn-text);                 /* White icon */
    transform: translateY(-2px);            /* Slight lift */
    box-shadow: 0 4px 12px rgba(107, 15, 26, 0.2); /* Soft shadow */
}

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

@media (max-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 columns tablet */
    }
    
    .projects-page {
        padding: 3.5rem 0;                      /* Less padding */
    }
}

@media (max-width: 576px) {
    .projects-grid {
        grid-template-columns: 1fr;             /* 1 column mobile */
        gap: 1.25rem;                             /* 20px gap */
    }
    
    .project-tabs {
        gap: 0.4rem;                              /* Smaller gap */
    }
    
    .project-tab {
        padding: 6px 14px;                        /* Smaller tabs */
        font-size: var(--size-tiny);              /* 0.75rem */
    }
    
    .project-img {
        height: 200px;                            /* Even smaller image */
    }
    
    .projects-heading {
        font-size: 1.75rem;                       /* Smaller heading */
    }
}