/* ===========================================
   COMMON.CSS - Poster- och ramstilar
   =========================================== */

:root {
    --poster-scale: 1;
    --poster-border: calc(16px * var(--poster-scale));
    --poster-poster: calc(20px * var(--poster-scale));
    --poster-classic: calc(24px * var(--poster-scale));
    --poster-classic-inner: calc(18px * var(--poster-scale));
    --poster-classic-outer: calc(2px * var(--poster-scale));
    --poster-classic-inner-border: calc(4px * var(--poster-scale));
}

/* Tavelram - yttre dekorativ ram (wrapper) */
.tavelram {
    padding: var(--poster-border);
    background: #000;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.35),
        0 8px 25px rgba(0,0,0,0.2),
        14px 0 8px -8px rgba(0,0,0,0.28),
        -14px 0 8px -8px rgba(0,0,0,0.28);
    position: relative;
}

.tavelram::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 14px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.06);
    z-index: 10;
}

.tavelram.hidden {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.tavelram.hidden::before {
    display: none;
}

.poster {
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Skugga pa poster endast nar tavelram ar dold */
.tavelram.hidden .poster {
    box-shadow:
        0 20px 60px rgba(0,0,0,0.35),
        0 8px 25px rgba(0,0,0,0.2),
        14px 0 8px -8px rgba(0,0,0,0.28),
        -14px 0 8px -8px rgba(0,0,0,0.28);
}

.poster-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 100%;
}

.main-border,
.outer-border,
.inner-border {
    position: absolute;
    pointer-events: none;
}

.main-border {
    inset: 0;
    z-index: 2;
}

.outer-border {
    z-index: 3;
}

.inner-border {
    z-index: 4;
}

.poster.frame-borderless .main-border,
.poster.frame-borderless .outer-border,
.poster.frame-borderless .inner-border {
    display: none;
}

.poster.frame-poster .main-border {
    border: var(--poster-poster) solid #fff;
}

.poster.frame-poster .outer-border,
.poster.frame-poster .inner-border {
    display: none;
}

.poster.frame-classic .main-border {
    border: var(--poster-classic) solid #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.poster.frame-classic .outer-border {
    inset: var(--poster-classic);
    border: var(--poster-classic-outer) solid #000;
}

.poster.frame-classic .inner-border {
    inset: var(--poster-classic-inner);
    border: var(--poster-classic-inner-border) solid #000;
}

.poster.frame-poster::after,
.poster.frame-borderless::after,
.poster.frame-classic::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.12);
    z-index: 5;
}