/* CASESTUDIES-RESULTS.CSS 
   Grid System: 12-Column Dynamic Layout
*/

.cs-results {
    padding: 60px 0;
    background-color: #070707;
}

/* --- 1. TOP IMAGE GALLERY (Fixed & Visible) --- */
.cs-results-images {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px; /* Reduced from 80px to bring text closer */
}

/* Applying the look directly to the classes in your HTML */
.res-img-wide, 
.res-img-half {
    border-radius: 60px;
    overflow: hidden;
    background-color: #1A1A1A; /* Charcoal placeholder */
    border: 1px solid #242424;
    display: block;
    margin-top: 80px; 
}

.res-img-wide {
    width: 100%;
    aspect-ratio: 1200 / 554;
    min-height: 400px; /* Forces box to show even if image is missing */
}

.res-img-split {
    display: flex;
    gap: 32px;
}

.res-img-half {
    flex: 1;
    aspect-ratio: 585 / 450;
    min-height: 300px; /* Forces box to show */
}

/* Universal image fit for both wide and half boxes */
.res-img-wide img, 
.res-img-half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 2. RESULTS CHECKLIST --- */
.cs-results-points {
    margin-bottom: 160px;
}

/* Step 1: Tell the title to stop pushing away so hard */
.cs-results-points h2.cs-section-title {
    margin-bottom: 8px; /* Tighter gap below 'Results' title */
}

.res-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 80px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.res-list li {
    display: flex;
    align-items: flex-start; 
    gap: 12px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    color: #FFFFFF;
}

.res-list img{
    width: 24px; /* Size of ic_check-circle.svg */
    height: 24px;
    margin-top: 4px; /* ADD THIS LINE to nudge the icon down slightly */
}



/* --- THE WEIGHTED GRID --- */
.cs-results-bento {
    display: grid;
    /* Column 1 & 2 are small (320px), Column 3 takes all leftover space */
    grid-template-columns: 320px 320px 1fr; 
    gap: 20px;
    width: min(95%, 1280px); /* Responsive but capped at your lock width */
    margin: 0 auto 120px auto;
    align-items: start;
}

/* --- 2. THE STATIONARY ANCHOR (Column 3) --- */
.metric-stack-wrapper {
    grid-column: 3;         /* Locks metrics to the third column */
    grid-row: 1 / span 2;    /* Allows metrics to span the height of cards + button */
    position: relative;
    height: 400px;
}

/* --- THE INFO CARDS (Shrunk for hierarchy) --- */
.res-bento-card {
    width: 320px; 
    height: 254px;
    padding: 32px;
    background-color: #070707;
    border: 1px solid #1A1A1A;
    border-radius: 40px;
    box-sizing: border-box;
}

.bento-icon-wrapper {
    width: 48px;
    height: 48px;
    margin-bottom: 12px; /* FIGMA SPEC: 12px gap to text */
}

.res-bento-text {
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px; /* FIGMA SPEC */
    font-weight: 400;
    line-height: 32px; /* FIGMA SPEC */
    color: #FFFFFF;
    margin: 0;
    max-width: 230px;
}

.res-figma-cta {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: 464px;
    height: 60px;
    background-color: #070707;
    /* Default: Muted Border */
    border: 1px solid #1A1A1A; 
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Padding: Left 32px for text, Right 8px for the icon circle */
    padding: 0 8px 0 24px; 
    text-decoration: none;
    margin-top: 24px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* --- HOVER STATE: TRIGGER YELLOW BORDER --- */
.res-figma-cta:hover {
    border: 1px solid #1A1A1A; 
    background-color: #0c0c0c;
}

/* --- 3. CTA INTERNAL STYLING --- */

.cta-content {
    display: flex;
    align-items: center;
    gap: 16px; /* Increased gap between icon and text */
}

/* --- BIGGER ICON --- */
.cta-figma-icon {
    width: 24px; /* Increased from 16px to 24px */
    height: auto;
    opacity: 0.9;
}

.cta-text {
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    margin: 0;
}

/* --- ARROW CIRCLE TRANSITION --- */
.cta-arrow-circle {
    width: 48px;
    height: 48px;
    background-color: #141414;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Default: Grey Arrow */
    color: #636363; 
    transition: all 0.3s ease;
}

/* --- HOVER STATE: ARROW TURNS YELLOW --- */
.res-figma-cta:hover .cta-arrow-circle {
    color: #FFC534; /* Arrow turns yellow when parent button is hovered */
    background-color: #1a1a1a;
}

.cta-arrow-icon {
    width: 20px;
    height: 20px;
}

/* --- 4. THE HERO METRIC CARDS (35% & 40%) --- */
.metric-card {
    position: absolute;
    width: 384px; 
    height: 254px;
    background-color: #070707;
    border: 1px solid #1A1A1A;
    border-radius: 40px;
    /* FIGMA SPEC: 32 top, 76 right, 32 bottom, 32 left */
    padding: 32px 52px 32px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-number {
    font-family: 'Albert Sans', sans-serif;
    font-size: 68px; /* FIGMA SPEC from Video */
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px; /* FIGMA SPEC: 12px gap to desc */
    color: #FFFFFF;
}

.metric-description {
    font-family: 'Albert Sans', sans-serif;
    font-size: 24px;
    font-weight: 250;
    line-height: 36px;
    color: #FFFFFF;
    margin: 0;
    max-width: 280px;
}

.metric-disclaimer {
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px; /* FIGMA SPEC from Video */
    font-weight: 200;
    line-height: 40px;
    color: #636363;
    margin-top: 4px; /* FIGMA SPEC: 4px from desc */
}

/* --- 5. THE ARTISTIC OVERLAP (No Patches) --- */
.card-35 {
    top: -40px; 
    left: 140px; /* Slight right nudge */
    right: -60px; /* Pushes it slightly toward the screen edge */
    z-index: 2;
}

.card-40 {
    top: 130px; 
    left: -80px; /* Pulls it left to create the overlap */
    z-index: 1;
    box-shadow: -30px 30px 60px rgba(0, 0, 0, 0.9);
}

/* --- 6. THE CONCLUSION & LINKS (Pushed down for breathing room) --- */

.cs-results-footer {
    padding-bottom: 40px; /* Space at the very bottom of the page */
}

.conclusion-paragraph {
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #FFFFFF;
    max-width: 100%; /* Keeps the text from stretching too far for readability */
    margin-bottom: 40px;
}

.case-study-link-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Descriptive Label (White) */
.case-study-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    margin: 0;
}

.link-icon {
    stroke: #FFFFFF;
    opacity: 0.8;
}

/* THE YELLOW LINK */
.yellow-url {
    color: #FFC534; /* Bright Yellow */
    text-decoration: none;
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px;
    width: fit-content;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s ease;
    word-break: break-all; /* Ensures long URLs don't break on mobile */
}

.yellow-url:hover {
    border-bottom: 1px solid #FFC534;
}

/* --- For text animation on scroll --- */
.line-mask {
    overflow: hidden;
    display: block;
}

/* --- MOBILE ADJUSTMENTS (Screens under 768px) - FOR IMAGE SPLIT (SITE IMAGES) --- */
@media (max-width: 768px) {
    .res-img-split {
        flex-direction: column; /* Stacks images vertically instead of side-by-side */
        gap: 16px; /* Reduced gap for smaller screens */
    }

    .res-img-half {
        width: 100%; /* Allows each image to take full width */
        aspect-ratio: 1 / 1; /* You might prefer a 1:1 square look on mobile */
        min-height: auto; /* Removes the 300px force so aspect-ratio works */
        margin-top: 20px; /* Reduces the large 80px gap from desktop */
    }
}

/* --- MOBILE RESPONSIVE REFACTORS (Screens under 768px) FOR BENTO CARDS --- */
@media (max-width: 768px) {
    /* 1. Stack the entire Bento Grid into one column */
    .cs-results-bento {
        grid-template-columns: 1fr; 
        width: 92%; /* Breathing room on edges */
        gap: 16px;  /* Tighter gap for mobile */
        margin-bottom: 80px;
    }

    /* 2. Make Info Cards full width */
    .res-bento-card {
        width: 100%; 
        height: auto;
        padding: 24px;
        border-radius: 32px; /* Slightly smaller radius for mobile */
    }

    /* 3. Handle the Figma Prototype CTA (Full Width + Hover) */
    .res-figma-cta {
        grid-column: 1; /* Reset from spanning 2 columns */
        grid-row: auto; /* Moves below the cards naturally */
        width: 100%;   /* Fill screen width */
        max-width: 100%;
        margin-top: 12px;
        padding: 0 8px 0 20px; /* Precise padding for mobile */
    }

    /* Ensure the hover effect remains sharp on mobile */
    .res-figma-cta:hover {
        background-color: #0c0c0c;
        border-color: #FFC534; /* Making border yellow on hover for better visibility */
    }

    /* 4. Convert Overlapping Metrics (35% & 40%) into a Stack */
    .metric-stack-wrapper {
        grid-column: 1;
        grid-row: auto;
        height: auto; 
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 32px;
    }

    .metric-card {
        position: relative; /* Removes the desktop 'float' */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        height: auto;
        padding: 32px 24px;
    }

    .metric-number {
        font-size: 56px; /* Scaled down for mobile readability */
    }

    .metric-description {
        font-size: 20px;
        line-height: 28px;
    }
}