/**
 * CockpitOS Light Theme - Rental Widget Styles
 * 
 * Verantwortlichkeit: Haupt-CSS mit Imports aller Module
 * 
 * Modulare Struktur:
 * - rental-hero.css         (Hero Section)
 * - rental-features.css     (Features Grid)
 * - rental-spaces.css       (Verfügbare Flächen)
 * - rental-contact.css      (Ansprechpartner Card)
 * - rental-form.css         (Kontaktformular)
 * - rental-responsive.css   (Responsive Breakpoints)
 * 
 * @package CockpitOS_MEC_Light_Theme
 * @version 1.0.0
 */

@import url('rental/rental-hero.css');
@import url('rental/rental-features.css');
@import url('rental/rental-spaces.css');
@import url('rental/rental-contact.css');
@import url('rental/rental-form.css');
@import url('rental/rental-responsive.css');

/* ========================================
   Global Rental Widget Styles
   ======================================== */

/* Verhindert horizontales Überlaufen */
.cockpit-rental,
.cockpit-rental * {
    max-width: 100%;
    box-sizing: border-box;
}

.cockpit-rental img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   Container
   ======================================== */

.cockpit-rental__container {
    max-width: 1200px;
    width: 100%; /* Volle Breite bis max-width */
    margin: 0 auto;
    padding: 0 var(--spacing-4, 1.5rem);
    box-sizing: border-box; /* Padding wird in Breite eingerechnet */
}

/* ========================================
   Main Section (2-Spalten Layout - Max Bonn Style)
   ======================================== */

.cockpit-rental__main-section {
    padding: var(--spacing-8, 3rem) 0;
}

.cockpit-rental__main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 Layout wenn beide Spalten vorhanden */
    gap: var(--spacing-8, 3rem);
    align-items: start;
}

/* Single Column: Volle Breite wenn nur Text-Spalte vorhanden */
.cockpit-rental__main-grid--single {
    grid-template-columns: 1fr; /* Volle Breite wenn keine Contact-Column */
}

/* Left Column: Text Content */
.cockpit-rental__text-column {
    /* Text-Styles werden über Typography-System gesteuert */
}

/* Rental Main Title nutzt globale h3 Styles */
.cockpit-rental__main-title {
    /* Nutzt globale h3 Styles (font-family, font-size, font-weight, text-transform, letter-spacing) */
    color: var(--color-primary-dark, #343d4c);
    margin-bottom: var(--spacing-6, 2rem);
    line-height: var(--line-height-tight, 1.2);
}

.cockpit-rental__text-paragraph {
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-relaxed, 1.6);
    color: var(--color-neutral-semi-dark, #595959);
    margin-bottom: var(--spacing-4, 1.5rem);
}

.cockpit-rental__text-paragraph:last-child {
    margin-bottom: 0;
}

/* Right Column: Contact Information (Organisations-Infos) */
.cockpit-rental__contact-column {
    /* Kontakt-Info Styles */
}

.cockpit-rental__contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.cockpit-rental__contact-line {
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.5);
    color: var(--color-primary-dark, #343d4c);
    font-weight: var(--font-weight-normal, 400);
}

.cockpit-rental__contact-line strong {
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary-dark, #343d4c);
}

.cockpit-rental__contact-line a {
    color: var(--color-primary, #343d4c);
    text-decoration: none;
    transition: color var(--transition-base, 0.3s ease);
}

/* ========================================
   Ansprechpartner-Box Section (separate Komponente)
   ======================================== */

.cockpit-rental__contact-person-section {
    padding: var(--spacing-8, 3rem) 0;
    background-color: var(--color-section-background, var(--color-neutral-ultra-light));
}

.cockpit-rental__contact-line a:hover {
    color: var(--color-primary-hover, #3b4657);
    text-decoration: underline;
}

/* ========================================
   Section Title
   ======================================== */

.cockpit-rental__section-title {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-accent, #343d4c);
    margin-bottom: var(--spacing-8, 2rem);
    text-align: center;
}

/* ========================================
   Bottom Section (Contact + Form)
   ======================================== */

.cockpit-rental__bottom-section {
    padding: var(--spacing-12, 3rem) 0;
    background-color: var(--color-section-background, #f2f2f2);
}

.cockpit-rental__bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-10, 2.5rem);
}