/* Projects page: stacking cards + timeline */

/* ============================================
   Projects Cards Section (Stacking Cards)
   ============================================ */
.projects-cards-section {
    background-color: var(--bg-white);
    padding: 0;
    width: 100%;
    margin-top: 0;
    padding-top: 10.8125rem; /* 5.5rem (88px) + 85px = 173px total spacing */
    position: relative;
    overflow: visible;
    min-height: 100vh; /* Ensure container has enough height for sticky positioning */
}

/* Hide entry-header on Projects page */
.page-template-page-projects .entry-header {
    display: none;
}

.projects-stack {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    box-sizing: border-box;
    overflow: visible; /* Ensure sticky positioning works */
    min-height: calc(100vh * 2); /* Ensure enough height for sticky positioning to work */
}

.project-card {
    position: sticky;
    top: calc(20vh + 8.65rem); /* Keep bottom aligned: top + height ~= 100vh */
    bottom: auto;
    margin-bottom: 240px; /* ~20% less scroll space than 300px */
    transition: opacity 0.3s ease, z-index 0s; /* Removed transform transition to prevent jitter */
    cursor: pointer;
    z-index: 1;
    width: 100%;
    height: calc(80vh - 8.65rem); /* ~20% shorter than (100vh - 10.8125rem) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 1rem; /* Reduced horizontal padding for wider cards */
    padding-top: 0;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity, z-index; /* Optimize for smooth scrolling */
}

/* First card stays fixed at top with spacing */
.project-card:first-child {
    margin-top: 0;
    top: calc(20vh + 8.65rem); /* Keep bottom aligned: top + height ~= 100vh */
    bottom: auto;
    z-index: 1; /* Base z-index */
    position: sticky !important; /* Force sticky positioning */
    height: calc(80vh - 8.65rem); /* ~20% shorter than (100vh - 10.8125rem) */
}

/* Subsequent cards scroll over the first */
.project-card:nth-child(n+2) {
    z-index: 2; /* Higher z-index so they scroll over the first card */
}

.project-card.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.project-card.is-transitioning {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.project-card.is-past {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: none;
}

.project-card:last-child {
    margin-bottom: 0;
}

/* Add minimal spacer after last card - reduced to allow next section to appear sooner */
.projects-stack::after {
    content: '';
    display: block;
    height: 2rem; /* Minimal spacer - just enough to prevent overlap */
    width: 100%;
}

.project-card:hover {
    transform: translateY(0);
}

.project-card-inner {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 2rem 4.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    width: 100%;
    max-width: 78vw; /* ~20% narrower than previous 98vw */
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden; /* Ensure background images respect rounded corners */
    height: 100%; /* Fill parent card height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
    padding-top: 1.5rem; /* Reduced top padding to align content closer to top */
}

/* Image layout styles */
.project-card-inner.has-image {
    flex-direction: row;
    align-items: stretch; /* Stretch to full height */
    gap: 0;
    padding: 0;
    overflow: hidden; /* Ensure image doesn't overflow rounded corners */
}

.project-card-inner.has-image.image-left {
    flex-direction: row-reverse;
}

.project-card-inner.has-image .project-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2rem 4.5rem;
    padding-top: 1.5rem; /* Reduced top padding */
}

.project-card-inner.has-image .project-text-content {
    flex: 1;
}

.project-card-inner.has-image .project-image-wrapper {
    flex: 0 0 45%;
    max-width: 45%;
    height: 100%;
    display: flex;
    align-items: stretch; /* Stretch to full height */
    justify-content: center;
    overflow: hidden; /* Ensure image doesn't overflow */
}

.project-card-inner.has-image .project-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire area */
    object-position: center;
}

/* Background image styles */
.project-card-inner.has-background-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 0; /* Remove padding to make image edge-to-edge */
    overflow: hidden; /* Ensure image stays within rounded corners */
}

.project-card-inner.has-background-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5); /* Reduced opacity from 0.85 to 0.5 for better image visibility */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 1;
}

.project-card-inner.has-background-image .project-text-content {
    position: relative;
    z-index: 2;
    padding: 2rem 4.5rem;
    padding-top: 1.5rem; /* Move padding to text content */
}

.project-card:hover .project-card-inner {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.project-year {
    font-size: 1.5rem; /* 6× previous 0.875rem */
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1;
}

.project-title {
    font-size: 1.75rem; /* 2× previous 1.75rem */
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.project-description {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.project-footer-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.project-category {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.375rem 0.875rem;
    background-color: var(--bg-light);
    border-radius: 20px;
}

/* Ensure buttons and links are always clickable even when card has pointer-events: none */
.project-card[style*="pointer-events: none"] .project-button,
.project-card[style*="pointer-events: none"] a {
    pointer-events: auto !important;
}

.project-button {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
    background-color: var(--primary-color);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
}

.project-button:hover,
.project-button:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Projects Timeline Section
   ============================================ */
.projects-timeline-section {
    background-color: var(--bg-white);
    padding: 0 0 6rem;
    width: 100%;
    margin: 0;
    margin-top: 0;
}

.timeline-wrapper {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.timeline-wrapper iframe,
.timeline-iframe {
    display: block;
    border: 0;
}

.timeline-lazy {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    background: var(--bg-light);
}

.timeline-lazy[data-loaded="1"] {
    min-height: 0;
    padding: 0;
    background: transparent;
    display: block;
}

.timeline-lazy-hint {
    margin: 0;
    color: var(--text-medium);
    font-size: 0.9375rem;
    text-align: center;
}

/* Note: TimelineJS iframe is cross-origin, so we cannot directly style its content with CSS.
   The font is controlled via the iframe src URL parameter. To match the site font,
   you may need to configure the TimelineJS source (Google Sheet) with font settings,
   or use TimelineJS font parameter options. The iframe currently uses 'Default' font.
   
   Alternative: If you have control over the TimelineJS source, you can:
   1. Use TimelineJS font parameter: &font=FontName
   2. Use a Google Font: &font=https://fonts.googleapis.com/css?family=FontName
   3. Configure font in the TimelineJS source data itself
*/

/* ============================================
   Jump to Timeline Floating Button
   ============================================ */
.jump-to-timeline-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-family: inherit;
    opacity: 1;
    visibility: visible;
}

.jump-to-timeline-button.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.jump-to-timeline-button:hover,
.jump-to-timeline-button:focus {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    outline: none;
}

.jump-to-timeline-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .jump-to-timeline-button {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .projects-cards-section {
        padding: 4rem 0;
    }
    .projects-stack {
        padding: 0; /* Remove padding for edge-to-edge on mobile */
        max-width: 100%;
    }
    .project-card {
        margin-bottom: 160px; /* ~20% less scroll space than 200px */
        top: calc(20vh + 1.6rem); /* Keep bottom aligned: top + height ~= 100vh */
        bottom: auto;
        height: calc(80vh - 1.6rem); /* ~20% shorter than (100vh - 2rem) */
        padding: 0 0.5rem; /* Minimal horizontal padding on mobile for edge-to-edge */
        align-items: flex-start;
    }
    .project-card:first-child {
        top: calc(20vh + 1.6rem); /* Keep bottom aligned: top + height ~= 100vh */
        bottom: auto;
        height: calc(80vh - 1.6rem); /* ~20% shorter than (100vh - 2rem) */
    }
    .project-card:last-child {
        margin-bottom: 2rem; /* Minimal margin to allow next section to appear */
    }
    .project-card-inner {
        padding: 1.5rem 2.25rem;
        padding-top: 1rem; /* Reduced top padding for content on mobile */
        max-width: 99vw; /* Almost edge-to-edge on mobile */
        height: 100%; /* Fill parent card height */
        justify-content: flex-start; /* Align content to top on mobile */
    }
/* Mobile image layout - stack vertically */
    .project-card-inner.has-image {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    .project-card-inner.has-image .project-card-content {
        padding: 1.5rem 2.5rem;
        padding-top: 1rem;
    }
    .project-card-inner.has-image.image-left {
        flex-direction: column;
    }
    .project-card-inner.has-image .project-image-wrapper {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        height: 40vh; /* Fixed height on mobile */
        min-height: 40vh;
    }
    .project-card-inner.has-image .project-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
/* Background image on mobile */
    .project-card-inner.has-background-image {
        padding: 0; /* Remove padding to make image edge-to-edge on mobile */
    }
    .project-card-inner.has-background-image .project-text-content {
        padding: 1.5rem 2.5rem;
        padding-top: 1rem; /* Move padding to text content on mobile */
    }
    .project-card-inner.has-background-image::before {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .project-year {
        font-size: clamp(2rem, 12vw, 3.5rem); /* Scaled down from desktop 6× for narrow screens */
        margin-bottom: 0.5rem;
    }
    .project-title {
        font-size: 3rem; /* 2× previous 1.5rem */
        color: #1a1a1a; /* Darker text for better readability on mobile */
    }
    .project-description {
        color: #333333; /* Darker text for better readability on mobile */
    }
    .project-footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .project-button {
        width: 100%;
        text-align: center;
    }
    .projects-timeline-section {
        padding: 0 0 4rem;
    }
    .timeline-wrapper {
        margin: 0;
    }
    .timeline-wrapper iframe {
        height: 500px;
    }
}