/**
 * Search Results Component
 * 
 * Uses highlight-style cards for search results
 * Uses global colors from foundations/colors.css
 * Uses global typography from foundations/typography.css
 * Uses global buttons from components/buttons.css
 *
 * @package Kurpfalz_Theme
 * @author Saad Badr
 * @copyright 2025 SawatzkiMühlenbruch GmbH
 */

/* ==========================================================================
   Search Results Wrapper
   ========================================================================== */

.kurpfalz-search-results-wrapper {
    padding-top: var(--widget-margin-top); /* Responsive: prevents logo overlap */
    padding-bottom: var(--spacing-xl); /* 80px */
    width: 100%;
    overflow: hidden;
}

/* ==========================================================================
   Search Header
   ========================================================================== */

.kurpfalz-search-header {
    margin-left: var(--margin-horizontal);
    margin-right: var(--margin-horizontal);
    margin-bottom: var(--spacing-lg); /* 40px */
}

.kurpfalz-search-header h2 {
    /* Inherits global widget heading styles */
    margin-top: 0;
}

.kurpfalz-search-header .search-query {
    background-color: var(--color-tertiary);
    padding: 5px 15px;
    border-radius: 10px;
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Search Results Grid
   ========================================================================== */

.kurpfalz-search-results-grid {
    margin-left: var(--margin-horizontal);
    margin-right: var(--margin-horizontal);
    position: relative;
}

.kurpfalz-search-results-grid-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md); /* 30px */
    justify-content: left;
}

/* ==========================================================================
   Search Result Card (Lavender Card with optional image)
   ========================================================================== */

.kurpfalz-search-result-card {
    width: 403px;
    aspect-ratio: 1/1;
    height: auto;
    max-width: 100%;
    position: relative;
    border-bottom-right-radius: 36px;
    overflow: hidden;
    background-color: var(--color-secondary); /* Lavender background */
    transition: transform var(--transition-fast);
}

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

.kurpfalz-search-result-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Card Image (top right corner, rounded) */
.kurpfalz-search-result-card-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    border-bottom-left-radius: 36px;
    overflow: hidden;
    z-index: 1;
}

.kurpfalz-search-result-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Content (always visible) */
.kurpfalz-search-result-card-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--spacing-md); /* 30px - gleichmäßig auf allen Seiten */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

/* Card Type Label */
.kurpfalz-search-result-card-content .card-type {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm); /* 20px */
    display: block;
}

/* Card Title */
.kurpfalz-search-result-card-content h3 {
    font-size: 1.7rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 var(--spacing-md) 0; /* 30px bottom */
}

/* Card Excerpt */
.kurpfalz-search-result-card-content .card-excerpt {
    font-size: var(--font-size-small);
    color: var(--color-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md); /* 30px */
    flex-grow: 1;
}

.kurpfalz-search-result-card-content .card-excerpt p {
    margin: 0 0 var(--spacing-xs) 0; /* 10px */
}

/* More Button */
.kurpfalz-search-result-card-content .btn.more {
    align-self: flex-start;
    margin-top: auto;
}

/* ==========================================================================
   No Results
   ========================================================================== */

.kurpfalz-search-no-results {
    margin-left: var(--margin-horizontal);
    margin-right: var(--margin-horizontal);
    padding: var(--spacing-xl);
    text-align: center;
}

.kurpfalz-search-no-results p {
    font-size: var(--font-size-large);
    color: var(--text-color);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.kurpfalz-search-pagination {
    margin-top: var(--spacing-xl);
    margin-left: var(--margin-horizontal);
    margin-right: var(--margin-horizontal);
    text-align: center;
}

.kurpfalz-search-pagination .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background-color: var(--color-tertiary);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color var(--transition-fast);
}

.kurpfalz-search-pagination .page-numbers:hover,
.kurpfalz-search-pagination .page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 750px) {
    .kurpfalz-search-header h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 540px) {
    .kurpfalz-search-results-wrapper {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
    
    .kurpfalz-search-header h2 {
        font-size: 1.2rem;
    }
}