/* ============================================================
   NEXTRUM — MENYSIDORNA

   Laddas av de sex sidorna i menyn och deras engelska tvillingar,
   SIST: nextrum.css → home → cinema → start → sidor.
     var-ide, sa-fungerar-nextrum, for-elever-och-foraldrar,
     bli-studiehjalpare, priser, faq

   Leo 2026-10-06: sidorna i menyn var "typ bara text och ingen nice
   animation", och skulle ta efter startsidan efter hero och vyerna.
   De laddar därför nextrum-start.css och nextrum-start.js och
   använder startsidans delar som de är: bladen (.nx-bubbla),
   hållpunkterna, ordfyllnaden, stegen i ansökan, de mörka ytorna och
   den pinnade "Så fungerar Nextrum". Här står bara det som startsidan
   inte har:

     1. lapparna på sidhuvudets foto, vyernas notiser
     2. kolumnerna av blad och hållpunkterna i tre
     3. fotokorten
     4. fördelarna på mörk botten
     5. FAQ:n som kort, och hoppen till grupperna

   Samma regel som i start: skriptet sätter klasser, CSS rör sig.
   Inget startläge här gömmer något utan html.nx-sr, som
   nextrum-start.js sätter. Laddar skriptet inte står sidan i sitt
   slutläge. Inga hexkoder: färgerna är cinemas och starts tokens.
   ============================================================ */

/* ============================================================
   1. LAPPARNA PÅ FOTOT

   Två korta sanningar ur sidans egen text, som vyernas notiser
   (sd-flyt på startsidan): ett runt kort med en ikon som fjädrar in
   en stund efter att sidan laddat. De är dekor — det de säger står
   redan i texten under — och därför aria-hidden i markupen.

   Klassen .sid-framme sätts på sidhuvudet av nextrum-start.js
   (sidhuvud) två bildrutor efter start, så att startläget hinner
   ritas och övergången syns. Fördröjningen står per plats med
   nth-child: en custom property ärvs, och en --n på listan hade
   räknats om för allt i den.
   ============================================================ */
.sid-lappar{
  position:absolute;z-index:3;
  left:clamp(14px,2.2vw,30px);right:clamp(14px,2.2vw,30px);
  bottom:clamp(14px,2.2vw,30px);
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0;padding:0;list-style:none;
  pointer-events:none;
}
.sid-lapp{
  display:inline-flex;align-items:center;gap:11px;
  padding:8px 18px 8px 8px;
  border-radius:999px;
  background:var(--kort);
  color:var(--bl);
  font-size:.93rem;font-weight:600;letter-spacing:-.016em;line-height:1.2;
  box-shadow:0 1px 0 color-mix(in srgb,var(--kort) 70%,transparent) inset,
             0 18px 36px -20px rgba(20,16,12,.6);
}
.sid-lapp-ikon{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:var(--mossa-soft);
}
.sid-lapp-ikon svg{
  width:15px;height:15px;
  fill:none;stroke:var(--mossa-text);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

html.nx-sr .sid-lapp{
  opacity:0;translate:0 16px;scale:.92;
  transition:opacity .5s var(--e-mjuk),translate .8s var(--fjader),scale .8s var(--fjader);
  transition-delay:.45s;
}
html.nx-sr .sid-lapp:nth-child(2){transition-delay:.62s}
html.nx-sr .sid-framme .sid-lapp{opacity:1;translate:0 0;scale:1}

/* Fotot är 16:10 och 224 px högt på en telefon. Två lappar hade
   täckt en tredjedel av det; den första räcker. */
@media (max-width:640px){
  .sid-lapp{font-size:.82rem;padding:6px 14px 6px 6px;gap:8px}
  .sid-lapp-ikon{width:25px;height:25px}
  .sid-lapp-ikon svg{width:13px;height:13px}
  .sid-lapp:nth-child(n+2){display:none}
}

/* Hoppen till grupperna på FAQ:n: piller under ingressen, samma
   form som vyernas chips. Vanliga länkar till ankare. */
.sid-hopp{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(24px,3vw,34px);
}
.sid-hopp a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 18px;
  border-radius:999px;
  border:1px solid var(--kort-kant);
  background:var(--kort);
  box-shadow:var(--kort-sk);
  font-size:.92rem;font-weight:600;letter-spacing:-.015em;color:var(--bl);
  transition:background-color .25s var(--e),border-color .25s var(--e),scale .45s var(--fjader);
}
@media (hover:hover) and (pointer:fine){
  .sid-hopp a:hover{border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
}
.sid-hopp a:active{scale:.96}

/* ============================================================
   2. KOLUMNERNA

   Det som var en rubrik till vänster och tre stycken text till
   höger är nu startsidans manifest: rubriken stor, med orden som
   fylls i, och styckena som blad med var sin figur bredvid
   varandra. Texten är densamma, ord för ord.

   minmax(0,1fr), aldrig 1fr: 1fr räknar innehållets minsta bredd
   som spaltens (CLAUDE.md, fälla 2).
   ============================================================ */
.sid-rubrik{margin-top:clamp(20px,2.4vw,30px);max-width:20ch}
.sid-rubrik em{font-style:normal;color:var(--acc)}
.sid-ingress{margin-top:clamp(18px,2.2vw,26px);max-width:54ch}

.sid-kort{
  display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(36px,4.6vw,64px);
}
.sid-kort.tva{grid-template-columns:repeat(2,minmax(0,1fr))}
.sid-kort.fyra{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
  .sid-kort.fyra{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .sid-kort,.sid-kort.tva{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .sid-kort.fyra{grid-template-columns:minmax(0,1fr)}
}
.sid-kort .nx-bubbla h3{
  font-size:clamp(1.08rem,1.4vw,1.2rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.2;
  margin-bottom:10px;
}
.sid-kort .nx-bubbla p{font-size:1rem;line-height:1.62;color:var(--bl-2);max-width:none}
.sid-kort .nx-bubbla p + p{margin-top:12px}
.sid-kort .nx-lank{margin-top:20px}
/* Ett kort med en enda mening som bär poängen: större, som en
   replik, och längst ned i bladet så att raden linjerar med de andra
   kortens sista rad. */
.sid-kort .nx-bubbla.sid-stor{display:flex;flex-direction:column}
.sid-kort .nx-bubbla.sid-stor p{
  margin-top:auto;
  font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.28;
  font-weight:700;letter-spacing:-.03em;color:var(--bl);
  text-wrap:balance;
}

/* Lyftet är startsidans: translate med en fjäder och skuggans eget
   lager som tonas in. data-stig äger transform på bladen. */
@media (hover:hover) and (pointer:fine){
  .sid-kort > .nx-bubbla:hover{translate:0 -5px}
  .sid-kort > .nx-bubbla:hover::after{opacity:1}
}

/* Hållpunkterna i tre, och i fem för stegen till första passet.
   Startsidans fyra står kvar som de är. */
.nx-holdpunkter.sid-tre{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){
  .nx-holdpunkter.sid-tre{grid-template-columns:minmax(0,1fr)}
}
.nx-holdpunkter + .sid-fot{margin-top:clamp(22px,2.6vw,30px)}

/* Ingressen i den pinnade stegscenen (Så fungerar Nextrum). Startsidans
   scen har ingen; här står den mellan rubriken och stegen, och rubrikens
   luft nedåt flyttas till den. På en kort skärm krymper den med resten
   (cinema, .nx-hur på max-height:880px), annars klipps sista steget. */
.nx-hur .nx-d2:has(+ .sid-hur-lede){margin-bottom:0}
.sid-hur-lede{
  margin:clamp(14px,1.6vw,20px) 0 clamp(24px,3vw,38px);
  max-width:44ch;
}
@media (min-width:901px) and (max-height:880px){
  .sid-hur-lede{font-size:1rem;margin:12px 0 clamp(14px,1.8vw,20px)}
}
@media (min-width:901px) and (max-height:720px){
  .sid-hur-lede{font-size:.92rem;line-height:1.45;margin:8px 0 12px}
}

/* Etiketten i ett kort där ordningen är ett ord (Först, Sedan,
   Löpande) och inte en siffra. */
.sid-et{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc-lugn);
  padding-top:.4em;
}

/* Den lilla texten under en rad kort ("Är du under 18 …"). */
.sid-fot{color:var(--bl-3);font-size:.92rem;line-height:1.6;max-width:72ch}

/* ============================================================
   3. FOTOKORTEN

   Ett pass före, under och efter: ett foto överst i varje blad.
   Bladet stiger in med data-stig, och bilden inuti glider från lite
   för nära till rätt avstånd, som bildväggen på startsidan. Rörelsen
   är scale på bilden, inte på ramen: ramen bär data-stigs transform.
   ============================================================ */
.sid-bildkort{
  display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:clamp(36px,4.6vw,64px) 0 0;padding:0;list-style:none;
}
@media (max-width:860px){.sid-bildkort{grid-template-columns:minmax(0,1fr)}}
.sid-bildkort > li.nx-bubbla{
  padding:10px 10px clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;
}
.sid-bildkort .nx-fig{aspect-ratio:4/3;--fig-r:clamp(16px,1.6vw,22px)}
.sid-bildkort .nx-img{height:100%;transition:opacity .7s var(--e-mjuk),scale 1.8s var(--e-ut)}
.sid-bildkort-text{padding:clamp(18px,2vw,24px) clamp(14px,1.6vw,20px) 0}
.sid-bildkort h3{
  font-size:clamp(1.12rem,1.5vw,1.3rem);font-weight:700;
  letter-spacing:-.024em;line-height:1.18;
  margin-top:12px;
}
.sid-bildkort p{margin-top:10px;color:var(--bl-2);font-size:1rem;line-height:1.6}

html.nx-sr .sid-bildkort [data-stig] .nx-img{scale:1.14}
html.nx-sr .sid-bildkort [data-stig].nx-in .nx-img{scale:1}
@media (hover:hover) and (pointer:fine){
  .sid-bildkort > li:hover{translate:0 -5px}
  .sid-bildkort > li:hover::after{opacity:1}
  /* Avslöjandets slutläge väger (0,5,1); hovringen måste väga mer. */
  .sid-bildkort > li:hover .nx-img,
  html.nx-sr .sid-bildkort > li[data-stig].nx-in:hover .nx-img{scale:1.04}
}

/* Delningen med foto, på ljus botten. Formen är cinemas .nx-split;
   här står bara texten bredvid fotot. */
.sid-split .nx-split-text p{color:var(--bl-2);font-size:1.02rem;line-height:1.65;max-width:56ch}
.sid-split .nx-split-text p + p{margin-top:16px}
.sid-split .nx-split-text .lede-lg{color:var(--bl)}
.sid-split .nx-split-text .nx-lank{margin-top:28px}
html.nx-sr .sid-split .nx-split-bild .nx-img{scale:1.12;transition:opacity .7s var(--e-mjuk),scale 1.8s var(--e-ut)}
html.nx-sr .sid-split .nx-split-bild.nx-in .nx-img{scale:1}

/* ============================================================
   4. FÖRDELARNA PÅ MÖRK BOTTEN (Bli studiehjälpare)

   Förut en remsa med hårfina linjer emellan. Nu fem blad i
   stegens form från startsidans mörka yta (.nx-apply-step), så att
   fördelarna och stegen under dem ser ut som en och samma sak.
   ============================================================ */
.nx-perks{
  background:none;border:0;border-radius:0;overflow:visible;
  gap:clamp(10px,1.2vw,16px);
}
.nx-perk{
  position:relative;
  border-radius:clamp(20px,2vw,26px);
  padding:clamp(22px,2.2vw,28px);
  background:color-mix(in srgb,var(--nt-fg) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--nt-fg) 12%,transparent);
  gap:10px;
}
.nx-perk .i{
  width:42px;height:42px;border-radius:14px;
  background:color-mix(in srgb,var(--lera-l) 14%,transparent);
  border:0;color:var(--lera-l);
  margin-bottom:6px;
}
.nx-perk .i svg{width:19px;height:19px}
.nx-perk b{font-size:1.04rem}
.nx-perk p{font-size:.9rem}
@media (hover:hover) and (pointer:fine){
  .nx-perk:hover{
    translate:0 -4px;
    background-color:color-mix(in srgb,var(--nt-fg) 9%,transparent);
    border-color:color-mix(in srgb,var(--nt-fg) 22%,transparent);
  }
}

/* ============================================================
   5. FAQ:N SOM KORT

   Varje fråga är ett eget blad, som korten i vyerna: rundat, en
   nyans ljusare än botten, och med en kant i lera när det är öppet.
   Utfällningen är densamma (NX.initFaq sätter höjden på svaret).
   ============================================================ */
.faq{border-top:0;display:grid;gap:10px}
.faq-item{
  border:1px solid var(--kort-kant);
  border-radius:clamp(18px,1.8vw,22px);
  background:var(--kort);
  box-shadow:var(--kort-sk);
  transition:border-color .3s var(--e),translate .45s var(--fjader);
}
.faq-q{
  border-top:0;
  padding:clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px) clamp(20px,2.2vw,26px);
  min-height:44px;
}
.faq-item:last-child .faq-q[aria-expanded="false"]{border-bottom:0}
.faq-a p{padding:0 clamp(20px,2.2vw,26px) clamp(20px,2.2vw,24px)}
.faq-item:has(> .faq-q[aria-expanded="true"]){
  border-color:color-mix(in srgb,var(--acc) 34%,transparent);
}
@media (hover:hover) and (pointer:fine){
  .faq-item:hover{border-color:color-mix(in srgb,var(--acc) 22%,transparent)}
}

/* Grupperna på FAQ:n: rubriken med sin figur står kvar till vänster
   medan frågorna rullar förbi till höger. */
.sid-faq-grupp{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(24px,4vw,72px);
  align-items:start;
  scroll-margin-top:96px;
}
.nx-faq-group.sid-faq-grupp + .nx-faq-group.sid-faq-grupp{margin-top:clamp(64px,8vw,120px)}
.sid-faq-sida{position:sticky;top:110px}
.sid-faq-ikon{
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:17px;
  background:color-mix(in srgb,var(--acc) 10%,transparent);
  margin-bottom:clamp(18px,2vw,24px);
}
.sid-faq-ikon svg{
  width:24px;height:24px;
  fill:none;stroke:var(--acc-lugn);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.sid-faq-sida .nx-et{display:flex;width:fit-content}
.sid-faq-sida h2{margin-top:14px}
@media (max-width:900px){
  .sid-faq-grupp{grid-template-columns:minmax(0,1fr);gap:22px}
  .sid-faq-sida{position:static}
}

/* ============================================================
   6. REDUCERAD RÖRELSE
   nx-sr sätts aldrig i det läget, så startlägena ovan gäller inte.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sid-hopp a:active{scale:none}
  .sid-bildkort > li:hover .nx-img{scale:none}
}