/**
 * CockpitOS Light Theme - Centerplan Directory Widget Styles
 * 
 * Verantwortlichkeit: Main Widget Container
 * Modular CSS files are loaded separately via WordPress enqueue
 * 
 * @package CockpitOS_Light_Theme
 * @version 1.0.0
 */

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

.centerplan-directory-widget {
    width: 100%;
    position: relative;
}

/* Layout: Both - Vertikal (Karte oben/unten) */
.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="vertical"] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 2rem);
}

/* Layout: Both - Horizontal (Karte links/rechts) */
.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 Split */
    gap: var(--spacing-lg, 2rem);
    align-items: stretch; /* Beide Spalten gleich hoch */
}

/* Horizontal: Karte links (Standard-Reihenfolge) */
.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"][data-map-position="left"] .centerplan-floorplan {
    order: 1;
}

.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"][data-map-position="left"] .centerplan-directory-board {
    order: 2;
}

/* Horizontal: Karte rechts (Getauschte Reihenfolge) */
.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"][data-map-position="right"] .centerplan-floorplan {
    order: 2;
}

.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"][data-map-position="right"] .centerplan-directory-board {
    order: 1;
}

/* Horizontal-Modus: Floorplan optimieren */
.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"] .centerplan-floorplan {
    position: sticky;
    top: var(--spacing-lg, 2rem);
    align-self: start;
    max-height: calc(100vh - 4rem); /* Viewport-Höhe minus Abstand */
    height: fit-content;
}

/* Horizontal-Modus: Directory Board volle Höhe */
.centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"] .centerplan-directory-board {
    height: 100%;
}

/* Both-Mode: Elemente nehmen volle Breite ein */
.centerplan-directory-widget[data-layout-type="both"] .centerplan-floorplan--both-mode,
.centerplan-directory-widget[data-layout-type="both"] .centerplan-directory-board--both-mode {
    width: 100%;
}

/* Layout: Directory only */
.centerplan-directory-widget[data-layout-type="directory"] {
    display: block;
}

/* Layout: Floorplan only */
.centerplan-directory-widget[data-layout-type="floorplan"] {
    display: block;
}

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

/* Laptop & kleinere Desktops (13" MacBook, etc.) */
@media (max-width: 1440px) {
    /* Horizontal Layout: Bereits untereinander für bessere Lesbarkeit */
    .centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg, 2rem);
    }
    
    /* Sticky deaktivieren, da untereinander */
    .centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"] .centerplan-floorplan {
        order: 1 !important;
        position: static !important;
        max-height: none !important;
    }
    
    .centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"] .centerplan-directory-board {
        order: 2 !important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .centerplan-directory-widget[data-layout-type="both"] {
        gap: var(--spacing-md, 1.5rem);
    }
    
    /* Vertical Layout: Kompakterer Gap */
    .centerplan-directory-widget[data-layout-type="both"][data-directory-layout="vertical"] {
        gap: var(--spacing-md, 1.5rem);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .centerplan-directory-widget[data-layout-type="both"] {
        gap: var(--spacing-md, 1rem);
    }
    
    /* Alle Layouts: Kompakter auf Mobile */
    .centerplan-directory-widget[data-layout-type="both"][data-directory-layout="horizontal"],
    .centerplan-directory-widget[data-layout-type="both"][data-directory-layout="vertical"] {
        gap: var(--spacing-sm, 0.5rem);
    }
}