/* ============================================================
   REFRESH GLOBAL — INDEX PAGE PROJECTS SECTION
   ------------------------------------------------------------
   Location:
     /Views/Home/Index.cshtml

   Purpose:
     • Styles the “Projects” section on the homepage
     • Uses the same tile system as Products for visual consistency
     • Displays real-world case studies with images + descriptions
     • Ensures clean spacing, alignment, and corporate hierarchy
     • Fully responsive (stack on mobile → 3 columns desktop)

   Notes:
     • Project images stored under:
         ~/Content/hero/index/projects/
     • Uses .product-tile for unified card styling
     • This CSS is specific to the Index page only
   ============================================================ */



/* ============================================================
   1️⃣ PROJECT TILE CONTAINER (.product-tile override)
   ------------------------------------------------------------
   • Reuses the global product-tile structure
   • Adds left-aligned text for case-study readability
   • Maintains hover elevation for premium interaction
   ============================================================ */
#projects .product-tile {
    background: #fff; /* clean white tile */
    border: 1px solid #e6e6e6; /* light corporate border */
    border-radius: 10px; /* smooth rounded corners */
    padding: 25px; /* internal spacing */
    height: 100%; /* equal height columns */
    text-align: left; /* left-aligned for readability */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* smooth hover motion */
}

    /* Hover effect */
    #projects .product-tile:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,0.12); /* soft elevation */
        transform: translateY(-6px); /* gentle lift */
    }



    /* ============================================================
   2️⃣ PROJECT IMAGES
   ------------------------------------------------------------
   • Full-width responsive images
   • Rounded corners for consistency
   • Object-fit ensures clean scaling
   ============================================================ */
    #projects .product-tile img {
        width: 100%;
        max-height: 180px;
        object-fit: cover; /* crop cleanly */
        border-radius: 8px;
        margin-bottom: 15px;
    }



    /* ============================================================
   3️⃣ PROJECT TITLE
   ------------------------------------------------------------
   • Bold, readable, corporate
   • Slight spacing before description
   ============================================================ */
    #projects .product-tile h5 {
        font-weight: 700;
        margin-bottom: 0.6rem;
        color: #222;
    }



    /* ============================================================
   4️⃣ PROJECT DESCRIPTION
   ------------------------------------------------------------
   • Soft, secondary text
   • Comfortable line height for readability
   ============================================================ */
    #projects .product-tile p {
        font-size: 0.95rem;
        color: #666;
        line-height: 1.55;
        margin-bottom: 0;
    }



/* ============================================================
   5️⃣ SECTION TITLE
   ------------------------------------------------------------
   • Large, bold, left-aligned
   • Matches other section titles on Index
   ============================================================ */
#projects .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}