/*
============================================================
LISMAH HOMEPAGE
============================================================

Homepage-specific presentation.

Shared navigation, footer, buttons, forms, typography,
cookie consent, and responsive foundations live in:

    static/css/site.css
============================================================
*/


/* =========================================================
   HOMEPAGE MAIN CONTAINER

   The homepage needs full-width sections rather than the
   narrower default content width used by tools/privacy pages.
========================================================= */

.home-main {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   HERO
========================================================= */

.home-hero {
    width: min( 100% - 48px, var(--page-width) );
    min-height: calc( 100vh - 80px );
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
    align-items: center;
    gap: 56px;
    padding: 70px 0;
}


.home-eyebrow {
    margin: 0;
    color: var(--brand-soft);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}


.home-title {
    margin: 18px 0;
    color: var(--brand);
    font-size: clamp( 3.2rem, 5vw, 4.85rem );
    line-height: 0.98;
    letter-spacing: -0.05em;
}


.home-lead {
    max-width: 650px;
    margin: 0;
    color: var(--brand-soft);
    font-size: 1.18rem;
    line-height: 1.75;
}


.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 30px;
}


.home-hero-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: var(--shadow-large);
}


/* =========================================================
   HOMEPAGE SECTIONS
========================================================= */

.home-section {
    padding: 82px 0;
}


.home-section-container {
    width: min( 100% - 48px, var(--page-width) );
    margin-inline: auto;
}


.home-section-header {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}


    .home-section-header h2 {
        margin: 0 0 14px;
    }


.home-muted {
    margin: 0;
    color: var(--brand-soft);
    line-height: 1.7;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.home-service-grid {
    display: grid;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    gap: 24px;
}


.home-card {
    padding: 30px;
    background: var(--surface);
    border: 1px solid rgba( 255, 255, 255, 0.78 );
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}


    .home-card h3 {
        margin: 0 0 12px;
        font-size: 1.2rem;
    }


/* =========================================================
   TOOLS PROMOTION
========================================================= */

.home-tools {
    background: rgba( 255, 255, 255, 0.24 );
}


.home-tools-panel {
    display: grid;
    grid-template-columns: minmax( 0, 1fr ) auto;
    align-items: center;
    gap: 32px;
    padding: 34px;
    background: var(--surface);
    border: 1px solid rgba( 255, 255, 255, 0.8 );
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}


    .home-tools-panel h2 {
        margin-bottom: 10px;
    }


/* =========================================================
   CONTACT
========================================================= */

.home-contact-grid {
    display: grid;
    grid-template-columns: minmax( 0, 0.95fr ) minmax( 0, 1.05fr );
    gap: 36px;
    align-items: start;
}


.home-contact-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}


    .home-contact-list li {
        margin: 10px 0;
        color: var(--brand-soft);
    }


.home-submit {
    width: 100%;
    border: 0;
}


/* =========================================================
   PROJECT REQUEST STATUS MESSAGE
========================================================= */

.request-status {
    position: fixed;
    bottom: 22px;
    left: 50%;
    z-index: 190;
    max-width: min( calc(100% - 30px), 700px );
    padding: 14px 22px;
    transform: translateX( -50% );
    background: var(--brand);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba( 0, 0, 0, 0.16 );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}


    .request-status.show {
        opacity: 1;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media ( max-width: 800px ) {

    .home-hero {
        width: min( 100% - 30px, var(--page-width) );
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 50px 0;
        text-align: center;
    }


    .home-lead {
        margin-inline: auto;
    }


    .home-actions {
        justify-content: center;
    }


    .home-hero-image {
        height: 340px;
    }


    .home-section-container {
        width: min( 100% - 30px, var(--page-width) );
    }


    .home-service-grid {
        grid-template-columns: 1fr;
    }


    .home-tools-panel {
        grid-template-columns: 1fr;
        text-align: center;
    }


        .home-tools-panel .button {
            justify-self: center;
        }


    .home-contact-grid {
        grid-template-columns: 1fr;
    }
}