/* =========================================
   PROJECTS ARCHIVE COMPONENT
   Based on Henri Heymans Hover Effect
   ========================================= */
/* === SECTION === */
.projects-archive {
    position: relative;
    width: 100%;
    /* min-height: 100vh; */
    height: max-content;
    background-color: var(--color-bg-light);
}

.projects-archive .section-label {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
}

/* === TOP DIVIDER (separate element for animation) === */
.projects-archive .projects-top-divider {
    width: 100%;
    height: 3px;
    background-color: var(--color-text-main);
}

/* === PROJECT LIST === */
.projects-archive .projects-list {
    width: 100%;
}

/* === PROJECT ROW === */
.projects-archive .project-row {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-bottom: 3px solid var(--color-text-main);
    transition: margin-bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mobile Preview Image (Default Hidden) */
.mobile-preview-image,
.mobile-toggle-icon {
    display: none;
}

.projects-archive .project-header {

    height: 120px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    width: 100%;

    /* Soften top edge to hide text cut glitch */
    /* -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 3px, black 100%); */
}

/* The wrapper that slides up/down - CLIPPED by parent */
.projects-archive .project-wrapper {
    position: relative;
    width: 100%;
    height: 360px;
    transform: translateY(-240px) translateZ(0);
    backface-visibility: hidden;
}

/* Two states: name (light) and details (dark) */
.projects-archive .project-name-row,
.projects-archive .project-details-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    padding: 0 1rem;
}

/* Light row (default visible) */
.projects-archive .project-name-row {
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    border-bottom: 1px solid transparent;
    /* Match details row border for perfect alignment */
}

/* Dark row (revealed on hover) */
.projects-archive .project-details-row {
    background-color: var(--color-text-main);
    border-bottom: 1px solid var(--color-text-main);
}

.projects-archive .project-details-row .project-title,
.projects-archive .project-details-row .project-cta {
    color: var(--color-bg-light);
}

/* Typography */
.projects-archive .project-title {
    font-family: var(--font-primary);

    /* font-size: 4rem */
    /* font-weight: 500 */
    letter-spacing: -0.025em;
    margin: 0;

    /* text-transform: uppercase */
    /* Rendering optimizations */
    line-height: 1.1;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.projects-archive .project-category {
    font-family: var(--font-primary);

    /* font-size: 0.875rem */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.projects-archive .project-cta {
    font-family: var(--font-primary);

    /* font-size: 0.875rem */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === PREVIEW IMAGE (fixed center-right, OUTSIDE section) === */
.project-preview {
    position: fixed;
    top: 50%;
    right: 25%;
    transform: translateY(-50%);
    width: 30vw;
    max-width: 450px;
    aspect-ratio: 4 / 3;
    z-index: 1000;
    pointer-events: auto;
    border-radius: 0.1rem;
    overflow: hidden;
    cursor: grab;
}

.project-preview:active {
    cursor: grabbing;
}

.project-preview img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Preview hiding is now handled by JS clip-path animation */
/* === EXPANDED CONTENT (accordion) === */
.projects-archive .project-expanded {
    display: none;
    position: relative;
    width: 100%;
    background-color: var(--color-text-main);
    color: var(--color-bg-light);
    padding: 2rem 1rem;
    padding-bottom: calc(2rem + 2px);
    /* Compensate for upward shift */
    margin-top: -2px;
    /* Pull up to cover joint line/gap */
    overflow: hidden;
}

/* seamless joint: make header border transparent when expanded */
.projects-archive .project-row.is-expanded .project-details-row {
    border-bottom-color: transparent;
}

.projects-archive .project-row.is-expanded .project-expanded {
    display: block;
}

.projects-archive .expanded-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.projects-archive .expanded-text {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;

    /* height: 100% */
}

.projects-archive .project-description {
    /* font-size: 1rem */
    /* line-height: 1.6 */
    margin-bottom: 2rem;
    color: var(--color-bg-light);
}

/* Credits grid */
.projects-archive .credits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 4rem;
    row-gap: 2rem;
}

.projects-archive .credit {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.projects-archive .credit-label {
    /* font-size: 0.75rem */
    /* font-weight: 500 */
    text-transform: uppercase;

    /* letter-spacing: 0.05em */
    opacity: 0.7;
}

.projects-archive .credit-value {
    color: var(--color-bg-light);
}

.projects-archive .credit-value a {
    color: var(--color-bg-light);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.projects-archive .credit-value a:hover {
    opacity: 0.8;
}

/* Expanded image */
.projects-archive .expanded-image {
    width: 30%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.projects-archive .expanded-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Close button */
.projects-archive .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 180px;
    margin-top: 1.5rem;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border: 1px solid var(--color-bg-light);
    color: var(--color-bg-light);
    font-family: var(--font-primary);
    font-size: var(--text-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.projects-archive .close-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text-main);
}

/* === MOBILE === */
@media (max-width: 991px) {
    .projects-archive {
        /* padding: 3rem 1.5rem */
    }

    .projects-archive .project-title {
        font-size: 3rem !important;
        /* Allow title to take up most of the row */
        max-width: none;
        flex: 1;
    }

    .projects-archive .project-category {
        /* Remove restrictive max-width and wrapping */
        word-wrap: normal;
        overflow-wrap: normal;
        max-width: none;
        text-align: right;
        white-space: nowrap;
    }

    .projects-archive .project-header {
        height: auto;
        /* Allow height to grow for image + title */
        display: flex;
        flex-direction: column;
    }

    /* Mobile Preview Image - Visible here */
    .mobile-preview-image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
        order: -1;
        /* Ensure it stays on top */
    }

    .projects-archive .project-wrapper {
        height: 90px;
        transform: translateY(0px) !important;
        overflow: hidden;
    }

    /* Ensure visible text on mobile */
    .projects-archive .project-name-row {
        background-color: var(--color-bg-light);
        color: var(--color-text-main);
    }

    /* Active State for Mobile Accordion - Instant color change */
    .projects-archive .project-row.is-expanded .project-name-row {
        background-color: var(--color-text-main);
        color: var(--color-bg-light);
    }

    /* Ensure title and category text also change color */
    .projects-archive .project-row.is-expanded .project-name-row .project-title,
    .projects-archive .project-row.is-expanded .project-name-row .project-category {
        color: var(--color-bg-light);
    }

    /* Hide hover interaction rows on mobile */
    .projects-archive .project-details-row,
    .projects-archive .project-name-row:last-child {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .projects-archive .project-name-row,
    .projects-archive .project-details-row {
        height: 90px;
        padding: 0 0.75rem;
    }

    /* Hide the desktop floaty preview on tablet/mobile */
    .project-preview {
        display: none !important;
    }

    .projects-archive .expanded-inner {
        flex-direction: column;
    }

    .projects-archive .expanded-text {
        max-width: 100%;
    }

    .projects-archive .expanded-image {
        width: 100%;
        margin-top: 1.5rem;
    }

    /* Mobile Toggle Icon */
    .mobile-toggle-icon {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .projects-archive .project-row.is-expanded .mobile-toggle-icon {
        transform: rotate(45deg);
    }

    .projects-archive .project-row.is-expanded {
        margin-bottom: 2rem;
    }

    .mobile-row-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .projects-archive .credits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .projects-archive .project-title {
        font-size: var(--heading-size-s) !important;
        max-width: none;
    }

    .projects-archive .project-category {
        font-size: 0.75rem;
        max-width: none;
    }

    .projects-archive .project-preview {
        display: none;
    }

    /* Mobile Toggle Icon */
    .mobile-toggle-icon {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .projects-archive .project-row.is-expanded .mobile-toggle-icon {
        transform: rotate(45deg);
    }

    .mobile-row-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .projects-archive .credits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}