/* ==========================================================
   /ui/css/core/ljh-grid.css
   LJH – Grid System
   ----------------------------------------------------------
   Ansvar:
   - Outer shell (max-width + centrering)
   - Huvudlayout (vänster 1fr + höger 320px)
   - Vänster- och högerkolumn
   - Block (vänster kolumn)
   - Paneler (höger kolumn)
   - Responsiv brytpunkt (< 1100px)
   ----------------------------------------------------------
   OBS: .ljh-layout finns även i ljh-base.css (working)
        .ljh-block finns i ljh-components.css
        Dessa är grid-specifika varianter
   ----------------------------------------------------------
   Prefix: ljh-
   Version: 1.1 – 2025-12-05
   Laddas via: head_loader.php (globalt)
========================================================== */


/* ==========================================================
   SHELL – Yttre begränsning och centrering
========================================================== */

.ljh-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 26px;
}


/* ==========================================================
   LAYOUT – Tvåkolumnsgrid
========================================================== */

.ljh-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    margin: 40px auto 60px;
    max-width: 1480px;
    padding: 0 26px;
}


/* ==========================================================
   KOLUMNER
========================================================== */

.ljh-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ljh-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
}


/* ==========================================================
   BLOCK – Innehållsenheter i vänster kolumn
========================================================== */

.ljh-block {
    background: rgba(15,23,42,.75);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1px;
    box-shadow: var(--shadow-soft);
}

.ljh-block-inner {
    padding: 1.8rem 2rem 2rem;
    background: rgba(15,23,42,0.92);
    border-radius: 21px;
}


/* ==========================================================
   PANELER – Innehållsenheter i höger kolumn
========================================================== */

.ljh-panel {
    background: rgba(15,23,42,.75);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1px;
    box-shadow: var(--shadow-soft);
}

.ljh-panel-inner {
    padding: 1.4rem 1.6rem;
    background: rgba(15,23,42,0.92);
    border-radius: 21px;
}


/* ==========================================================
   RESPONSIV
========================================================== */

@media (max-width: 1100px) {
    .ljh-layout { grid-template-columns: 1fr; }
}