/**
 * CockpitOS CM-Immo Theme - Widget Layout System
 * 
 * Konsistentes Layout-System für alle Widgets
 * Standardisierte Paddings, Margins, Container
 * 
 * WIDGET KATEGORIEN:
 * 1. FULLWIDTH: Kein Padding, eigenes Layout (hero, header, footer, centerplan)
 * 2. BOXED CONTENT: BG fullwidth, Content boxed 1280px (intro, features, testimonial, stats, faq, contact, cta, content-grid)
 * 3. WIDE CONTENT: BG fullwidth, Content wide 1536px (shop-grid, services-grid, partner-logos, shop-carousel)
 * 4. NARROW CONTENT: BG fullwidth, Content narrow 960px (single-shop, single-service, single-post, legal-page)
 * 5. SPECIAL: Eigene Layouts (ticker, shop-hours, rental, centerplan-directory)
 * 
 * @package CockpitOS_CM_Immo_Theme
 * @version 2.1.0
 */

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES
   ═══════════════════════════════════════════════════════════ */

:root {
    --widget-padding-y: var(--spacing-12, 4rem);
    --widget-padding-x: var(--spacing-4, 1.5rem);
    
    /* Container Widths */
    --container-narrow: 960px;
    --container-boxed: 1280px;
    --container-wide: 1536px;
}

@media (max-width: 768px) {
    :root {
        --widget-padding-y: var(--spacing-8, 3rem);
        --widget-padding-x: var(--spacing-3, 1rem);
    }
}

@media (min-width: 1536px) {
    :root {
        --widget-padding-y: var(--spacing-16, 5rem);
        --widget-padding-x: var(--spacing-6, 2rem);
    }
}

/* ═══════════════════════════════════════════════════════════
   KATEGORIE 1: FULLWIDTH WIDGETS (Kein Padding)
   ═══════════════════════════════════════════════════════════ */

/* Widget Sections mit Standard Padding */
[class*="cockpit-"] {
    position: relative;
}

/* No Padding für Fullwidth Widgets */
.cockpit-hero,
.cockpit-header,
.cockpit-footer,
.cockpit-centerplan {
    padding: 0;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   KATEGORIE 2: BOXED CONTENT (BG fullwidth, Content boxed 1280px)
   ═══════════════════════════════════════════════════════════ */

/* Widgets mit Boxed Content */
.cockpit-intro,
.cockpit-features-grid,
.cockpit-testimonial,
.cockpit-stats-counter,
.cockpit-faq,
.cockpit-contact,
.cockpit-cta,
.cockpit-content-grid {
    padding: var(--widget-padding-y) var(--widget-padding-x);
}

/* Inner Container für zentrierten Content */
.cockpit-intro__container,
.cockpit-features-grid__container,
.cockpit-testimonial__container,
.cockpit-stats-counter__container,
.cockpit-faq__container,
.cockpit-contact__container,
.cockpit-cta__container,
.cockpit-content-grid__container {
    max-width: var(--container-boxed);
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   KATEGORIE 3: WIDE CONTENT (BG fullwidth, Content wide 1536px)
   ═══════════════════════════════════════════════════════════ */

/* Widgets mit Wide Content */
.cockpit-shop-grid,
.cockpit-services-grid,
.cockpit-partner-logos,
.cockpit-shop-carousel {
    padding: var(--widget-padding-y) var(--widget-padding-x);
}

/* Inner Container für wide Content */
.cockpit-shop-grid__container,
.cockpit-services-grid__container,
.cockpit-partner-logos__container,
.cockpit-shop-carousel__container {
    max-width: var(--container-wide);
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   KATEGORIE 4: NARROW CONTENT (BG fullwidth, Content narrow 960px)
   ═══════════════════════════════════════════════════════════ */

/* Widgets mit Narrow Content (bessere Lesbarkeit) */
.cockpit-single-shop,
.cockpit-single-service,
.cockpit-single-post,
.cockpit-legal-page {
    padding: var(--widget-padding-y) var(--widget-padding-x);
}

/* Inner Container für narrow Content */
.cockpit-single-shop__container,
.cockpit-single-service__container,
.cockpit-single-post__container,
.cockpit-legal-page__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   KATEGORIE 5: SPECIAL LAYOUTS
   ═══════════════════════════════════════════════════════════ */

/* Reduced Padding für kompakte Widgets */
.cockpit-shop-hours,
.cockpit-ticker,
.cockpit-rental,
.cockpit-centerplan-directory {
    padding: var(--spacing-8, 3rem) var(--widget-padding-x);
}

/* ═══════════════════════════════════════════════════════════
   HELPER: GENERIC CONTAINER CLASSES
   ═══════════════════════════════════════════════════════════ */

/* Generic Container Classes (falls manuell benötigt) */
.widget-container {
    width: 100%;
    margin: 0 auto;
}

.widget-container--narrow {
    max-width: var(--container-narrow);
}

.widget-container--boxed {
    max-width: var(--container-boxed);
}

.widget-container--wide {
    max-width: var(--container-wide);
}

.widget-container--fullwidth {
    max-width: none;
}

/* ═══════════════════════════════════════════════════════════
   GRID LAYOUTS (Konsistent über alle Widgets)
   ═══════════════════════════════════════════════════════════ */

/* Standard Grid (für Features, Shops, Services, etc.) */
.cm-grid {
    display: grid;
    gap: var(--spacing-6, 2rem);
    width: 100%;
}

.cm-grid--2 {
    grid-template-columns: repeat(1, 1fr);
}

.cm-grid--3 {
    grid-template-columns: repeat(1, 1fr);
}

.cm-grid--4 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .cm-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cm-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cm-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .cm-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .cm-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Grid Gap Variants */
.cm-grid--gap-sm {
    gap: var(--spacing-4, 1.5rem);
}

.cm-grid--gap-lg {
    gap: var(--spacing-8, 3rem);
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADER (Konsistent über alle Widgets)
   ═══════════════════════════════════════════════════════════ */

/* Section Header Spacing */
.cm-section-header {
    margin-bottom: var(--spacing-8, 3rem);
}

.cm-section-header--large {
    margin-bottom: var(--spacing-12, 4rem);
}

.cm-section-header--small {
    margin-bottom: var(--spacing-6, 2rem);
}

/* ═══════════════════════════════════════════════════════════
   UTILITIES (Helper Classes)
   ═══════════════════════════════════════════════════════════ */

/* No Padding Override (für spezielle Cases) */
.no-padding {
    padding: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-x {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.no-padding-y {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Extra Padding (für spezielle Cases) */
.extra-padding {
    padding: var(--spacing-16, 5rem) var(--widget-padding-x) !important;
}

.extra-padding-top {
    padding-top: var(--spacing-16, 5rem) !important;
}

.extra-padding-bottom {
    padding-bottom: var(--spacing-16, 5rem) !important;
}

/* Overflow Control */
.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}