/* Styles for the new search page */

.search-page-main {
    /* Use the same 1200px max-width container as the index page */
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.search-bar-container {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.search-bar-container .search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 1.2rem;
}

#search-page-input {
    width: 100%;
    padding: 15px 20px 15px 60px; /* Make space for icon */
    font-size: 1.2rem;
    font-weight: 300;
    font-family: "Sansation", serif;
    color: var(--color-text-primary);
    background-color: var(--color-secondary-black);
    border: 1px solid #333;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s ease;
}

#search-page-input:focus {
    border-color: var(--color-primary-red);
}

#search-page-input::placeholder {
    color: var(--color-text-secondary);
}

/* The results grid uses .grid-container from index-style.css */
#search-page-results {
    /* Styles are already defined in index-style.css */
}

/* The no-results message uses .no-results from index-style.css */
#no-results-message {
    /* 'display: none;' is set inline in the HTML.
       JS will toggle to 'display: flex;' based on the
       .no-results style in index-style.css 
    */
}

/* This is the new card style for search results */
.search-result-card {
    /* This is the <a> tag */
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease;
}

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

.search-result-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px; /* Rounded corners for the image */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 12px; /* Space between image and title */
}

.search-result-title {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--color-text-primary);
    text-align: center; /* Center the title */
    
    /* These 3 lines prevent long titles from breaking the layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}