/* --- UNIVERSAL PROJECT CARD DESIGN --- */

.project-card {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    text-decoration: none;
    /* The magic combo: padding creates the hover space, negative margin cancels it for the grid */
    padding: 20px; 
    margin: -20px; 
    border-radius: 24px;
    border: 1px solid transparent;
    background-color: transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

/* Ensure the card NEVER gets a focus box, even if clicked */
.project-card:focus, 
.project-card:active, 
.project-card:focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent; /* Stops the gray mobile flicker */
}

.project-card:hover {
    background: #101010; 
    border: 1px solid #1C1C1C;
    box-shadow: 0 4px 8px 16px rgba(0, 0, 0, 0.50);
}


.card-image-wrapper {
    width: 100%;
    aspect-ratio: 550 / 260; /* Exact Figma node ratio */
    border-radius: 24px;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box; /* Still need this to handle future borders */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 1. Use the variables from JS. Default to 0px if JS hasn't run yet */
    transform: scale(1) translate(var(--px, 0px), var(--py, 0px));
    
    /* 2. Use a smooth transition so the movement feels "floaty" rather than robotic */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.16, 1);  /* cubic-bezier(0.16, 1, 0.3, 1);*/
}

.project-card:hover .card-image-wrapper img {
    /* 3. Combine the hover zoom (1.1) with the parallax translation */
    transform: scale(1.1) translate(var(--px, 0px), var(--py, 0px));
}

/* --- TYPOGRAPHY: 1-Line Logic --- */
.card-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px; /* EXACTLY 8px between text and arrow */
    font-family: 'Albert Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
}

.title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1; /* Allows text to truncate so arrow stays visible */
}

.card-meta {
    font-family: 'Geist Mono', monospace; /* */
    font-size: 16px;
    color: #515151;
    margin-top: 8px; /* EXACTLY 8px below title */
}

.card-arrow {
    width: 20px;
    height: 20px;
    background: url('../assets/images/featured/ic_arrow-up-right.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0; /* Prevents arrow from squishing */
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all 0.3s ease;
}

.project-card:hover .card-arrow {
    opacity: 1;
    transform: translate(0, 0);
}


/* ============================================================
   GENERIC BIG CARD MODIFIERS (After Line 102)
   ============================================================ */

/* Grey Note: Applies the 450px height to any card marked as 'is-big' */
.project-card.is-big .card-image-wrapper {
    aspect-ratio: auto; 
    height: 450px; 
}

/* Grey Note: GENERIC TYPE 1 - Centered Assets (Used for Sten, Care Predict, etc.) */
.project-card.is-visual .card-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Generic container for any centered visual elements */
.pc-asset-box {
    display: flex;
    gap: 20px; /* Precise 20px gap between assets */
    height: 80%; /* Proportional breathing room */
    
}

/* 2. THE MANUAL SCALE: Only for Pancakes/Dashboards.
      Reducing the height automatically shrinks the width proportionally 
      so it pulls away from the side edges. */
.pc-asset-box.is-landscape {
    height: 70% !important; 
}

/* Individual asset (could be a phone, a browser, or an icon) */
.pc-asset {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%; 
    gap: 20px;
    
    /* REMOVE THE WIDTH RULES. Set this to 100% instead. */
    width: 100%;
}

/* Grey Note: GENERIC TYPE 2 - Full Bleed (Used for Defi, Gamification, etc.) */
.project-card.is-full .card-image-wrapper img {
    object-fit: cover; /* Fills the 1200x450 area completely */
    height: 100%;
    width: 100%;
}

/* --- IMAGE FRAMING OVERRIDES --- */

/* 1. Use this for Full-Width Photos (e.g., Defi, Passenger Assistance) */
.align-top img    { object-position: top center; }
.align-center img { object-position: center center; }
.align-bottom img { object-position: bottom center; }

/* --- THE UNIFIED BOTTOM ALIGN --- */

.project-card.align-bottom .card-image-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important;
    align-items: center;      
}

.project-card.align-bottom .pc-asset-box {
    display: flex;
    align-items: flex-end !important;
    width: auto;
    height: 85%; 
}

.project-card.align-bottom .pc-asset {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}