* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Sidbakgrund för ALLT UTOM hero — en egen, LJUSARE och varmare/
   jordnära mix (content-forest-warm.jpg, extra ljusstyrka + varm
   guld/brun toning inbakad i själva bilden med Python/PIL) än den
   svalare, dimmigare bilden i hero. Tonton här är dessutom mycket
   svagare (25% istället för 40%) så bilden faktiskt syns tydligt —
   OBS: den här filen måste laddas upp till servern under
   /assets/img/backgrounds/ för att synas, annars faller sidan
   tillbaka till helsvart (background-color nedan). */
body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    background:
        linear-gradient(180deg, rgba(22,17,12,.25) 0%, rgba(22,17,12,.25) 100%),
        url('/assets/img/backgrounds/content-forest-warm.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
@media (max-width: 900px) {
    /* background-attachment: fixed är opålitligt/tungt på mobil — faller
       tillbaka till scroll där, bilden syns ändå högst upp på sidan. */
    body { background-attachment: scroll; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

a { color: inherit; }

img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

.container.narrow { max-width: var(--container-narrow); }

.section { padding: var(--space-6) 0; }
.section--tight { padding: var(--space-3) 0; }
/* Nytt försök: en INSATT, rundad "modulpanel" istället för antingen
   (a) en helt osynlig sektion (skogen syns, men innehållet ser ut att
   "flyta" rakt ovanpå fotot) eller (b) en kant-till-kant-rektangel (gav
   en hård "banderoll"-linje förra gången). Genom att panelen har
   marginal in från sidokanterna och rundade hörn uppstår ingen hård
   linje mot bakgrunden — samtidigt ger den varje modul en tydlig,
   avgränsad yta att stå på, och skogen syns fortfarande MELLAN
   panelerna i gapet ovanför/under (se margin nedan). */
.section-alt,
.section-forest-light {
    max-width: calc(var(--container-max) + var(--space-4));
    margin: var(--space-4) auto;
    background: rgba(20,17,14,.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
}
@media (max-width: 720px) {
    .section-alt,
    .section-forest-light {
        margin: var(--space-3) var(--space-2);
        border-radius: var(--radius-md);
    }
}

.section-intro {
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

/* Samma modulpanel-känsla som .section-alt, men som en INRE wrapper —
   för när bara EN DEL av en sektion (t.ex. huvudinnehållet i en
   två-kolumns-layout, en tabell, en ikon-rad) behöver en tydlig yta att
   stå på, utan att hela sektionen ska bli en fullbredds-panel. Används
   sitewide varhelst text/element annars skulle flyta direkt på
   skogsbakgrunden. */
.content-panel {
    background: rgba(20,17,14,.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
    padding: var(--space-3);
}
@media (max-width: 720px) {
    .content-panel { padding: var(--space-2); border-radius: var(--radius-md); }
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

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