/* SMG Branding System - v2.1.6 */
/**
 * SUMA Single Store Widget v2 CSS
 * Modulares, mobil-optimiertes Store-Detail-Layout
 * ✅ SUMA Theme Integration - Konsistente Styles
 */

/* ========================================
   BASE STYLES
   ======================================== */

.smg-single-store-v2 {
    /* ✅ SUMA Theme Variables */
    --primary-color: var(--smg-500, var(--smg-500, #e31e24));
    --border-radius: var(--radius-lg, 1rem);
    --hero-height: 60vh;
    --section-spacing: var(--space-3xl, 3rem);
    --card-shadow: 0 4px 20px rgba(var(--smg-black-rgb, 0, 0, 0), 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --hero-overlay: 0.4;

    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    color: var(--smg-gray-900, var(--smg-gray-900, #1a1a1a));
}

.smg-single-store-v2 * {
    box-sizing: border-box;
}


/* ========================================
   LAYOUT VARIANTS
   ======================================== */

/* Showcase Layout */
.layout-showcase {
    --section-spacing: 4rem;
    --card-shadow: 0 8px 30px rgba(var(--smg-black-rgb, 0, 0, 0), 0.12);
    --hero-overlay: 0.5;
}

.layout-showcase .store-hero-section {
    min-height: 70vh;
}

.layout-showcase .quick-facts-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Compact Layout */
.layout-compact {
    --section-spacing: 2rem;
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --hero-overlay: 0.3;
}

.layout-compact .store-hero-section {
    min-height: 50vh;
}

.layout-compact .quick-facts-container {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.layout-compact .quick-fact {
    padding: 0.75rem;
}

/* Service Focused Layout */
.layout-service_focused .quick-facts-bar {
    background: linear-gradient(135deg, var(--smg-500, var(--smg-500, #e31e24)) 0%, color-mix(in srgb, var(--smg-500, var(--smg-500, #e31e24)) 80%, black) 100%);
    color: var(--smg-white, #ffffff);
}

.layout-service_focused .quick-fact {
    background: rgba(var(--smg-white-rgb, 255, 255, 255), 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--smg-white-rgb, 255, 255, 255), 0.2);
}

.layout-service_focused .fact-label {
    color: rgba(255, 255, 255, 0.8);
}

.layout-service_focused .fact-value {
    color: var(--smg-white, #ffffff);
}

/* Brand Focused Layout */
.layout-brand_focused .hero-logo {
    margin-bottom: 2rem;
}

.layout-brand_focused .hero-logo img {
    max-width: 200px;
    max-height: 120px;
}

.layout-brand_focused .store-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .smg-single-store-v2 {
        --section-spacing: 2rem;
        --hero-height: 50vh;
    }

    /* 🎯 Mobile: Section-Reihenfolge optimieren für besseres UX */
    /* Centerplan sollte VOR den Store Essentials kommen auf Mobile */
    .smg-single-store-v2 {
        display: flex;
        flex-direction: column;
    }

    .smg-single-store-v2 .store-hero-section {
        order: 1;
    }

    .smg-single-store-v2 .quick-facts-bar {
        order: 2;
    }

    .smg-single-store-v2 .store-centerplan-section {
        order: 3; /* Centerplan kommt zuerst (nach Hero) */
    }

    .smg-single-store-v2 .store-essentials-section {
        order: 4; /* Store Details kommen nach Centerplan */
    }

    .smg-single-store-v2 .store-about-section {
        order: 5;
    }

    .smg-single-store-v2 .store-related-section {
        order: 6;
    }

    .smg-single-store-v2 .store-gallery-section {
        order: 7;
    }

    .smg-single-store-v2 .store-additional-section {
        order: 8;
    }

    /* 🎯 Store Essentials auf Mobile: Kompakter und scrollbar */
    .store-essentials-section {
        padding: 1.5rem 0;
    }

    .essentials-grid {
        grid-template-columns: 1fr; /* Single column auf Mobile */
        gap: 1rem;
    }

    .essential-card {
        padding: 1rem;
    }

    /* 🎯 Centerplan Section auf Mobile: Reduziertes Padding */
    .store-centerplan-section {
        padding: 1.5rem 0;
    }

    .store-centerplan-section .section-title {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
    
    .hero-content {
        padding: 1rem;
    }
    
    .hero-quick-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .quick-action-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .quick-facts-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .quick-fact {
        padding: 1rem;
    }
    
    .hero-badges {
        justify-content: center;
        gap: 0.5rem;
    }
    
    .hero-badges span {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .smg-single-store-v2 {
        --hero-height: 40vh;
    }
    
    .store-title {
        font-size: 1.8rem;
    }
    
    .store-subtitle {
        font-size: 1rem;
    }
    
    .quick-facts-bar {
        padding: 1rem;
    }
    
    .quick-fact {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    /* 🎯 Centerplan auf kleinen Screens: Noch kompakter */
    .smg-single-store-v2 .centerplan-wrapper.no-ui {
        min-height: 280px;
        max-height: 380px;
    }

    .smg-single-store-v2 .modern-centerplan-container .centerplan-loading-placeholder {
        height: 300px;
    }

    /* 🎯 Store Info: Kompakteres Padding */
    .smg-single-store-v2 .store-info-section {
        padding: 1.25rem 0.75rem;
        min-height: 180px;
    }

    /* 🎯 Store Essentials auf kleinen Screens */
    .store-essentials-section {
        padding: 1.25rem 0;
    }

    .essential-card {
        padding: 0.875rem;
    }

    .store-centerplan-section {
        padding: 1.25rem 0;
    }
}


/* ========================================
   ANIMATIONS
   ======================================== */

.mobile-optimized .quick-fact {
    animation: fadeInUp 0.6s ease forwards;
}

.mobile-optimized .quick-fact:nth-child(1) { animation-delay: 0.1s; }
.mobile-optimized .quick-fact:nth-child(2) { animation-delay: 0.2s; }
.mobile-optimized .quick-fact:nth-child(3) { animation-delay: 0.3s; }
.mobile-optimized .quick-fact:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}