/* ==========================================================
   KOKO Enterprise
   Search
   ========================================================== */

/*--------------------------------------------------------------
# Search Section
--------------------------------------------------------------*/

.search-section{
    background:#ffffff;
}

/*--------------------------------------------------------------
# Search Form
--------------------------------------------------------------*/

.search-form-wrap{
    max-width:820px;
    margin:0 auto 4rem;
}

.search-form{
    display:flex;
    align-items:stretch;
    gap:1rem;
}

.search-form label{
    flex:1;
    margin:0;
}

.search-field{
    height:100%;
    min-height:56px;
}

.search-submit{
    flex-shrink:0;
    min-width:150px;
    justify-content:center;
}

/*--------------------------------------------------------------
# Results Grid
--------------------------------------------------------------*/

.search-results-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem;
}

/*--------------------------------------------------------------
# Result Card
--------------------------------------------------------------*/

.search-result-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    min-height:300px;
    padding:2.5rem;

    background:#ffffff;

    border:1px solid var(--color-border);
    border-radius:16px;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.search-result-card:hover{
    transform:translateY(-5px);

    border-color:rgba(0,0,0,.08);

    box-shadow:0 18px 45px rgba(0,0,0,.07);
}

/*--------------------------------------------------------------
# Result Type
--------------------------------------------------------------*/

.search-result-type{
    margin:0 0 1rem;

    color:var(--color-accent);

    font-size:.75rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

/*--------------------------------------------------------------
# Result Title
--------------------------------------------------------------*/

.search-result-title{
    margin:0 0 1.25rem;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:1.75rem;
    font-weight:600;
    line-height:1.25;
}

.search-result-title a{
    color:inherit;
    text-decoration:none;
}

.search-result-title a:hover{
    color:var(--color-accent);
}

/*--------------------------------------------------------------
# Result Excerpt
--------------------------------------------------------------*/

.search-result-excerpt{
    flex:1;
    margin:0;

    color:var(--color-text-light);

    line-height:1.8;
}

/*--------------------------------------------------------------
# Result Actions
--------------------------------------------------------------*/

.search-result-actions{
    margin-top:auto;
    padding-top:2rem;
}

.search-result-link{
    display:inline-flex;
    align-items:center;
    gap:.5rem;

    color:var(--color-accent);

    font-weight:600;

    transition:
        color .25s ease,
        gap .25s ease;
}

.search-result-link:hover{
    gap:.85rem;
    color:var(--color-primary);
}

/*--------------------------------------------------------------
# Empty State
--------------------------------------------------------------*/

.search-empty{
    max-width:720px;
    margin:0 auto;
    padding:3.5rem;

    background:#f8f8f8;

    border:1px solid var(--color-border);
    border-radius:18px;

    text-align:center;
}

.search-empty h2{
    margin:0 0 1rem;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:2rem;
    font-weight:600;
}

.search-empty p{
    margin:0 auto 2rem;

    color:var(--color-text-light);

    line-height:1.8;
}

.search-empty-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.search-page a:focus-visible,
.search-page button:focus-visible,
.search-page input:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:4px;
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .search-results-grid{
        grid-template-columns:1fr;
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:576px){

    .search-form{
        flex-direction:column;
    }

    .search-submit{
        width:100%;
        min-width:0;
    }

    .search-result-card{
        min-height:260px;
        padding:2rem;

        border-radius:12px;
    }

    .search-result-title{
        font-size:1.5rem;
    }

    .search-empty{
        padding:2rem;

        border-radius:12px;
    }

    .search-empty-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .search-empty-actions .btn{
        width:100%;
    }

}