/**
 * SUMA WIDGET BASE FRAMEWORK
 * DRY-Prinzipien für konsistente Widget-Entwicklung
 * Alle zukünftigen Widgets erben von diesen Base-Klassen
 */

/* ========================================
   WIDGET CONTAINER BASE CLASSES
   ======================================== */

/* Standard Widget Container - Konsistente Außen-Paddings */
.smg-widget-base {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* ✅ RESPONSIVE WIDGET-PADDINGS für alle Widgets */
    padding: clamp(3rem, 8vw, 6rem) 0; /* 48-96px oben/unten */
}

/* Kompakte Widget-Variante */
.smg-widget-compact {
    padding: clamp(2rem, 6vw, 4rem) 0; /* 32-64px oben/unten */
}

/* Große Widget-Variante */
.smg-widget-large {
    padding: clamp(4rem, 10vw, 8rem) 0; /* 64-128px oben/unten */
}

/* Extra große Widget-Variante (für spezielle Widgets) */
.smg-widget-xl {
    padding: clamp(5rem, 12vw, 10rem) 0; /* 80-160px oben/unten */
}

/* Minimale Widget-Variante */
.smg-widget-minimal {
    padding: clamp(1rem, 4vw, 2rem) 0; /* 16-32px oben/unten */
}

/* Hero-spezifische Variante (Fullscreen) */
.smg-widget-hero {
    padding: 0;
    height: calc(100vh - var(--header-height, 80px));
    min-height: 600px;
}

/* ========================================
   INNER CONTAINER SYSTEM
   ======================================== */

/* Standard Inner Container - Responsive Innen-Paddings */
.smg-widget-container {
    max-width: var(--widget-max-width, 1400px);
    margin: 0 auto;
    /* ✅ RESPONSIVE INNEN-PADDINGS für alle Widgets */
    padding: 0 clamp(1rem, 4vw, 2rem); /* 16px (Mobile) → 32px (Desktop) */
    position: relative;
    z-index: 1;
}

/* Breite Container-Variante */
.smg-widget-container-wide {
    max-width: var(--widget-max-width, 1400px);
    padding: 0 clamp(1.5rem, 5vw, 3rem); /* 24px → 48px */
}

/* Schmale Container-Variante */
.smg-widget-container-narrow {
    max-width: var(--widget-max-width, 1400px);
    padding: 0 clamp(0.75rem, 3vw, 1.5rem); /* 12px → 24px */
}

/* Fullwidth Container (für Hero, etc.) */
.smg-widget-container-full {
    max-width: none;
    padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ========================================
   BACKGROUND SYSTEM
   ======================================== */

/* Standard Hintergründe */
.smg-widget-bg-white {
    background: var(--smg-white, #ffffff);
}

.smg-widget-bg-gray {
    background: var(--smg-gray-50, #f9fafb);
}

.smg-widget-bg-suma-light {
    background: linear-gradient(135deg, var(--smg-50) 0%, var(--smg-100) 100%);
}

.smg-widget-bg-suma-gradient {
    background: linear-gradient(135deg, var(--smg-100) 0%, var(--smg-200) 50%, var(--smg-300) 100%);
}

/* Animierte Hintergrund-Elemente */
.smg-widget-bg-animated::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 40%;
    height: 200%;
    background: linear-gradient(45deg, rgba(227, 30, 36, 0.03), rgba(227, 30, 36, 0.08));
    transform: rotate(15deg);
    animation: floatDiagonal 20s ease-in-out infinite;
    z-index: 0;
}

.smg-widget-bg-animated::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 30%;
    height: 150%;
    background: linear-gradient(-45deg, rgba(227, 30, 36, 0.02), rgba(227, 30, 36, 0.06));
    transform: rotate(-12deg);
    animation: floatDiagonal 25s ease-in-out infinite reverse;
    z-index: 0;
}

@keyframes floatDiagonal {
    0%, 100% { transform: rotate(15deg) translateY(0px); }
    50% { transform: rotate(15deg) translateY(-20px); }
}

/* ========================================
   WIDGET HEADER SYSTEM
   ======================================== */

/* ⚠️ WICHTIG: Widget Header Styles sind jetzt in widget-titles.css definiert!
   Diese Datei (widget-base.css) enthält nur noch Container, Grid und Card Styles.
   Alle .smg-widget-header, .smg-widget-title und .smg-widget-subtitle Styles
   sind in assets/css/widgets/widget-titles.css zu finden.

   Grund: Vermeidung von Duplikaten und Konflikten zwischen verschiedenen CSS-Dateien.
*/

/* ========================================
   CARD SYSTEM
   ======================================== */

/* === 2025 GLASSMORPHISM CARD SYSTEM === */
.smg-card-base {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: clamp(16px, 3vw, 24px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.smg-card-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.smg-card-base:hover {
    transform: translateY(-8px) rotateX(2deg);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(227, 30, 36, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(227, 30, 36, 0.2);
}

.smg-card-base:hover::before {
    opacity: 1;
}

/* Card Padding-Varianten */
.smg-card-padding-sm {
    padding: var(--space-lg, 1.5rem);
}

.smg-card-padding-md {
    padding: var(--space-xl, 2rem);
}

.smg-card-padding-lg {
    padding: var(--space-2xl, 2.5rem);
}

/* ========================================
   GRID SYSTEM
   ======================================== */

.smg-grid-auto {
    display: grid;
    /* ✅ ENTFERNT: Feste Grid-Columns - Elementor Widgets übernehmen */
    /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
    /* ✅ ENTFERNT: Festes Gap - Elementor Widgets übernehmen */
    /* gap: var(--space-xl, 1.5rem); */
}

/* ✅ FALLBACK: Nur für Widgets OHNE Elementor-Settings */
.smg-grid-auto:not([style*="grid-template-columns"]) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl, 1.5rem);
}

.smg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl, 1.5rem);
}

.smg-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl, 1.5rem);
}

.smg-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl, 1.5rem);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
    .smg-widget-base {
        padding: var(--space-3xl, 3rem) 0; /* Tablet: 48px oben/unten */
    }

    /* ✅ Container-Padding jetzt durch clamp() responsive - keine Überschreibung nötig */

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

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

/* Mobile */
@media (max-width: 768px) {
    .smg-widget-base {
        padding: var(--space-2xl, 2rem) 0; /* Mobile: 32px oben/unten */
    }

    .smg-widget-compact {
        padding: var(--space-xl, 1.5rem) 0; /* Mobile: 24px oben/unten */
    }

    /* ✅ Container-Padding jetzt durch clamp() responsive - keine Überschreibung nötig */

    .smg-grid-4,
    .smg-grid-3,
    .smg-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-lg, 1rem);
    }

    /* Widget Header Styles sind in widget-titles.css definiert */
}

/* Small Mobile */
@media (max-width: 480px) {
    /* ✅ Container-Padding jetzt durch clamp() responsive - keine Überschreibung nötig */

    .smg-card-padding-lg,
    .smg-card-padding-md {
        padding: var(--space-lg, 1rem);
    }

    .smg-card-padding-sm {
        padding: var(--space-md, 0.75rem);
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.smg-text-center { text-align: center; }
.smg-text-left { text-align: left; }
.smg-text-right { text-align: right; }

.smg-mb-0 { margin-bottom: 0; }
.smg-mb-sm { margin-bottom: var(--space-sm, 0.5rem); }
.smg-mb-md { margin-bottom: var(--space-md, 0.75rem); }
.smg-mb-lg { margin-bottom: var(--space-lg, 1rem); }
.smg-mb-xl { margin-bottom: var(--space-xl, 1.5rem); }

.smg-mt-0 { margin-top: 0; }
.smg-mt-sm { margin-top: var(--space-sm, 0.5rem); }
.smg-mt-md { margin-top: var(--space-md, 0.75rem); }
.smg-mt-lg { margin-top: var(--space-lg, 1rem); }
.smg-mt-xl { margin-top: var(--space-xl, 1.5rem); }

/* ========================================
   RESPONSIVE WIDGET PADDING SYSTEM
   ======================================== */

/* Tablet Adjustments */
@media (max-width: 1024px) {
    .smg-widget-base {
        padding: clamp(2.5rem, 7vw, 5rem) 0; /* Leicht reduziert für Tablet */
    }

    .smg-widget-compact {
        padding: clamp(1.5rem, 5vw, 3rem) 0;
    }

    .smg-widget-large {
        padding: clamp(3rem, 8vw, 6rem) 0;
    }

    .smg-widget-xl {
        padding: clamp(4rem, 10vw, 8rem) 0;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .smg-widget-base {
        padding: clamp(2rem, 6vw, 4rem) 0; /* Reduziert für Mobile */
    }

    .smg-widget-compact {
        padding: clamp(1rem, 4vw, 2rem) 0;
    }

    .smg-widget-large {
        padding: clamp(2.5rem, 7vw, 5rem) 0;
    }

    .smg-widget-xl {
        padding: clamp(3rem, 8vw, 6rem) 0;
    }

    .smg-widget-minimal {
        padding: clamp(0.75rem, 3vw, 1.5rem) 0;
    }
}

/* Small Mobile Adjustments */
@media (max-width: 480px) {
    .smg-widget-base {
        padding: clamp(1.5rem, 5vw, 3rem) 0; /* Minimal für Small Mobile */
    }

    .smg-widget-compact {
        padding: clamp(1rem, 4vw, 2rem) 0;
    }

    .smg-widget-large {
        padding: clamp(2rem, 6vw, 4rem) 0;
    }

    .smg-widget-xl {
        padding: clamp(2.5rem, 7vw, 5rem) 0;
    }

    .smg-widget-minimal {
        padding: clamp(0.5rem, 2vw, 1rem) 0;
    }
}