/* Root full-screen setup */
html, body {
    margin: 0; padding: 0;
    width: 100vw; height: 100vh;
    overflow: hidden;
    background-color: #000;
}

#display-container {
    width: 100%; height: 100%;
    position: relative;
    display: flex; justify-content: center; align-items: center;
}

/* Base Artwork layer styling */
.artwork-item {
    width: 100%; height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 2s ease-in-out;
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    opacity: 0;
}

.artwork-item.active { opacity: 1; }

/* --------------------------------------------------------------------------
   Screen Rotation (Digital Signage support)
   -------------------------------------------------------------------------- */

body.force-portrait {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg);
    transform-origin: top left;
    position: absolute;
    top: 100%;
    left: 0;
}

body.force-portrait .ui-overlay-wrapper {
    width: 100vh;
    height: 100vw;
}

/* --------------------------------------------------------------------------
   Rendering Modes
   -------------------------------------------------------------------------- */

.ken-burns .artwork-item {
    background-size: cover;
    /* Ken Burns is driven per-image via the Web Animations API in app.js — a focal-adaptive
       zoom + drift anchored on the artwork's focal point (see startKenBurns). */
}

.static-crop .artwork-item {
    background-size: cover;
    animation: none;
}

.contain-matte .artwork-item {
    background-size: contain;
    animation: none;
}

.matte-effect {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    background-size: cover;
    background-position: center;
    filter: blur(40px) brightness(0.5);
    z-index: 1;
}

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   UI Overlay Wrapper
   -------------------------------------------------------------------------- */

.ui-overlay-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* --------------------------------------------------------------------------
   R1-F2 Night & Quiet Hours overlays (clock-driven, set from app.js)
   -------------------------------------------------------------------------- */
/* Warm + dim veils tint the artwork only (z 50 < controls z 100), so the placard/controls stay
   readable if someone interacts at night. Slow transition keeps the shift imperceptible between the
   60s polls (and makes a lovely sunset time-lapse). */
#night-warm, #night-dim {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 4s ease-in-out;
}
#night-warm { background: #ff7b19; mix-blend-mode: multiply; }   /* amber warmth */
#night-dim  { background: #000; }                                 /* brightness reduction */

/* Software panel-off: full blackout above every layer (the fallback when HDMI-CEC isn't available). */
#quiet-blackout {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 300;
    pointer-events: none;
    background: #000;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

/* Museum Placard - Dynamic Height for Full Descriptions */
.museum-placard {
    position: absolute;
    left: 5vw;
    top: 50%;
    transform: translateY(-50%);
    
    width: 28vmin; 
    min-width: 280px;
    max-width: 500px;
    
    /* Allow it to grow, but cap it before it hits screen edges */
    max-height: 85vh; 
    
    display: flex;
    flex-direction: column;
    
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2vmin;
    padding: 3.5vmin;
    color: white;
    gap: 2vmin;
    box-shadow: 0 2vmin 5vmin rgba(0,0,0,0.6);
    
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

body.placard-visible .museum-placard {
    opacity: 1;
    pointer-events: auto;
}

/* Controls Overlay */
.controls-overlay {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    border-radius: 6vmin;
    padding: 1vmin 3vmin; /* Reduced from 1.5vmin 4vmin */
    display: flex;
    gap: 2.5vmin; /* Reduced from 4vmin */
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 110;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

body.controls-visible .controls-overlay {
    opacity: 1;
    pointer-events: auto;
}

.placard-content {
    flex-grow: 1;
    overflow-y: auto; /* Scroll if description is truly massive */
    display: flex;
    flex-direction: column;
}

/* Hide scrollbar for clean look but allow scrolling */
.placard-content::-webkit-scrollbar { width: 0px; background: transparent; }

.placard-content h1 {
    font-size: 2.8vmin;
    margin: 0 0 0.8vmin 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

.placard-content h2 {
    font-size: 1.4vmin;
    margin: 0 0 2.5vmin 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15vmin;
}

/* Updated: Full text visibility */
.placard-content p {
    font-size: 1.6vmin;
    line-height: 1.6;
    margin: 0 0 3vmin 0;
    color: rgba(255, 255, 255, 0.8);
    /* Remove clamping */
    display: block;
    overflow: visible;
}

/* CC BY attribution (ADR-142) — quiet, sits with the meta lines, no badge/box/icon. Same family +
   letter-spacing language as .placard-content h2 (the muted museum-detail line), just lighter/smaller
   so it reads as a footnote rather than a heading. */
.placard-credit {
    font-size: 1vmin;
    margin: 0 0 1.5vmin 0;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Segoe UI', sans-serif;
    font-style: italic;
    letter-spacing: 0.05vmin;
}

.tags-container {
    display: flex; flex-wrap: wrap; gap: 1vmin;
    margin-bottom: 1.5vmin;
}

.tags-container span {
    font-size: 1vmin;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.6vmin 1.5vmin;
    border-radius: 2vmin;
    text-transform: uppercase;
    letter-spacing: 0.05vmin;
}

/* QR Code Native Scaling */
.qrcode-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2vmin;
    padding-top: 2.5vmin;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.qrcode-wrapper small {
    font-size: 0.9vmin;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.15vmin;
}

#qrcode {
    max-width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

#qrcode canvas, #qrcode img {
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
    border: 0.5vmin solid white;
    border-radius: 0.5vmin;
}

.control-group { display: flex; flex-direction: column; gap: 0.8vmin; }
.control-group label {
    font-size: 1vmin;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    font-family: 'Segoe UI', sans-serif;
}

/* Custom Dropdown Styling */
.custom-dropdown { position: relative; display: inline-block; }

.dropdown-trigger {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.4vmin;
    padding: 1vmin 2.5vmin;
    border-radius: 4vmin;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    min-width: 20vmin;
    text-align: left;
}

.dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dropdown-options {
    position: absolute;
    bottom: 100%; left: 50%; transform: translateX(-50%);
    margin-bottom: 2vmin;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2vmin;
    width: 25vmin;
    max-height: 40vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2vmin 5vmin rgba(0,0,0,0.6);
}

.dropdown-option {
    padding: 1.5vmin 3vmin;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 1.3vmin;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-option:last-child { border-bottom: none; }
.dropdown-option:hover { background: rgba(255, 255, 255, 0.1); color: white; }
.dropdown-option.active { color: white; background: rgba(59, 130, 246, 0.3); font-weight: bold; }

.mode-toggles, .nav-controls { display: flex; gap: 1.5vmin; }

.mode-toggles button, .nav-controls button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 5vmin; height: 5vmin;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5vmin; font-weight: bold;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}

.mode-toggles button.active, .nav-controls button:active { background: white; color: black; }
.mode-toggles button:hover:not(.active), .nav-controls button:hover {
    background: rgba(255, 255, 255, 0.2); color: white;
}

.fade-overlay {
    position: absolute;
    top: 5vh; left: 5vw;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2vmin;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.fade-overlay.show { opacity: 1; }

/* --------------------------------------------------------------------------
   Branding (Placard & Controls)
   -------------------------------------------------------------------------- */

.placard-brand {
    display: flex;
    align-items: center;
    margin-bottom: 2vmin;
    opacity: 0.6;
}

.placard-logo {
    height: 5vmin;
    width: auto;
}

.controls-brand {
    display: flex;
    align-items: center;
    margin-right: 2vmin; /* Reduced from 3vmin */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 2vmin; /* Reduced from 3vmin */
    opacity: 0.5;
}

.controls-logo {
    height: 5vmin;
    width: auto;
}