/* ==========================================================
   Infoskærm – visning (9:16 og 16:9)
   Lærredets størrelse og --u (1 % af korteste side) sættes af
   screen.js, så alt skalerer ens på alle skærmstørrelser – også
   når lærredet er drejet 90°.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    cursor: none;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}

.stage { position: fixed; inset: 0; overflow: hidden; background: #000; }

/* Sløret baggrund uden for lærredet (hvis vinduet har et andet format) */
.stage-bg {
    position: absolute;
    inset: -40px;
    background: center / cover no-repeat;
    filter: blur(28px) brightness(.7);
    transform: scale(1.08);
}

.canvas {
    --u: 10px;
    --gap: calc(var(--u) * 2.43);
    --bar: calc(var(--u) * 16.8);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1080px;   /* overskrives af screen.js */
    height: 1920px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
}

.canvas.format-landscape { --bar: calc(var(--u) * 11); --gap: calc(var(--u) * 2.2); }

.canvas-bg {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    display: none;
}

/* ---------- Slideområde ---------- */

.slides { position: absolute; inset: 0; }

.framed .canvas-bg { display: block; }
.framed .slides    { inset: var(--gap) var(--gap) calc(var(--bar) + var(--gap)) var(--gap); }
.framed.no-bar .slides { bottom: var(--gap); }

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}

.slide.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .8s ease, visibility 0s;
    z-index: 2;
}

.no-transition .slide,
.no-transition .slide.show { transition: none; }

.slide img { display: block; }

/* Vis hele billedet – baggrunden ses omkring det */
.slide.fit-contain img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Udfyld feltet – beskæres */
.slide.fit-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ingen skygge: på billeder med gennemsigtighed (PNG) gav den en synlig ramme om hele billedet */
.framed .slide img { border-radius: calc(var(--u) * 1.74); }

/* ---------- Infobjælke ---------- */

.infobar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bar);
    display: none;
    align-items: center;
    gap: calc(var(--u) * 3.4);
    padding: 0 calc(var(--u) * 5.3);
    color: #fff;
    background: #144784;
    font-size: calc(var(--u) * 2.35);
    line-height: 1.38;
}

.framed:not(.no-bar) .infobar { display: flex; }

.format-landscape .infobar { justify-content: center; font-size: calc(var(--u) * 2.4); }

.infobar-icon { flex: none; width: calc(var(--u) * 6.6); height: auto; }

.infobar-divider {
    flex: none;
    width: max(2px, calc(var(--u) * .25));
    height: 42%;
    background: rgba(255, 255, 255, .9);
    border-radius: 2px;
}

.infobar-text { min-width: 0; }
.infobar-text div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.infobar-text strong { font-weight: 700; }

/* ---------- Ingen slides ---------- */

.empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #e5e7eb;
    background: radial-gradient(circle at 50% 40%, #1f2937, #000 70%);
    font-size: calc(var(--u) * 3);
    z-index: 3;
}

.framed .empty {
    inset: var(--gap) var(--gap) calc(var(--bar) + var(--gap)) var(--gap);
    color: #17202b;
    background: rgba(255, 255, 255, .82);
    border-radius: calc(var(--u) * 1.74);
}
.framed.no-bar .empty { bottom: var(--gap); }

.empty[hidden] { display: none; }
.empty h1 { margin: 0 0 .4em; font-size: 1.6em; font-weight: 600; }
.empty p  { margin: 0; opacity: .7; }