/* stapel.css — band som glider upp över varandra när man scrollar. Inget JS.

   Byggt för projektstapeln på olsson-framat.se (OFWEB-P2-02, Samis ja på förslagskort 166, 2026-10-14):
   "projektbanden glider upp över varandra när man scrollar". Varje band fastnar i överkanten och nästa
   glider upp över det, så att stapeln byggs medan man läser. Det är scrollens egen rörelse, utan
   scrolljacking och utan parallax, så den kan inte rycka eller gå åt fel håll (golv 2 och 3).

   Markup: data-stapel på behållaren; varje direkt barn är ett band med egen bakgrund.
   <div data-stapel> <div>band</div> <div>band</div> … </div>

   Behållaren blir en flexkolumn. Ett rutnät med en rad per band fungerar INTE: ett sticky-element
   stannar inom sin egen rutnätscell, och är cellen lika hög som bandet händer ingenting.
   --stapel-glapp är avståndet mellan banden (standard 0) och --stapel-topp var de fastnar (standard 0,
   sätt sidhuvudets höjd om det är fast). --stapel-kant är glappets färg, som följer med bandet (sidans bakgrund). Med prefers-reduced-motion ligger banden stilla i flödet.
   Står ett dolt element för skärmläsare bland banden (position: absolute) blir det också sticky och tar plats:
   ge det position: absolute igen med högre specificitet (olsson-framat.se: 48 px förskjutning, 2026-10-14). */

[data-stapel] {
  display: flex;
  flex-direction: column;
  gap: var(--stapel-glapp, 0);
}
[data-stapel] > * {
  position: sticky;
  top: var(--stapel-topp, 0);
  /* Glappet följer med bandet som glider upp. Annars flyter två band i samma färg ihop när det ena täcker
     det andra (olsson-framat.se: tre vita band i rad). I vila täcker kanten bara det vanliga glappet. */
  box-shadow: 0 calc(-1 * var(--stapel-glapp, 0px)) 0 var(--stapel-kant, transparent);
}

@media (prefers-reduced-motion: reduce) {
  [data-stapel] > * { position: relative; top: auto; box-shadow: none; }
}