/* ============================================================
   REFRESH GLOBAL — INDEX PAGE PRODUCT TILE SYSTEM
   ------------------------------------------------------------
   Location:
     /Views/Home/Index.cshtml

   Purpose:
     • Styles the “Our Products” section on the homepage
     • Ensures consistent tile layout, spacing, and alignment
     • Provides premium hover motion and corporate visual rhythm
     • Supports responsive behavior (2 columns mobile → 4 desktop)

   Notes:
     • This CSS is specific to the Index page only
     • Product logos are stored under:
         ~/Content/hero/index/products/
     • Matches global UI language (radius, shadows, transitions)
   ============================================================ */



/* ============================================================
   1️⃣ PRODUCT TILE CONTAINER
   ------------------------------------------------------------
   • White card with soft border
   • Rounded corners for modern corporate feel
   • Internal padding for breathing room
   • Height:100% ensures equal column height alignment
   ============================================================ */
.product-tile {
    border: 1px solid #e6e6e6; /* light corporate border */
    padding: 25px; /* internal spacing */
    border-radius: 10px; /* smooth rounded corners */
    background: #fff; /* clean white tile */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* smooth hover motion */
    height: 100%; /* equal height tiles */
    text-align: center; /* center all content */
}



    /* ============================================================
   2️⃣ HOVER INTERACTION
   ------------------------------------------------------------
   • Subtle elevation effect
   • Soft shadow for premium feel
   • Slight upward motion (no harsh jumps)
   ============================================================ */
    .product-tile:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,0.12); /* soft elevation */
        transform: translateY(-6px); /* gentle lift */
    }



/* ============================================================
   3️⃣ PRODUCT LOGO (TOP ICON-STYLE)
   ------------------------------------------------------------
   • Used for SPI product logos (Rust Grip, Super Therm, etc.)
   • Object-fit: contain ensures no distortion
   • Max-height ensures consistent visual rhythm
   ============================================================ */
.product-logo {
    max-height: 90px; /* consistent logo height */
    width: auto; /* maintain aspect ratio */
    margin-bottom: 18px; /* spacing below logo */
    object-fit: contain; /* prevent stretching */
}



/* ============================================================
   4️⃣ SECTION TITLE
   ------------------------------------------------------------
   • Large, bold, centered
   • Matches corporate typography scale
   ============================================================ */
.section-title {
    font-size: 2.2rem; /* strong headline */
    font-weight: 700; /* bold for emphasis */
    margin-bottom: 2rem; /* spacing before grid */
}



/* ============================================================
   5️⃣ PRODUCT IMAGE (FALLBACK SUPPORT)
   ------------------------------------------------------------
   • Used only if full product images are ever added
   • Ensures clean scaling and rounded corners
   ============================================================ */
.product-tile img {
    width: 100%; /* full width inside tile */
    max-height: 160px; /* consistent height */
    object-fit: contain; /* no cropping */
    border-radius: 6px; /* soft corners */
    margin-bottom: 15px; /* spacing below image */
}



/* ============================================================
   6️⃣ PRODUCT TITLE
   ------------------------------------------------------------
   • Strong, readable, corporate
   • Slight spacing before description
   ============================================================ */
.product-tile h5 {
    font-weight: 700; /* bold title */
    margin-bottom: 0.4rem; /* tight spacing */
    color: #222; /* dark corporate text */
}



/* ============================================================
   7️⃣ PRODUCT DESCRIPTION
   ------------------------------------------------------------
   • Soft, secondary text
   • Small size for clean hierarchy
   ============================================================ */
.product-tile p {
    margin-bottom: 0; /* no extra spacing */
    font-size: 0.95rem; /* readable but subtle */
    color: #666; /* soft grey */
}