/* ==========================================================================
   HOME - BLOGS SECTION
   ========================================================================== */

.home-blogs {
    background-color: var(--color-bg-black, #000);
    color: var(--color-text-white, #FFF);
    padding: clamp(30px, 5vw, 40px) 0 clamp(240px, 20vh, 800px);; /* Figma lock: 50px max horizontal gap */
}

/* --- Header --- */
.blogs-header {
    margin-bottom: clamp(60px, 5vw, 80px);
}



/* --- Blog list --- */
.blogs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.blog-title {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 300; /* */
    font-size: clamp(16px, 2vw, 18px); /* */
    color: #FFFFFF; /* */
    margin: 0; /* */
    line-height: 1.35; /* */
    display: flex; /* */
    align-items: center; /* */
    /* [FIX] Transitions for color and weight must be listed to feel smooth */
    transition: font-weight 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease; 
}

/* --- THE HOVER ARROW ICON --- */
.blog-title::before {
    content: "";
    display: inline-block;
    width: 18px; /* Figma width */
    height: 18px; /* Figma height */
    background: url('../assets/images/blogs/ic_blog-arrow.svg') no-repeat center;
    background-size: contain;
    /* Hidden in idle state */
    width: 0;
    opacity: 0;
    margin-right: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-item {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    padding: clamp(16px, 3vw, 24px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Remove border from the very last item */
.blog-item:last-child {
    border-bottom: none;
}

/* Hover effect: Subtle dimming and slight nudge */
.blog-item:hover {
    background-color: transparent;
}

.blog-item:hover .blog-title {
    color: #FFFFFF; /* Keep it bright white for better focus */
    font-weight: 500; /* [FIX] Bold 700 weight on hover */
    letter-spacing: -0.01em; /* Helps the bold text sit naturally */
}

/* [FIX] Arrow appears with exact 6px gap only on hover */
.blog-item:hover .blog-title::before {
    width: 18px;
    opacity: 1;
    margin-right: 8px; 
}

/* Date: Block Craft pixel font */
.blog-date {
    font-family: 'Block Craft', monospace;
    font-size: 18px;
    font-weight: normal;
    color: #7C7C7C;
    margin-bottom: 8px;
    display: block;
}


/* The Hover Image Div - Now tracked by JS */
.hover-reveal {
    position: fixed;
    top: 0;
    left: 0;

    /* Exact Figma Dimensions */
    width: 186px;
    height: 111px;

    opacity: 0;
    pointer-events: none;
    z-index: 9999;

    /* Visual Specs from user */
    border-radius: 8px;
    border: 1px solid #242424;
    background-color: lightgray;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 8px 24px 8px #07070E;
    /* Grey note: hardware acceleration for smoother movement */
    will-change: transform;

    /* ========================================== */
    /* REMOVED: transition and transform          */
    /* GSAP entirely controls scaling, opacity,   */
    /* and rotation for smooth physics.           */
    /* ========================================== */
}

/* (Removed .blog-item:hover .hover-reveal because GSAP handles visibility) */

/* --- Footer CTA --- */
.blogs-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--section-spacing-cta); /* Linked! */
}

/* home-blogs.css */

@media screen and (max-width: 768px) {
    /* 1. INCREASE THE DISTANCE BETWEEN DIVIDERS */
    .blog-item {
        /* We increase the vertical padding to push the border-bottom dividers apart */
        padding: 20px 0 !important; 
    }

    /* 2. ADJUST THE VERTICAL STACK */
    .blog-date {
        margin-bottom: 12px !important; /* Slightly more space between date and title */
        font-size: 18px !important; /* Tighter font for mobile dates */
    }

    .blog-title {
        line-height: 1.4 !important; /* More leading for mobile readability */
    }
}