/* =========================================================
   PERMANENT EXHIBITION — bottom-anchored background
   ========================================================= */

.permanent {
    background-color: var(--bg); /* fill gaps */
}

.permanent-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Background layer */
.permanent-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-color: var(--bg);
    background-image: url("../assets/img/permanent/background/BG.jpg");
    background-repeat: no-repeat;

    /* Key behavior */
    background-size: contain;           /* never crop */
    background-position: center bottom; /* anchor to bottom */
}

/* =========================================================
   PERMANENT EXHIBITION — FOREGROUND ELEMENTS
   Viewport-based sizing & spacing
   Hover-safe (no transform collisions)
   ========================================================= */

/* ---------- ARTWORK ANCHOR (positioning only) ---------- */
.pc-art {
    position: absolute;
    z-index: 5;

    display: block;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
}

/* ---------- INNER WRAPPER (animated layer) ---------- */
.pc-art-inner {
    display: block;

    transform-origin: center;
    transition: transform 140ms ease, filter 140ms ease;
}

/* ---------- IMAGE ---------- */
.pc-art img {
    display: block;
    width: 100%;
    height: auto;

    user-select: none;
    pointer-events: none;

    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25));
}

/* ---------- HOVER / ACTIVE ---------- */
.pc-art:hover .pc-art-inner {
    transform: translateY(-2px) scale(1.015);
}

.pc-art:active .pc-art-inner {
    transform: translateY(0) scale(0.995);
}

.pc-art:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 6px;
    border-radius: 6px;
}

/* =========================================================
   SIZING (relative to viewport width)
   ========================================================= */

.pc-concepts {
    width: 30vw;
}

.pc-digital {
    width: 20vw;
}

.pc-print {
    width: 20vw;
}

/* =========================================================
   HORIZONTAL POSITIONING
   ========================================================= */

/* Concepts: 5% from left edge */
.pc-concepts {
    left: 5vw;
}

/* Digital: center + 2% (center-point aligned) */
.pc-digital {
    left: calc(50vw + 2vw);
    transform: translateX(-50%);
}

/* Print: 5% from right edge */
.pc-print {
    right: 7vw;
}

/* =========================================================
   VERTICAL PLACEMENT (desktop tuned)
   ========================================================= */

.pc-concepts {
    top: 26%;
}

.pc-digital {
    top: 34%;
}

.pc-print {
    top: 24%;
}

/* =========================================================
   VIEWER ELEMENT
   ========================================================= */

.pc-viewer {
    position: absolute;
    z-index: 6;

    right: -2%;
    bottom: -6%;

    width: 34vw;
    height: auto;

    transform: scale(0.7);
    transform-origin: bottom right;

    user-select: none;
    pointer-events: none;

    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.28));
}


/* =========================================================
   OPTIONAL SAFETY CAPS (desktop only)
   ========================================================= */

@media (min-width: 769px) {
    .pc-concepts {
        max-width: 680px;
    }

    .pc-digital,
    .pc-print {
        max-width: 460px;
    }

    .pc-viewer {
        max-width: 600px;
    }
}

/* =========================================================
   PERMANENT EXHIBITION — MOBILE (<= 768px)
   Viewer is standalone (bottom-right)
   ========================================================= */

@media (max-width: 768px) {
    /* Background container */
    .permanent-bg {
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: contain;

        /* NEW: guarantee visible background height */
        min-height: 50vh;

        /* anchor to bottom */
        top: auto;
        bottom: 0;
        height: 50vh;

        width: 160%;
    }

    /* Stack container bounded by your required paddings */
    .permanent-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        padding-top: 12.2vh;
        padding-bottom: 15.2vh;

        /* gap scales with viewport height (smaller on short screens) */
        gap: clamp(10px, 2.4vh, 26px);
    }

    /* Reset desktop absolute positioning for stacked items */
    .pc-art {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        margin: 0;
    }

    /* Order: Digital → Print → Concepts (center hero) */
    .pc-digital { order: 2; }
    .pc-print   { order: 3; }
    .pc-concepts{ order: 1; }

    /* -------------------------------------------------------
       Height-based scaling using min(vw, vh)
       This guarantees things shrink on short screens.
       ------------------------------------------------------- */

    /* Central hero element */
    .pc-concepts {
        width: min(78vw, 44vh);
    }

    /* Secondary elements */
    .pc-digital,
    .pc-print {
        width: min(60vw, 30vh);
    }

    /* Optional: prevent “too big” on very large phones */
    .pc-concepts { max-width: 400px; }
    .pc-digital,
    .pc-print    { max-width: 300px; }

    /* =======================================================
       VIEWER — standalone bottom-right (not part of stack)
       Scales with viewport height too
       ======================================================= */

    .pc-viewer {
        position: absolute;
        z-index: 10;

        right: -4%;
        bottom: -6%;

        /* size limited by height so it never eats the stack */
        width: min(42vw, 22vh);
        max-width: none;

        /* 30% smaller in both dimensions */
        transform: scale(0.7);
        transform-origin: bottom right;

        user-select: none;
        pointer-events: none;
    }
}