/* Angleichung der Projekt-Detailseiten an den Relaunch-Stil.
   Additiv ueber der jeweiligen css/showroom.css. */

/* ---------- Kopf: weiches Farbfeld ---------- */
.showroom-hero {
    position: relative;
    isolation: isolate;
}

.showroom-hero::before {
    content: '';
    position: absolute;
    inset: -30% -15% auto -15%;
    height: 140%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 45% at 22% 18%, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 70%),
        radial-gradient(32% 40% at 80% 8%, color-mix(in srgb, var(--primary-color) 13%, transparent), transparent 70%);
    filter: blur(32px);
}

[data-theme="dark"] .showroom-hero::before {
    opacity: 0.65;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-link-video {
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.82rem;
}

/* ---------- Videorahmen ---------- */
.video-container {
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 20%, transparent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* ---------- Bento-Karten wie proof-card ---------- */
.bento-card-left,
.bento-card {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-card-left:hover,
.bento-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--primary-color) 15%, transparent);
    transform: translateY(-3px);
}

.bento-project-title,
.bento-card-title {
    letter-spacing: -0.015em;
}

.bento-card-year {
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.82rem;
}

/* ---------- Copyright-Zeile dezent ---------- */
.video-copyright {
    font-size: 0.8rem;
    opacity: 0.7;
}


/* ---------- Logo je nach Theme wechseln (Kontrast) ---------- */
.ml-logo--dark-bg {
    display: none;
}

[data-theme="dark"] .ml-logo--light-bg {
    display: none;
}

[data-theme="dark"] .ml-logo--dark-bg {
    display: block;
}


/* ---------- Video: nichts abschneiden (v.a. Hochformat) ---------- */
/* showroom.css setzt aspect-ratio UND height:calc(100vh-...), wodurch die
   Box im Hochformat sehr hoch wird und object-fit:cover das 16:9-Video
   seitlich stark beschneidet. Hoehe zuruecknehmen, Video einpassen. */
.video-container-wrapper {
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 6rem);
}

.showroom-video {
    object-fit: contain !important;
    background: #000;
}