/* 
 * ArztMallorca Suche Screen CSS
 * Struktur wie Vorlage: briefing/vorlage/kategorie.html
 * 
 * Abstand Breadcrumb zum Header: Vorlage hat weniger Abstand. Container mit
 * negativem margin-top, damit „Mallorca Zeitung › …“ näher am Header sitzt.
 */
#arzt-mallorca-suche-container {
    margin-top: calc(-1 * var(--spacing-2xl));
}

/*
 * VERWENDETE BASE-KLASSEN:
 * - .base-layout-container (layout.css)
 * - .base-breadcrumb, .base-breadcrumb-separator (widgets-links.css)
 * - .base-page-header (widgets-headlines.css)
 * - .base-search-form, .base-search-form--inline, .base-search-row, .base-form-group, .base-form-label (widgets-forms.css)
 * - .base-button-standard (widgets-buttons.css)
 * - .base-section-alt, .base-section-alt-intro, .base-section-alt-image-strip, .base-image-strip-img (widgets-sections.css)
 * - .base-doctor-list, .base-doctor-list-item, .base-doctor-list-image, .base-doctor-list-content,
 *   .base-card-doctor-name, .base-doctor-specialty, .base-doctor-location, .base-doctor-list-actions,
 *   .base-doctor-photo-circle, .base-doctor-photo-placeholder (widgets-cards.css)
 * 
 * Nur Pager und No-Results sind screen-spezifisch.
 * Screen-CSS nutzt ausschließlich Layout-/Spacing-Variablen aus Base-CSS (--spacing-*, --radius-*, --color-*).
 * Keine eigenen Schrift- oder Farbdefinitionen (font-family, font-size, color, line-height, font-weight).
 */

/* Screen-spezifische Search Form – 1 Zeile (wie Vorlage kategorie.html) */
@media (width >= 600px) {
    #arzt-mallorca-suche-search-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    #arzt-mallorca-suche-search-row .base-form-field {
        min-width: 160px;
        flex: 1;
    }

    #arzt-mallorca-suche-search-row button {
        width: auto;
        min-width: 180px;
        flex-shrink: 0;
    }
}

/* Screen-spezifische No ArztMallorcas Message – nur Layout, keine Schrift/Farbe (Base-CSS) */
.arzt-mallorca-suche-no-headhunters-message {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.arzt-mallorca-suche-no-headhunters-text {
    margin: 0;
}

/* Screen-spezifische Pager */
.arzt-mallorca-suche-pager-wrapper {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    display: flex;
    justify-content: center;
    align-items: center;
}

.arzt-mallorca-suche-pager {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

/* Pager – nur Layout, keine Schrift/Farbe (Base-CSS) */
.arzt-mallorca-suche-pager-link {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    background-color: var(--color-background-secondary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.arzt-mallorca-suche-pager-link:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.arzt-mallorca-suche-pager-page {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    background-color: var(--color-background-secondary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.arzt-mallorca-suche-pager-page:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.arzt-mallorca-suche-pager-page-active {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
    cursor: default;
}

.arzt-mallorca-suche-pager-page-active:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.arzt-mallorca-suche-pager-ellipsis {
    padding: var(--spacing-sm) var(--spacing-md);
}