/* ============================================================
   Live Grid – perustyylit (muuttujat, reset, runko)
   Osa 1/6 – ks. myös sidebar / topbar / grid / modal / responsive
   Värit: #080808 tausta | #d6111e punainen | #ddc76d kulta
============================================================ */

:root {
    --bg:           #080808;
    --panel:        #111111;
    --panel-light:  #171717;
    --border:       #252525;

    --red:          #d6111e;
    --red-dark:     #8b0f16;

    --gold:         #ddc76d;
    --gold-dark:    #c8b15d;

    --text:         #ffffff;
    --muted:        #9d9d9d;

    --radius-card:  18px;
    --radius-btn:   999px;
    --sidebar-w:    280px;
    --modal-w:      400px;

    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   RESET
============================================================ */

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

.lg-wrapper button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.lg-wrapper button:focus-visible,
.lg-wrapper input:focus-visible,
.lg-wrapper a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Yleinen piilotusapuri – korkeampi lähdejärjestys voittaa,
   joten pidä tämä viimeisenä ladattavassa tiedostossa jos lisäät sääntöjä */
[hidden] {
    display: none !important;
}

/* ============================================================
   WRAPPER – 3-kolumni
============================================================ */

.lg-wrapper {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr var(--modal-w);
    min-height: 100vh;

    background:
        radial-gradient(circle at top right,  rgba(214,17,30,.09), transparent 32%),
        radial-gradient(circle at bottom left, rgba(221,199,109,.09), transparent 36%),
        linear-gradient(135deg, #050505, #0b0b0b 60%, #131313);

    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   SCROLLBAR
============================================================ */

.lg-modal::-webkit-scrollbar,
.lg-sidebar::-webkit-scrollbar {
    width: 5px;
}

.lg-modal::-webkit-scrollbar-thumb,
.lg-sidebar::-webkit-scrollbar-thumb {
    background: rgba(221,199,109,.3);
    border-radius: 20px;
}

/* ============================================================
   ANIMAATIOT (jaettu useammassa tiedostossa käytetty)
============================================================ */

@keyframes lg-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-wrapper *,
    .lg-wrapper *::before,
    .lg-wrapper *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}