/*
 * Visual continuity for legacy v1/v2 issues.
 * The v3 template receives authored images and media directly from JSON.
 */
.wlh-video-placeholder {
    background:
        radial-gradient(circle at 72% 22%, rgba(63, 216, 232, .20), transparent 30%),
        radial-gradient(circle at 28% 80%, rgba(255, 47, 109, .20), transparent 34%),
        linear-gradient(145deg, #2c1750, #140a25);
}

.wlh-video-placeholder::before {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(168, 120, 255, .24);
    border-radius: 6px;
    content: "";
}

.wlh-video-wordmark {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.wlh-video-wordmark strong {
    color: #f4edff;
    font: 600 clamp(26px, 3vw, 42px)/1 "Playfair Display", Georgia, serif;
}

.wlh-video-wordmark small {
    color: var(--wl-cyan);
    font: 600 10px "JetBrains Mono", monospace;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.wl-rail-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(63, 216, 232, .20), transparent 42%),
        linear-gradient(145deg, #281449, #160b28);
}

.wl-rail-thumb-placeholder span {
    position: relative;
    z-index: 1;
    color: rgba(217, 194, 255, .72);
    font: 600 24px "Playfair Display", Georgia, serif;
}

.wl-rail-thumb-placeholder::after {
    background: linear-gradient(90deg, transparent, rgba(21, 12, 38, .72));
}

.wl-legacy-figure {
    background:
        radial-gradient(circle at 78% 20%, rgba(63, 216, 232, .20), transparent 34%),
        radial-gradient(circle at 18% 88%, rgba(168, 85, 247, .30), transparent 40%),
        linear-gradient(145deg, #2b1749, #130a22);
}

.wl-legacy-figure-2 {
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 194, 71, .18), transparent 32%),
        radial-gradient(circle at 82% 82%, rgba(168, 85, 247, .28), transparent 38%),
        linear-gradient(145deg, #25143f, #11091f);
}

.wl-legacy-figure-3 {
    background:
        radial-gradient(circle at 74% 26%, rgba(255, 47, 109, .18), transparent 34%),
        radial-gradient(circle at 20% 78%, rgba(63, 216, 232, .18), transparent 38%),
        linear-gradient(145deg, #281442, #12091f);
}

.wl-legacy-module-number {
    position: absolute;
    right: 30px;
    bottom: 18px;
    z-index: 1;
    color: rgba(217, 194, 255, .12);
    font: 600 clamp(74px, 10vw, 132px)/.8 "Playfair Display", Georgia, serif;
}

.wl-legacy-figure > h3 {
    max-width: 38ch;
}