/* ==========================================================
   _07-SECTIONS.CSS — sektionssystem
   Fullbreddssektion med centrerad innehållsyta och vänsterställt
   innehåll. Fungerar i PHP-mallar och på GenerateBlocks-containrar
   ("Ytterligare CSS-klass": t.ex. "section section--dark").

     .section          fullbredd, padding-block --section-gap
     .section > *      centrerad yta, max --content-width
     .section--light / --cream / --dark / --accent   bakgrund
     .section__intro   rubrik + ingress, full innehållsbredd
     .section__text    brödtext, --read-width mot ytans vänsterkant

   OBS: ingen overflow:hidden — bryter position:sticky (se _00-reset.css).
   ========================================================== */

.section {
    width: 100%;
    box-sizing: border-box;
    padding-block: var(--section-gap);
    padding-inline: var(--padding-x);
    color: var(--color-text);
    text-align: left;
}

/* Centrerad innehållsyta: varje direkt barn delar samma vänsterlinje */
.section > * {
    max-width: var(--content-width);
    margin-inline: auto;
}
.section > :first-child { margin-top: 0; }
.section > :last-child  { margin-bottom: 0; }

/* ── Bredder inuti ytan ── */
.section__intro {
    width: 100%;
    margin-bottom: var(--sp-12);
}

.section__text {
    max-width: var(--read-width);
    margin-left: 0;
    margin-right: auto;
}
/* Som direkt barn: lägg texten mot ytans vänsterkant, inte fönstrets
   och inte centrerad. (100% = sektionens innehållsbredd.) */
.section > .section__text {
    max-width: var(--read-width);
    margin-left: max(0px, calc((100% - var(--content-width)) / 2));
    margin-right: auto;
}

/* ── Bakgrunder ──
   Färgtokens omdefinieras lokalt, så komponenter som använder
   var(--color-text) / var(--color-border) (t.ex. .minimal-list-item)
   följer med automatiskt. */
.section--light {
    background-color: var(--color-bg);
}

.section--cream {
    background-color: var(--color-cream);
}

.section--dark {
    --color-text:   var(--color-dark-text);
    --color-muted:  rgba(245, 240, 235, 0.7);
    --color-faint:  rgba(245, 240, 235, 0.5);
    --color-border: rgba(245, 240, 235, 0.2);
    background-color: var(--color-dark-bg);
    color: var(--color-dark-text);
}

.section--accent {
    --color-text:   #fff;
    --color-muted:  rgba(255, 255, 255, 0.8);
    --color-faint:  rgba(255, 255, 255, 0.65);
    --color-border: rgba(255, 255, 255, 0.35);
    background-color: var(--color-accent);
    color: #fff;
}

/* Mörk/accent: text som sidfiler hårdkodar till #333 o.d. ska följa
   sektionens färg. !important + dubbelklass för att vinna mot
   sidspecifika regler (t.ex. _13-artists.css). */
.section.section--dark :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, .gb-text),
.section.section--accent :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, .gb-text) {
    color: var(--color-text) !important;
}
.section.section--dark a:not(.minimal-list-item),
.section.section--accent a:not(.minimal-list-item) {
    color: inherit;
    text-decoration-color: currentColor;
}
.section.section--dark :is(hr, .wp-block-separator),
.section.section--accent :is(hr, .wp-block-separator) {
    border-color: var(--color-border);
    background-color: var(--color-border);
    opacity: 1;
}
/* Streckpunkter i listor (_13-artists.css) följer textfärgen */
.section.section--dark ul.wp-block-list > li::before,
.section.section--accent ul.wp-block-list > li::before {
    background: currentColor;
}

/* ── Två sektioner med samma bakgrund i följd: tunn linje emellan ── */
.section--light  + .section--light,
.section--cream  + .section--cream,
.section--dark   + .section--dark,
.section--accent + .section--accent {
    border-top: 1px solid var(--color-border);
}