/* ============================================================
   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
============================================================ */

.lg-wrapper {
    --lg-bg:           #080808;
    --lg-panel:        #111111;
    --lg-panel-light:  #171717;
    --lg-border:       #252525;

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

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

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

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

    --lg-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(--lg-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(--lg-sidebar-w) 1fr var(--lg-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(--lg-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;
    }
}
/* ============================================================
   Live Grid – sivupalkki (kategoriat)
   Osa 2/6
============================================================ */

.lg-sidebar {
    background: #0d0d0d;
    border-right: 1px solid var(--lg-border);
    padding: 28px 20px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* ---- Header ---- */

.lg-sidebar-header {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--lg-border);
    text-align: center;
}

.lg-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    margin: 0 auto 14px;

    border-radius: 14px;

    background: linear-gradient(135deg, var(--lg-red), var(--lg-red-dark));
    box-shadow: 0 8px 24px rgba(214,17,30,.35);

    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.5px;
    color: #fff;
}

.lg-sidebar-header h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--lg-gold), #fff 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lg-sidebar-header span {
    display: block;
    color: #666;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* ---- Kategoriapainikkeet ---- */

.lg-stat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    min-height: 52px;
    padding: 14px 18px;

    border-radius: 12px;
    border: 1px solid var(--lg-border);

    background: linear-gradient(135deg, #181818, #101010);

    text-decoration: none;
    color: #fff;
    cursor: pointer;

    overflow: hidden;

    transition: transform .22s var(--lg-ease), border-color .22s var(--lg-ease), box-shadow .22s var(--lg-ease), background .22s var(--lg-ease);
}

.lg-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    transition: .65s;
}

.lg-stat:hover::before {
    left: 150%;
}

.lg-stat:hover {
    transform: translateY(-3px);
    border-color: var(--lg-red);
    box-shadow: 0 10px 22px rgba(214,17,30,.2);
}

.lg-stat:active {
    transform: translateY(-1px) scale(.99);
}

.lg-stat.active,
.lg-stat[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--lg-gold), var(--lg-gold-dark));
    color: #000;
    border-color: var(--lg-gold);
    box-shadow: 0 10px 28px rgba(221,199,109,.22);
}

.lg-stat-label {
    font-size: 13px;
    font-weight: 700;
}

.lg-count {
    min-width: 42px;
    height: 30px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--lg-radius-btn);
    background: rgba(255,255,255,.08);

    color: var(--lg-gold);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .22s var(--lg-ease), color .22s var(--lg-ease);
}

.lg-stat.active .lg-count,
.lg-stat[aria-pressed="true"] .lg-count {
    color: #000;
    background: rgba(0,0,0,.14);
}
/* ============================================================
   Live Grid – yläpalkki ja haku
   Osa 3/6
============================================================ */

.lg-main {
    padding: 28px;
    min-width: 0;
    overflow: hidden;
}

.lg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 18px 24px;
    margin-bottom: 28px;

    background: #0f0f0f;
    border: 1px solid var(--lg-border);
    border-radius: 16px;

    border-top: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 1px 0 0 rgba(221,199,109,.25);
}

.lg-topbar-title {
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--lg-gold), #fff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Haku ---- */

.lg-search-wrap {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.lg-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    pointer-events: none;
    opacity: .5;
}

#lg-search {
    width: 100%;
    padding: 12px 40px 12px 42px;
    border-radius: 12px;
    border: 1px solid var(--lg-border);
    background: #161616;
    color: #fff;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}

#lg-search::placeholder {
    color: #555;
}

#lg-search:focus {
    outline: none;
    border-color: var(--lg-gold);
    box-shadow: 0 0 0 3px rgba(221,199,109,.12);
}

/* Piilotetaan selaimen oma tyhjennysnappi, käytetään omaa .lg-search-clear -painiketta */
#lg-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.lg-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--lg-muted);
    cursor: pointer;
    transition: background .18s var(--lg-ease), color .18s var(--lg-ease);
}

.lg-search-clear:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
/* ============================================================
   Live Grid – kortit, skeleton, virheet, "lataa lisää"
   Osa 4/6
============================================================ */

.lg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
}

.lg-card {
    background: linear-gradient(180deg, #181818, #101010);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-card);
    overflow: hidden;

    animation: lg-fade-up .38s var(--lg-ease) both;
    animation-delay: calc(var(--i, 0) * 35ms);

    transition: transform .28s var(--lg-ease), border-color .28s var(--lg-ease), box-shadow .28s var(--lg-ease);
}

.lg-card:hover {
    transform: translateY(-6px);
    border-color: rgba(221,199,109,.3);
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
}

.lg-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    background: #141414;
    transition: transform .38s var(--lg-ease);
    margin-bottom: 0;
}

.lg-card:hover img {
    transform: scale(1.04);
}

.lg-card-content {
    padding: 18px;
}

/* KORJAUS (2026-09): lg-card.js rakentaa DOM:n muodossa <a><h3>otsikko</h3></a>
   (linkki on h3:n VANHEMPI, ei sen sisällä) — mutta tämä sääntö oli
   kirjoitettu olettaen päinvastaista sisäkkäisyyttä (".lg-card h3 a"), joka
   ei siis KOSKAAN osunut mihinkään. Ilman värimäärittelyä otsikko peri
   sivuston yleisen "h1,h2,h3,h4{color:var(--ink)}"-säännön (tumma, vaalealle
   taustalle tarkoitettu väri) — lähes musta teksti mustaa korttia vasten.
   Korjattu antamalla väri suoraan ".lg-card h3":lle (toimii sekä silloin
   kun otsikko on linkin sisällä että ilman) ja kohdistamalla hover oikeaan
   suuntaan (".lg-card a:hover h3"). Lisäksi tämä sivu VOI olla upotettuna
   tavallisen artikkelin/sivun ".prose"-sisältökääreen sisään, jonka OMAT,
   yhtä yleiset otsikko-/linkkisäännöt voisivat muuten spesifisyydeltään
   ohittaa tämän — siksi "!important" varmistamassa. */
.lg-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--lg-text) !important;
}

.lg-card a {
    text-decoration: none;
}

.lg-card a:hover h3 {
    color: var(--lg-gold) !important;
}

.lg-card p {
    margin: 0;
    color: var(--lg-muted);
    font-size: 13px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Skeleton-latausindikaattori ---- */

.lg-skeleton-wrap {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.lg-skeleton {
    height: 260px;
    border-radius: var(--lg-radius-card);
    background: linear-gradient(90deg, #181818 25%, #222 50%, #181818 75%);
    background-size: 200% 100%;
    animation: lg-shimmer 1.4s infinite;
}

@keyframes lg-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Virheviesti ---- */

.lg-error {
    color: var(--lg-muted);
    padding: 40px;
    text-align: center;
    grid-column: 1 / -1;
}

.lg-retry-btn {
    display: inline-flex;
    margin-top: 14px;
    padding: 10px 22px;
    border-radius: var(--lg-radius-btn);
    border: 1px solid var(--lg-border);
    background: #171717;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .2s var(--lg-ease), transform .2s var(--lg-ease);
}

.lg-retry-btn:hover {
    border-color: var(--lg-gold);
    transform: translateY(-2px);
}

/* ============================================================
   LATAA LISÄÄ
============================================================ */

.lg-load-wrap {
    text-align: center;
    margin-top: 40px;
}

.lg-load-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 34px;
    border-radius: var(--lg-radius-btn);

    background: linear-gradient(135deg, var(--lg-red), var(--lg-red-dark));

    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;

    border: 1px solid rgba(214,17,30,.4);
    box-shadow: 0 10px 24px rgba(214,17,30,.22);

    transition: transform .22s var(--lg-ease), background .22s var(--lg-ease), box-shadow .22s var(--lg-ease), color .22s var(--lg-ease);
}

.lg-load-btn::after {
    content: "→";
    margin-left: 8px;
    display: inline-block;
    transition: transform .22s var(--lg-ease);
}

.lg-load-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--lg-gold), var(--lg-gold-dark));
    color: #000;
    border-color: var(--lg-gold);
    box-shadow: 0 14px 30px rgba(221,199,109,.22);
}

.lg-load-btn:hover::after {
    transform: translateX(5px);
}

.lg-load-btn[disabled] {
    opacity: .6;
    cursor: default;
    transform: none;
}
/* ============================================================
   Live Grid – sisältöpaneeli (modal) ja jakopainikkeet
   Osa 5/6
============================================================ */

.lg-modal {
    background: #0a0a0a;
    border-left: 1px solid rgba(221,199,109,.12);
    padding: 32px 28px;
    overflow-y: auto;
    position: sticky;
    top: 0;
    max-height: 100vh;
}

.lg-modal-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(221,199,109,.1);
}

/* KORJAUS (2026-09): tällä säännöllä ei aiemmin ollut omaa "color"-
   määritystä, joten otsikko peri värinsä esivanhemmalta (".lg-wrapper{color:
   var(--lg-text)}"). CSS:ssä PERITTY arvo häviää AINA sivuston omalle
   suoraan-osuvalle säännölle riippumatta spesifisyydestä — ja style.css:n
   yleinen "h1,h2,h3,h4{color:var(--ink)}" osuu suoraan tähänkin h2:een.
   Siksi otsikko saattoi näyttää tummalta. Annetaan väri suoraan. */
.lg-modal h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--lg-text) !important;
}

#lg-modal-content {
    line-height: 1.75;
    font-size: 14px;
    color: var(--lg-muted);
    animation: lg-fade-up .3s var(--lg-ease) both;
}

/* ---- Kansikuva + päivämäärä lukupaneelin yläreunassa ---- */

.lg-modal-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.lg-modal-date {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lg-gold);
    margin-bottom: 14px;
}

/* ============================================================
   PROSE – artikkelin koko sisältö (item.content, aidosti HTML:ää)
============================================================ */

.lg-prose {
    color: #d8d3cc;
}

.lg-prose > * + * {
    margin-top: 1em;
}

.lg-prose p {
    margin: 0;
}

/* KORJAUS (2026-09): item.content on artikkelin OIKEA HTML-sisältö
   (the_content()-suodattimen läpi), ja Live Grid -lyhytkoodi voi olla
   upotettuna tavallisen sivun ".prose"-sisältökääreen sisään. Sivun oma
   "a{color:var(--red-dark)}" ja mahdolliset muut ".prose"-säännöt ovat
   samaa tai suurempaa spesifisyyttä kuin nämä yhden luokan säännöt, joten
   "!important" varmistaa että lukupaneelin oma tumma/vaalea väripaletti
   säilyy riippumatta upotuskontekstista. */
.lg-prose h1,
.lg-prose h2,
.lg-prose h3,
.lg-prose h4 {
    color: #fff !important;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 1.4em;
}

.lg-prose h2 { font-size: 19px; }
.lg-prose h3 { font-size: 17px; }
.lg-prose h4 { font-size: 15px; }

.lg-prose strong,
.lg-prose b {
    color: #fff !important;
}

.lg-prose a {
    color: var(--lg-gold) !important;
    text-decoration: underline;
    text-decoration-color: rgba(221,199,109,.4);
    text-underline-offset: 2px;
}

.lg-prose a:hover {
    color: #fff !important;
}

.lg-prose img,
.lg-prose iframe,
.lg-prose embed,
.lg-prose video {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.lg-prose ul,
.lg-prose ol {
    margin: 0;
    padding-left: 1.3em;
}

.lg-prose li + li {
    margin-top: .4em;
}

.lg-prose blockquote {
    margin: 0;
    padding: 12px 18px;
    border-left: 3px solid var(--lg-gold);
    background: rgba(221,199,109,.06);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #c9c3b9;
}

.lg-prose figcaption {
    font-size: 12px;
    color: #7d7d7d;
    margin-top: 6px;
    text-align: center;
}

.lg-prose hr {
    border: none;
    border-top: 1px solid var(--lg-border);
    margin: 1.6em 0;
}

.lg-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.lg-prose th,
.lg-prose td {
    padding: 8px 10px;
    border: 1px solid var(--lg-border);
    text-align: left;
}

/* KORJAUS (2026-09): sama ".prose a"-törmäysriski kuin jakopainikkeissa —
   tämä on <a>-linkki ("Avaa omalla sivullaan"), joten "!important" varmistaa
   luettavuuden upotuskontekstista riippumatta. */
.lg-modal-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--lg-gold) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: color .2s var(--lg-ease);
}

.lg-modal-link:hover {
    color: #fff !important;
}

/* .lg-share on muuten suunniteltu kortin sisään (omat sivureunukset) —
   modaalissa se on suoraan #lg-modal-content:in sisällä, jolla on jo oma
   32px/28px reunus, joten poistetaan tuplaantuva sivupehmuste täältä. */
#lg-modal-content .lg-share {
    padding: 18px 0 0;
    margin-top: 4px;
}

.lg-modal-loading {
    text-align: center;
    padding: 40px;
    color: var(--lg-gold);
    letter-spacing: 6px;
    animation: lg-pulse 1s infinite;
}

@keyframes lg-pulse {
    0%, 100% { opacity: .3; }
    50%       { opacity: 1; }
}

/* ---- Tyhjä tila ---- */

.lg-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.lg-empty-icon {
    font-size: 44px;
    margin-bottom: 14px;
    opacity: .5;
}

.lg-empty-state p {
    color: #666;
    font-size: 13px;
}

/* ============================================================
   JAKOPAINIKKEET
============================================================ */

.lg-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--lg-border);
}

/* KORJAUS (2026-09): nämä ovat <a>-linkkejä (Facebook/X/WhatsApp), ja jos
   koko Live Grid on upotettu tavallisen sivun ".prose"-sisältökääreeseen,
   sivun OMA yleinen "a{color:var(--red-dark)}" -linkkiväri (tai ".prose a")
   saattoi spesifisyydeltään voittaa tämän yhden luokan säännön, jolloin
   painikkeiden teksti oli punaista punaista taustaa vasten (lukukelvoton).
   "!important" varmistaa että jakonappien oma valkoinen teksti säilyy
   riippumatta mihin sivun kohtaan lyhytkoodi upotetaan. */
.lg-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 34px;
    padding: 0 14px;

    border-radius: var(--lg-radius-btn);
    border: none;
    cursor: pointer;

    background: linear-gradient(135deg, var(--lg-red), var(--lg-red-dark));
    color: #fff !important;

    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;

    transition: transform .2s var(--lg-ease), background .2s var(--lg-ease), color .2s var(--lg-ease);
}

.lg-share-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--lg-gold), var(--lg-gold-dark));
    color: #000 !important;
}

.lg-share-btn.lg-copy[data-copied="true"] {
    background: linear-gradient(135deg, #2fae5e, #1f7d43);
}
/* ============================================================
   Live Grid – responsiivisuus
   Osa 6/6 – ladataan viimeisenä, jotta murtopisteet voittavat
============================================================ */

@media (max-width: 1200px) {
    .lg-wrapper {
        grid-template-columns: 240px 1fr;
    }

    .lg-modal {
        grid-column: 1 / -1;
        position: relative;
        max-height: none;
        border-left: none;
        border-top: 1px solid rgba(221,199,109,.12);
    }
}

@media (max-width: 900px) {
    .lg-wrapper {
        grid-template-columns: 1fr;
    }

    .lg-sidebar {
        position: relative;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--lg-border);
    }

    .lg-sidebar-header {
        width: 100%;
        text-align: left;
        padding-bottom: 10px;
        margin-bottom: 4px;
    }

    .lg-stat {
        flex: 1 1 auto;
        min-width: 140px;
        width: auto;
    }
}

@media (max-width: 600px) {
    .lg-main {
        padding: 16px;
    }

    .lg-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
    }

    .lg-search-wrap {
        max-width: 100%;
    }

    .lg-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .lg-sidebar,
    .lg-modal {
        padding: 14px;
    }

    .lg-share-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}