/* VipConfig Mobile Override v1.0
 * Lädt NACH vipconfig-buybox.css und vipconfig-mobile-ux.css.
 * Überschreibt gezielt die Pixel-Breiten aus buybox.css die das
 * mobile Layout kaputt machen.
 *
 * Einbinden in modern-ui.html.twig:
 * <link rel="stylesheet" href="{{ asset('bundles/vipconfig/storefront/css/vipconfig-mobile-override.css') }}">
 * (NACH den anderen CSS-Links)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. VIEWPORT-SCHUTZ
   buybox.css setzt kein overflow-x – das kommt von hier.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: visible !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SVG-VORSCHAU
   buybox.css setzt width:420px + overflow:visible – das schiebt auf Mobile
   nach rechts wenn der Container schmaler als 420px ist.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    #vipconfig-main-svg-preview,
    #vipconfig-main-svg-preview[data-vipconfig-preview] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        background-size: contain !important;
    }

    #vipconfig-main-svg-preview > svg,
    #vipconfig-main-svg-preview[data-vipconfig-preview] > svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow: visible !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ÜBERSCHRIFT "WÄHLE DEIN LAYOUT" (via CSS ::before)
   buybox.css nutzt content: "WÄHLE DEIN LAYOUT" – der Text bricht nicht um
   weil white-space standardmäßig nowrap sein kann und letter-spacing breit ist.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    #vipconfig-category-slider {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #vipconfig-category-slider::before {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;       /* Zeilenumbruch erlauben */
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        font-size: clamp(20px, 7vw, 28px) !important;
        letter-spacing: clamp(2px, 1.2vw, 5px) !important;
        line-height: 1.2 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #vipconfig-category-slider::after {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        font-size: clamp(13px, 4vw, 16px) !important;
        letter-spacing: clamp(1px, .5vw, 2px) !important;
        line-height: 1.45 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. MOTIV-GRID – DIE HAUPTURSACHE DES VERSATZES
   buybox.css setzt am Ende:
     width: 960px !important; min-width: 960px !important;  (4 Spalten)
   Diese fixen Pixel-Breiten sind größer als der Mobile-Viewport und
   schieben ALLES nach rechts.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Slider-Reihe: relativer Container für Pfeile */
    .vipconfig-motif-slider-row,
    #vipconfig-category-slider > div[style*="display:flex"],
    #vipconfig-category-slider > div[style*="display: flex"] {
        position: relative !important;
        display: block !important;          /* kein Flex – Pfeile via absolute */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Motiv-Grid: 2×2 Kacheln, KEINE fixen Pixel */
    #vipconfig-motif-grid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        justify-content: stretch !important;
    }

    /* Motiv-Karten quadratisch, volle Spaltenbreite */
    .vipconfig-motif-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    /* Navigations-Pfeile: UNTERHALB des Grids, nebeneinander mittig */
    /* (werden per JS in #vipconfig-motif-nav-mobile verschoben) */
    #vipconfig-motif-nav-mobile {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 24px !important;
        margin-top: 16px !important;
        width: 100% !important;
    }

    #vipconfig-motif-prev,
    #vipconfig-motif-next {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        font-size: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 20 !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    #vipconfig-motif-prev.is-inactive,
    #vipconfig-motif-next.is-inactive {
        opacity: .35 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. KATEGORIE-DROPDOWN
   Soll volle Breite nutzen, nicht min(620px, 74vw) was auf schmalen
   Phones immer noch überbreit sein kann.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    #vipconfig-category-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #vipconfig-category-slider .vipconfig-category-row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. LAYOUT-HEADLINE (#vipconfig-layout-headline)
   Analog zu category-slider – Überschrift darf umbrechen.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    #vipconfig-layout-headline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #vipconfig-layout-headline h2 {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: clamp(20px, 7vw, 30px) !important;
        letter-spacing: clamp(2px, 1.2vw, 6px) !important;
        line-height: 1.2 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #vipconfig-layout-headline p {
        white-space: normal !important;
        font-size: clamp(13px, 4vw, 16px) !important;
        letter-spacing: clamp(1px, .5vw, 2px) !important;
        line-height: 1.45 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PREVIEW-SHELL & ALLE PANELS – finaler Containment-Guard
   Stellt sicher dass kein Panel breiter als der Viewport wird.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    #vipconfig-modern-root,
    #vipconfig-wrapper,
    .vipconfig-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #vipconfig-preview-sticky-shell,
    #vipconfig-text-config-shell,
    #vipconfig-backengraving-shell,
    #vipconfig-backengraving-real,
    .vipconfig-selected-layout-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
}

/* v1.4: Root + Slider negative margins komplett neutralisieren */
@media (max-width: 767.98px) {
    #vipconfig-modern-root,
    #vipconfig-wrapper,
    .vipconfig-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    #vipconfig-category-slider,
    .vipconfig-motif-slider-row,
    #vipconfig-motif-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    #vipconfig-below-description-stage {
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
}

/* v1.6: Platz fuer box-shadow der Karten rechts */
@media (max-width: 767.98px) {
    #vipconfig-category-slider {
        overflow-x: visible !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
    #vipconfig-below-description-stage {
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

/* v1.7: Symmetrisches Padding, alle Panels auf 100% begrenzt */
@media (max-width: 767.98px) {
    #vipconfig-below-description-stage {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #vipconfig-text-config-shell,
    #vipconfig-motif-fields,
    #vipconfig-backengraving-shell,
    #vipconfig-backengraving-real {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #vipconfig-text-config-shell input,
    #vipconfig-text-config-shell textarea,
    #vipconfig-motif-fields input,
    #vipconfig-motif-fields textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* v1.8: Konfigurator aus CMS-Padding herausziehen - volle Viewport-Breite */
@media (max-width: 767.98px) {
    #vipconfig-below-description-stage {
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: calc(100vw) !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    #vipconfig-modern-root,
    #vipconfig-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* v1.9: Sticky Preview auf Mobile */
@media (max-width: 767.98px) {

    /* Vorschau sticky oben fixieren */
    #vipconfig-preview-sticky-shell {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: #fff !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
        margin-bottom: 12px !important;
    }

    /* SVG-Vorschau in sticky Modus kompakt */
    #vipconfig-preview-sticky-shell #vipconfig-main-svg-preview,
    #vipconfig-preview-sticky-shell [data-vipconfig-preview] {
        width: 180px !important;
        height: 180px !important;
        max-width: 180px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Überschrift in sticky Modus kleiner */
    #vipconfig-preview-sticky-shell h2 {
        font-size: clamp(14px, 4vw, 18px) !important;
        letter-spacing: clamp(1px, 0.5vw, 3px) !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    /* Hinweistexte in sticky ausblenden */
    #vipconfig-preview-sticky-shell p,
    #vipconfig-preview-sticky-shell .vipconfig-preview-hint {
        display: none !important;
    }
}

/* v2.0: cms-section overflow-hidden entfernen damit sticky funktioniert */
@media (max-width: 767.98px) {
    .cms-section:has(#vipconfig-preview-sticky-shell),
    .cms-section:has(#vipconfig-modern-root),
    .cms-block:has(#vipconfig-preview-sticky-shell),
    .cms-block:has(#vipconfig-modern-root),
    .cms-block-container:has(#vipconfig-preview-sticky-shell),
    .cms-block-container:has(#vipconfig-modern-root) {
        overflow: visible !important;
        overflow-y: visible !important;
    }
}