/* Home Screen Styles
 * 
 * Diese Datei enthält nur screen-spezifische Styles, die nicht durch Widget-Klassen ersetzt werden können.
 * 
 * Verwendete Base-Klassen:
 * - .base-hero (für Hero-Section)
 * - .base-headline-h1, .base-headline-h2, .base-headline-h3 (für Headlines)
 * - .base-button-standard, .base-btn (aus widgets-buttons.css)
 * - .base-card-doctor (für Doctor-Cards)
 * - .base-grid (für Doctor-Cards-Grid)
 * - .base-section (für Sections)
 * - .base-content-text (für Beschreibungen)
 * - .base-search-row, .base-form-group, .base-form-label (aus widgets-forms.css)
 * 
 * Layout-Klassen:
 * - .home-container (screen-spezifisch)
 * - .base-layout-main-content (aus layout.css)
 */

/* ============================================
   MOBILE (Base - bis 575px)
   ============================================ */

/* Home Container - Wrapper für Home-Inhalte */
.home-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Hero Section - Verwendet Widget-Klassen, aber benötigt spezifische Container-Styles */
/* Hero-Styles sind in widgets-hero.css definiert */

/* Suchformular im Hero (basierend auf Vorlage) */
#home-hero-search-form {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Form-Styles sind in widgets-forms.css definiert */

/* Section "Ärzte nach Stadt finden" (basierend auf Vorlage) */
.home-doctors-by-city {
    padding: 2rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.home-doctors-by-city-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
    box-sizing: border-box;
    overflow-x: hidden;
}

.home-doctors-by-city-title {
    margin: 0 0 1.25rem;
}

/* Headline-Styles sind in widgets-headlines.css definiert */

/* Doctor Cards Grid (basierend auf Vorlage) */
.home-doctors-by-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.home-doctor-card {
    background: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.home-doctor-card-image {
    height: 180px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.home-doctor-card-image-img,
.home-doctor-card-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-doctor-card-image-placeholder {
    background: linear-gradient(135deg, #bfdbfe, #a7f3d0);
}

.home-doctor-card-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.home-doctor-card-body .base-btn,
.home-doctor-card-body .base-button-standard {
    margin-top: auto;
}

.home-doctor-card-name {
    margin: 0 0 0.25rem;
}

.home-doctor-card-specialty {
    margin: 0 0 0.25rem;
}

.home-doctor-card-location {
    margin: 0 0 0.75rem;
}

/* Card-Styles (doctor-name, doctor-specialty, doctor-location) sind in widgets-cards.css definiert */

/* Image Strip Section (basierend auf Vorlage) */
.home-image-strip {
    padding-top: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.home-image-strip-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

/* ============================================
   TABLET (600px - 1023px)
   ============================================ */

@media (min-width: 600px) {
    .home-container,
    .home-doctors-by-city-container {
        padding: 0 1.25rem;
    }
}

/* ============================================
   DESKTOP (1024px - 1439px)
   ============================================ */

/* ============================================
   WIDESCREEN (1440px+)
   ============================================ */