/**
 * Bricks Flipbox – Styles
 *
 * Struktur:
 *   .bricks-flipbox                       ← Root
 *     └── .bricks-flipbox-content          ← Container (display:grid → Stack-Layout)
 *           ├── .bricks-flipbox-front       ← Face (grid-area: stack)
 *           └── .bricks-flipbox-back        ← Face (grid-area: stack)
 *
 * Statt position:absolute nutzen wir einen 1x1-Grid-Trick: Beide Faces liegen
 * in der gleichen Grid-Cell und pushen den Container auf die Größe des
 * größeren Faces. Vorteile:
 *   - Container kollabiert nicht auf 0, wenn keine min-height gesetzt ist
 *   - Beide Faces sind automatisch immer gleich groß
 *   - Funktioniert mit beliebigem Inhalt
 */

/* ====================================================================
 * Root
 * ==================================================================== */
.bricks-flipbox {
    --bf-duration: 600ms;
    --bf-easing: ease-in-out;
    --bf-perspective: 1000px;

    display: block;
}

/* ====================================================================
 * Content-Wrapper – 3D-Container, Grid-Stack
 * ==================================================================== */
.bricks-flipbox-content {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    perspective: var(--bf-perspective);
    transform-style: preserve-3d;
}

/* ====================================================================
 * Faces (Front + Back) – beide stapeln sich in der gleichen Grid-Cell
 * ==================================================================== */
.bricks-flipbox-front,
.bricks-flipbox-back {
    grid-area: stack;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition:
        transform var(--bf-duration) var(--bf-easing),
        opacity var(--bf-duration) var(--bf-easing);
}

/* ====================================================================
 * Animation: Flip Horizontal (Y-Achse) – Default
 * ==================================================================== */
.bricks-flipbox--flip-horizontal .bricks-flipbox-front {
    transform: rotateY(0deg);
    z-index: 2;
}
.bricks-flipbox--flip-horizontal .bricks-flipbox-back {
    transform: rotateY(180deg);
    z-index: 1;
}
.bricks-flipbox--flip-horizontal.bricks-flipbox--trigger-hover:hover .bricks-flipbox-front,
.bricks-flipbox--flip-horizontal.is-flipped .bricks-flipbox-front {
    transform: rotateY(-180deg);
}
.bricks-flipbox--flip-horizontal.bricks-flipbox--trigger-hover:hover .bricks-flipbox-back,
.bricks-flipbox--flip-horizontal.is-flipped .bricks-flipbox-back {
    transform: rotateY(0deg);
}

/* ====================================================================
 * Animation: Flip Vertikal (X-Achse)
 * ==================================================================== */
.bricks-flipbox--flip-vertical .bricks-flipbox-front {
    transform: rotateX(0deg);
    z-index: 2;
}
.bricks-flipbox--flip-vertical .bricks-flipbox-back {
    transform: rotateX(180deg);
    z-index: 1;
}
.bricks-flipbox--flip-vertical.bricks-flipbox--trigger-hover:hover .bricks-flipbox-front,
.bricks-flipbox--flip-vertical.is-flipped .bricks-flipbox-front {
    transform: rotateX(-180deg);
}
.bricks-flipbox--flip-vertical.bricks-flipbox--trigger-hover:hover .bricks-flipbox-back,
.bricks-flipbox--flip-vertical.is-flipped .bricks-flipbox-back {
    transform: rotateX(0deg);
}

/* ====================================================================
 * Animation: Fade
 * ==================================================================== */
.bricks-flipbox--fade .bricks-flipbox-front,
.bricks-flipbox--fade .bricks-flipbox-back {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
.bricks-flipbox--fade .bricks-flipbox-front {
    opacity: 1;
    z-index: 2;
}
.bricks-flipbox--fade .bricks-flipbox-back {
    opacity: 0;
    z-index: 1;
}
.bricks-flipbox--fade.bricks-flipbox--trigger-hover:hover .bricks-flipbox-front,
.bricks-flipbox--fade.is-flipped .bricks-flipbox-front {
    opacity: 0;
    z-index: 1;
}
.bricks-flipbox--fade.bricks-flipbox--trigger-hover:hover .bricks-flipbox-back,
.bricks-flipbox--fade.is-flipped .bricks-flipbox-back {
    opacity: 1;
    z-index: 2;
}

/* ====================================================================
 * Animation: Slide (Left / Right / Up / Down)
 * ==================================================================== */
.bricks-flipbox[class*="bricks-flipbox--slide-"] .bricks-flipbox-content {
    overflow: hidden;
}
.bricks-flipbox[class*="bricks-flipbox--slide-"] .bricks-flipbox-front,
.bricks-flipbox[class*="bricks-flipbox--slide-"] .bricks-flipbox-back {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Slide Left */
.bricks-flipbox--slide-left .bricks-flipbox-front  { transform: translateX(0); z-index: 2; }
.bricks-flipbox--slide-left .bricks-flipbox-back   { transform: translateX(100%); z-index: 1; }
.bricks-flipbox--slide-left.bricks-flipbox--trigger-hover:hover .bricks-flipbox-front,
.bricks-flipbox--slide-left.is-flipped .bricks-flipbox-front  { transform: translateX(-100%); }
.bricks-flipbox--slide-left.bricks-flipbox--trigger-hover:hover .bricks-flipbox-back,
.bricks-flipbox--slide-left.is-flipped .bricks-flipbox-back   { transform: translateX(0); }

/* Slide Right */
.bricks-flipbox--slide-right .bricks-flipbox-front { transform: translateX(0); z-index: 2; }
.bricks-flipbox--slide-right .bricks-flipbox-back  { transform: translateX(-100%); z-index: 1; }
.bricks-flipbox--slide-right.bricks-flipbox--trigger-hover:hover .bricks-flipbox-front,
.bricks-flipbox--slide-right.is-flipped .bricks-flipbox-front { transform: translateX(100%); }
.bricks-flipbox--slide-right.bricks-flipbox--trigger-hover:hover .bricks-flipbox-back,
.bricks-flipbox--slide-right.is-flipped .bricks-flipbox-back  { transform: translateX(0); }

/* Slide Up */
.bricks-flipbox--slide-up .bricks-flipbox-front    { transform: translateY(0); z-index: 2; }
.bricks-flipbox--slide-up .bricks-flipbox-back     { transform: translateY(100%); z-index: 1; }
.bricks-flipbox--slide-up.bricks-flipbox--trigger-hover:hover .bricks-flipbox-front,
.bricks-flipbox--slide-up.is-flipped .bricks-flipbox-front    { transform: translateY(-100%); }
.bricks-flipbox--slide-up.bricks-flipbox--trigger-hover:hover .bricks-flipbox-back,
.bricks-flipbox--slide-up.is-flipped .bricks-flipbox-back     { transform: translateY(0); }

/* Slide Down */
.bricks-flipbox--slide-down .bricks-flipbox-front  { transform: translateY(0); z-index: 2; }
.bricks-flipbox--slide-down .bricks-flipbox-back   { transform: translateY(-100%); z-index: 1; }
.bricks-flipbox--slide-down.bricks-flipbox--trigger-hover:hover .bricks-flipbox-front,
.bricks-flipbox--slide-down.is-flipped .bricks-flipbox-front  { transform: translateY(100%); }
.bricks-flipbox--slide-down.bricks-flipbox--trigger-hover:hover .bricks-flipbox-back,
.bricks-flipbox--slide-down.is-flipped .bricks-flipbox-back   { transform: translateY(0); }

/* ====================================================================
 * Click-Trigger
 * ==================================================================== */
.bricks-flipbox--trigger-click {
    cursor: pointer;
}

/* ====================================================================
 * Builder-Modus: Im Bricks Builder beide Faces übereinander zeigen,
 * damit der User beide bearbeiten kann.
 * ==================================================================== */
.bricks-is-builder .bricks-flipbox-content,
body[class*="bricks-builder"] .bricks-flipbox-content,
.bricks-iframe .bricks-flipbox-content {
    display: block !important;
    min-height: auto !important;
}

.bricks-is-builder .bricks-flipbox-front,
.bricks-is-builder .bricks-flipbox-back,
body[class*="bricks-builder"] .bricks-flipbox-front,
body[class*="bricks-builder"] .bricks-flipbox-back,
.bricks-iframe .bricks-flipbox-front,
.bricks-iframe .bricks-flipbox-back {
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 10px;
    border: 2px dashed rgba(0, 0, 0, 0.15);
}

/* ====================================================================
 * Reduced Motion
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .bricks-flipbox-front,
    .bricks-flipbox-back {
        transition-duration: 0ms !important;
    }
}