/* ==========================================================================
   HOME PAGE MOBILE OPTIMIZATION (< 768px)
   ========================================================================== */

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    /* --- Hero Section Fixes (.home-hero) --- */

    .home-container .content-wrapper {
        padding-top: 140px;
        /* Push content down below floating navbar */
    }

    /* Typography: Reduce font sizes */
    .home-hero .text-hero h1 {
        font-size: 24px;
        line-height: 1.2;
        text-align: center;
        max-width: 100vw;
        padding: 0 16px;
    }

    .home-hero .text-hero h2 {
        font-size: 24px;
        /* Reduced from larger size */
        margin-top: 8px;
        font-weight: 500;
        text-align: center;
    }

    /* Background Layer Grid Strict Sizing */
    .bg-layer {
        width: 100%;
        max-width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        object-fit: cover;
    }

    /* Social Icons: Reduce gap/padding and ensure centering */
    .home-hero .contact-section {
        gap: 12px;
        margin-top: 16px;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .home-hero .contact-icons {
        gap: 16px;
        justify-content: center;
        width: 100%;
    }

    .home-hero .contact-icon-btn {
        width: 40px;
        height: 40px;
    }

    .home-hero .contact-icon-btn i {
        font-size: 20px;
    }

    /* Button: Scale down */
    .home-hero .cta-button {
        height: 48px;
        padding: 0 6px 0 16px;
        margin: 0 auto;
        /* Force horizontal centering */
    }

    .home-hero .cta-text {
        font-size: 14px;
    }

    .home-hero .cta-icon {
        width: 36px;
        height: 36px;
    }

    .home-hero .cta-icon i {
        font-size: 20px;
    }

    /* --- Selection Work Card Fixes (.home-work-card) --- */

    /* Container External Padding: align with floating navbar (16px) */
    /* .projects-section {
        padding: 120px 24px 80px;
    } */

    /* Padding: Reduce inner padding */
    .home-work-card {
        padding: 24px;
        gap: 32px;
        flex-direction: column-reverse;
        /* Stack: Content below Image or standard? Usually Image top. 
        Original layout: Left Content, Right Preview. 
        On mobile: Preview (Image) often goes top or bottom. 
        CSS Cards usually stack naturally. 
        Let's keep standard stacking (flex-direction: column usually puts 1st child on top). 
        Wait, standard .project-card-horizontal likely has flex-direction: row.
        On mobile it should be column.
        If Content is 1st child, it will be on top. Image 2nd child below.
        */
        flex-direction: column-reverse;
        /* Preview on top might be better? Or Content top?
        Let's stick to Content top (column) as default, but many designs prefer Image top.
        Let's try column-reverse so Image (2nd child) is on top? 
        Actually, let's just use column and see. 
        Wait, I'll use column-reverse to put image on top if that's preferred, 
        but let's stick to standard flow first (Content on top) unless it looks bad.
        Actually, usually Image is Top for cards. 
        Let's use flex-direction: column-reverse; works if Image is 2nd child. */
        flex-direction: column-reverse;
    }

    /* Title Scaling */
    .home-work-card .project-title-large {
        font-size: 22px;
        line-height: 1.3;
        word-wrap: break-word;
    }

    .home-work-card .project-description-long {
        font-size: 14px;
        line-height: 1.6;
    }

    .home-work-card .title-icon {
        font-size: 24px;
        transform: translate(0, 0);
        /* Reset hover effect position for mobile */
        opacity: 1;
        /* Always visible on mobile */
        color: var(--primary-orange);
    }

    /* Deliverables List: Flexible wrap */
    .home-work-card .project-deliverables {
        width: 100%;
    }

    .home-work-card .deliverable-list {
        flex-wrap: wrap;
        gap: 8px;
    }

    .home-work-card .deliverable-item {
        font-size: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-faint);
        padding: 6px 12px;
        border-radius: 12px;
        /* Remove the separator lines for wrapped layout */
    }

    .home-work-card .deliverable-item:not(:last-child)::after {
        content: none;
    }

    /* Preview Image Sizing */
    .home-work-card .project-preview {
        width: 100%;
        flex: unset;
        min-height: 200px;
        padding: 20px;
    }

    .home-work-card .preview-stats {
        bottom: 16px;
        left: 16px;
        right: 16px;
        gap: 8px;
    }

    .home-work-card .stat-tag {
        font-size: 10px;
        padding: 6px 12px;
    }

    /* --- Navbar Adjustments --- */
    .nav-menu {
        gap: 16px;
    }

    .nav-item {
        font-size: 14px;
        padding: 0;
        height: auto;
    }

    .nav-item::after {
        display: none;
        /* Remove underline hover effect on mobile */
    }
}