/* ============================================================================
   threejs_simple_cards — CSS (cloned from EDP PROD, 2026-06-17)
   Cylindrical CSS3DRenderer carousel of content cards.
   Two parts: 1. .edp-helix-glow (optional "Center light"), 2. .edp-sc-* (cards).
   .edp-* class names kept as-is (no two MBS pages collide); the JS + template
   reference the same names.
   ============================================================================ */

/* ── Center light — soft fixed radial glow behind the carousel centre ───────── */
.edp-helix-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--glow-w, 75%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgb(var(--glow-rgb, 255 255 255) / var(--glow-i, 0.75))               0%,
        rgb(var(--glow-rgb, 255 255 255) / calc(var(--glow-i, 0.75) * 0.45))  28%,
        rgb(var(--glow-rgb, 255 255 255) / calc(var(--glow-i, 0.75) * 0.13))  46%,
        rgb(var(--glow-rgb, 255 255 255) / 0)                                 62%);
}
@media (max-width: 767px) {
    .edp-helix-glow {
        aspect-ratio: auto;
        height: 100%;
        background: radial-gradient(ellipse closest-side at center,
            rgb(var(--glow-rgb, 255 255 255) / var(--glow-i, 0.75))               0%,
            rgb(var(--glow-rgb, 255 255 255) / calc(var(--glow-i, 0.75) * 0.50))  35%,
            rgb(var(--glow-rgb, 255 255 255) / calc(var(--glow-i, 0.75) * 0.16))  60%,
            rgb(var(--glow-rgb, 255 255 255) / 0)                                 85%);
    }
}

/* ── Simple Cards element (threejs_simple_cards) — Three.js CSS3DRenderer ────── */
.edp-sc-outer {
    position: relative;
    z-index: 1;
    isolation: isolate;
    width: 100%;
}
.edp-sc-wrap {
    position: relative;
    width: 100%;
    transform-origin: center center;
    overflow: visible;
}
.edp-sc-face {
    cursor: pointer;
    box-sizing: border-box;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
.edp-sc-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.45s ease;
}
.edp-sc-wrap:not([data-equal-height="1"]) .edp-sc-card {
    height: auto;
}
.edp-sc-card--bare {
    padding: 20px;
    border-radius: 6px;
}
/* Front-card highlight (option "Highlight front card", Card style = None).
   MBS secondary = #000; tweak this colour to taste. */
.edp-sc-front .edp-sc-card {
    background-color: #000000;
}
.edp-sc-image {
    margin-bottom: 10px;
}
.edp-sc-image img {
    display: block;
    max-width: 100%;
    height: auto;
}
.edp-sc-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}
.edp-sc-meta {
    font-size: 0.78rem;
    opacity: 0.7;
    margin-bottom: 10px;
}
.edp-sc-text {
    font-size: 0.9rem;
    line-height: 1.5;
}
.edp-sc-text > :first-child { margin-top: 0; }
.edp-sc-text > :last-child  { margin-bottom: 0; }
.edp-sc-card.uk-text-center { text-align: center; }
.edp-sc-card.uk-text-right  { text-align: right; }
.edp-sc-card.uk-text-center .edp-sc-image img { margin-left: auto; margin-right: auto; }
.edp-sc-card.uk-text-right  .edp-sc-image img { margin-left: auto; }