:root
{
	--subtle: var(--psd-mid-gray);
	--subtler: rgba(0,0,0,.25);
}

/* Search results page */

.searchForm
{
    margin: 2em auto;
}

.searchForm .single-field-form
{
    grid-template-columns: 1fr;
}

.searchForm input#id_q,
.searchForm input[type="submit"]
{
    height: 2em;
    box-sizing: border-box;
    font-size: 1.25em;
}

.searchForm input#id_q
{
    border-radius: 1em;
    border: .1em solid var(--subtler);
    
    padding: .3em .3em .4em 1em;
}
.searchForm input[type="submit"]
{
    border-radius: 1em;
    padding: .3em 1em .4em 1em;    
}

/* Filters */

.searchFilters
{
    display: grid;
    grid-template-columns: fit-content(50%) 1fr;    
    grid-template-rows: 1fr 1fr;  
    align-items: baseline;      
    grid-gap: .5em;
    
    margin: 1em auto;
    font-size: .8em;
}
    .searchFilters div    
    {
        justify-self: start;
        text-align: left;
        margin: 0;
    }
    .searchFilters div label
    {
        width: 5em;
    }

select.filter
{
    -webkit-appearance: none;    
    position: relative;
    
    padding: .1em .3em .15em .3em;    
    border: 0.18rem solid var(--subtler);
    border-radius: 0.6rem;
    
    background: transparent;
    
    font-size: 1em;
}

.searchFilters select.filter
{
    margin-right: .5em;
}

#searchResultsList
{
	margin-bottom: 2em;
}


.searchResults .gameCards.list a,
.searchResults .gameCards.list a *
{
	text-decoration: none;
}

/* Game title */
.searchResults ul.gameCards.list li h2
{
	margin: 0 0 .25em 0;
	
	text-align: left;
	font-size: 1.6em;	
}

/* Game studio */
.searchResults ul.gameCards.list li h3
{
	margin: 0 0 .25em 0;
	font-size: 1em;
	font-weight: 600;
}

/* Game description */
.searchResults ul.gameCards.list li p
{
	margin: 0;
}


.searchResults ul.gameCards.list li.gameCard
{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}

/* No results */

.noResults
{
    text-align: center;
}
.noResults a
{
    font-weight: 600;
}

@media screen and (min-width: 670px)
{
    .searchForm .single-field-form
    {
        grid-template-columns: 9fr 1fr;
        grid-template-rows: 1fr;
    }
    
    .searchForm .single-field-form .control-group
    {
        display: block;
    }
    
    .searchForm #id_q
    {
        grid-column-span: 2;
    }
    
    .searchForm div.single-field-form .submit-button 
    {
        grid-column: 2;
    }

    .searchForm
    {
        max-width: 60%;
    }
    
    .searchFilters
    {
        grid-template-columns: repeat(3, auto) 1fr;
        grid-template-rows: 1fr;    
    }
        select.filter
        {
            width: fit-content;
        }
    
    .searchResults ul.gameCards.list li.gameCard
    {
        grid-template-columns: 10em 1fr;
        grid-template-rows: 1fr;
    }

}