/* ========================================
   DIVI COLUMN CUBE
======================================== */

/*
 * Eine bestehende Divi-Spalte wird durch
 * JavaScript in einen 3D-Cube umgewandelt.
 */

/* ========================================
   GLOBALE VARIABLEN
======================================== */

:root {
    --color-red: #e2241b;
    --cube-red: var(--color-red);
}


.cube-column {
    --cube-depth: 0px;

    position: relative;

    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;

    padding: 0 !important;
    background: transparent !important;

    perspective: 2800px;
    perspective-origin: 50% 50%;

    overflow: visible;
}


/* Würfelkörper */
.cube-column .cube-object {
    --cube-rotation: 0deg;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform:
        translateZ(calc(-1 * var(--cube-depth))) rotateY(var(--cube-rotation));

    transform-style: preserve-3d;
    transform-origin: 50% 50%;

    will-change: transform;
}


/* Gemeinsame Gestaltung der Würfelseiten */
.cube-column .cube-face {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    box-sizing: border-box;

    padding: clamp(24px, 4vw, 64px);

    background: var(--cube-red);
    color: #ffffff;

    border: 1px solid rgb(255 255 255 / 16%);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    overflow: hidden;
}


/* Divi-Module innerhalb einer Würfelseite */
.cube-column .cube-face>.et_pb_module {
    width: 100%;
    margin: 0;
}


/* Vorderseite */
.cube-column .cube-face--front {
    transform:
        rotateY(0deg) translateZ(var(--cube-depth));
}


/* Rechte Seite */
.cube-column .cube-face--right {
    background: #cd1d16;

    transform:
        rotateY(90deg) translateZ(var(--cube-depth));
}


/* Rückseite */
.cube-column .cube-face--back {
    background: var(--cube-red);

    transform:
        rotateY(180deg) translateZ(var(--cube-depth));
}


/* Linke Seite */
.cube-column .cube-face--left {
    background: #f02b22;

    transform:
        rotateY(-90deg) translateZ(var(--cube-depth));
}


/* ========================================
   RESPONSIVE: DIVI COLUMN CUBE
======================================== */

@media (max-width: 767px) {
    .cube-column {
        width: min(100%, 340px);
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cube-column .cube-object {
        transform:
            translateZ(calc(-1 * var(--cube-depth))) rotateY(0deg) !important;
    }
}